AR / VR Interface

Futuristic augmented and virtual reality UI with holographic elements, translucent panels, and HUD-style overlays.

html css javascript

Targets: JS HTML

Code

:root {
  --bg: #020608;
  --cyan: #00f0ff;
  --cyan-dim: rgba(0, 240, 255, 0.15);
  --cyan-border: rgba(0, 240, 255, 0.3);
  --magenta: #ff00aa;
  --magenta-dim: rgba(255, 0, 170, 0.15);
  --text: rgba(255, 255, 255, 0.9);
  --text-muted: rgba(0, 240, 255, 0.6);
  --text-dim: rgba(0, 240, 255, 0.35);
  --card-bg: rgba(0, 240, 255, 0.03);
  --card-border: rgba(0, 240, 255, 0.2);
  --font-head: "Orbitron", monospace;
  --font-mono: "Share Tech Mono", "Courier New", monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-mono);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* ── Grid background ── */
.grid-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: linear-gradient(rgba(0, 240, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 255, 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* ── Scan line ── */
.scan-line {
  position: fixed;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity: 0.2;
  z-index: 100;
  pointer-events: none;
  animation: scan 6s ease-in-out infinite;
}

@keyframes scan {
  0% {
    top: -2px;
  }
  100% {
    top: 100vh;
  }
}

/* ── Page ── */
.page {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
  padding: 48px 24px 64px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── Header ── */
.header {
  text-align: center;
  margin-bottom: 8px;
}

.hud-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--cyan);
  background: var(--cyan-dim);
  border: 1px solid var(--cyan-border);
  padding: 4px 14px;
  border-radius: 2px;
  letter-spacing: 2px;
  margin-bottom: 20px;
  animation: pulse-glow 3s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%,
  100% {
    box-shadow: 0 0 6px rgba(0, 240, 255, 0.2);
  }
  50% {
    box-shadow: 0 0 16px rgba(0, 240, 255, 0.4);
  }
}

.header__title {
  font-family: var(--font-head);
  font-size: clamp(36px, 10vw, 64px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 4px;
  color: var(--text);
  text-shadow: 0 0 20px rgba(0, 240, 255, 0.3);
}

.header__title span {
  color: var(--cyan);
  text-shadow: 0 0 30px rgba(0, 240, 255, 0.5);
}

.header__tagline {
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-muted);
  letter-spacing: 1px;
}

/* ── HUD Card ── */
.hud-card {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 2px;
  padding: 20px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.hud-card:hover {
  border-color: rgba(0, 240, 255, 0.45);
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.1), inset 0 0 20px rgba(0, 240, 255, 0.03);
}

/* Corner brackets */
.hud-corner {
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: var(--cyan);
  border-style: solid;
  border-width: 0;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.hud-card:hover .hud-corner {
  opacity: 1;
}

.hud-corner--tl {
  top: -1px;
  left: -1px;
  border-top-width: 2px;
  border-left-width: 2px;
}
.hud-corner--tr {
  top: -1px;
  right: -1px;
  border-top-width: 2px;
  border-right-width: 2px;
}
.hud-corner--bl {
  bottom: -1px;
  left: -1px;
  border-bottom-width: 2px;
  border-left-width: 2px;
}
.hud-corner--br {
  bottom: -1px;
  right: -1px;
  border-bottom-width: 2px;
  border-right-width: 2px;
}

.hud-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.hud-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.hud-status {
  font-size: 10px;
  color: #22c55e;
  letter-spacing: 1px;
}

/* ── Profile ── */
.profile-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.avatar-hex {
  width: 56px;
  height: 56px;
  background: var(--cyan-dim);
  border: 1.5px solid var(--cyan);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 900;
  color: var(--cyan);
  flex-shrink: 0;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.2);
  transform: rotate(0deg);
}

.profile-info {
  flex: 1;
}

.profile-name {
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--text);
}

.profile-role {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
  letter-spacing: 0.5px;
}

/* Stats */
.hud-stats {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--card-border);
}

.hud-stat {
  flex: 1;
  text-align: center;
  padding: 12px 8px;
}

.hud-stat-sep {
  width: 1px;
  height: 36px;
  background: var(--card-border);
}

.hud-stat-value {
  display: block;
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 900;
  color: var(--cyan);
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.3);
}

.hud-stat-label {
  display: block;
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: 2px;
  margin-top: 4px;
}

/* ── Buttons ── */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.btn {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  padding: 10px 18px;
  border: 1px solid;
  cursor: pointer;
  border-radius: 2px;
  letter-spacing: 1px;
  transition: all 0.2s ease;
}

.btn--hud {
  background: var(--cyan-dim);
  border-color: var(--cyan);
  color: var(--cyan);
}

.btn--hud:hover {
  background: rgba(0, 240, 255, 0.25);
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.3);
}

.btn--outline {
  background: transparent;
  border-color: var(--cyan-border);
  color: var(--text-muted);
}

