← back to Model Arena
data/artifacts/0a809ac3ac48/gpt.html
835 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Designer Wallcoverings – Color of the Season</title>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<style>
:root {
/* Design tokens */
--bg: #0d0d0f;
--surface: #17171c;
--surface-soft: #121218;
--text: #f5f2ea;
--muted: #8a8578;
--accent: #c9a961; /* warm metallic gold */
--accent-alt: #9ac4a6; /* celadon tint for subtle use only */
--line: rgba(245, 242, 234, 0.14);
--shadow-soft: 0 20px 45px rgba(0, 0, 0, 0.55);
--radius-card: 18px;
--radius-pill: 999px;
--ease-swift: cubic-bezier(.22,.9,.24,1);
--ease-hero: cubic-bezier(.22,1,.36,1);
--scene-duration: 5500ms;
--header-height: 72px;
--progress-height: 2px;
--safe-padding: 18px;
--font-display: "Playfair Display", "Didot", "Bodoni MT", Georgia, serif;
--font-body: "Avenir Next", "Century Gothic", system-ui, -apple-system, "Segoe UI", sans-serif;
--caption-size: 12px;
--body-size: 16px;
--lead-size: 21px;
--h3-size: 28px;
--h2-size: 38px;
--h1-size: 50px;
}
/* Reset & base */
*,
*::before,
*::after {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
height: 100%;
background: #000;
color: var(--text);
font-family: var(--font-body);
}
body {
display: flex;
align-items: center;
justify-content: center;
}
/* Reel container: 9:16 vertical frame */
.reel-frame {
position: relative;
width: min(100vw, 540px);
height: calc(min(100vw, 540px) * 16 / 9);
max-height: 100vh;
background: var(--bg);
color: var(--text);
box-shadow: var(--shadow-soft);
border-radius: 28px;
overflow: hidden;
}
/* Top header with wordmark */
.reel-header {
position: absolute;
inset: 0 0 auto 0;
height: var(--header-height);
padding: 0 var(--safe-padding);
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(to bottom, rgba(13,13,15,0.98), rgba(13,13,15,0.92));
border-bottom: 1px solid var(--line);
z-index: 10;
}
.wordmark {
font-family: var(--font-display);
font-size: 40px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #1c1a17; /* darkest ink-style tone for logo */
-webkit-text-stroke: 0.4px rgba(201,169,97,0.6);
paint-order: stroke fill;
line-height: 1.1;
max-width: 260px;
}
.wordmark span {
display: block;
}
/* Header meta / controls zone (small sans) */
.header-meta {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
font-family: var(--font-body);
}
.header-label {
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
}
.playback-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 6px 10px;
border-radius: var(--radius-pill);
border: 1px solid var(--line);
background: rgba(23,23,28,0.9);
color: var(--muted);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
cursor: pointer;
transition: background 160ms var(--ease-swift), color 160ms var(--ease-swift), border-color 160ms var(--ease-swift), transform 160ms var(--ease-swift);
}
.playback-toggle:hover {
background: rgba(23,23,28,1);
color: var(--text);
border-color: rgba(201,169,97,0.7);
transform: translateY(-1px);
}
.playback-icon {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 1px rgba(0,0,0,0.6);
}
.playback-toggle.is-paused .playback-icon {
background: transparent;
border-radius: 0;
box-shadow: none;
border-left: 1px solid var(--muted);
border-right: 1px solid var(--muted);
width: 7px;
}
/* Progress bar */
.progress-bar {
position: absolute;
left: 0;
right: 0;
top: var(--header-height);
height: var(--progress-height);
background: rgba(245,242,234,0.06);
overflow: hidden;
z-index: 9;
}
.progress-track {
display: flex;
height: 100%;
gap: 2px;
padding: 0 14px;
}
.progress-segment {
flex: 1;
background: rgba(245,242,234,0.12);
border-radius: 999px;
overflow: hidden;
position: relative;
}
.progress-segment-fill {
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(201,169,97,0.2), var(--accent));
transform: scaleX(0);
transform-origin: left;
}
/* Main content area */
.reel-main {
position: absolute;
inset: calc(var(--header-height) + var(--progress-height)) 0 0 0;
padding: calc(var(--safe-padding) + 4px) var(--safe-padding) calc(var(--safe-padding) + 8px);
display: flex;
flex-direction: column;
justify-content: space-between;
}
/* Scene layout */
.scene {
position: absolute;
inset: calc(var(--header-height) + var(--progress-height)) 0 0 0;
padding: calc(var(--safe-padding) + 4px) var(--safe-padding) calc(var(--safe-padding) + 8px);
opacity: 0;
pointer-events: none;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: opacity 500ms var(--ease-swift), transform 500ms var(--ease-swift);
transform: translateY(18px);
}
.scene.is-active {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
/* Caption styling */
.caption-stack {
display: flex;
flex-direction: column;
gap: 10px;
max-width: 90%;
}
.caption-kicker {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--muted);
}
.caption-headline {
font-family: var(--font-display);
font-size: var(--h2-size);
line-height: 1.02;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.caption-sub {
font-size: var(--lead-size);
line-height: 1.4;
color: rgba(245,242,234,0.85);
}
.caption-small {
font-size: var(--body-size);
line-height: 1.5;
color: rgba(245,242,234,0.78);
}
/* Animated captions */
.caption-line {
display: inline-block;
opacity: 0;
transform: translateY(14px);
}
.scene.is-active .caption-line {
animation: captionFadeUp 640ms var(--ease-hero) forwards;
}
.caption-line[data-line="2"] {
animation-delay: 120ms;
}
.caption-line[data-line="3"] {
animation-delay: 240ms;
}
/* Scene 1 specifics */
.scene-1 .hero-tagline {
font-family: var(--font-display);
font-size: var(--h1-size);
text-transform: uppercase;
letter-spacing: 0.22em;
}
.scene-1 .hero-tagline span {
display: block;
}
.hero-ambient {
position: absolute;
right: 12%;
top: 23%;
width: 120px;
height: 120px;
border-radius: 50%;
background:
radial-gradient(circle at 30% 10%, rgba(255,255,255,0.22), transparent 62%),
radial-gradient(circle at 70% 80%, rgba(201,169,97,0.24), transparent 66%),
radial-gradient(circle at 0% 100%, rgba(154,196,166,0.38), transparent 66%);
filter: blur(1px);
mix-blend-mode: screen;
opacity: 0.9;
}
/* Scene 2 – Color name */
.scene-2 .color-name {
font-family: var(--font-display);
font-size: clamp(60px, 10vh, 72px);
letter-spacing: 0.28em;
text-transform: uppercase;
text-align: center;
margin: auto;
}
.scene-2 .color-chip {
width: 120px;
height: 120px;
border-radius: 50%;
margin: 0 auto 10px;
background:
radial-gradient(circle at 20% 0%, rgba(255,255,255,0.4), transparent 55%),
radial-gradient(circle at 80% 100%, rgba(0,0,0,0.5), transparent 70%),
radial-gradient(circle at 50% 50%, #99c3a4, #5d7f71);
box-shadow: 0 18px 40px rgba(0,0,0,0.7);
border: 1px solid rgba(245,242,234,0.12);
}
/* Scene 3 – Swatches */
.swatch-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin-top: 22px;
}
.swatch-tile {
position: relative;
padding-top: 120%;
border-radius: 16px;
overflow: hidden;
background: var(--surface-soft);
box-shadow: 0 14px 30px rgba(0,0,0,0.65);
border: 1px solid rgba(245,242,234,0.12);
}
/* Swatch patterns: distinct motifs, all celadon-led */
/* 1: Celadon strié */
.swatch-1::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(180deg, #1a2521 0%, #121818 100%);
}
.swatch-1::after {
content: "";
position: absolute;
inset: 0;
background-image:
repeating-linear-gradient(
90deg,
rgba(154,196,166,0.42) 0px,
rgba(154,196,166,0.42) 1px,
transparent 1px,
transparent 4px
),
repeating-linear-gradient(
180deg,
rgba(11,16,14,0.75) 0px,
rgba(11,16,14,0.75) 3px,
transparent 3px,
transparent 8px
);
mix-blend-mode: screen;
opacity: 0.9;
}
/* 2: Celadon lattice */
.swatch-2::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 15% 0%, #a8d0b4, #547564);
}
.swatch-2::after {
content: "";
position: absolute;
inset: -40%;
background-image:
repeating-linear-gradient(
45deg,
transparent 0,
transparent 10px,
rgba(10,15,13,0.9) 10px,
rgba(10,15,13,0.9) 11px
),
repeating-linear-gradient(
-45deg,
transparent 0,
transparent 10px,
rgba(0,0,0,0.85) 10px,
rgba(0,0,0,0.85) 11px
);
opacity: 0.55;
mix-blend-mode: multiply;
}
/* 3: Celadon metallic marquetry */
.swatch-3::before {
content: "";
position: absolute;
inset: 0;
background:
conic-gradient(from 220deg at 20% 20%, rgba(201,169,97,0.3), transparent 40%, rgba(201,169,97,0.35), transparent 80%),
radial-gradient(circle at 80% 0%, #b3d7c0, #4e6c5e 70%);
}
.swatch-3::after {
content: "";
position: absolute;
inset: 0;
background-image:
repeating-linear-gradient(
135deg,
rgba(13,13,15,0.0) 0,
rgba(13,13,15,0.0) 8px,
rgba(13,13,15,0.85) 8px,
rgba(13,13,15,0.85) 9px
);
mix-blend-mode: soft-light;
opacity: 0.7;
}
/* Scene 4 – Styling tip */
.tip-card {
margin-top: 18px;
border-radius: var(--radius-card);
padding: 16px 18px 18px;
background: radial-gradient(circle at 0% 0%, rgba(154,196,166,0.08), transparent 55%), rgba(23,23,28,0.96);
border: 1px solid var(--line);
box-shadow: var(--shadow-soft);
}
.tip-card-title {
font-size: 13px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 6px;
}
.tip-card-body {
font-size: var(--body-size);
line-height: 1.6;
color: rgba(245,242,234,0.86);
}
/* Scene 5 – CTA */
.cta-block {
margin-top: 18px;
border-radius: var(--radius-card);
padding: 18px 18px 20px;
background: linear-gradient(135deg, rgba(201,169,97,0.16), rgba(13,13,15,0.92));
border: 1px solid rgba(201,169,97,0.55);
box-shadow: var(--shadow-soft);
display: flex;
flex-direction: column;
gap: 10px;
}
.cta-headline {
font-family: var(--font-display);
font-size: var(--h3-size);
text-transform: uppercase;
letter-spacing: 0.18em;
}
.cta-body {
font-size: var(--body-size);
line-height: 1.6;
color: rgba(245,242,234,0.9);
}
.cta-button-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-top: 6px;
}
.cta-button {
padding: 10px 18px;
border-radius: var(--radius-pill);
border: 1px solid rgba(201,169,97,0.85);
background: radial-gradient(circle at 0% 0%, rgba(255,255,255,0.28), transparent 55%), #1e1a12;
color: var(--text);
font-size: 12px;
letter-spacing: 0.22em;
text-transform: uppercase;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: transform 160ms var(--ease-swift), box-shadow 160ms var(--ease-swift), background 160ms var(--ease-swift), color 160ms var(--ease-swift);
}
.cta-button::after {
content: "";
width: 10px;
height: 10px;
border-radius: 50%;
border: 1px solid rgba(201,169,97,0.85);
box-shadow: 0 0 0 1px rgba(0,0,0,0.7);
}
.cta-button:hover {
transform: translateY(-1px);
box-shadow: 0 18px 32px rgba(0,0,0,0.7);
background: radial-gradient(circle at 0% 0%, rgba(255,255,255,0.4), transparent 60%), #261e12;
}
.cta-note {
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
}
/* Caption keyframes */
@keyframes captionFadeUp {
from {
opacity: 0;
transform: translateY(18px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Utility: subtle bottom meta */
.bottom-meta {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
margin-top: 6px;
}
/* Responsive tweaks */
@media (max-width: 480px) {
.reel-frame {
border-radius: 0;
height: 100vh;
}
.wordmark {
font-size: 38px;
}
.scene-1 .hero-tagline {
font-size: 42px;
}
.scene-2 .color-name {
font-size: 54px;
}
}
</style>
</head>
<body>
<div class="reel-frame" role="region" aria-label="Designer Wallcoverings – Color of the Season Reel">
<header class="reel-header">
<div class="wordmark" aria-label="Designer Wallcoverings">
<span>DESIGNER</span>
<span>WALLCOVERINGS</span>
</div>
<div class="header-meta">
<div class="header-label">Color of the Season</div>
<button class="playback-toggle" type="button" aria-pressed="true" aria-label="Pause reel">
<span class="playback-icon" aria-hidden="true"></span>
<span>Pause</span>
</button>
</div>
</header>
<!-- Progress bar -->
<div class="progress-bar" aria-hidden="true">
<div class="progress-track">
<div class="progress-segment">
<div class="progress-segment-fill" data-index="0"></div>
</div>
<div class="progress-segment">
<div class="progress-segment-fill" data-index="1"></div>
</div>
<div class="progress-segment">
<div class="progress-segment-fill" data-index="2"></div>
</div>
<div class="progress-segment">
<div class="progress-segment-fill" data-index="3"></div>
</div>
<div class="progress-segment">
<div class="progress-segment-fill" data-index="4"></div>
</div>
</div>
</div>
<!-- Scene 1: Hook -->
<section class="scene scene-1 is-active" data-scene="0" aria-label="This season it's all about atmosphere">
<div class="caption-stack">
<div class="caption-kicker caption-line" data-line="1">This season it’s all about</div>
<div class="hero-tagline">
<span class="caption-line" data-line="2">Quiet</span>
<span class="caption-line" data-line="3">Radiance</span>
</div>
</div>
<div class="hero-ambient" aria-hidden="true"></div>
<div class="bottom-meta">
<span>AW 24 / 25</span>
<span>CURATED BY DW STUDIO</span>
</div>
</section>
<!-- Scene 2: Hue name -->
<section class="scene scene-2" data-scene="1" aria-label="Color of the season Celadon">
<div></div>
<div style="text-align:center;">
<div class="caption-kicker caption-line" data-line="1">Color of the season</div>
<div class="color-chip" aria-hidden="true"></div>
<div class="color-name caption-line" data-line="2">Celadon</div>
<p class="caption-sub caption-line" data-line="3">
A cool, luminous green that softens architecture and catches light like porcelain.
</p>
</div>
<div class="bottom-meta">
<span>HUE STUDY</span>
<span>02 / CE</span>
</div>
</section>
<!-- Scene 3: 3 pattern swatches -->
<section class="scene scene-3" data-scene="2" aria-label="Celadon wallcovering swatches">
<div class="caption-stack">
<div class="caption-kicker caption-line" data-line="1">Surface stories</div>
<div class="caption-headline caption-line" data-line="2">Three ways to live with Celadon</div>
<p class="caption-small caption-line" data-line="3">
From gallery-panelled salons to quiet bedrooms, each pattern gives the hue a different attitude.
</p>
</div>
<div>
<div class="swatch-grid" aria-hidden="true">
<div class="swatch-tile swatch-1"></div>
<div class="swatch-tile swatch-2"></div>
<div class="swatch-tile swatch-3"></div>
</div>
<div class="bottom-meta">
<span>STRIÉ · LATTICE · MARQUETRY</span>
<span>TONAL CELADON</span>
</div>
</div>
</section>
<!-- Scene 4: Styling tip -->
<section class="scene scene-4" data-scene="3" aria-label="Styling tip for Celadon">
<div class="caption-stack">
<div class="caption-kicker caption-line" data-line="1">Styling tip</div>
<div class="caption-headline caption-line" data-line="2">Pair Celadon with warm metals</div>
<p class="caption-small caption-line" data-line="3">
Let the walls stay matte and softly textured. Layer in brushed brass, deep espresso woods and ivory upholstery to keep the palette calm yet luminous.
</p>
</div>
<div class="tip-card">
<div class="tip-card-title">Designer note</div>
<div class="tip-card-body">
Use Celadon on the largest vertical plane in the room, then repeat the hue just twice more—perhaps in a silk cushion and a ceramic lamp—to keep the look intentional, not themed.
</div>
</div>
</section>
<!-- Scene 5: CTA -->
<section class="scene scene-5" data-scene="4" aria-label="Call to explore Celadon wallcoverings">
<div class="caption-stack">
<div class="caption-kicker caption-line" data-line="1">Explore the collection</div>
<div class="cta-headline caption-line" data-line="2">Celadon suites</div>
<p class="cta-body caption-line" data-line="3">
Discover hand-finished wallcoverings in layered celadon tones—designed to move from powder room to penthouse suite with quiet confidence.
</p>
</div>
<div class="cta-block">
<div class="cta-headline" style="font-size: 20px; letter-spacing: 0.24em;">View full palette</div>
<div class="cta-body">
See coordinated trims, textiles and metallics curated by our studio for seamless, room-by-room storytelling.
</div>
<div class="cta-button-row">
<button class="cta-button" type="button">
Open Celadon Edit
</button>
<div class="cta-note">Swipe to save for your next project</div>
</div>
</div>
</section>
</div>
<script>
(function() {
const scenes = Array.from(document.querySelectorAll('.scene'));
const progressFills = Array.from(document.querySelectorAll('.progress-segment-fill'));
const toggle = document.querySelector('.playback-toggle');
const toggleLabel = toggle.querySelector('span:last-child');
const icon = toggle.querySelector('.playback-icon');
const totalScenes = scenes.length;
const sceneDuration = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--scene-duration'), 10) || 5500;
let currentScene = 0;
let timerId = null;
let startTime = null;
let remainingTime = sceneDuration;
let isPaused = false;
function setActiveScene(index) {
scenes.forEach((scene, i) => {
if (i === index) {
scene.classList.add('is-active');
} else {
scene.classList.remove('is-active');
}
});
updateProgress(index, 0);
}
function updateProgress(sceneIndex, progressFraction) {
progressFills.forEach((fill, i) => {
if (i < sceneIndex) {
fill.style.transform = 'scaleX(1)';
fill.style.transition = 'transform 220ms var(--ease-swift)';
} else if (i === sceneIndex) {
fill.style.transform = 'scaleX(' + progressFraction + ')';
} else {
fill.style.transform = 'scaleX(0)';
}
});
}
function scheduleNextScene(duration) {
clearTimeout(timerId);
startTime = performance.now();
timerId = setTimeout(() => {
goToNextScene();
}, duration);
// Animate progress bar
const currentFill = progressFills[currentScene];
if (currentFill) {
currentFill.style.transition = 'transform ' + duration + 'ms linear';
requestAnimationFrame(() => {
currentFill.style.transform = 'scaleX(1)';
});
}
}
function goToNextScene() {
currentScene = (currentScene + 1) % totalScenes;
setActiveScene(currentScene);
if (!isPaused) {
scheduleNextScene(sceneDuration);
}
}
function pause() {
if (isPaused) return;
isPaused = true;
toggle.classList.add('is-paused');
toggle.setAttribute('aria-pressed', 'false');
toggle.setAttribute('aria-label', 'Play reel');
toggleLabel.textContent = 'Play';
clearTimeout(timerId);
// Compute remaining time for current scene
const now = performance.now();
const elapsed = Math.min(now - startTime, sceneDuration);
remainingTime = sceneDuration - elapsed;
// Freeze current progress segment
const fraction = elapsed / sceneDuration;
updateProgress(currentScene, fraction);
const currentFill = progressFills[currentScene];
if (currentFill) {
const computed = getComputedStyle(currentFill).transform;
currentFill.style.transition = 'none';
currentFill.style.transform = computed === 'none' ? 'scaleX(' + fraction + ')' : computed;
}
}
function play() {
if (!isPaused) return;
isPaused = false;
toggle.classList.remove('is-paused');
toggle.setAttribute('aria-pressed', 'true');
toggle.setAttribute('aria-label', 'Pause reel');
toggleLabel.textContent = 'Pause';
// Resume from remaining time
scheduleNextScene(remainingTime);
}
toggle.addEventListener('click', () => {
if (isPaused) {
play();
} else {
pause();
}
});
// Keyboard accessibility for space/enter
toggle.addEventListener('keydown', (e) => {
if (e.key === ' ' || e.key === 'Enter') {
e.preventDefault();
toggle.click();
}
});
// Initialize
setActiveScene(currentScene);
scheduleNextScene(sceneDuration);
})();
</script>
</body>
</html>