107 lines
5.7 KiB
HTML
107 lines
5.7 KiB
HTML
<!doctype html>
|
|
<html><head><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:#1a1613;color:#f5f0e8;font-family:Georgia,'Times New Roman',serif}
|
|
#root{position:relative;width:1920px;height:1080px;overflow:hidden}
|
|
|
|
.clip{position:absolute;inset:0;display:grid;place-items:center}
|
|
.bg{position:absolute;inset:0;background-size:cover;background-position:center}
|
|
.scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,16,13,0.55) 0%,rgba(20,16,13,0.15) 45%,rgba(20,16,13,0.72) 100%)}
|
|
|
|
.title{position:relative;max-width:1500px;padding:0 140px;opacity:0}
|
|
.title h1{font-weight:400;font-size:96px;line-height:1.12;margin:0 0 28px;letter-spacing:0.01em}
|
|
.title h1 .accent{font-style:italic;color:#e0a06a}
|
|
.title p{font-size:40px;line-height:1.4;color:#d8cfc4;margin:0;max-width:1200px}
|
|
|
|
.kicker{position:absolute;top:90px;left:140px;right:140px;font-size:30px;letter-spacing:0.24em;text-transform:uppercase;color:#c9b293;opacity:0}
|
|
.card{position:relative;max-width:1500px;padding:64px 90px;background:rgba(26,22,19,0.5);border-left:6px solid #e0a06a;opacity:0}
|
|
.card p{font-size:44px;line-height:1.5;margin:0;color:#f2eadf}
|
|
.card small{display:block;margin-top:28px;font-size:26px;color:#b6a897;letter-spacing:0.05em}
|
|
|
|
.fin{position:relative;text-align:center;opacity:0}
|
|
.fin .sig{font-size:30px;letter-spacing:0.3em;text-transform:uppercase;color:#c9b293;margin-bottom:34px}
|
|
.fin h1{font-size:110px;font-weight:400;margin:0 0 40px;font-style:italic}
|
|
.fin p{font-size:40px;color:#d8cfc4;margin:0}
|
|
.fin .vine{color:#e0a06a}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="root" data-composition-id="main" data-start="0" data-width="1920" data-height="1080" data-duration="48">
|
|
|
|
<!-- SCENE 1 — The surrender -->
|
|
<section id="s1" class="clip" data-start="0" data-duration="12" data-track-index="1">
|
|
<div class="bg" style="background-image:url('https://images.pexels.com/photos/7859193/pexels-photo-7859193.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940')"></div>
|
|
<div class="scrim"></div>
|
|
<div class="kicker" id="s1-kick">I. Surrender</div>
|
|
<div class="title" id="s1-title">
|
|
<p>Every watercolor begins as a surrender — pigment laid onto damp paper, carried by water to places you did not plan.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- SCENE 2 — The bloom -->
|
|
<section id="s2" class="clip" data-start="12" data-duration="12" data-track-index="1">
|
|
<div class="bg" style="background-image:url('https://images.pexels.com/photos/29279350/pexels-photo-29279350.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940')"></div>
|
|
<div class="scrim"></div>
|
|
<div class="kicker" id="s2-kick">II. Bloom</div>
|
|
<div class="card" id="s2-card">
|
|
<p>Watch the bloom — color bleeding along the wet edge, finding its own horizon.</p>
|
|
<small>A wash blooms when you stop steering it.</small>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- SCENE 3 — The dry / prayer of patience -->
|
|
<section id="s3" class="clip" data-start="24" data-duration="12" data-track-index="1">
|
|
<div class="bg" style="background-image:url('https://images.pexels.com/photos/13600524/pexels-photo-13600524.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940')"></div>
|
|
<div class="scrim"></div>
|
|
<div class="kicker" id="s3-kick">III. The Dry</div>
|
|
<div class="card" id="s3-card">
|
|
<p>Then the long wait. Nothing moves. Patience is the discipline — the prayer that holds the brush still.</p>
|
|
<small>The color now darker, quieter, truer than when it was wet.</small>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- SCENE 4 — What remains -->
|
|
<section id="s4" class="clip" data-start="36" data-duration="12" data-track-index="1">
|
|
<div class="bg" style="background-image:url('https://images.pexels.com/photos/1657315/pexels-photo-1657315.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940')"></div>
|
|
<div class="scrim"></div>
|
|
<div class="fin" id="s4-fin">
|
|
<div class="sig">Barbara Mann · Chester, Vermont</div>
|
|
<h1>What <span class="vine">remains</span> is the art</h1>
|
|
<p>Not what you intended — but what the water chose. That is the discipline of the dry.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- VOICE -->
|
|
<audio id="voice-s1" src="audio/s1.wav" data-start="0"></audio>
|
|
<audio id="voice-s2" src="audio/s2.wav" data-start="12"></audio>
|
|
<audio id="voice-s3" src="audio/s3.wav" data-start="24"></audio>
|
|
<audio id="voice-s4" src="audio/s4.wav" data-start="36"></audio>
|
|
<!-- MUSIC -->
|
|
<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 — kicker + title drift in over the wash
|
|
tl.to("#s1-kick", { opacity: 1, duration: 0.7, ease: "power2.out" }, 0.4);
|
|
tl.to("#s1-title", { opacity: 1, duration: 1.1, ease: "power2.out" }, 1.2);
|
|
tl.to("#s1-title p", { y: -8, duration: 9, ease: "none" }, 1.5);
|
|
|
|
// Scene 2 — card slides up, bloom held
|
|
tl.to("#s2-kick", { opacity: 1, duration: 0.7, ease: "power2.out" }, 12.4);
|
|
tl.to("#s2-card", { opacity: 1, y: 0, duration: 1.0, ease: "power3.out" }, 13.4);
|
|
|
|
// Scene 3 — stillness, slow arrival
|
|
tl.to("#s3-kick", { opacity: 1, duration: 0.7, ease: "power2.out" }, 24.4);
|
|
tl.to("#s3-card", { opacity: 1, y: 0, duration: 1.2, ease: "power3.out" }, 25.6);
|
|
|
|
// Scene 4 — the signature resolves
|
|
tl.to("#s4-fin", { opacity: 1, duration: 1.2, ease: "power3.out" }, 36.6);
|
|
tl.to("#s4-fin h1", { letterSpacing: "0.02em", duration: 4, ease: "none" }, 40);
|
|
|
|
window.__timelines["main"] = tl;
|
|
</script>
|
|
</body></html> |