91 lines
6.4 KiB
HTML
91 lines
6.4 KiB
HTML
<!doctype html>
|
|
<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"/>
|
|
<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}
|
|
</style> <script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
|
</head>
|
|
<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> |