← back to Model Arena
data/artifacts/131728b7aeb6/grok.html
624 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Color of the Season — Designer Wallcoverings</title>
<style>
:root {
--bg: #0d0d0f;
--surface: #17171c;
--ink: #f5f2ea;
--muted: #8a8578;
--accent: #c9a961;
--accent-dim: #7d6a45;
--celadon: #8fbcb0;
--celadon-deep: #5a8f82;
--celadon-light: #c5e0d8;
--celadon-mist: #e8f4f0;
--line: rgba(245, 242, 234, 0.12);
--shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
--ease: cubic-bezier(.22, .9, .24, 1);
--ease-scene: cubic-bezier(.77, 0, .18, 1);
--ease-hero: cubic-bezier(.22, 1, .36, 1);
--serif: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, 'Times New Roman', serif;
--sans: 'Avenir Next', 'Century Gothic', Futura, 'Segoe UI', sans-serif;
--bar-h: 56px;
--reel-w: 360px;
--reel-h: 640px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
height: 100%;
background: #050506;
color: var(--ink);
font-family: var(--sans);
-webkit-font-smoothing: antialiased;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
/* ── Reel frame ── */
.reel {
position: relative;
width: min(var(--reel-w), 100vw);
height: min(var(--reel-h), 100vh);
background: var(--bg);
overflow: hidden;
box-shadow: var(--shadow), 0 0 0 1px var(--line);
display: flex;
flex-direction: column;
}
/* ── Fixed top bar ── */
.topbar {
position: absolute;
top: 0; left: 0; right: 0;
z-index: 50;
height: var(--bar-h);
padding: 0 16px;
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(to bottom, rgba(13,13,15,.92) 40%, transparent);
pointer-events: none;
}
.wordmark {
font-family: var(--serif);
font-size: 11px;
font-weight: 400;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink);
line-height: 1.35;
max-width: 210px;
pointer-events: auto;
}
.topbar-controls {
display: flex;
align-items: center;
gap: 10px;
pointer-events: auto;
}
.ctrl-btn {
background: transparent;
border: 1px solid var(--line);
color: var(--muted);
font-family: var(--sans);
font-size: 9px;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 6px 10px;
cursor: pointer;
transition: color .3s var(--ease), border-color .3s var(--ease);
border-radius: 1px;
}
.ctrl-btn:hover { color: var(--ink); border-color: var(--accent-dim); }
/* ── Progress bar ── */
.progress {
position: absolute;
top: 0; left: 0; right: 0;
z-index: 60;
display: flex;
gap: 3px;
padding: 6px 12px 0;
height: 10px;
}
.progress-seg {
flex: 1;
height: 1.5px;
background: rgba(245,242,234,0.15);
border-radius: 1px;
overflow: hidden;
}
.progress-fill {
height: 100%;
width: 0%;
background: var(--accent);
transition: none;
}
.progress-fill.active { transition: width linear; }
.progress-fill.done { width: 100%; }
/* ── Scenes ── */
.scenes {
flex: 1;
position: relative;
}
.scene {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 72px 28px 48px;
opacity: 0;
visibility: hidden;
transition: opacity 0.7s var(--ease-scene), visibility 0.7s;
text-align: center;
}
.scene.active {
opacity: 1;
visibility: visible;
}
/* Captions */
.caption-label {
font-family: var(--sans);
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 18px;
opacity: 0;
transform: translateY(12px);
}
.scene.active .caption-label {
animation: riseIn 0.8s var(--ease-hero) 0.15s forwards;
}
.caption-display {
font-family: var(--serif);
font-weight: 400;
line-height: 1.1;
color: var(--ink);
opacity: 0;
transform: translateY(18px);
}
.scene.active .caption-display {
animation: riseIn 0.9s var(--ease-hero) 0.35s forwards;
}
.caption-body {
font-family: var(--sans);
font-size: 14px;
line-height: 1.65;
color: var(--muted);
max-width: 280px;
margin-top: 20px;
opacity: 0;
transform: translateY(14px);
}
.scene.active .caption-body {
animation: riseIn 0.85s var(--ease-hero) 0.55s forwards;
}
@keyframes riseIn {
to { opacity: 1; transform: translateY(0); }
}
/* Scene 1 — Hook */
.scene-hook .caption-display {
font-size: 32px;
letter-spacing: -0.02em;
max-width: 260px;
}
.hook-rule {
width: 40px;
height: 1px;
background: var(--accent);
margin: 24px auto 0;
opacity: 0;
transform: scaleX(0);
}
.scene.active .hook-rule {
animation: ruleDraw 0.7s var(--ease-hero) 0.7s forwards;
}
@keyframes ruleDraw {
to { opacity: 1; transform: scaleX(1); }
}
/* Scene 2 — Hue name */
.scene-hue {
background: radial-gradient(ellipse at 50% 42%, rgba(143,188,176,0.12) 0%, transparent 65%);
}
.hue-name {
font-family: var(--serif);
font-size: 64px;
letter-spacing: -0.03em;
line-height: 1;
color: var(--celadon);
opacity: 0;
transform: scale(0.92) translateY(20px);
}
.scene.active .hue-name {
animation: hueReveal 1.1s var(--ease-hero) 0.2s forwards;
}
@keyframes hueReveal {
to { opacity: 1; transform: scale(1) translateY(0); }
}
.hue-sub {
font-family: var(--sans);
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--muted);
margin-top: 16px;
opacity: 0;
}
.scene.active .hue-sub {
animation: riseIn 0.8s var(--ease-hero) 0.7s forwards;
}
.hue-chip {
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--celadon);
margin: 28px auto 0;
box-shadow: 0 0 0 1px rgba(143,188,176,0.3), 0 0 40px rgba(143,188,176,0.25);
opacity: 0;
transform: scale(0.6);
}
.scene.active .hue-chip {
animation: chipPop 0.7s var(--ease-hero) 0.55s forwards;
}
@keyframes chipPop {
to { opacity: 1; transform: scale(1); }
}
/* Scene 3 — Pattern swatches */
.scene-swatches .caption-label { margin-bottom: 28px; }
.swatch-row {
display: flex;
flex-direction: column;
gap: 14px;
width: 100%;
max-width: 280px;
}
.swatch {
height: 88px;
border: 1px solid var(--line);
border-radius: 2px;
overflow: hidden;
position: relative;
opacity: 0;
transform: translateY(24px);
box-shadow: var(--shadow);
}
.scene.active .swatch:nth-child(1) { animation: riseIn 0.7s var(--ease-hero) 0.3s forwards; }
.scene.active .swatch:nth-child(2) { animation: riseIn 0.7s var(--ease-hero) 0.5s forwards; }
.scene.active .swatch:nth-child(3) { animation: riseIn 0.7s var(--ease-hero) 0.7s forwards; }
/* Pattern 1 — fine damask lattice */
.pat-damask {
background-color: var(--celadon-deep);
background-image:
radial-gradient(ellipse 30% 30% at 50% 50%, var(--celadon-light) 0%, transparent 70%),
repeating-linear-gradient(45deg, transparent, transparent 12px, rgba(197,224,216,0.15) 12px, rgba(197,224,216,0.15) 13px),
repeating-linear-gradient(-45deg, transparent, transparent 12px, rgba(197,224,216,0.15) 12px, rgba(197,224,216,0.15) 13px);
background-size: 40px 40px, 100% 100%, 100% 100%;
background-position: 0 0, 0 0, 0 0;
}
/* Pattern 2 — vertical botanical stripe */
.pat-stripe {
background-color: var(--celadon);
background-image:
repeating-linear-gradient(
90deg,
var(--celadon-deep) 0px,
var(--celadon-deep) 3px,
transparent 3px,
transparent 18px,
rgba(232,244,240,0.35) 18px,
rgba(232,244,240,0.35) 19px,
transparent 19px,
transparent 34px
),
radial-gradient(circle at 25% 40%, rgba(232,244,240,0.2) 0 2px, transparent 3px),
radial-gradient(circle at 75% 70%, rgba(232,244,240,0.15) 0 1.5px, transparent 2.5px);
background-size: 34px 100%, 40px 40px, 50px 50px;
}
/* Pattern 3 — organic watercolor wash */
.pat-wash {
background:
radial-gradient(ellipse 80% 60% at 20% 30%, var(--celadon-mist) 0%, transparent 55%),
radial-gradient(ellipse 70% 50% at 80% 70%, var(--celadon-light) 0%, transparent 50%),
radial-gradient(ellipse 50% 40% at 50% 50%, rgba(90,143,130,0.4) 0%, transparent 60%),
linear-gradient(165deg, var(--celadon) 0%, var(--celadon-deep) 100%);
}
/* Scene 4 — Styling tip */
.scene-tip {
background: radial-gradient(ellipse at 50% 60%, rgba(201,169,97,0.06) 0%, transparent 60%);
}
.tip-icon {
width: 36px;
height: 36px;
margin: 0 auto 22px;
opacity: 0;
transform: translateY(10px);
}
.scene.active .tip-icon {
animation: riseIn 0.7s var(--ease-hero) 0.2s forwards;
}
.tip-icon svg { width: 100%; height: 100%; }
.scene-tip .caption-display {
font-size: 26px;
letter-spacing: -0.015em;
max-width: 270px;
}
.scene-tip .caption-body {
font-size: 13.5px;
}
/* Scene 5 — CTA */
.scene-cta {
background:
radial-gradient(ellipse at 50% 35%, rgba(143,188,176,0.1) 0%, transparent 55%);
}
.cta-mark {
font-family: var(--serif);
font-size: 13px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 20px;
opacity: 0;
transform: translateY(10px);
}
.scene.active .cta-mark {
animation: riseIn 0.7s var(--ease-hero) 0.15s forwards;
}
.scene-cta .caption-display {
font-size: 30px;
max-width: 260px;
}
.cta-btn {
margin-top: 32px;
display: inline-block;
font-family: var(--sans);
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--bg);
background: var(--accent);
border: none;
padding: 14px 32px;
cursor: pointer;
border-radius: 1px;
opacity: 0;
transform: translateY(14px);
transition: background .3s var(--ease), transform .3s var(--ease);
}
.scene.active .cta-btn {
animation: riseIn 0.8s var(--ease-hero) 0.65s forwards;
}
.cta-btn:hover { background: var(--ink); }
.cta-fine {
margin-top: 18px;
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
opacity: 0;
}
.scene.active .cta-fine {
animation: riseIn 0.7s var(--ease-hero) 0.85s forwards;
}
/* Bottom safe-area fade */
.bottom-fade {
position: absolute;
bottom: 0; left: 0; right: 0;
height: 40px;
background: linear-gradient(to top, rgba(13,13,15,.7), transparent);
pointer-events: none;
z-index: 40;
}
/* Pause overlay indicator */
.pause-veil {
position: absolute;
inset: 0;
z-index: 45;
display: flex;
align-items: center;
justify-content: center;
background: rgba(13,13,15,0.35);
opacity: 0;
visibility: hidden;
transition: opacity .35s var(--ease), visibility .35s;
pointer-events: none;
}
.pause-veil.show {
opacity: 1;
visibility: visible;
}
.pause-veil span {
font-family: var(--sans);
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ink);
border: 1px solid var(--line);
padding: 10px 18px;
background: rgba(13,13,15,0.7);
}
</style>
</head>
<body>
<div class="reel" id="reel">
<!-- Progress -->
<div class="progress" id="progress"></div>
<!-- Top bar -->
<header class="topbar">
<div class="wordmark">Designer<br>Wallcoverings</div>
<div class="topbar-controls">
<button class="ctrl-btn" id="playPause" type="button" aria-label="Pause">Pause</button>
</div>
</header>
<!-- Scenes -->
<div class="scenes">
<!-- 1 Hook -->
<section class="scene scene-hook active" data-dur="3200">
<p class="caption-label">Seasonal Edit</p>
<h1 class="caption-display">This season<br>it’s all about…</h1>
<div class="hook-rule"></div>
</section>
<!-- 2 Hue -->
<section class="scene scene-hue" data-dur="3800">
<p class="caption-label">Color of the Season</p>
<h1 class="hue-name">Celadon</h1>
<div class="hue-chip"></div>
<p class="hue-sub">A quiet jade · SS25</p>
</section>
<!-- 3 Swatches -->
<section class="scene scene-swatches" data-dur="4800">
<p class="caption-label">In the Collection</p>
<div class="swatch-row">
<div class="swatch pat-damask" role="img" aria-label="Damask lattice pattern"></div>
<div class="swatch pat-stripe" role="img" aria-label="Botanical stripe pattern"></div>
<div class="swatch pat-wash" role="img" aria-label="Watercolor wash pattern"></div>
</div>
</section>
<!-- 4 Tip -->
<section class="scene scene-tip" data-dur="4200">
<div class="tip-icon">
<svg viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="6" y="4" width="24" height="28" rx="1" stroke="#c9a961" stroke-width="1"/>
<line x1="12" y1="12" x2="24" y2="12" stroke="#8a8578" stroke-width="1"/>
<line x1="12" y1="17" x2="24" y2="17" stroke="#8a8578" stroke-width="1"/>
<line x1="12" y1="22" x2="20" y2="22" stroke="#8a8578" stroke-width="1"/>
</svg>
</div>
<p class="caption-label">Styling Note</p>
<h2 class="caption-display">Pair with warm ivory & unlacquered brass</h2>
<p class="caption-body">Let Celadon breathe on a single feature wall. Anchor with linen upholstery and a single branch of olive in hand-thrown stoneware.</p>
</section>
<!-- 5 CTA -->
<section class="scene scene-cta" data-dur="4500">
<p class="cta-mark">Designer Wallcoverings</p>
<h2 class="caption-display">Bring Celadon home</h2>
<p class="caption-body">Request a hand-finished sample set — cut from the current atelier run.</p>
<button class="cta-btn" type="button" id="ctaBtn">Request Samples</button>
<p class="cta-fine">Complimentary · 5–7 days</p>
</section>
</div>
<div class="bottom-fade"></div>
<div class="pause-veil" id="pauseVeil"><span>Paused</span></div>
</div>
<script>
(function () {
const scenes = Array.from(document.querySelectorAll('.scene'));
const progressEl = document.getElementById('progress');
const playPauseBtn = document.getElementById('playPause');
const pauseVeil = document.getElementById('pauseVeil');
const ctaBtn = document.getElementById('ctaBtn');
let idx = 0;
let playing = true;
let raf = null;
let startTs = 0;
let elapsed = 0;
let fills = [];
// Build progress segments
scenes.forEach((_, i) => {
const seg = document.createElement('div');
seg.className = 'progress-seg';
const fill = document.createElement('div');
fill.className = 'progress-fill';
seg.appendChild(fill);
progressEl.appendChild(seg);
fills.push(fill);
});
function duration(i) {
return parseInt(scenes[i].dataset.dur, 10) || 4000;
}
function showScene(n) {
scenes.forEach((s, i) => s.classList.toggle('active', i === n));
fills.forEach((f, i) => {
f.classList.remove('active');
f.style.transition = 'none';
if (i < n) {
f.classList.add('done');
f.style.width = '100%';
} else {
f.classList.remove('done');
f.style.width = '0%';
}
});
}
function tick(ts) {
if (!playing) return;
if (!startTs) startTs = ts - elapsed;
elapsed = ts - startTs;
const dur = duration(idx);
const pct = Math.min(100, (elapsed / dur) * 100);
fills[idx].style.width = pct + '%';
if (elapsed >= dur) {
elapsed = 0;
startTs = 0;
fills[idx].classList.add('done');
fills[idx].style.width = '100%';
idx = (idx + 1) % scenes.length;
if (idx === 0) fills.forEach(f => { f.classList.remove('done'); f.style.width = '0%'; });
showScene(idx);
}
raf = requestAnimationFrame(tick);
}
function play() {
playing = true;
playPauseBtn.textContent = 'Pause';
pauseVeil.classList.remove('show');
startTs = 0;
raf = requestAnimationFrame(tick);
}
function pause() {
playing = false;
playPauseBtn.textContent = 'Play';
pauseVeil.classList.add('show');
if (raf) cancelAnimationFrame(raf);
}
playPauseBtn.addEventListener('click', () => {
if (playing) pause(); else play();
});
// Tap reel to toggle (except buttons)
document.getElementById('reel').addEventListener('click', (e) => {
if (e.target.closest('button')) return;
if (playing) pause(); else play();
});
ctaBtn.addEventListener('click', (e) => {
e.stopPropagation();
// In-page confirmation — no alert()
ctaBtn.textContent = 'Sample Requested';
ctaBtn.style.background = 'var(--celadon)';
ctaBtn.style.color = 'var(--bg)';
ctaBtn.disabled = true;
});
// Kick off
showScene(0);
play();
})();
</script>
</body>
</html>