← back to Model Arena
data/artifacts/131728b7aeb6/claude-code.html
547 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 — Celadon</title>
<style>
:root{
/* ---- luxe-noir design tokens ---- */
--bg:#0d0d0f;
--surface:#17171c;
--ink:#f5f2ea;
--muted:#8a8578;
--accent:#c9a961; /* metallic gold */
--accent-deep:#7d6a45;
--line:rgba(245,242,234,.14);
--shadow:0 8px 24px rgba(0,0,0,.45);
--shadow-soft:0 16px 48px rgba(0,0,0,.55);
--ease:cubic-bezier(.22,1,.36,1);
/* the color of the season */
--celadon:#a9cbb9;
--celadon-mid:#7fa892;
--celadon-deep:#5c8571;
--celadon-glow:0 0 60px rgba(169,203,185,.35);
--serif:'Didot','Bodoni MT','Playfair Display',Georgia,serif;
--sans:-apple-system,'Segoe UI','Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
background:#000;
font-family:var(--sans);
color:var(--ink);
display:flex;
align-items:center;
justify-content:center;
min-height:100vh;
overflow:hidden;
}
/* ---- 9:16 stage ---- */
.stage{
position:relative;
width:min(100vw,calc(100vh * 9 / 16));
height:min(100vh,calc(100vw * 16 / 9));
background:
radial-gradient(120% 80% at 50% 12%, #16161b 0%, var(--bg) 55%, #060607 100%);
overflow:hidden;
box-shadow:var(--shadow-soft);
cursor:pointer;
}
/* ambient drift */
.stage::before{
content:"";
position:absolute;
inset:-20%;
background:
radial-gradient(40% 30% at 25% 30%, rgba(169,203,185,.10), transparent 70%),
radial-gradient(35% 30% at 78% 72%, rgba(201,169,97,.08), transparent 70%);
animation:drift 18s ease-in-out infinite alternate;
pointer-events:none;
}
@keyframes drift{
from{transform:translate3d(-3%,-2%,0) scale(1.02)}
to{transform:translate3d(3%,3%,0) scale(1.08)}
}
/* ---- fixed top bar / logo zone ---- */
.topbar{
position:absolute;
top:0;left:0;right:0;
z-index:40;
display:flex;
align-items:flex-start;
justify-content:space-between;
padding:22px 24px 16px;
background:linear-gradient(180deg, rgba(6,6,7,.72), rgba(6,6,7,0));
pointer-events:none;
}
.wordmark{
font-family:var(--serif);
font-size:14px;
line-height:1.25;
letter-spacing:.18em;
text-transform:uppercase;
color:var(--ink);
white-space:nowrap;
text-shadow:0 1px 10px rgba(0,0,0,.5);
}
.wordmark .accentline{
display:block;
margin-top:6px;
width:34px;height:1px;
background:linear-gradient(90deg,var(--accent),transparent);
}
.kicker{
font-family:var(--sans);
font-size:9.5px;
letter-spacing:.22em;
text-transform:uppercase;
color:var(--accent);
text-align:right;
line-height:1.5;
padding-top:2px;
}
.kicker small{display:block;color:var(--muted);letter-spacing:.16em}
/* ---- progress bar ---- */
.progress{
position:absolute;
top:64px;left:24px;right:24px;
z-index:40;
display:flex;
gap:6px;
pointer-events:none;
}
.seg{
flex:1;
height:2px;
background:rgba(245,242,234,.18);
border-radius:2px;
overflow:hidden;
}
.seg i{
display:block;
height:100%;
width:0%;
background:var(--accent);
box-shadow:0 0 8px rgba(201,169,97,.6);
}
/* ---- scenes ---- */
.scene{
position:absolute;
inset:0;
z-index:10;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:96px 40px;
text-align:center;
opacity:0;
visibility:hidden;
transition:opacity .6s var(--ease);
}
.scene.active{opacity:1;visibility:visible;z-index:20}
.eyebrow{
font-family:var(--sans);
font-size:12px;
letter-spacing:.34em;
text-transform:uppercase;
color:var(--accent);
margin-bottom:26px;
}
/* animate captions when scene active */
.scene.active .rise{animation:fadeUp .8s var(--ease) both}
.scene.active .rise.d1{animation-delay:.12s}
.scene.active .rise.d2{animation-delay:.26s}
.scene.active .rise.d3{animation-delay:.42s}
.scene.active .rise.d4{animation-delay:.58s}
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
/* Scene 0 — hook */
.hook-line{
font-family:var(--serif);
font-size:40px;
line-height:1.18;
font-weight:400;
letter-spacing:.005em;
}
.hook-line em{font-style:italic;color:var(--celadon)}
.hook-sub{
margin-top:22px;
font-size:13px;
letter-spacing:.2em;
text-transform:uppercase;
color:var(--muted);
}
/* Scene 1 — the hue name */
.hue-eyebrow{color:var(--celadon)}
.hue-name{
font-family:var(--serif);
font-weight:400;
font-size:20vw;
line-height:.92;
letter-spacing:.01em;
color:var(--celadon);
text-shadow:var(--celadon-glow);
}
@media(min-width:520px){.hue-name{font-size:104px}}
.hue-hex{
margin-top:22px;
font-size:12px;
letter-spacing:.34em;
text-transform:uppercase;
color:var(--muted);
}
.hue-hex b{color:var(--celadon);font-weight:600;letter-spacing:.2em}
/* Scene 2 — swatches */
.scene-swatches{padding-top:110px}
.swatch-head{
font-family:var(--serif);
font-size:26px;
margin-bottom:6px;
}
.swatch-sub{
font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);
margin-bottom:28px;
}
.swatches{
display:flex;
flex-direction:column;
gap:18px;
width:100%;
max-width:340px;
}
.swatch{
position:relative;
height:112px;
border-radius:14px;
border:1px solid var(--line);
box-shadow:var(--shadow);
overflow:hidden;
background:var(--celadon-deep);
}
.swatch .plate{position:absolute;inset:0}
.swatch .cap{
position:absolute;
left:14px;bottom:11px;
font-family:var(--sans);
font-size:10px;
letter-spacing:.24em;
text-transform:uppercase;
color:rgba(13,13,15,.82);
background:rgba(255,255,255,.55);
padding:4px 9px;
border-radius:20px;
backdrop-filter:blur(2px);
}
/* motif A — trellis lattice */
.m-trellis{
background:
repeating-linear-gradient(45deg, rgba(255,255,255,.16) 0 2px, transparent 2px 26px),
repeating-linear-gradient(-45deg, rgba(255,255,255,.16) 0 2px, transparent 2px 26px),
linear-gradient(135deg,var(--celadon) 0%, var(--celadon-mid) 100%);
}
/* motif B — deco chevron */
.m-chevron{
background:
repeating-linear-gradient(63deg, rgba(15,30,24,.28) 0 8px, transparent 8px 18px),
repeating-linear-gradient(-63deg, rgba(255,255,255,.20) 0 8px, transparent 8px 18px),
linear-gradient(90deg,var(--celadon-mid),var(--celadon-deep));
}
/* motif C — scallop / medallion dots */
.m-scallop{
background:
radial-gradient(circle at 20px 18px, rgba(255,255,255,.30) 0 6px, transparent 7px),
radial-gradient(circle at 60px 46px, rgba(15,30,24,.24) 0 8px, transparent 9px),
radial-gradient(circle at 100px 18px, rgba(255,255,255,.30) 0 6px, transparent 7px),
radial-gradient(circle at 140px 46px, rgba(15,30,24,.24) 0 8px, transparent 9px),
linear-gradient(180deg,var(--celadon),var(--celadon-mid));
background-size:80px 64px,80px 64px,80px 64px,80px 64px,100% 100%;
}
/* Scene 3 — styling tip */
.tip-quote{
font-family:var(--serif);
font-size:32px;
line-height:1.3;
font-style:italic;
}
.tip-quote span{color:var(--celadon)}
.tip-mark{
font-family:var(--serif);
font-size:64px;
color:var(--accent);
line-height:.4;
margin-bottom:18px;
display:block;
}
.tip-attr{
margin-top:26px;
font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);
}
/* Scene 4 — CTA */
.cta-name{
font-family:var(--serif);
font-size:52px;
color:var(--celadon);
line-height:1;
text-shadow:var(--celadon-glow);
margin-bottom:8px;
}
.cta-head{
font-family:var(--serif);
font-size:26px;
margin-bottom:20px;
}
.cta-copy{
font-size:14px;line-height:1.6;color:var(--muted);
max-width:280px;margin-bottom:34px;
}
.cta-btn{
font-family:var(--sans);
font-size:12px;
letter-spacing:.24em;
text-transform:uppercase;
color:var(--bg);
background:linear-gradient(90deg,var(--accent),#e2c583);
padding:15px 34px;
border-radius:40px;
box-shadow:0 8px 30px rgba(201,169,97,.34);
}
.cta-site{
margin-top:24px;
font-family:var(--serif);
font-size:12px;
letter-spacing:.2em;
text-transform:uppercase;
color:var(--ink);
}
/* ---- controls ---- */
.controls{
position:absolute;
bottom:20px;left:0;right:0;
z-index:50;
display:flex;
align-items:center;
justify-content:center;
gap:14px;
}
.btn{
width:44px;height:44px;
border-radius:50%;
border:1px solid var(--line);
background:rgba(23,23,28,.72);
color:var(--ink);
display:flex;align-items:center;justify-content:center;
backdrop-filter:blur(6px);
transition:transform .18s var(--ease),border-color .18s var(--ease);
}
.btn:hover{transform:translateY(-2px);border-color:var(--accent)}
.btn:active{transform:translateY(0)}
.btn svg{width:16px;height:16px;fill:var(--ink)}
.btn.small{width:38px;height:38px}
.btn.small svg{width:13px;height:13px;fill:var(--muted)}
.paused-badge{
position:absolute;
top:50%;left:50%;
transform:translate(-50%,-50%);
z-index:45;
font-size:10px;letter-spacing:.3em;text-transform:uppercase;
color:var(--ink);
background:rgba(6,6,7,.6);
border:1px solid var(--line);
padding:8px 16px;border-radius:30px;
opacity:0;visibility:hidden;transition:opacity .25s var(--ease);
backdrop-filter:blur(4px);
pointer-events:none;
}
.paused .paused-badge{opacity:1;visibility:visible}
</style>
</head>
<body>
<div class="stage" id="stage">
<!-- top bar / logo zone -->
<div class="topbar">
<div class="wordmark">Designer Wallcoverings<span class="accentline"></span></div>
<div class="kicker">Color Study<small>Autumn 2026</small></div>
</div>
<!-- progress -->
<div class="progress" id="progress"></div>
<!-- Scene 0 : Hook -->
<section class="scene" data-scene="0">
<div class="eyebrow rise">The Color of the Season</div>
<h1 class="hook-line rise d1">This season,<br>it's all about<br><em>a quiet green.</em></h1>
<p class="hook-sub rise d3">Soft. Restorative. Endlessly livable.</p>
</section>
<!-- Scene 1 : Hue name -->
<section class="scene" data-scene="1">
<div class="eyebrow hue-eyebrow rise">Introducing</div>
<div class="hue-name rise d1">Celadon</div>
<div class="hue-hex rise d3">Pantone-adjacent · <b>#A9CBB9</b></div>
</section>
<!-- Scene 2 : Swatches -->
<section class="scene scene-swatches" data-scene="2">
<div class="swatch-head rise">Three Ways to Wear It</div>
<div class="swatch-sub rise d1">Celadon across our patterns</div>
<div class="swatches">
<div class="swatch rise d2"><div class="plate m-trellis"></div><span class="cap">Garden Trellis</span></div>
<div class="swatch rise d3"><div class="plate m-chevron"></div><span class="cap">Deco Chevron</span></div>
<div class="swatch rise d4"><div class="plate m-scallop"></div><span class="cap">Scallop Medallion</span></div>
</div>
</section>
<!-- Scene 3 : Styling tip -->
<section class="scene" data-scene="3">
<span class="tip-mark rise">“</span>
<p class="tip-quote rise d1">Pair <span>Celadon</span> with warm brass and unbleached linen —<br>let the walls breathe.</p>
<div class="tip-attr rise d3">Styling Note · The DW Atelier</div>
</section>
<!-- Scene 4 : CTA -->
<section class="scene" data-scene="4">
<div class="eyebrow rise">Shop the Palette</div>
<div class="cta-name rise d1">Celadon</div>
<h2 class="cta-head rise d2">Order your samples</h2>
<p class="cta-copy rise d2">Bring the season's most-requested hue home before it sells through.</p>
<div class="cta-btn rise d3">Explore the Collection</div>
<div class="cta-site rise d4">designerwallcoverings.com</div>
</section>
<div class="paused-badge">Paused</div>
<!-- controls -->
<div class="controls">
<button class="btn small" id="restart" aria-label="Restart">
<svg viewBox="0 0 24 24"><path d="M12 5V1L7 6l5 5V7a5 5 0 1 1-5 5H5a7 7 0 1 0 7-7z"/></svg>
</button>
<button class="btn" id="playpause" aria-label="Play or pause">
<svg id="icon-pause" viewBox="0 0 24 24"><path d="M6 4h4v16H6zM14 4h4v16h-4z"/></svg>
<svg id="icon-play" viewBox="0 0 24 24" style="display:none"><path d="M8 5v14l11-7z"/></svg>
</button>
</div>
</div>
<script>
(function(){
// scene durations (ms)
const DUR = [3600, 4000, 5200, 4600, 4600];
const scenes = Array.from(document.querySelectorAll('.scene'));
const progress = document.getElementById('progress');
const bars = [];
// build progress segments
DUR.forEach(()=>{
const seg = document.createElement('div');
seg.className = 'seg';
const fill = document.createElement('i');
seg.appendChild(fill);
progress.appendChild(seg);
bars.push(fill);
});
let idx = -1;
let sceneStart = 0;
let playing = true;
let raf = null;
const stage = document.getElementById('stage');
const pp = document.getElementById('playpause');
const iconPlay = document.getElementById('icon-play');
const iconPause = document.getElementById('icon-pause');
function showScene(i){
scenes.forEach(s=>s.classList.remove('active'));
scenes[i].classList.add('active');
// reset animation retrigger
scenes[i].querySelectorAll('.rise').forEach(el=>{
el.style.animation='none';
// force reflow
void el.offsetWidth;
el.style.animation='';
});
// set past/future bars
bars.forEach((b,bi)=>{ b.style.width = bi<i ? '100%' : (bi>i ? '0%' : '0%'); });
}
function next(){
idx = (idx+1) % DUR.length;
showScene(idx);
sceneStart = performance.now();
}
function tick(now){
if(!playing){ return; }
const el = now - sceneStart;
const d = DUR[idx];
const p = Math.min(1, el/d);
if(bars[idx]) bars[idx].style.width = (p*100)+'%';
if(el >= d){
next();
}
raf = requestAnimationFrame(tick);
}
function play(){
if(playing) return;
playing = true;
stage.classList.remove('paused');
iconPlay.style.display='none';
iconPause.style.display='';
// resume: shift sceneStart so elapsed continues
sceneStart = performance.now() - pausedElapsed;
raf = requestAnimationFrame(tick);
}
let pausedElapsed = 0;
function pause(){
if(!playing) return;
playing = false;
stage.classList.add('paused');
iconPlay.style.display='';
iconPause.style.display='none';
pausedElapsed = performance.now() - sceneStart;
if(raf) cancelAnimationFrame(raf);
}
function toggle(){ playing ? pause() : play(); }
pp.addEventListener('click', function(e){ e.stopPropagation(); toggle(); });
document.getElementById('restart').addEventListener('click', function(e){
e.stopPropagation();
idx = -1;
bars.forEach(b=>b.style.width='0%');
if(!playing){ playing=true; stage.classList.remove('paused'); iconPlay.style.display='none'; iconPause.style.display=''; }
next();
if(raf) cancelAnimationFrame(raf);
raf = requestAnimationFrame(tick);
});
stage.addEventListener('click', toggle);
// start
next();
raf = requestAnimationFrame(tick);
})();
</script>
</body>
</html>