92 lines
5.6 KiB
HTML
92 lines
5.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:#181008;color:#f4e9d4;font-family:"Georgia",serif}
|
||
|
|
#root{position:relative;width:1920px;height:1080px;overflow:hidden;background:#181008}
|
||
|
|
.clip{position:absolute;inset:0;display:grid;place-items:center}
|
||
|
|
.bg{position:absolute;inset:0}
|
||
|
|
/* hand-stenciled pantry-crate feel: cream paper, burlap, ink-stamp */
|
||
|
|
.paper{position:absolute;inset:0;background:
|
||
|
|
radial-gradient(ellipse at 30% 20%, #3a2815 0%, #181008 60%),
|
||
|
|
repeating-linear-gradient(45deg, rgba(244,233,212,0.02) 0 2px, transparent 2px 6px)}
|
||
|
|
.rule{position:absolute;left:0;right:0;height:2px;background:#c9a86a}
|
||
|
|
.linetop{top:110px}.linebot{bottom:110px}
|
||
|
|
.stamp{position:absolute;right:120px;top:140px;width:150px;height:150px;border:3px solid #8a6a3c;border-radius:12px;color:#8a6a3c;opacity:.55;display:grid;place-items:center;transform:rotate(-6deg)}
|
||
|
|
.stamp span{font-size:22px;letter-spacing:3px;text-transform:uppercase;line-height:1.4;text-align:center}
|
||
|
|
h1{font-weight:normal;font-size:88px;text-align:center;letter-spacing:1px;max-width:1500px}
|
||
|
|
h1 em{font-style:italic;color:#e0c98a}
|
||
|
|
p{font-size:60px;line-height:1.35;text-align:center;max-width:1500px;color:#efe2c8}
|
||
|
|
p .hot{color:#e8a04a;font-weight:bold}
|
||
|
|
p .cold{color:#9fc3d8;font-weight:bold}
|
||
|
|
.num{font-size:200px;color:#e0c98a;text-align:center;line-height:1}
|
||
|
|
.num small{display:block;font-size:40px;color:#c9a86a;letter-spacing:2px}
|
||
|
|
.chek{font-size:52px;color:#e8c98a;text-align:center}
|
||
|
|
.footer{position:absolute;bottom:130px;left:0;right:0;text-align:center;font-size:28px;color:#a08a5e;letter-spacing:1px}
|
||
|
|
</style></head>
|
||
|
|
<body>
|
||
|
|
<div id="root" data-composition-id="main" data-start="0" data-width="1920" data-height="1080" data-duration="78">
|
||
|
|
<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="30"></audio>
|
||
|
|
<audio id="voice-s4" src="audio/s4.wav" data-start="48"></audio>
|
||
|
|
<audio id="voice-s5" src="audio/s5.wav" data-start="62"></audio>
|
||
|
|
<audio id="bgm" src="audio/music.mp3" data-start="0" data-volume="0.16"></audio>
|
||
|
|
|
||
|
|
<!-- Scene 1 -->
|
||
|
|
<section id="s1" class="clip" data-start="0" data-duration="12" data-track-index="1">
|
||
|
|
<div class="bg paper"></div>
|
||
|
|
<div class="rule linetop"></div><div class="rule linebot"></div>
|
||
|
|
<div class="stamp"><span>her<br/>August</span></div>
|
||
|
|
<h1 id="s1-title" style="opacity:0">My grandmother water-bathed her green beans<br/>every August in this county.</h1>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Scene 2 -->
|
||
|
|
<section id="s2" class="clip" data-start="12" data-duration="18" data-track-index="1">
|
||
|
|
<div class="bg paper"></div>
|
||
|
|
<div class="rule linetop"></div><div class="rule linebot"></div>
|
||
|
|
<p id="s2-title" style="opacity:0">The low-acid line:</p>
|
||
|
|
<p id="s2-line" style="opacity:0;position:absolute;top:58%;width:1500px">High-acid fruit, pickles — the simmer is enough.<br/><span class="hot">Low-acid beans, corn, meat</span> — the spores sleep safe in the jar,<br/>and wake in the dark. Water can't touch them.</p>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Scene 3 -->
|
||
|
|
<section id="s3" class="clip" data-start="30" data-duration="18" data-track-index="1">
|
||
|
|
<div class="bg paper"></div>
|
||
|
|
<div class="rule linetop"></div><div class="rule linebot"></div>
|
||
|
|
<div id="s3-title" style="opacity:0;position:absolute;inset:0;display:grid;place-items:center;text-align:center">
|
||
|
|
<div>
|
||
|
|
<div class="num">240<small>pressure — 10 lb gauge</small></div>
|
||
|
|
<div class="num" style="font-size:90px;margin-top:-10px;color:#c98a5a">vs</div>
|
||
|
|
<div class="num" style="color:#9fc3d8">212<small>boiling water</small></div>
|
||
|
|
<p style="font-size:44px;margin-top:20px;color:#efe2c8">That 28 degrees is the whole line<br/>between safe and sorry.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Scene 4 -->
|
||
|
|
<section id="s4" class="clip" data-start="48" data-duration="14" data-track-index="1">
|
||
|
|
<div class="bg paper"></div>
|
||
|
|
<div class="rule linetop"></div><div class="rule linebot"></div>
|
||
|
|
<p id="s4-title" style="opacity:0">Up here at near 900 feet, we adjust.<br/>A weighted gauge has to rock.<br/>A dial gauge has to read true — check it every year.</p>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Scene 5 -->
|
||
|
|
<section id="s5" class="clip" data-start="62" data-duration="16" data-track-index="1">
|
||
|
|
<div class="bg paper"></div>
|
||
|
|
<div class="rule linetop"></div><div class="rule linebot"></div>
|
||
|
|
<p id="s5-title" style="opacity:0">Keep her beans. Keep her jars full.<br/>Just add what she didn't have: a gauge set right,<br/>and patience to let the dial do its job.<br/><span class="hot">That's how the whole Sunday table stays talking.</span></p>
|
||
|
|
<div class="footer">amanda-spletzer.4ort.net · Appalachian Canning Safety</div>
|
||
|
|
</section>
|
||
|
|
</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.5 }, 12.5);
|
||
|
|
tl.to("#s2-line", { opacity: 1, duration: 0.7 }, 13.5);
|
||
|
|
tl.to("#s3-title", { opacity: 1, duration: 0.5 }, 30.5);
|
||
|
|
tl.to("#s4-title", { opacity: 1, y: 0, duration: 0.7, ease: "power3.out" }, 48.5);
|
||
|
|
tl.to("#s5-title", { opacity: 1, y: 0, duration: 0.7, ease: "power3.out" }, 62.5);
|
||
|
|
window.__timelines["main"] = tl;
|
||
|
|
</script>
|
||
|
|
</body></html>
|