134 lines
7.6 KiB
HTML
134 lines
7.6 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:#f9f4e6;color:#4a2f1a;font-family:Georgia,'Times New Roman',serif}
|
||
|
|
#root{position:relative;width:1920px;height:1080px;overflow:hidden;background:#f9f4e6}
|
||
|
|
.clip{position:absolute;inset:0;display:grid;place-items:center;opacity:0}
|
||
|
|
.title{font-size:96px;letter-spacing:.03em;color:#8b3a1f;text-align:center;max-width:1500px;line-height:1.15}
|
||
|
|
.subtitle{font-size:44px;color:#6b4a2b;max-width:1300px;text-align:center;line-height:1.45;margin-top:36px}
|
||
|
|
.overlay{background:rgba(249,244,230,0.94);border-top:3px solid #c95d2b;border-bottom:3px solid #c95d2b;padding:80px 120px}
|
||
|
|
.stem{fill:none;stroke:#5a7d3a;stroke-width:10;stroke-linecap:round}
|
||
|
|
.jar-body{fill:#e8d8c0;stroke:#8b6f4e;stroke-width:4}
|
||
|
|
.jar-seal{fill:#c95d2b}
|
||
|
|
.jar-shine{fill:#fff;opacity:.25}
|
||
|
|
audio{display:none}
|
||
|
|
</style></head>
|
||
|
|
<body>
|
||
|
|
<div id="root" data-composition-id="main" data-start="0" data-width="1920" data-height="1080" data-duration="54">
|
||
|
|
<audio id="voice-s1" src="audio/s1.wav" data-start="0"></audio>
|
||
|
|
<audio id="voice-s2" src="audio/s2.wav" data-start="19"></audio>
|
||
|
|
<audio id="voice-s3" src="audio/s3.wav" data-start="35"></audio>
|
||
|
|
<audio id="bgm" src="audio/music.mp3" data-start="0" data-volume="0.16"></audio>
|
||
|
|
|
||
|
|
<!-- Scene 1: the steaming kitchen -->
|
||
|
|
<section id="s1" class="clip" data-start="0" data-duration="19" data-track-index="1">
|
||
|
|
<div style="position:absolute;inset:0;display:grid;place-items:center">
|
||
|
|
<svg width="1500" height="760" viewBox="0 0 1500 760">
|
||
|
|
<!-- kettle -->
|
||
|
|
<ellipse cx="390" cy="560" rx="200" ry="70" fill="#b8a088"/>
|
||
|
|
<path d="M190 560 Q190 380 330 350 L450 350 Q590 380 590 560 Z" fill="#d7c6ab" stroke="#8b6f4e" stroke-width="5"/>
|
||
|
|
<path d="M330 350 Q390 320 450 350" fill="none" stroke="#6b4a2b" stroke-width="6"/>
|
||
|
|
<!-- bubbling surface -->
|
||
|
|
<ellipse cx="390" cy="352" rx="120" ry="18" fill="#e0793a" opacity="0.7"/>
|
||
|
|
<!-- steam -->
|
||
|
|
<path id="steam1" class="stem" d="M350 320 Q330 260 360 200 Q380 150 350 100"/>
|
||
|
|
<path id="steam2" class="stem" d="M430 320 Q450 260 420 200 Q400 150 430 100"/>
|
||
|
|
<path id="steam3" class="stem" d="M530 330 Q550 270 520 210 Q500 160 530 110"/>
|
||
|
|
<!-- a jar waiting on the towel -->
|
||
|
|
<rect x="650" y="520" width="520" height="26" rx="13" fill="#e0d3b8"/>
|
||
|
|
<path class="jar-body" d="M860 290 h120 a22 22 0 0 1 22 22 v240 a14 14 0 0 1 -14 14 h-136 a14 14 0 0 1 -14 -14 v-240 a22 22 0 0 1 22 -22 z"/>
|
||
|
|
<rect class="jar-seal" x="872" y="262" width="96" height="34" rx="8"/>
|
||
|
|
<path class="jar-shine" d="M886 310 q8 60 -2 120" stroke="none" fill="#fff" opacity="0.3"/>
|
||
|
|
</svg>
|
||
|
|
<div class="overlay" style="position:absolute;bottom:60px">
|
||
|
|
<div class="title">The Ping</div>
|
||
|
|
<div class="subtitle">A water bath, and the sound of summer locking itself in a jar.</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Scene 2: jars cooling on the towel -->
|
||
|
|
<section id="s2" class="clip" data-start="19" data-duration="16" data-track-index="1">
|
||
|
|
<div style="position:absolute;inset:0;display:grid;place-items:center">
|
||
|
|
<svg width="1500" height="760" viewBox="0 0 1500 760">
|
||
|
|
<rect x="240" y="560" width="1040" height="20" rx="10" fill="#dfd2b6"/>
|
||
|
|
<!-- a row of jars -->
|
||
|
|
<g>
|
||
|
|
<path class="jar-body" d="M500 380 h110 a22 22 0 0 1 22 22 v170 a14 14 0 0 1 -14 14 h-126 a14 14 0 0 1 -14 -14 v-170 a22 22 0 0 1 22 -22 z"/>
|
||
|
|
<rect class="jar-seal" x="511" y="354" width="88" height="32" rx="8"/>
|
||
|
|
</g>
|
||
|
|
<g>
|
||
|
|
<path class="jar-body" d="M690 380 h110 a22 22 0 0 1 22 22 v170 a14 14 0 0 1 -14 14 h-126 a14 14 0 0 1 -14 -14 v-170 a22 22 0 0 1 22 -22 z"/>
|
||
|
|
<rect class="jar-seal" x="701" y="354" width="88" height="32" rx="8"/>
|
||
|
|
</g>
|
||
|
|
<g>
|
||
|
|
<path class="jar-body" d="M880 380 h110 a22 22 0 0 1 22 22 v170 a14 14 0 0 1 -14 14 h-126 a14 14 0 0 1 -14 -14 v-170 a22 22 0 0 1 22 -22 z"/>
|
||
|
|
<rect class="jar-seal" x="891" y="354" width="88" height="32" rx="8"/>
|
||
|
|
</g>
|
||
|
|
<!-- tomato on the sill -->
|
||
|
|
<circle cx="240" cy="430" r="52" fill="#d3402b"/>
|
||
|
|
<path d="M228 382 q12 -22 24 0 M252 384 q2 -24 10 -2" fill="none" stroke="#5a7d3a" stroke-width="7" stroke-linecap="round"/>
|
||
|
|
<circle cx="1150" cy="430" r="44" fill="#e0793a"/>
|
||
|
|
</svg>
|
||
|
|
<div class="subtitle" style="position:absolute;bottom:120px;max-width:1150px">
|
||
|
|
Cold on the towel, never on the counter. Then — the ping.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Scene 3: jars out to neighbors -->
|
||
|
|
<section id="s3" class="clip" data-start="35" data-duration="19" data-track-index="1">
|
||
|
|
<div style="position:absolute;inset:0;display:grid;place-items:center">
|
||
|
|
<svg width="1500" height="760" viewBox="0 0 1500 760">
|
||
|
|
<!-- a cloth bag / porch handing off -->
|
||
|
|
<rect x="420" y="520" width="660" height="26" rx="13" fill="#e0d3b8"/>
|
||
|
|
<!-- three jars gathered as if ready to carry -->
|
||
|
|
<g>
|
||
|
|
<path class="jar-body" d="M560 380 h104 a20 20 0 0 1 20 20 v150 a12 12 0 0 1 -12 12 h-120 a12 12 0 0 1 -12 -12 v-150 a20 20 0 0 1 20 -20 z"/>
|
||
|
|
<rect class="jar-seal" x="571" y="356" width="82" height="30" rx="8"/>
|
||
|
|
</g>
|
||
|
|
<g>
|
||
|
|
<path class="jar-body" d="M740 380 h104 a20 20 0 0 1 20 20 v150 a12 12 0 0 1 -12 12 h-120 a12 12 0 0 1 -12 -12 v-150 a20 20 0 0 1 20 -20 z"/>
|
||
|
|
<rect class="jar-seal" x="751" y="356" width="82" height="30" rx="8"/>
|
||
|
|
</g>
|
||
|
|
<g>
|
||
|
|
<path class="jar-body" d="M920 380 h104 a20 20 0 0 1 20 20 v150 a12 12 0 0 1 -12 12 h-120 a12 12 0 0 1 -12 -12 v-150 a20 20 0 0 1 20 -20 z"/>
|
||
|
|
<rect class="jar-seal" x="931" y="356" width="82" height="30" rx="8"/>
|
||
|
|
</g>
|
||
|
|
<!-- little house on the hill -->
|
||
|
|
<path d="M1200 620 h200 v-120 h-100 l-56 -80 -100 80 h-44 z" fill="#d7c6ab" stroke="#8b6f4e" stroke-width="4"/>
|
||
|
|
<circle cx="1350" cy="420" r="34" fill="#f2c94c"/>
|
||
|
|
<rect class="jar-shine" x="1270" y="500" width="0" height="0"/>
|
||
|
|
</svg>
|
||
|
|
<div class="subtitle" style="position:absolute;bottom:130px;max-width:1200px">
|
||
|
|
A dozen jars, a dozen names. Canning was never just for winter.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
window.__timelines = window.__timelines || {};
|
||
|
|
const tl = gsap.timeline({ paused: true });
|
||
|
|
|
||
|
|
// scene 1
|
||
|
|
tl.to("#s1", { opacity: 1, duration: 0.8, ease: "power2.out" }, 0.2);
|
||
|
|
tl.from("#s1 .title", { y: 40, opacity: 0, duration: 1.0, ease: "power3.out" }, 1.2);
|
||
|
|
tl.to("#steam1", { attr: { d: "M350 320 Q330 235 365 170 Q385 120 350 90" }, duration: 4, ease: "power1.inOut" }, 1);
|
||
|
|
tl.to("#steam2", { attr: { d: "M430 320 Q450 235 415 170 Q395 120 430 90" }, duration: 4, ease: "power1.inOut" }, 2);
|
||
|
|
tl.to("#steam3", { attr: { d: "M530 330 Q550 245 515 180 Q495 130 530 90" }, duration: 4, ease: "power1.inOut" }, 3);
|
||
|
|
tl.to("#s1", { opacity: 0, duration: 0.8, ease: "power2.in" }, 18.0);
|
||
|
|
|
||
|
|
// scene 2
|
||
|
|
tl.to("#s2", { opacity: 1, duration: 0.8, ease: "power2.out" }, 19.4);
|
||
|
|
tl.from("#s2 g", { y: -60, opacity: 0, stagger: 0.25, duration: 0.9, ease: "power3.out" }, 20.2);
|
||
|
|
tl.to("#s2", { opacity: 0, duration: 0.8, ease: "power2.in" }, 34.0);
|
||
|
|
|
||
|
|
// scene 3
|
||
|
|
tl.to("#s3", { opacity: 1, duration: 0.8, ease: "power2.out" }, 35.4);
|
||
|
|
tl.from("#s3 .subtitle", { y: 30, opacity: 0, duration: 1.0, ease: "power3.out" }, 36.4);
|
||
|
|
tl.to("#s3", { opacity: 0, duration: 0.8, ease: "power2.in" }, 52.8);
|
||
|
|
|
||
|
|
window.__timelines["main"] = tl;
|
||
|
|
</script>
|
||
|
|
</body></html>
|