54 lines
3.6 KiB
HTML
54 lines
3.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:#f9f5eb;color:#2c2419;font-family:'Source Sans 3',Inter,system-ui,sans-serif}
|
||
|
|
#root{position:relative;width:1920px;height:1080px;overflow:hidden}
|
||
|
|
.clip{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:120px 160px;box-sizing:border-box}
|
||
|
|
h1{font-family:'Playfair Display',Georgia,serif;font-size:96px;line-height:1.1;margin:0;color:#2c2419;opacity:0;transform:translateY(40px)}
|
||
|
|
h2{font-family:'Source Sans 3',system-ui,sans-serif;font-size:44px;font-weight:400;line-height:1.5;margin:0;color:#5c4633;opacity:0;transform:translateY(30px)}
|
||
|
|
.rule{width:220px;height:6px;background:#8b5e3c;margin:48px auto;opacity:0}
|
||
|
|
.receipt{background:#fffdf6;border:2px solid #8b5e3c;width:640px;padding:48px 56px;text-align:left;font-family:'Courier New',monospace;font-size:34px;line-height:1.9;box-shadow:8px 8px 0 #e8d9c2;opacity:0;transform:scale(.96)}
|
||
|
|
.receipt .tot{font-weight:bold;border-top:2px dashed #8b5e3c;margin-top:24px;padding-top:20px}
|
||
|
|
.line{display:flex;justify-content:space-between}
|
||
|
|
.tag{font-family:'Playfair Display',Georgia,serif;font-size:30px;letter-spacing:2px;color:#8b5e3c;text-transform:uppercase;margin-bottom:24px;opacity:0}
|
||
|
|
</style></head>
|
||
|
|
<body>
|
||
|
|
<div id="root" data-composition-id="main" data-start="0" data-width="1920" data-height="1080" data-duration="58">
|
||
|
|
<section id="s1" class="clip" data-start="0" data-duration="12" data-track-index="1">
|
||
|
|
<div>
|
||
|
|
<div class="tag">Atascosa County · Pleasanton, TX</div>
|
||
|
|
<h1 id="s1-title">Every receipt is a story</h1>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<section id="s2" class="clip" data-start="12" data-duration="15" data-track-index="1">
|
||
|
|
<h2 id="s2-title">People hand me spreadsheets like they're handing me a burden.<br/>But the lines aren't numbers — they're a family's truth in miniature.</h2>
|
||
|
|
</section>
|
||
|
|
<section id="s3" class="clip" data-start="27" data-duration="16" data-track-index="1">
|
||
|
|
<div class="receipt" id="s3-receipt">
|
||
|
|
<div class="line"><span>kale, row of</span><span>—</span></div>
|
||
|
|
<div class="line"><span>carnitas, domingo</span><span>$6.50</span></div>
|
||
|
|
<div class="line"><span>cuota de soccer</span><span>$18.00</span></div>
|
||
|
|
<div class="line"><span>abuela's photo, reprint</span><span>$3.20</span></div>
|
||
|
|
<div class="tot line"><span>what you protect</span><span>todo</span></div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<section id="s4" class="clip" data-start="43" data-duration="15" data-track-index="1">
|
||
|
|
<h2 id="s4-title">We don't budget to restrict. We budget so no one<br/>is left off the page. La cuenta es cuidado.</h2>
|
||
|
|
</section>
|
||
|
|
<audio id="voice-s1" src="audio/s1.wav" data-start="0"></audio>
|
||
|
|
<audio id="voice-s2" src="audio/s2.wav" data-start="12"></audio>
|
||
|
|
<audio id="voice-s3" src="audio/s3.wav" data-start="27"></audio>
|
||
|
|
<audio id="voice-s4" src="audio/s4.wav" data-start="43"></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.to("#s1-title", { opacity: 1, y: 0, duration: 0.8, ease: "power3.out" }, 0.4);
|
||
|
|
tl.to("#s2-title", { opacity: 1, y: 0, duration: 0.8, ease: "power3.out" }, 12.4);
|
||
|
|
tl.to("#s3-receipt", { opacity: 1, scale: 1, duration: 0.7, ease: "power3.out" }, 27.4);
|
||
|
|
tl.to("#s4-title", { opacity: 1, y: 0, duration: 0.8, ease: "power3.out" }, 43.4);
|
||
|
|
window.__timelines["main"] = tl;
|
||
|
|
</script>
|
||
|
|
</body></html>
|