Pages Medium
Concept B - Premium Tech Reveal
Original premium product reveal concept with restrained motion and spec staging.
Open in Lab
MCP
concept product-reveal interactive-3d-tilt
Targets: JS HTML
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.