Concept B - Premium Tech Reveal

Code

:root {
  --bg: #f3f0e9;
  --text: #22232d;
  --muted: #5f6574;
  --line: #d7d0c3;
  --accent: #365d8b;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Georgia", "Times New Roman", serif;
  color: var(--text);
  background: linear-gradient(180deg, #f8f6ef, var(--bg));
}

.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.8rem 1rem;
  background: rgba(243, 240, 233, 0.76);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.topbar a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 700;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
}

.toggle {
  border: 1px solid #b8b0a2;
  border-radius: 999px;
  padding: 0.35rem 0.7rem;
  background: rgba(255,255,255,0.62);
  color: #2b3038;
  cursor: pointer;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
}

main {
  width: min(1120px, 94%);
  margin: 0 auto;
  padding-top: 3.6rem;
}

.hero {
  min-height: 95vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 1rem;
}

.eyebrow {
  margin: 0;
  color: var(--accent);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.78rem;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
}

h1 {
  margin: 0;
  font-size: clamp(2.6rem, 8vw, 6rem);
  line-height: 0.92;
  letter-spacing: -0.02em;
}

.desc {
  margin: 0.7rem 0 0;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  color: var(--muted);
  max-width: 52ch;
}

.actions {
  margin-top: 1rem;
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.buy,
.line {
  border-radius: 999px;
  padding: 0.58rem 0.9rem;
  cursor: pointer;
  font-weight: 700;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
}

.buy {
  border: 0;
  background: #2c3f57;
  color: #f1f5ff;
}

.line {
  border: 1px solid #b5ac9d;
  background: transparent;
  color: #2d2f35;
}

.product-wrap {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 420px;
}

.halo {
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(83, 121, 170, 0.26), transparent 70%);
  filter: blur(2px);
}

.device {
  width: min(440px, 82%);
  aspect-ratio: 4 / 3;
  border-radius: 26px;
  border: 1px solid #c5bdaf;
  background:
    linear-gradient(165deg, #f9fafb, #d4d8de),
    radial-gradient(circle at 70% 30%, rgba(69, 99, 141, 0.2), transparent 55%);
  box-shadow: 0 28px 60px rgba(35, 40, 52, 0.16);
  transform-style: preserve-3d;
}

.spec-grid {
  margin: 0 0 2rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.spec {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0.85rem;
  background: rgba(255,255,255,0.55);
}

.spec h2 {
  margin: 0;
  font-size: 1.25rem;
}

.spec p {
  margin: 0.45rem 0 0;
  color: var(--muted);
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
}

body.no-motion .halo,
body.no-motion .device {
  animation: none;
}

@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; min-height: 88vh; }
  .spec-grid { grid-template-columns: 1fr; }
}

if (!window.MotionPreference) {
  const __mql = window.matchMedia("(prefers-reduced-motion: reduce)");
  const __listeners = new Set();

  const MotionPreference = {
    prefersReducedMotion() {
      return __mql.matches;
    },
    setOverride(value) {
      const reduced = Boolean(value);
      document.documentElement.classList.toggle("reduced-motion", reduced);
      window.dispatchEvent(new CustomEvent("motion-preference", { detail: { reduced } }));
      for (const listener of __listeners) {
        try {
          listener({ reduced, override: reduced, systemReduced: __mql.matches });
        } catch {}
      }
    },
    onChange(listener) {
      __listeners.add(listener);
      try {
        listener({
          reduced: __mql.matches,
          override: null,
          systemReduced: __mql.matches,
        });
      } catch {}
      return () => __listeners.delete(listener);
    },
    getState() {
      return { reduced: __mql.matches, override: null, systemReduced: __mql.matches };
    },
  };

  window.MotionPreference = MotionPreference;
}

const toggle = document.getElementById("motionToggle");
const device = document.getElementById("device");
let noMotion = window.MotionPreference.prefersReducedMotion();

function applyMode() {
  document.body.classList.toggle("no-motion", noMotion);
  toggle.textContent = noMotion ? "Enable motion" : "Disable motion";
}

window.addEventListener("pointermove", (event) => {
  if (noMotion) return;
  const x = (event.clientX / window.innerWidth - 0.5) * 14;
  const y = (event.clientY / window.innerHeight - 0.5) * 12;
  device.style.transform = `rotateY(${x}deg) rotateX(${-y}deg)`;
});

toggle.addEventListener("click", () => {
  noMotion = !noMotion;
  if (noMotion) device.style.transform = "rotateY(0deg) rotateX(0deg)";
  applyMode();
});

applyMode();

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Concept B - Premium Tech Reveal</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <header class="topbar">
      <a href="../">Back to demos</a>
      <button id="motionToggle" class="toggle"></button>
    </header>

    <main>
      <section class="hero">
        <div class="copy">
          <p class="eyebrow">Concept B</p>
          <h1>Arc One</h1>
          <p class="desc">A premium device reveal page with restrained motion, balanced typography, and staged feature framing.</p>
          <div class="actions">
            <button class="buy">Reserve</button>
            <button class="line">Specs</button>
          </div>
        </div>
        <div class="product-wrap" aria-hidden="true">
          <div class="halo"></div>
          <div class="device" id="device"></div>
        </div>
      </section>

      <section class="spec-grid">
        <article class="spec"><h2>Neural Lens</h2><p>Adaptive optics and scene intelligence for real-time capture.</p></article>
        <article class="spec"><h2>Low-Noise Core</h2><p>Thermal design tuned for sustained high-frequency workloads.</p></article>
        <article class="spec"><h2>24h Battery</h2><p>All-day endurance profile with fast top-up architecture.</p></article>
        <article class="spec"><h2>Spatial Audio</h2><p>Directional rendering with dynamic room compensation.</p></article>
      </section>
    </main>

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

Concept B - Premium Tech Reveal

Original premium product reveal concept with restrained motion and spec staging.

Source

Repository: libs-gen
Original demo id: 22-concept-tech-reveal

Notes

Original premium product reveal concept with restrained motion and spec staging.