← back to Model Arena
data/artifacts/0a809ac3ac48/claude-code.html
566 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Designer Wallcoverings — Color of the Season</title>
<style>
:root{
--bg:#0d0d0f;
--surface:#17171c;
--ink:#f5f2ea;
--muted:#8a8578;
--accent:#c9a961;
--accent-deep:#7d6a45;
--line:rgba(201,169,97,.22);
--shadow:0 8px 24px rgba(0,0,0,.45);
--glow:0 0 32px rgba(201,169,97,.28);
--ease:cubic-bezier(.22,1,.36,1);
--serif:'Cormorant Garamond','Playfair Display','EB Garamond','Didot','Bodoni MT',Georgia,serif;
--sans:-apple-system,'Segoe UI','Helvetica Neue',Helvetica,sans-serif;
/* hue of the season */
--hue:#7fa88b; /* Celadon */
--hue-deep:#4f7a63;
--hue-soft:#a9c4b4;
--hue-ink:#20342a;
}
*{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 ---------- */
.reel{
position:relative;
width:min(100vw,calc(100vh * 9 / 16));
height:min(100vh,calc(100vw * 16 / 9));
background:var(--bg);
overflow:hidden;
box-shadow:0 20px 80px rgba(0,0,0,.6);
isolation:isolate;
}
/* ambient drifting ground */
.reel::before{
content:"";
position:absolute;
inset:-30%;
z-index:0;
background:
radial-gradient(60% 45% at 25% 20%, rgba(201,169,97,.10), transparent 60%),
radial-gradient(55% 40% at 80% 85%, var(--hue-deep), transparent 65%);
opacity:.5;
filter:blur(8px);
animation:drift 18s var(--ease) infinite alternate;
transition:background 1.2s var(--ease);
}
@keyframes drift{
from{transform:translate3d(-2%,-1%,0) scale(1.02)}
to{transform:translate3d(3%,2%,0) scale(1.08)}
}
/* ---------- HEADER / WORDMARK ---------- */
header.brand{
position:absolute;
top:0;left:0;right:0;
z-index:6;
padding:20px 22px 16px;
display:flex;
align-items:flex-start;
justify-content:space-between;
background:linear-gradient(to bottom, rgba(13,13,15,.82), rgba(13,13,15,0));
pointer-events:none;
}
.wordmark{
font-family:var(--serif);
color:var(--ink);
font-weight:600;
font-size:42px;
line-height:.92;
letter-spacing:.18em;
text-transform:uppercase;
max-width:250px;
}
.wordmark .l2{
display:block;
font-size:.98em;
color:var(--accent);
letter-spacing:.30em;
font-weight:500;
}
.badge{
font-family:var(--sans);
font-size:10px;
letter-spacing:.24em;
text-transform:uppercase;
color:var(--muted);
border:1px solid var(--line);
padding:6px 10px;
border-radius:2px;
white-space:nowrap;
margin-top:4px;
}
/* ---------- SCENES ---------- */
.scene{
position:absolute;
inset:0;
z-index:2;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
padding:120px 40px 130px;
opacity:0;
visibility:hidden;
transition:opacity .6s var(--ease), visibility .6s;
}
.scene.active{opacity:1;visibility:visible}
.kicker{
font-family:var(--sans);
font-size:12px;
letter-spacing:.34em;
text-transform:uppercase;
color:var(--accent);
margin-bottom:22px;
}
/* animated caption helper */
.anim{opacity:0}
.scene.active .anim{
animation:fadeUp .8s var(--ease) both;
}
.scene.active .anim.d1{animation-delay:.12s}
.scene.active .anim.d2{animation-delay:.30s}
.scene.active .anim.d3{animation-delay:.50s}
.scene.active .anim.d4{animation-delay:.72s}
@keyframes fadeUp{
from{opacity:0;transform:translateY(30px)}
to{opacity:1;transform:none}
}
/* SCENE 1 — HOOK */
.hook{
font-family:var(--serif);
font-weight:500;
font-size:46px;
line-height:1.15;
color:var(--ink);
max-width:12ch;
}
.hook em{color:var(--accent);font-style:italic}
.hook .dots{color:var(--accent)}
/* SCENE 2 — HUE NAME */
.hue-scene{background:radial-gradient(120% 90% at 50% 40%, rgba(127,168,139,.14), transparent 70%)}
.hue-name{
font-family:var(--serif);
font-weight:600;
font-style:italic;
letter-spacing:.02em;
line-height:.92;
font-size:clamp(64px,20vw,120px);
color:var(--hue-soft);
text-shadow:0 0 40px rgba(127,168,139,.35);
}
.hue-sub{
font-family:var(--sans);
font-size:13px;
letter-spacing:.32em;
text-transform:uppercase;
color:var(--muted);
margin-top:26px;
}
.hue-swatch-bar{
display:flex;gap:8px;margin-top:34px;
}
.hue-swatch-bar span{
width:34px;height:34px;border-radius:50%;
border:1px solid rgba(245,242,234,.2);
}
/* SCENE 3 — SWATCHES */
.swatch-head{
font-family:var(--serif);
font-size:30px;
font-weight:500;
color:var(--ink);
margin-bottom:8px;
}
.swatch-note{
font-size:12px;letter-spacing:.2em;text-transform:uppercase;
color:var(--muted);margin-bottom:34px;
}
.swatches{
display:flex;
flex-direction:column;
gap:20px;
width:100%;
max-width:340px;
}
.swatch{
height:120px;
border-radius:14px;
border:1px solid var(--line);
box-shadow:var(--shadow);
position:relative;
overflow:hidden;
}
.swatch .cap{
position:absolute;left:14px;bottom:12px;
font-family:var(--sans);
font-size:11px;letter-spacing:.22em;text-transform:uppercase;
color:rgba(255,255,255,.9);
text-shadow:0 1px 6px rgba(0,0,0,.5);
z-index:2;
}
/* three distinct CSS motifs, all in the hue */
.m-damask{
background:
radial-gradient(circle at 25% 30%, var(--hue-soft) 0 8px, transparent 9px),
radial-gradient(circle at 75% 30%, var(--hue-soft) 0 8px, transparent 9px),
radial-gradient(circle at 50% 70%, var(--hue-soft) 0 10px, transparent 11px),
radial-gradient(ellipse 14px 26px at 50% 45%, var(--hue-deep) 0 60%, transparent 62%),
var(--hue);
background-size:80px 80px,80px 80px,80px 80px,80px 80px,100% 100%;
}
.m-stripe{
background:repeating-linear-gradient(
90deg,
var(--hue) 0 20px,
var(--hue-deep) 20px 26px,
var(--hue-soft) 26px 30px,
var(--hue-deep) 30px 36px
);
}
.m-trellis{
background:
repeating-linear-gradient(45deg, var(--hue-ink) 0 2px, transparent 2px 26px),
repeating-linear-gradient(-45deg, var(--hue-ink) 0 2px, transparent 2px 26px),
var(--hue-soft);
}
/* SCENE 4 — STYLING TIP */
.tip-quote{
font-family:var(--serif);
font-weight:500;
font-size:34px;
line-height:1.28;
color:var(--ink);
max-width:15ch;
}
.tip-quote b{color:var(--hue-soft);font-weight:600;font-style:italic}
.tip-mark{
font-family:var(--serif);
font-size:80px;
color:var(--accent);
line-height:.4;
margin-bottom:10px;
opacity:.6;
}
/* SCENE 5 — CTA */
.cta-title{
font-family:var(--serif);
font-weight:600;
font-size:44px;
line-height:1.1;
color:var(--ink);
max-width:12ch;
}
.cta-title span{color:var(--accent)}
.cta-line{
font-size:15px;color:var(--muted);
margin-top:20px;letter-spacing:.04em;line-height:1.6;
max-width:26ch;
}
.cta-pill{
margin-top:40px;
font-family:var(--sans);
font-size:12px;letter-spacing:.28em;text-transform:uppercase;
color:var(--bg);
background:var(--accent);
padding:16px 34px;
border-radius:100px;
box-shadow:var(--glow);
}
.cta-site{
margin-top:26px;
font-family:var(--serif);
font-style:italic;
font-size:18px;
color:var(--hue-soft);
letter-spacing:.02em;
}
/* ---------- PROGRESS BAR ---------- */
.progress{
position:absolute;
top:78px;left:22px;right:22px;
z-index:6;
display:flex;
gap:6px;
}
.progress .seg{
flex:1;height:3px;
background:rgba(245,242,234,.16);
border-radius:3px;
overflow:hidden;
}
.progress .seg i{
display:block;height:100%;width:0;
background:var(--accent);
border-radius:3px;
}
.progress .seg.done i{width:100%}
.progress .seg.current i{animation:fill linear forwards}
@keyframes fill{from{width:0}to{width:100%}}
/* ---------- CONTROLS ---------- */
.controls{
position:absolute;
bottom:0;left:0;right:0;
z-index:6;
padding:20px 22px 26px;
display:flex;
align-items:center;
gap:16px;
background:linear-gradient(to top, rgba(13,13,15,.85), rgba(13,13,15,0));
}
.pp{
width:52px;height:52px;flex:0 0 52px;
border-radius:50%;
border:1px solid var(--line);
background:var(--surface);
color:var(--accent);
cursor:pointer;
display:flex;align-items:center;justify-content:center;
transition:transform .2s var(--ease),background .2s;
}
.pp:hover{transform:scale(1.06);background:#1d1d23}
.pp svg{width:20px;height:20px;fill:var(--accent)}
.ctrl-meta{
font-family:var(--sans);
font-size:11px;letter-spacing:.22em;text-transform:uppercase;
color:var(--muted);
}
.ctrl-meta .now{color:var(--ink);display:block;margin-bottom:3px}
.replay{
margin-left:auto;
font-family:var(--sans);
font-size:11px;letter-spacing:.22em;text-transform:uppercase;
color:var(--muted);
background:none;border:1px solid var(--line);
padding:9px 14px;border-radius:100px;cursor:pointer;
transition:color .2s,border-color .2s;
}
.replay:hover{color:var(--accent);border-color:var(--accent)}
</style>
</head>
<body>
<div class="reel" id="reel">
<!-- HEADER -->
<header class="brand">
<div class="wordmark">Designer<span class="l2">Wallcoverings</span></div>
<div class="badge">Color · SS26</div>
</header>
<!-- PROGRESS -->
<div class="progress" id="progress"></div>
<!-- SCENE 1 — HOOK -->
<section class="scene" data-dur="3200">
<div class="kicker anim d1">The Season Ahead</div>
<h1 class="hook anim d2">This season, it's all about<em> one</em> quiet colour<span class="dots">…</span></h1>
</section>
<!-- SCENE 2 — HUE NAME -->
<section class="scene hue-scene" data-dur="3400">
<div class="kicker anim d1">Color of the Season</div>
<div class="hue-name anim d2">Celadon</div>
<div class="hue-sub anim d3">A soft, sage-kissed green</div>
<div class="hue-swatch-bar anim d4">
<span style="background:var(--hue-soft)"></span>
<span style="background:var(--hue)"></span>
<span style="background:var(--hue-deep)"></span>
<span style="background:var(--hue-ink)"></span>
</div>
</section>
<!-- SCENE 3 — SWATCHES -->
<section class="scene" data-dur="4200">
<div class="swatch-head anim d1">Three ways to wear it</div>
<div class="swatch-note anim d1">Celadon · pattern edit</div>
<div class="swatches">
<div class="swatch m-damask anim d2"><span class="cap">Heirloom Damask</span></div>
<div class="swatch m-stripe anim d3"><span class="cap">Regency Stripe</span></div>
<div class="swatch m-trellis anim d4"><span class="cap">Garden Trellis</span></div>
</div>
</section>
<!-- SCENE 4 — STYLING TIP -->
<section class="scene" data-dur="3800">
<div class="kicker anim d1">The Styling Note</div>
<div class="tip-mark anim d1">“</div>
<p class="tip-quote anim d2">Pair Celadon with <b>warm brass</b> and unbleached linen — it reads calm by day, jewel-lit by night.</p>
</section>
<!-- SCENE 5 — CTA -->
<section class="scene" data-dur="4600">
<div class="kicker anim d1">Bring It Home</div>
<h2 class="cta-title anim d2">Order your <span>Celadon</span> swatch set</h2>
<p class="cta-line anim d3">Five hand-trimmed samples, delivered to your studio. Complimentary for the trade.</p>
<div class="cta-pill anim d3">Request Swatches</div>
<div class="cta-site anim d4">designerwallcoverings.com</div>
</section>
<!-- CONTROLS -->
<div class="controls">
<button class="pp" id="pp" aria-label="Play or pause">
<svg id="ppIcon" viewBox="0 0 24 24"><rect x="6" y="5" width="4" height="14"/><rect x="14" y="5" width="4" height="14"/></svg>
</button>
<div class="ctrl-meta">
<span class="now" id="nowLabel">Color of the Season</span>
<span id="sceneCount">Scene 1 / 5</span>
</div>
<button class="replay" id="replay">↻ Replay</button>
</div>
</div>
<script>
const scenes = Array.from(document.querySelectorAll('.scene'));
const progress = document.getElementById('progress');
const pp = document.getElementById('pp');
const ppIcon = document.getElementById('ppIcon');
const nowLabel = document.getElementById('nowLabel');
const sceneCount = document.getElementById('sceneCount');
const replay = document.getElementById('replay');
const labels = [
"This season it's all about…",
"Celadon",
"Three ways to wear it",
"The styling note",
"Order your swatches"
];
const PLAY_SVG = '<rect x="6" y="5" width="4" height="14"/><rect x="14" y="5" width="4" height="14"/>';
const PAUSE_SVG = '<path d="M8 5v14l11-7z"/>';
// build progress segments
scenes.forEach(()=>{
const seg = document.createElement('div');
seg.className = 'seg';
seg.innerHTML = '<i></i>';
progress.appendChild(seg);
});
const segs = Array.from(progress.children);
let idx = 0;
let paused = false;
let timer = null;
let remaining = 0;
let startTime = 0;
let curDur = 0;
function setScene(n){
idx = n;
scenes.forEach((s,i)=>s.classList.toggle('active', i===n));
segs.forEach((seg,i)=>{
const bar = seg.querySelector('i');
seg.classList.remove('current','done');
bar.style.animation='none';
if(i<n){ seg.classList.add('done'); }
});
nowLabel.textContent = labels[n];
sceneCount.textContent = `Scene ${n+1} / ${scenes.length}`;
curDur = parseInt(scenes[n].dataset.dur,10);
remaining = curDur;
runSegment();
}
function runSegment(){
const seg = segs[idx];
const bar = seg.querySelector('i');
seg.classList.add('current');
// restart animation with remaining duration
bar.style.animation='none';
void bar.offsetWidth;
bar.style.animationName='fill';
bar.style.animationDuration=remaining+'ms';
bar.style.animationTimingFunction='linear';
bar.style.animationFillMode='forwards';
bar.style.animationPlayState = paused ? 'paused' : 'running';
startTime = performance.now();
clearTimeout(timer);
if(!paused){
timer = setTimeout(next, remaining);
}
}
function next(){
if(idx < scenes.length-1){
setScene(idx+1);
} else {
// finished — pause on last
paused = true;
ppIcon.innerHTML = PLAY_SVG;
}
}
function pause(){
if(paused) return;
paused = true;
clearTimeout(timer);
remaining -= (performance.now() - startTime);
if(remaining<0) remaining=0;
const bar = segs[idx].querySelector('i');
bar.style.animationPlayState='paused';
ppIcon.innerHTML = PLAY_SVG;
}
function play(){
// if at very end, replay
if(paused && idx===scenes.length-1 && remaining<=0){
setScene(0);
paused=false;
ppIcon.innerHTML = PAUSE_SVG;
return;
}
paused = false;
ppIcon.innerHTML = PAUSE_SVG;
const bar = segs[idx].querySelector('i');
bar.style.animationPlayState='running';
startTime = performance.now();
clearTimeout(timer);
timer = setTimeout(next, remaining);
}
pp.addEventListener('click', ()=> paused ? play() : pause());
replay.addEventListener('click', ()=>{
clearTimeout(timer);
paused=false;
ppIcon.innerHTML = PAUSE_SVG;
setScene(0);
});
// kick off
ppIcon.innerHTML = PAUSE_SVG;
setScene(0);
</script>
</body>
</html>