2026-08-20 17:23:42 +02:00
<!doctype html>
2026-08-22 01:12:21 +02:00
< html > < head >
< meta name = "description" content = "Before there was a word for paint, a hand marked a cave wall with rust-red earth." > < meta charset = "UTF-8" / >
2026-08-20 17:23:42 +02:00
< script src = "https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js" > < / script >
< style >
body{margin:0;background:#14100a;color:#f2e8d5;font-family:Georgia,'Times New Roman',serif}
#root{position:relative;width:1920px;height:1080px;overflow:hidden;background:#1a140c}
.clip{position:absolute;inset:0;display:grid;place-items:center}
.field{position:absolute;inset:0;opacity:0}
.t{position:relative;z-index:3;max-width:1500px;padding:0 120px;text-align:center}
.t h1{font-size:88px;line-height:1.1;font-weight:400;margin:0 0 28px;letter-spacing:1px}
.t p{font-size:30px;line-height:1.5;font-style:italic;color:#d9c9a8;margin:0}
.swatch{position:absolute;width:240px;height:240px;border-radius:12px;opacity:0;border:2px solid rgba(242,232,213,0.25)}
.swatch b{position:absolute;bottom:18px;left:0;right:0;text-align:center;font-size:20px;color:#f2e8d5;letter-spacing:2px;font-family:Inter,sans-serif;font-weight:400}
.grain{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(242,232,213,0.05),transparent 70%);z-index:2}
.halo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:900px;height:900px;border-radius:50%;opacity:0}
2026-08-22 01:12:21 +02:00
< / style > < script defer src = "https://analytics.4ort.xyz/script.js" data-website-id = "d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b" > < / script >
< / head >
2026-08-20 17:23:42 +02:00
< body >
< div id = "root" data-composition-id = "main" data-start = "0" data-width = "1920" data-height = "1080" data-duration = "72" >
<!-- scene 1 -->
< section id = "s1" class = "clip" data-start = "0" data-duration = "26" data-track-index = "1" >
< div class = "field" id = "f1" style = "background:linear-gradient(135deg,#4a2f1c,#7a4a26,#b0703c)" > < / div >
< div class = "honor" id = "h1a" style = "position:absolute;width:420px;height:300px;left:160px;top:150px;background:radial-gradient(circle at 40% 35%,#8a4f22,#3a2414);border-radius:180px 140px 160px 120px;opacity:0" > < / div >
< div class = "honor" id = "h1b" style = "position:absolute;width:340px;height:260px;right:180px;top:420px;background:radial-gradient(circle at 60% 40%,#5c361a,#25160c);border-radius:140px 180px 120px 160px;opacity:0" > < / div >
< div class = "honor" id = "h1c" style = "position:absolute;width:300px;height:220px;left:240px;bottom:140px;background:radial-gradient(circle at 50% 45%,#6e401f,#2c190e);border-radius:120px 100px 140px 110px;opacity:0" > < / div >
< div class = "grain" > < / div >
< div class = "t" > < h1 > EARTH< / h1 > < p > Before there was a word for paint, a hand marked a cave wall with rust-red earth.< / p > < / div >
< / section >
<!-- scene 2 -->
< section id = "s2" class = "clip" data-start = "26" data-duration = "26" data-track-index = "1" >
< div class = "field" id = "f2" style = "background:linear-gradient(160deg,#241a10,#4a3f28,#6d5434)" > < / div >
< div class = "swatch" id = "sw1" style = "background:#9b5c2e;left:320px;top:180px" > < b > OCHRE< / b > < / div >
< div class = "swatch" id = "sw2" style = "background:#5a3a24;right:340px;top:240px" > < b > UMBER< / b > < / div >
< div class = "swatch" id = "sw3" style = "background:#7a4a2a;left:520px;bottom:170px" > < b > SIENNA< / b > < / div >
< div class = "swatch" id = "sw4" style = "background:#3f2a1a;right:520px;bottom:220px" > < b > BURNT< / b > < / div >
< div class = "grain" > < / div >
< div class = "t" > < h1 > MINERALS< / h1 > < p > Iron gives ochre its ochre. Manganese darkens it toward umber. The same dirt under our feet, lifted onto canvas, becomes light.< / p > < / div >
< / section >
<!-- scene 3 -->
< section id = "s3" class = "clip" data-start = "52" data-duration = "20" data-track-index = "1" >
< div class = "field" id = "f3" style = "background:linear-gradient(180deg,#2a1c10,#1c120a)" > < / div >
< div class = "halo" id = "halo1" style = "background:radial-gradient(circle,rgba(180,120,60,0.5),transparent 70%)" > < / div >
< div class = "grain" > < / div >
< div class = "t" > < h1 > THE BACKBONE< / h1 > < p > An earth pigment does not shout. It sits the way memory sits in a room — patient, warm, refusing to be hurried.< / p > < / div >
< / section >
<!-- narration audio (direct children of root, timed to scene starts) -->
< audio id = "voice-s1" src = "audio/s1.wav" data-start = "0" > < / audio >
< audio id = "voice-s2" src = "audio/s2.wav" data-start = "26" > < / audio >
< audio id = "voice-s3" src = "audio/s3.wav" data-start = "52" > < / audio >
< audio id = "bgm" src = "audio/music.mp3" data-start = "0" data-volume = "0.14" > < / audio >
< / div >
< script >
window.__timelines = window.__timelines || {};
const tl = gsap.timeline({ paused: true });
// scene 1 — earth swaths drifting in like settling pigment
tl.to("#s1 .grain", { opacity: 1, duration: 2 }, 0.4);
tl.to("#f1", { opacity: 1, duration: 3, ease: "power2.out" }, 0.4);
tl.fromTo("#s1 .t h1", { opacity: 0, y: 40 }, { opacity: 1, y: 0, duration: 2, ease: "power3.out" }, 1.2);
tl.fromTo("#s1 .t p", { opacity: 0, y: 20 }, { opacity: 1, y: 0, duration: 2 }, 2.2);
tl.to("#h1a", { opacity: 0.55, duration: 3, ease: "sine.out" }, 1.0);
tl.to("#h1b", { opacity: 0.5, duration: 3.4, ease: "sine.out" }, 1.6);
tl.to("#h1c", { opacity: 0.5, duration: 3.8, ease: "sine.out" }, 2.2);
tl.to("#s1 .t h1", { letterSpacing: "6px", duration: 20, ease: "none" }, 3);
// scene 2 — the mineral swatches
tl.to("#f2", { opacity: 1, duration: 2 }, 26.4);
tl.to("#s2 .grain", { opacity: 1, duration: 1.5 }, 26.4);
tl.fromTo("#s2 .t h1", { opacity: 0, y: 30 }, { opacity: 1, y: 0, duration: 1.8, ease: "power3.out" }, 27);
tl.fromTo("#s2 .t p", { opacity: 0, y: 18 }, { opacity: 1, y: 0, duration: 1.8 }, 28);
tl.to("#sw1", { opacity: 1, scale: 1.05, duration: 1.6, ease: "back.out(1.4)" }, 27.5);
tl.to("#sw2", { opacity: 1, scale: 1.05, duration: 1.6, ease: "back.out(1.4)" }, 28.3);
tl.to("#sw3", { opacity: 1, scale: 1.05, duration: 1.6, ease: "back.out(1.4)" }, 29.1);
tl.to("#sw4", { opacity: 1, scale: 1.05, duration: 1.6, ease: "back.out(1.4)" }, 29.9);
// scene 3 — quiet, warm close
tl.to("#f3", { opacity: 1, duration: 2 }, 52.4);
tl.to("#s3 .grain", { opacity: 1, duration: 1.5 }, 52.4);
tl.to("#halo1", { opacity: 0.8, scale: 1.15, duration: 18, ease: "sine.inOut" }, 52.4);
tl.fromTo("#s3 .t h1", { opacity: 0, y: 26 }, { opacity: 1, y: 0, duration: 1.8 }, 53);
tl.fromTo("#s3 .t p", { opacity: 0, y: 16 }, { opacity: 1, y: 0, duration: 1.8 }, 54);
window.__timelines["main"] = tl;
< / script >
< / body > < / html >
