81 lines
5.4 KiB
HTML
81 lines
5.4 KiB
HTML
<!doctype html>
|
|
<html><head>
|
|
<meta name="description" content="POPLAR GROVE · 7:40 AM The Pantry Hour before the doors open We sort by what a family actually needs — not by what's easiest to stack. No one should have…"><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:#16100a;color:#f4ead9;font-family:Georgia,serif}
|
|
#root{position:relative;width:1920px;height:1080px;overflow:hidden;background:#16100a}
|
|
.clip{position:absolute;inset:0;display:grid;place-items:center}
|
|
.bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0}
|
|
.overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,16,10,0.25),rgba(22,16,10,0.80))}
|
|
.title{position:relative;text-align:center;padding:0 160px}
|
|
.title h1{font-size:118px;font-weight:normal;letter-spacing:1px;margin:0;line-height:1.1;opacity:0}
|
|
.title .kicker{font-family:Georgia,serif;font-style:italic;font-size:34px;letter-spacing:4px;color:#d9a05b;margin-bottom:18px;opacity:0}
|
|
.title p{font-size:40px;font-style:italic;color:#d9c9b2;margin:22px 0 0;opacity:0}
|
|
.rule{width:140px;height:3px;background:#d9a05b;margin:26px auto 0;opacity:0}
|
|
.bigword{position:relative;font-size:104px;line-height:1.18;text-align:center;padding:0 200px;opacity:0}
|
|
.endmark{position:relative;font-size:82px;line-height:1.15;text-align:center;padding:0 200px;opacity:0}
|
|
.credit{position:absolute;bottom:56px;width:100%;text-align:center;font-size:26px;letter-spacing:3px;color:#d9a05b;opacity:0}
|
|
</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="62">
|
|
<!-- Scene 1: Dawn at the donation shelf -->
|
|
<section id="s1" class="clip" data-start="0" data-duration="15" data-track-index="1">
|
|
<div class="bg" style="background-image:url('https://images.pexels.com/photos/16211537/pexels-photo-16211537.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940')"></div>
|
|
<div class="overlay"></div>
|
|
<div class="title">
|
|
<div class="kicker">POPLAR GROVE · 7:40 AM</div>
|
|
<h1>The Pantry Hour</h1>
|
|
<div class="rule"></div>
|
|
<p>before the doors open</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Scene 2: Sorting with care / the friendly bins -->
|
|
<section id="s2" class="clip" data-start="15" data-duration="16" data-track-index="1">
|
|
<div class="bg" style="background-image:url('https://images.pexels.com/photos/17677899/pexels-photo-17677899.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940')"></div>
|
|
<div class="overlay"></div>
|
|
<div class="bigword">We sort by what a family actually needs — not by what's easiest to stack.</div>
|
|
</section>
|
|
|
|
<!-- Scene 3: The table / a loaf, dignity -->
|
|
<section id="s3" class="clip" data-start="31" data-duration="16" data-track-index="1">
|
|
<div class="bg" style="background-image:url('https://images.pexels.com/photos/36202913/pexels-photo-36202913.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940')"></div>
|
|
<div class="overlay"></div>
|
|
<div class="bigword">No one should have to choose between a bill and a warm loaf.</div>
|
|
</section>
|
|
|
|
<!-- Scene 4: The rhythm of the week -->
|
|
<section id="s4" class="clip" data-start="47" data-duration="15" data-track-index="1">
|
|
<div class="bg" style="background-image:url('https://images.pexels.com/photos/6994944/pexels-photo-6994944.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940')"></div>
|
|
<div class="overlay"></div>
|
|
<div class="endmark">A pantry is just a table.<br/>What makes it a home is who pulls up a chair.</div>
|
|
<div class="credit">angeline-thomas.4ort.net</div>
|
|
</section>
|
|
|
|
<audio id="voice-s1" src="audio/s1.wav" data-start="0"></audio>
|
|
<audio id="voice-s2" src="audio/s2.wav" data-start="15"></audio>
|
|
<audio id="voice-s3" src="audio/s3.wav" data-start="31"></audio>
|
|
<audio id="voice-s4" src="audio/s4.wav" data-start="47"></audio>
|
|
<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 });
|
|
tl.to("#s1 .kicker", { opacity:1, y:0, duration:0.8, ease:"power2.out" }, 0.6);
|
|
tl.to("#s1 h1", { opacity:1, y:0, duration:1, ease:"power3.out" }, 1.2);
|
|
tl.to("#s1 .rule", { opacity:1, duration:0.9, ease:"power2.out" }, 2.4);
|
|
tl.to("#s1 p", { opacity:1, y:0, duration:0.8 }, 3.2);
|
|
tl.to("#s1 .bg", { opacity:1, scale:1.06, duration:6, ease:"power1.out" }, 3.8);
|
|
tl.to("#s1 .title", { y:-18, opacity:0.9, duration:2, ease:"power1.in" }, 12.5);
|
|
tl.to("#s2 .bg", { opacity:1, scale:1.06, duration:6, ease:"power1.out" }, 15.3);
|
|
tl.fromTo("#s2 .bigword", { opacity:0, y:36 }, { opacity:1, y:0, duration:1.2 }, 16.2);
|
|
tl.to("#s3 .bg", { opacity:1, scale:1.06, duration:6, ease:"power1.out" }, 31.3);
|
|
tl.fromTo("#s3 .bigword", { opacity:0, y:36 }, { opacity:1, y:0, duration:1.2 }, 32.2);
|
|
tl.to("#s4 .bg", { opacity:1, scale:1.06, duration:6, ease:"power1.out" }, 47.3);
|
|
tl.fromTo("#s4 .endmark", { opacity:0, y:36 }, { opacity:1, y:0, duration:1.4 }, 49);
|
|
tl.to("#s4 .credit", { opacity:1, duration:1.2 }, 54);
|
|
window.__timelines["main"] = tl;
|
|
</script>
|
|
</body></html> |