95 lines
5.9 KiB
HTML
95 lines
5.9 KiB
HTML
|
<!doctype html>
|
||
|
|
<html><head><meta charset="UTF-8"/>
|
||
|
|
<title>The Wash — a watercolor's patience | Arnelle Biondi</title>
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||
|
|
<style>
|
||
|
|
body{margin:0;background:#f3e9d8;color:#3d3226;font-family:Georgia,'Times New Roman',serif}
|
||
|
|
#root{position:relative;width:1920px;height:1080px;overflow:hidden;background:#f3e9d8}
|
||
|
|
.clip{position:absolute;inset:0}
|
||
|
|
.bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0}
|
||
|
|
.veil{position:absolute;inset:0;background:linear-gradient(rgba(60,50,38,.15),rgba(60,50,38,.55))}
|
||
|
|
.title{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;opacity:0}
|
||
|
|
.title h1{font-size:120px;margin:0;letter-spacing:1px;text-shadow:0 4px 30px rgba(0,0,0,.35);font-weight:normal}
|
||
|
|
.title p{font-size:44px;margin:20px 0 0;font-style:italic;letter-spacing:4px;text-shadow:0 2px 16px rgba(0,0,0,.35)}
|
||
|
|
.card{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;opacity:0;padding:0 220px}
|
||
|
|
.card h2{font-size:64px;margin:0 0 30px;color:#2f4a3c}
|
||
|
|
.card .cap{font-size:42px;line-height:1.5;font-style:italic;color:#3d3226}
|
||
|
|
.band{position:absolute;left:0;right:0;bottom:0;height:56px;background:#2f4a3c;color:#f3e9d8;display:flex;align-items:center;justify-content:center;font-size:24px;letter-spacing:6px;opacity:0}
|
||
|
|
.wash{position:absolute;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(143,170,152,.9),rgba(80,112,96,.35) 70%,rgba(80,112,96,0));filter:blur(6px)}
|
||
|
|
</style></head>
|
||
|
|
<body>
|
||
|
|
<div id="root" data-composition-id="main" data-start="0" data-width="1920" data-height="1080" data-duration="74">
|
||
|
|
|
||
|
|
<!-- Scene 1: opening title (0-18) -->
|
||
|
|
<section id="s1" class="clip" data-start="0" data-duration="18" data-track-index="1">
|
||
|
|
<div id="s1-bg" class="bg" style="background-image:url('https://images.pexels.com/photos/8339700/pexels-photo-8339700.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940')"></div>
|
||
|
|
<div id="s1-veil" class="veil"></div>
|
||
|
|
<div id="s1-title" class="title">
|
||
|
|
<h1>The Wash</h1>
|
||
|
|
<p>a watercolor's patience</p>
|
||
|
|
</div>
|
||
|
|
<div id="s1-wash" class="wash" style="width:600px;height:600px;left:-180px;top:560px"></div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Scene 2: the wet beginning (18-36) -->
|
||
|
|
<section id="s2" class="clip" data-start="18" data-duration="18" data-track-index="1">
|
||
|
|
<div id="s2-bg" class="bg" style="background-image:url('https://images.pexels.com/photos/19837309/pexels-photo-19837309.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940')"></div>
|
||
|
|
<div id="s2-veil" class="veil"></div>
|
||
|
|
<div id="s2-card" class="card">
|
||
|
|
<h2>The gathering</h2>
|
||
|
|
<div class="cap">Water first, pigment waiting. One gentle pass.</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Scene 3: wet on wet (36-53) -->
|
||
|
|
<section id="s3" class="clip" data-start="36" data-duration="17" data-track-index="1">
|
||
|
|
<div id="s3-bg" class="bg" style="background-image:url('https://images.pexels.com/photos/1213431/pexels-photo-1213431.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940')"></div>
|
||
|
|
<div id="s3-veil" class="veil"></div>
|
||
|
|
<div id="s3-card" class="card">
|
||
|
|
<h2>Held and loose</h2>
|
||
|
|
<div class="cap">Gum arabic holds, water sets it free. Commit, then trust.</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Scene 4: the story that stays (53-74) -->
|
||
|
|
<section id="s4" class="clip" data-start="53" data-duration="21" data-track-index="1">
|
||
|
|
<div id="s4-bg" class="bg" style="background-image:url('https://pixabay.com/get/g373b6794431d734d11a9446b63b6c29de6b99aed3e7b6bfd89079345861130925bb3d34168b8c159400049373ba7b694a9c928a66164ff880e211028afe93fe2_1280.jpg')"></div>
|
||
|
|
<div id="s4-veil" class="veil"></div>
|
||
|
|
<div id="s4-card" class="card">
|
||
|
|
<h2>The story stays</h2>
|
||
|
|
<div class="cap">A light you can't catch. A warm second of the South, kept.</div>
|
||
|
|
</div>
|
||
|
|
<div id="s4-band" class="band">ARNELLE BIONDI · HOHENWALD, TENNESSEE</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- narration audio, direct children of root, timed to scenes -->
|
||
|
|
<audio id="voice-s1" src="audio/s1.wav" data-start="0"></audio>
|
||
|
|
<audio id="voice-s2" src="audio/s2.wav" data-start="18"></audio>
|
||
|
|
<audio id="voice-s3" src="audio/s3.wav" data-start="36"></audio>
|
||
|
|
<audio id="voice-s4" src="audio/s4.wav" data-start="53"></audio>
|
||
|
|
<audio id="bgm" src="audio/music.mp3" data-start="0" data-volume="0.14"></audio>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
window.__timelines = window.__timelines || {};
|
||
|
|
const tl = gsap.timeline({ paused: true });
|
||
|
|
// scene 1
|
||
|
|
tl.to("#s1-bg", { opacity: 1, duration: 3, ease: "power1.out" }, 0.2);
|
||
|
|
tl.to("#s1-title", { opacity: 1, y: 0, duration: 1.4, ease: "power3.out" }, 2.2);
|
||
|
|
tl.to("#s1-title", { opacity: 0, duration: 1, ease: "power1.in" }, 16);
|
||
|
|
tl.to("#s1-wash", { scale: 1.4, opacity: 0.6, duration: 15, ease: "none" }, 0.5);
|
||
|
|
// scene 2
|
||
|
|
tl.to("#s2-bg", { opacity: 1, duration: 3, ease: "power1.out" }, 18.2);
|
||
|
|
tl.fromTo("#s2-card", { opacity: 0, y: 40 }, { opacity: 1, y: 0, duration: 1.2, ease: "power3.out" }, 20.5);
|
||
|
|
tl.to("#s2-card", { opacity: 0, duration: 1, ease: "power1.in" }, 35);
|
||
|
|
// scene 3
|
||
|
|
tl.to("#s3-bg", { opacity: 1, duration: 3, ease: "power1.out" }, 36.2);
|
||
|
|
tl.fromTo("#s3-card", { opacity: 0, scale: 1.05 }, { opacity: 1, scale: 1, duration: 1.4, ease: "power3.out" }, 38.6);
|
||
|
|
tl.to("#s3-card", { opacity: 0, duration: 1, ease: "power1.in" }, 52);
|
||
|
|
// scene 4
|
||
|
|
tl.to("#s4-bg", { opacity: 1, duration: 3, ease: "power1.out" }, 53.2);
|
||
|
|
tl.fromTo("#s4-card", { opacity: 0, y: 40 }, { opacity: 1, y: 0, duration: 1.3, ease: "power3.out" }, 55.6);
|
||
|
|
tl.to("#s4-band", { opacity: 1, duration: 1.6, ease: "power2.out" }, 66);
|
||
|
|
window.__timelines["main"] = tl;
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
</body></html>
|