.btn--outline:hover {
  border-color: var(--cyan);
  color: var(--cyan);
}

.btn--ghost {
  background: transparent;
  border-color: rgba(255, 0, 170, 0.3);
  color: rgba(255, 0, 170, 0.6);
}

.btn--ghost:hover {
  border-color: var(--magenta);
  color: var(--magenta);
  box-shadow: 0 0 12px rgba(255, 0, 170, 0.2);
}

/* ── Input ── */
.input-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.input-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 2px;
}

.input-wrap {
  display: flex;
  align-items: center;
  border: 1px solid var(--card-border);
  background: rgba(0, 240, 255, 0.02);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.input-wrap:focus-within {
  border-color: var(--cyan);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.15);
}

.input-prefix {
  font-size: 16px;
  color: var(--cyan);
  padding: 0 10px 0 14px;
  flex-shrink: 0;
}

.hud-input {
  flex: 1;
  background: transparent;
  border: none;
  padding: 11px 8px 11px 0;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text);
  outline: none;
  letter-spacing: 0.5px;
}

.hud-input::placeholder {
  color: var(--text-dim);
}

.input-cursor {
  font-size: 14px;
  color: var(--cyan);
  padding: 0 12px 0 4px;
  animation: blink 1s step-end infinite;
  flex-shrink: 0;
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

.input-wrap:focus-within .input-cursor {
  display: none;
}

/* ── Badges ── */
.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.badge {
  font-size: 10px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 2px;
  letter-spacing: 1.5px;
  border: 1px solid;
  transition: box-shadow 0.2s ease;
}

.badge--cyan {
  background: var(--cyan-dim);
  border-color: var(--cyan-border);
  color: var(--cyan);
}

.badge--cyan:hover {
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
}

.badge--magenta {
  background: var(--magenta-dim);
  border-color: rgba(255, 0, 170, 0.3);
  color: rgba(255, 0, 170, 0.8);
}

.badge--magenta:hover {
  box-shadow: 0 0 10px rgba(255, 0, 170, 0.3);
}

.badge--default {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.5);
}

/* ── Responsive ── */
@media (max-width: 520px) {
  .page {
    padding: 32px 16px 48px;
    gap: 16px;
  }

  .header__title {
    font-size: clamp(28px, 9vw, 36px);
    letter-spacing: 2px;
  }

  .hud-card {
    padding: 16px;
  }

  .profile-row {
    gap: 12px;
  }

  .avatar-hex {
    width: 44px;
    height: 44px;
    font-size: 13px;
  }

  .profile-name {
    font-size: 14px;
    letter-spacing: 1px;
  }

  .hud-stat-value {
    font-size: 14px;
  }

  .hud-stat {
    padding: 10px 4px;
  }

  .btn {
    font-size: 12px;
    padding: 9px 14px;
  }

  .btn-row {
    gap: 8px;
  }

  .hud-corner {
    width: 10px;
    height: 10px;
  }

  .grid-bg {
    background-size: 24px 24px;
  }
}

// AR/VR Interface — HUD card glow tracking
document.querySelectorAll(".hud-card").forEach((card) => {
  card.addEventListener("mousemove", (e) => {
    const rect = card.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    card.style.background = `radial-gradient(circle at ${x}px ${y}px, rgba(0, 240, 255, 0.06), rgba(0, 240, 255, 0.03) 50%, transparent 80%)`;
  });

  card.addEventListener("mouseleave", () => {
    card.style.background = "";
  });
});

// Scan line random restart delay
const scanLine = document.querySelector(".scan-line");
if (scanLine) {
  scanLine.addEventListener("animationiteration", () => {
    const delay = Math.random() * 2;
    scanLine.style.animationDelay = `${delay}s`;
  });
}

