82 lines
5.3 KiB
HTML
82 lines
5.3 KiB
HTML
|
<!doctype html>
|
||
|
|
<html><head>
|
||
|
|
<meta name="description" content="Flushing Meadows, 6 a.m. — the cilantro is still cool with dew."><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:#1d2a1d;color:#f3ecd7;font-family:Georgia,serif}
|
||
|
|
#root{position:relative;width:1920px;height:1080px;overflow:hidden}
|
||
|
|
.clip{position:absolute;inset:0;display:block}
|
||
|
|
.bg{position:absolute;inset:0}
|
||
|
|
.kind{position:absolute;top:90px;left:110px;font-family:Georgia,serif;font-style:italic;letter-spacing:.25em;font-size:26px;color:rgba(243,236,215,.7)}
|
||
|
|
.big{position:absolute;left:110px;font-family:Georgia,serif;font-weight:normal;line-height:1.15}
|
||
|
|
.foot{position:absolute;bottom:70px;left:110px;font-family:Georgia,serif;font-style:italic;font-size:26px;color:rgba(243,236,215,.85)}
|
||
|
|
/* botanical soft greens, linen cream, no gradients that scream default */
|
||
|
|
.s1 .bg{background:#24351f}
|
||
|
|
.s2 .bg{background:#2c2a1a}
|
||
|
|
.s3 .bg{background:#35401f}
|
||
|
|
.herb{position:absolute;width:340px;height:620px;right:180px;top:180px}
|
||
|
|
.stem{fill:none;stroke:#6e8a4e;stroke-width:10;stroke-linecap:round}
|
||
|
|
.leaf{fill:#7c9a55}
|
||
|
|
.seed{fill:#3a3117}
|
||
|
|
</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="68">
|
||
|
|
<audio id="bgm" src="audio/music.mp3" data-start="0" data-volume="0.15"></audio>
|
||
|
|
<audio id="voice-s1" src="audio/s1.wav" data-start="0"></audio>
|
||
|
|
<audio id="voice-s2" src="audio/s2.wav" data-start="24"></audio>
|
||
|
|
<audio id="voice-s3" src="audio/s3.wav" data-start="47"></audio>
|
||
|
|
|
||
|
|
<section id="s1" class="clip s1" data-start="0" data-duration="24" data-track-index="1">
|
||
|
|
<div class="bg"></div>
|
||
|
|
<p class="kind">La cocina es memoria</p>
|
||
|
|
<h1 id="s1t" class="big" style="top:340px;font-size:96px;opacity:0">Before the sun<br/>climbs the park</h1>
|
||
|
|
<p id="s1d" class="foot" style="opacity:0">Flushing Meadows, 6 a.m. — the cilantro is still cool with dew.</p>
|
||
|
|
<svg class="herb" viewBox="0 0 300 600" aria-hidden="true">
|
||
|
|
<path class="stem" d="M150 580 C150 400 130 360 150 220"/>
|
||
|
|
<path class="leaf" d="M150 260 C90 240 70 190 90 150 C150 180 165 220 150 260 Z"/>
|
||
|
|
<path class="leaf" d="M150 340 C210 320 230 270 210 230 C150 260 135 300 150 340 Z"/>
|
||
|
|
<path class="leaf" d="M150 150 C120 120 120 70 140 40 C170 70 175 120 150 150 Z"/>
|
||
|
|
</svg>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section id="s2" class="clip s2" data-start="24" data-duration="23" data-track-index="1">
|
||
|
|
<div class="bg"></div>
|
||
|
|
<p class="kind">The discipline</p>
|
||
|
|
<h1 id="s2t" class="big" style="top:340px;font-size:84px;opacity:0">Toast the cumin<br/>till it smells<span style="font-style:italic"> like the fireplace</span></h1>
|
||
|
|
<p id="s2d" class="foot" style="opacity:0">Top third of the stem only — the whole difference between bright and muddy.</p>
|
||
|
|
<svg class="herb" viewBox="0 0 300 600" aria-hidden="true" style="opacity:.35">
|
||
|
|
<circle class="seed" cx="60" cy="60" r="9"/><circle class="seed" cx="90" cy="45" r="9"/><circle class="seed" cx="120" cy="60" r="9"/>
|
||
|
|
<circle class="seed" cx="60" cy="100" r="9"/><circle class="seed" cx="90" cy="115" r="9"/><circle class="seed" cx="120" cy="100" r="9"/>
|
||
|
|
<circle class="seed" cx="200" cy="60" r="9"/><circle class="seed" cx="230" cy="45" r="9"/><circle class="seed" cx="260" cy="60" r="9"/>
|
||
|
|
<circle class="seed" cx="200" cy="100" r="9"/><circle class="seed" cx="230" cy="115" r="9"/><circle class="seed" cx="260" cy="100" r="9"/>
|
||
|
|
</svg>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section id="s3" class="clip s3" data-start="47" data-duration="21" data-track-index="1">
|
||
|
|
<div class="bg"></div>
|
||
|
|
<p class="kind">Recado de cilantro</p>
|
||
|
|
<h1 id="s3t" class="big" style="top:320px;font-size:92px;opacity:0">Let it rest an hour.<br/><span style="font-style:italic">It needs the hour.</span></h1>
|
||
|
|
<p id="s3d" class="foot" style="opacity:0">The way a memory needs time to become a story worth telling.</p>
|
||
|
|
<svg class="herb" viewBox="0 0 300 600" aria-hidden="true">
|
||
|
|
<path class="stem" d="M140 580 C140 400 120 360 140 220"/>
|
||
|
|
<path class="leaf" d="M140 260 C80 240 60 190 80 150 C140 180 155 220 140 260 Z"/>
|
||
|
|
<path class="leaf" d="M140 340 C200 320 220 270 200 230 C140 260 125 300 140 340 Z"/>
|
||
|
|
</svg>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
window.__timelines = window.__timelines || {};
|
||
|
|
const tl = gsap.timeline({ paused: true });
|
||
|
|
tl.to("#s1t", { opacity: 1, duration: 1.2, ease: "power3.out" }, 0.4);
|
||
|
|
tl.to("#s1d", { opacity: 1, duration: 1, ease: "power2.out" }, 3);
|
||
|
|
tl.to("#s1 .herb .leaf", { opacity: 0.92, duration: 10, ease: "sine.inOut" }, 0.5);
|
||
|
|
tl.to("#s2t", { opacity: 1, duration: 1.2, ease: "power3.out" }, 24.4);
|
||
|
|
tl.to("#s2d", { opacity: 1, duration: 1, ease: "power2.out" }, 27);
|
||
|
|
tl.from("#s2 .herb", { rotation: 14, transformOrigin: "50% 100%", duration: 4, ease: "power1.out" }, 25);
|
||
|
|
tl.to("#s3t", { opacity: 1, duration: 1.2, ease: "power3.out" }, 47.4);
|
||
|
|
tl.to("#s3d", { opacity: 1, duration: 1, ease: "power2.out" }, 50);
|
||
|
|
tl.to("#s3 .herb .leaf", { opacity: 0.9, duration: 12, ease: "sine.inOut" }, 47.5);
|
||
|
|
window.__timelines["main"] = tl;
|
||
|
|
</script>
|
||
|
|
</body></html>
|