publish: audrey-garden-safety
This commit is contained in:
audrey-zazulia
parent
18284915bc
commit
340439abfe
19
films/garden-heat-check/hyperframe.json
Normal file
19
films/garden-heat-check/hyperframe.json
Normal file
@ -0,0 +1,19 @@
|
||||
{
|
||||
"captions": true,
|
||||
"voice": "af_nova",
|
||||
"music_url": "https://4ort.live/v1/mtv/video/5dd402a85ed1?download=1",
|
||||
"scenes": [
|
||||
{
|
||||
"id": "s1",
|
||||
"narration": "Thirty years in the warehouse taught me one thing I carry into every garden bed: the body is a machine, and machines need a warm-up before they work."
|
||||
},
|
||||
{
|
||||
"id": "s2",
|
||||
"narration": "A Georgia July puts heat in the soil and stiffness in the knees. Same rule as the loading dock: start light. Walk the edge of the bed, loosen your fingers, bend at the hips, not the back."
|
||||
},
|
||||
{
|
||||
"id": "s3",
|
||||
"narration": "Check your edges the way we checked valves. Gloves on, water within reach, shade planned for the hottest hour. Ten minutes of stretching on the porch beats three days of a pulled lower back."
|
||||
}
|
||||
]
|
||||
}
|
||||
82
films/garden-heat-check/index.html
Normal file
82
films/garden-heat-check/index.html
Normal file
@ -0,0 +1,82 @@
|
||||
<!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:#2e3d2a;color:#f4ead8;font-family:Georgia,serif}
|
||||
#root{position:relative;width:1920px;height:1080px;overflow:hidden}
|
||||
.clip{position:absolute;inset:0;display:grid;place-items:center}
|
||||
.bg{position:absolute;inset:0}
|
||||
.card{position:relative;max-width:1500px;padding:70px 90px}
|
||||
.kicker{font-family:monospace;letter-spacing:.25em;text-transform:uppercase;font-size:26px;color:#c9a86a}
|
||||
h1{font-size:82px;line-height:1.12;margin:22px 0 0;font-weight:normal}
|
||||
.body{font-size:42px;line-height:1.35;color:#d9cfb5;margin-top:26px;max-width:1380px}
|
||||
.rule{width:120px;height:6px;background:#c9a86a;border:none;margin:30px 0 0}
|
||||
.narrow{max-width:1180px}
|
||||
.stroke{position:absolute;background:#5a7250;opacity:.35}
|
||||
/* scene 1 — flat garden-edge line art */
|
||||
#s1 .bg{background:linear-gradient(180deg,#3b4a34 0%,#4d6343 100%)}
|
||||
#s1 .sun{position:absolute;left:150px;top:130px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,#e7c98a,#c9a86a 65%);opacity:.7}
|
||||
#s1 .edge{position:absolute;left:0;right:0;bottom:160px;height:380px;background:linear-gradient(180deg,#5f7652,#47603e)}
|
||||
#s1 .mulch{position:absolute;left:0;right:0;bottom:160px;height:64px;background:#5b4632}
|
||||
/* scene 2 — bent-knee sticks figure as drawn marks */
|
||||
#s2 .bg{background:linear-gradient(180deg,#41503a 0%,#556a4a 100%)}
|
||||
#s2 .bed{position:absolute;left:0;right:0;bottom:0;height:420px;background:#5f7652}
|
||||
#s2 .rows{position:absolute;left:0;right:0;bottom:200px;height:90px;background:repeating-linear-gradient(90deg,#6d8559 0 60px,#5a7149 60px 120px);opacity:.5}
|
||||
#s2 .mark{position:absolute;left:300px;bottom:300px}
|
||||
/* scene 3 — check list, valve-check echo */
|
||||
#s3 .bg{background:linear-gradient(180deg,#354330 0%,#4a5d3f 100%)}
|
||||
#s3 .card{max-width:1500px}
|
||||
.check-row{display:flex;align-items:center;gap:40px;margin-top:36px;font-size:40px;color:#d9cfb5;font-family:monospace}
|
||||
.check-box{width:56px;height:56px;border:5px solid #c9a86a;border-radius:4px;flex-shrink:0}
|
||||
</style></head>
|
||||
<body>
|
||||
<div id="root" data-composition-id="main" data-start="0" data-width="1920" data-height="1080" data-duration="47">
|
||||
<section id="s1" class="clip" data-start="0" data-duration="14" data-track-index="1">
|
||||
<div class="bg"><div class="sun"></div><div class="mulch"></div><div class="edge"></div></div>
|
||||
<div class="card narrow">
|
||||
<div class="kicker">Audrey Zazulia · safety field note</div>
|
||||
<h1 id="s1-title">The body is a machine.<br/>Warm it up before you weed.</h1>
|
||||
<div class="rule"></div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="s2" class="clip" data-start="14" data-duration="17" data-track-index="1">
|
||||
<div class="bg"><div class="rows"></div><div class="bed"></div></div>
|
||||
<div class="card">
|
||||
<div class="kicker">Georgia July, the loading-dock rule</div>
|
||||
<h1 id="s2-title">Start light. Bend at the hips, not the back.</h1>
|
||||
<div class="body" id="s2-body">Heat in the soil, stiffness in the knees. Walk the bed edge, loosen every finger, save the deep work for the cool hour.</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="s3" class="clip" data-start="31" data-duration="16" data-track-index="1">
|
||||
<div class="bg"></div>
|
||||
<div class="card">
|
||||
<div class="kicker">Edge check, like valves</div>
|
||||
<h1 id="s3-title">Three things before you bend over.</h1>
|
||||
<div class="check-row"><div class="check-box"></div><span>Gloves on, wrist loose</span></div>
|
||||
<div class="check-row"><div class="check-box"></div><span>Water within arm's reach</span></div>
|
||||
<div class="check-row"><div class="check-box"></div><span>Shade planned for the hottest hour</span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<audio id="voice-s1" src="audio/s1.wav" data-start="0"></audio>
|
||||
<audio id="voice-s2" src="audio/s2.wav" data-start="14"></audio>
|
||||
<audio id="voice-s3" src="audio/s3.wav" data-start="31"></audio>
|
||||
<audio id="bgm" src="audio/music.mp3" data-start="0" data-volume="0.15"></audio>
|
||||
|
||||
<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.3);
|
||||
tl.fromTo("#s1 .sun", { opacity: 0 }, { opacity: 0.7, duration: 2, ease: "power1.out" }, 0.8);
|
||||
tl.from("#s1 .mulch", { y: 60, opacity: 0, duration: 1.2, ease: "power2.out" }, 2.0);
|
||||
tl.to("#s1", { opacity: 0, duration: 0.6 }, 13.2);
|
||||
tl.from("#s2-title", { opacity: 0, y: 40, duration: 0.9, ease: "power3.out" }, 14.4);
|
||||
tl.from("#s2-body", { opacity: 0, y: 30, duration: 0.9, ease: "power2.out" }, 15.2);
|
||||
tl.fromTo("#s2 .rows", { x: -80 }, { x: 0, duration: 8, ease: "power1.out" }, 14.4);
|
||||
tl.to("#s2", { opacity: 0, duration: 0.6 }, 30.2);
|
||||
tl.from("#s3-title", { opacity: 0, y: 40, duration: 0.9, ease: "power3.out" }, 31.4);
|
||||
tl.from(".check-row", { opacity: 0, x: -60, stagger: 0.5, duration: 0.7, ease: "power2.out" }, 32.2);
|
||||
tl.fromTo(".check-box", { opacity: 0.2 }, { opacity: 1, stagger: 0.5, duration: 0.5 }, 33.0);
|
||||
window.__timelines["main"] = tl;
|
||||
</script>
|
||||
</body></html>
|
||||
Loading…
Reference in New Issue
Block a user