// Corner bracket pulse on card hover
document.querySelectorAll(".hud-card").forEach((card) => {
  const corners = card.querySelectorAll(".hud-corner");
  card.addEventListener("mouseenter", () => {
    corners.forEach((c) => (c.style.opacity = "1"));
  });
  card.addEventListener("mouseleave", () => {
    corners.forEach((c) => (c.style.opacity = ""));
  });
});

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&family=Share+Tech+Mono&display=swap" rel="stylesheet" />
    <link rel="stylesheet" href="style.css" />
    <title>AR / VR Interface — Design Style</title>
  </head>
  <body>
    <!-- Grid background -->
    <div class="grid-bg" aria-hidden="true"></div>
    <!-- Scan line -->
    <div class="scan-line" aria-hidden="true"></div>

    <div class="page">
      <!-- Header -->
      <header class="header">
        <div class="hud-tag">SYSTEM:ONLINE</div>
        <h1 class="header__title">AR/VR<br /><span>Interface</span></h1>
        <p class="header__tagline">[ Holographic displays. Mixed reality. ]</p>
      </header>

      <!-- HUD profile card -->
      <section class="hud-card" id="card-profile">
        <div class="hud-corner hud-corner--tl"></div>
        <div class="hud-corner hud-corner--tr"></div>
        <div class="hud-corner hud-corner--bl"></div>
        <div class="hud-corner hud-corner--br"></div>
        <div class="hud-header">
          <span class="hud-label">OPERATOR_ID</span>
          <span class="hud-status">● ACTIVE</span>
        </div>
        <div class="profile-row">
          <div class="avatar-hex">
            <span>KN</span>
          </div>
          <div class="profile-info">
            <h2 class="profile-name">KIRA NOVA</h2>
            <p class="profile-role">XR Architect // Clearance Omega</p>
          </div>
        </div>
        <div class="hud-stats">
          <div class="hud-stat">
            <span class="hud-stat-value">847</span>
            <span class="hud-stat-label">NODES</span>
          </div>
          <div class="hud-stat-sep"></div>
          <div class="hud-stat">
            <span class="hud-stat-value">12.6K</span>
            <span class="hud-stat-label">RENDERS</span>
          </div>
          <div class="hud-stat-sep"></div>
          <div class="hud-stat">
            <span class="hud-stat-value">LEVEL 42</span>
            <span class="hud-stat-label">ACCESS</span>
          </div>
        </div>
      </section>

      <!-- Controls card -->
      <section class="hud-card" id="card-controls">
        <div class="hud-corner hud-corner--tl"></div>
        <div class="hud-corner hud-corner--tr"></div>
        <div class="hud-corner hud-corner--bl"></div>
        <div class="hud-corner hud-corner--br"></div>
        <div class="hud-header">
          <span class="hud-label">CONTROL_PANEL</span>
        </div>
        <div class="btn-row">
          <button class="btn btn--hud">▶ INITIALIZE</button>
          <button class="btn btn--outline">◇ SCAN</button>
          <button class="btn btn--ghost">⊘ ABORT</button>
        </div>
      </section>

      <!-- Input card -->
      <section class="hud-card" id="card-input">
        <div class="hud-corner hud-corner--tl"></div>
        <div class="hud-corner hud-corner--tr"></div>
        <div class="hud-corner hud-corner--bl"></div>
        <div class="hud-corner hud-corner--br"></div>
        <div class="hud-header">
          <span class="hud-label">SIGNAL_INPUT</span>
        </div>
        <div class="input-group">
          <label class="input-label" for="arInput">FREQ_CHANNEL:</label>
          <div class="input-wrap">
            <span class="input-prefix">⟩</span>
            <input class="hud-input" id="arInput" type="text" placeholder="Enter signal frequency..." />
            <span class="input-cursor" aria-hidden="true">_</span>
          </div>
        </div>
      </section>

      <!-- Badges -->
      <section class="hud-card" id="card-badges">
        <div class="hud-corner hud-corner--tl"></div>
        <div class="hud-corner hud-corner--tr"></div>
        <div class="hud-corner hud-corner--bl"></div>
        <div class="hud-corner hud-corner--br"></div>
        <div class="hud-header">
          <span class="hud-label">CLEARANCE_TAGS</span>
        </div>
        <div class="badge-row">
          <span class="badge badge--cyan">HOLOGRAPHIC</span>
          <span class="badge badge--magenta">IMMERSIVE</span>
          <span class="badge badge--default">SPATIAL</span>
          <span class="badge badge--cyan">XR</span>
          <span class="badge badge--default">HUD</span>
        </div>
      </section>
    </div>

    <script src="script.js"></script>
  </body>
</html>

AR / VR Interface

The AR/VR design style draws from heads-up displays, mixed reality interfaces, and science fiction control panels. It features translucent panels with visible grid lines, scan-line effects, and glowing accent borders that feel like they’re projected onto glass rather than rendered on a screen.

Key visual elements include: thin border panels with corner accent marks (like targeting brackets), animated scan lines that sweep across surfaces, monospace typography for data readouts, and cyan/teal accent colors against near-black backgrounds. The overall effect is of a high-tech command center or augmented reality overlay.

Cards use extremely low-opacity backgrounds (rgba(0,255,255,0.03)) with visible border highlights, creating the illusion of transparent floating panels. Animated elements like pulsing corner brackets and sweeping gradient lines reinforce the “live system” feeling.

Key characteristics

Near-black background with cyan/teal accent color (#00F0FF)
Translucent panels with thin glowing borders
Corner bracket decorations on cards (HUD targeting style)
Animated scan-line effects across card surfaces
Monospace typography for labels and data
Pulsing glow effects on interactive elements
Grid-line background pattern suggesting depth

When to use it

AR/VR interfaces work well for tech demos, gaming dashboards, data visualization portals, IoT control panels, and any context where you want to convey cutting-edge technology. The style is highly thematic and best used for focused experiences rather than general-purpose websites.