68 lines
5.0 KiB
HTML
68 lines
5.0 KiB
HTML
|
<!doctype html>
|
||
|
|
<html><head>
|
||
|
|
<meta name="description" content="Second Sowing · Third Ward, Houston Before the sun clears the pecan, I am in the dirt. Mulch is a blanket that breathes. Cool the root, and the water…"><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:#241a12;color:#f3e9d7;font-family:Georgia,serif}
|
||
|
|
#root{position:relative;width:1920px;height:1080px;overflow:hidden;background:#241a12}
|
||
|
|
.clip{position:absolute;inset:0;display:grid;place-items:center}
|
||
|
|
.bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0.9}
|
||
|
|
.veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,14,8,0.15),rgba(20,14,8,0.75))}
|
||
|
|
.kicker{font-family:Georgia,serif;font-style:italic;letter-spacing:0.14em;text-transform:uppercase;
|
||
|
|
font-size:34px;color:#c9a86a;position:absolute;top:70px;left:120px}
|
||
|
|
.title{font-size:104px;font-weight:bold;color:#f3e9d7;line-height:1.05;position:relative;
|
||
|
|
max-width:1500px;text-align:left;padding:0 120px}
|
||
|
|
.word{position:relative;padding:0 120px;font-size:52px;line-height:1.5;color:#f3e9d7;max-width:1600px}
|
||
|
|
.accent{color:#c9a86a;font-style:italic}
|
||
|
|
.bigword{font-size:120px;font-weight:bold;line-height:1.1;color:#f3e9d7;padding:0 120px;position:relative;max-width:1600px}
|
||
|
|
.moral{font-size:48px;font-style:italic;color:#e6d7bb;padding:0 120px;position:relative;max-width:1500px;line-height:1.4}
|
||
|
|
</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="96">
|
||
|
|
<section id="s1" class="clip" data-start="0" data-duration="26" data-track-index="1">
|
||
|
|
<div class="bg" style="background-image:url('https://images.pexels.com/photos/27177504/pexels-photo-27177504.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940')"></div>
|
||
|
|
<div class="veil"></div>
|
||
|
|
<div class="kicker">Second Sowing · Third Ward, Houston</div>
|
||
|
|
<div class="title" id="s1-title">Before the sun clears the pecan, I am in the dirt.</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section id="s2" class="clip" data-start="26" data-duration="22" data-track-index="1">
|
||
|
|
<div class="bg" style="background-image:url('https://pixabay.com/get/g0218e7000933e0134e27a36074172fc5f60d308ca03a7b1ebedac6f00b6978775c3a7f1b0bccdbdd862f6658e7cde3cacbf9b406cfe687c2d96437830ddb3937_1280.jpg')"></div>
|
||
|
|
<div class="veil"></div>
|
||
|
|
<div class="bigword" id="s2-word">Mulch is a blanket that breathes.</div>
|
||
|
|
<div class="word" id="s2-sub" style="position:absolute;top:680px">Cool the root, and the water stays. <span class="accent">Patience made physical.</span></div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section id="s3" class="clip" data-start="48" data-duration="22" data-track-index="1">
|
||
|
|
<div class="veil" style="background:linear-gradient(180deg,#1d150c,#2c2014)"></div>
|
||
|
|
<div class="word" id="s3-word" style="padding-top:60px">A garden is a ledger with two columns.</div>
|
||
|
|
<div class="moral" id="s3-sub" style="position:absolute;top:700px">Water in on the left — <span class="accent">tomatoes and collards and okra</span> answer back on the right.</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section id="s4" class="clip" data-start="70" data-duration="26" data-track-index="1">
|
||
|
|
<div class="bg" style="background-image:url('https://images.pexels.com/photos/5864220/pexels-photo-5864220.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940')"></div>
|
||
|
|
<div class="veil"></div>
|
||
|
|
<div class="bigword" id="s4-word">The fair-weather gardeners quit in August.</div>
|
||
|
|
<div class="moral" id="s4-sub" style="position:absolute;top:720px">We stay. Water today for a harvest the front yard cannot see yet. <span class="accent">It always comes.</span></div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<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="48"></audio>
|
||
|
|
<audio id="voice-s4" src="audio/s4.wav" data-start="70"></audio>
|
||
|
|
<audio id="bgm" src="audio/music.mp3" data-start="0" data-volume="0.15"></audio>
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
window.__timelines = window.__timelines || {};
|
||
|
|
const tl = gsap.timeline({ paused: true });
|
||
|
|
tl.from("#s1-title", { opacity: 0, y: 40, duration: 1.0, ease: "power3.out" }, 0.6);
|
||
|
|
tl.from("#s2-word", { opacity: 0, y: 30, duration: 0.8, ease: "power3.out" }, 26.6);
|
||
|
|
tl.from("#s2-sub", { opacity: 0, y: 20, duration: 0.7, ease: "power2.out" }, 27.2);
|
||
|
|
tl.from("#s3-word", { opacity: 0, y: 60, duration: 1.0, ease: "power3.out" }, 48.6);
|
||
|
|
tl.from("#s3-sub", { opacity: 0, y: 30, duration: 0.8, ease: "power2.out" }, 49.4);
|
||
|
|
tl.from("#s4-word", { opacity: 0, y: 40, duration: 0.9, ease: "power3.out" }, 70.6);
|
||
|
|
tl.from("#s4-sub", { opacity: 0, y: 24, duration: 0.8, ease: "power2.out" }, 71.4);
|
||
|
|
window.__timelines["main"] = tl;
|
||
|
|
</script>
|
||
|
|
</body></html>
|