publish: b-dimauro-impala-inertia
This commit is contained in:
b-dimauro
commit
df079bfe48
11
README.md
Normal file
11
README.md
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
# b-dimauro-impala-inertia
|
||||||
|
|
||||||
|
A narrated short: listen-before-you-touch discipline from restoring a frozen '65 Impala, tied to warehouse red-band safety and Apollo 1201.
|
||||||
|
|
||||||
|
**Live demo:** https://b-dimauro.4ort.net/films/impala-inertia/
|
||||||
|
|
||||||
|
## Related in the galaxy
|
||||||
|
|
||||||
|
- https://b-dimauro.4ort.net
|
||||||
|
|
||||||
|
_Built by b-dimauro in the 4ort galaxy._
|
||||||
23
hyperframe.json
Normal file
23
hyperframe.json
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
{
|
||||||
|
"captions": true,
|
||||||
|
"voice": "af_nova",
|
||||||
|
"music_url": "https://4ort.live/v1/mtv/video/94228fe0a009?download=1",
|
||||||
|
"scenes": [
|
||||||
|
{
|
||||||
|
"id": "s1",
|
||||||
|
"narration": "They say a sixty-five Impala holds its quiet like a man who's learned not to shout. Mine came to me half-dead, block frozen, three decades of salt and neglect. And the first lesson of any restoration is the same one I teach every kid who pulls a pallet truck in my warehouse: listen before you touch."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "s2",
|
||||||
|
"narration": "A seized engine talks in little ways — a brake-drum rasp that says shoes are thin, an exhaust note that's off by half a beat. You don't trust the paper, and you don't trust the memory. You listen, and you mark the hazard in red so nobody has to remember it's live."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "s3",
|
||||||
|
"narration": "Apollo twelve, one twenty one — a master alarm blinking at the crew through the noise. Good systems are legible at a glance. So is a torque wrench when it clicks, so is a bearing when it first complains. The machine tells you what it needs if you haven't already decided what it should say."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "s4",
|
||||||
|
"narration": "The Impala fired on the third turn of the key. Not a roar — a settle, a deep unhurried hum. That's the sound of things done in order, patiently, in the right sequence. Inertia becomes momentum when you take it slow and listen all the way down."
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
111
index.html
Normal file
111
index.html
Normal file
@ -0,0 +1,111 @@
|
|||||||
|
<!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:#0b0f14;color:#fff;font-family:Inter,system-ui,sans-serif}
|
||||||
|
#root{position:relative;width:1920px;height:1080px;overflow:hidden;background:#0b0f14}
|
||||||
|
.clip{position:absolute;inset:0;display:grid;place-items:center}
|
||||||
|
.bg{position:absolute;inset:0}
|
||||||
|
/* shared text */
|
||||||
|
.bar{font-family:'Courier New',monospace;letter-spacing:.08em}
|
||||||
|
/* scene 4: common for bg base */
|
||||||
|
.gear-line{position:absolute;height:1px;background:#3a2f22;left:0;right:0}
|
||||||
|
.amber{color:#e8a33d}
|
||||||
|
.steel{color:#b9c0c7}
|
||||||
|
</style></head>
|
||||||
|
<body>
|
||||||
|
<div id="root" data-composition-id="main" data-start="0" data-width="1920" data-height="1080" data-duration="80">
|
||||||
|
|
||||||
|
<!-- background fixtures across all scenes: garage frame -->
|
||||||
|
<div class="bg" style="background:
|
||||||
|
linear-gradient(#0b0f14,#0b0f14 60%,#120f0a 100%);">
|
||||||
|
<div class="gear-line" style="top:120px;background:#241e15"></div>
|
||||||
|
<div class="gear-line" style="top:140px;background:#1a150e"></div>
|
||||||
|
<div class="gear-line" style="bottom:200px;background:#241e15"></div>
|
||||||
|
<div class="gear-line" style="bottom:180px;background:#1a150e"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- S1: frozen block, faint Georgia badge silhouette -->
|
||||||
|
<section id="s1" class="clip" data-start="0" data-duration="24" data-track-index="1">
|
||||||
|
<div style="position:relative;text-align:center">
|
||||||
|
<div id="s1-badge" style="font-family:'Courier New',monospace;font-size:64px;letter-spacing:.2em;color:#2c323a">IMPALA</div>
|
||||||
|
<div id="s1-sub" style="font-family:'Courier New',monospace;font-size:26px;letter-spacing:.14em;color:#8a8f96;margin-top:26px">1965 · TWO-DOOR · 409cu IN</div>
|
||||||
|
<div id="s1-line" style="width:260px;height:3px;background:#e8a33d;margin:40px auto 0"></div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- S2: the brake drum / hazard red band scene -->
|
||||||
|
<section id="s2" class="clip" data-start="24" data-duration="18" data-track-index="1">
|
||||||
|
<div style="position:relative;text-align:center">
|
||||||
|
<svg width="520" height="240" viewBox="0 0 520 240">
|
||||||
|
<circle cx="160" cy="120" r="90" fill="none" stroke="#3a414a" stroke-width="10"/>
|
||||||
|
<circle cx="160" cy="120" r="66" fill="none" stroke="#2a3036" stroke-width="4"/>
|
||||||
|
<circle cx="160" cy="120" r="12" fill="#e8a33d"/>
|
||||||
|
<!-- red hazard band -->
|
||||||
|
<rect x="300" y="70" width="170" height="14" rx="7" fill="#c0392b"/>
|
||||||
|
<rect x="300" y="120" width="170" height="14" rx="7" fill="#c0392b"/>
|
||||||
|
<rect x="300" y="170" width="170" height="14" rx="7" fill="#c0392b"/>
|
||||||
|
<text x="300" y="58" fill="#c0473b" font-family="'Courier New',monospace" font-size="18" letter-spacing="4">LIVE · MARKED</text>
|
||||||
|
</svg>
|
||||||
|
<div id="s2-cap" class="bar" style="font-size:30px;color:#b9c0c7;letter-spacing:.14em;margin-top:24px">LISTEN, THEN MARK THE HAZARD</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- S3: the master alarm / gauge scene -->
|
||||||
|
<section id="s3" class="clip" data-start="42" data-duration="20" data-track-index="1">
|
||||||
|
<div style="position:relative;text-align:center">
|
||||||
|
<svg width="560" height="260" viewBox="0 0 560 260">
|
||||||
|
<!-- gauge -->
|
||||||
|
<circle cx="200" cy="130" r="96" fill="#10141a" stroke="#3a414a" stroke-width="8"/>
|
||||||
|
<path d="M 130 130 A 70 70 0 0 1 250 130" fill="none" stroke="#e8a33d" stroke-width="6" stroke-linecap="round"/>
|
||||||
|
<line x1="200" y1="130" x2="178" y2="78" stroke="#b9c0c7" stroke-width="4" stroke-linecap="round"/>
|
||||||
|
<circle cx="200" cy="130" r="8" fill="#b9c0c7"/>
|
||||||
|
<!-- alarm ticker column -->
|
||||||
|
<rect x="360" y="60" width="140" height="14" rx="3" fill="#c0392b"/>
|
||||||
|
<rect x="360" y="92" width="140" height="14" rx="3" fill="#3a414a"/>
|
||||||
|
<rect x="360" y="124" width="98" height="14" rx="3" fill="#3a414a"/>
|
||||||
|
<text x="360" y="50" fill="#c0473b" font-family="'Courier New',monospace" font-size="17" letter-spacing="3">1201</text>
|
||||||
|
<text x="360" y="170" fill="#8a8f96" font-family="'Courier New',monospace" font-size="16" letter-spacing="2">LEGIBLE AT A GLANCE</text>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- S4: ignition, the settle -->
|
||||||
|
<section id="s4" class="clip" data-start="62" data-duration="18" data-track-index="1">
|
||||||
|
<div style="position:relative;text-align:center">
|
||||||
|
<div id="s4-hum" style="font-family:'Courier New',monospace;font-size:38px;letter-spacing:.16em;color:#e8a33d">THE TURN OF THE KEY</div>
|
||||||
|
<div id="s4-sub" class="bar" style="font-size:26px;letter-spacing:.12em;color:#b9c0c7;margin-top:34px;max-width:1000px;line-height:1.5">THE THIRD TURN · A SETTLE · NOT A ROAR</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="24"></audio>
|
||||||
|
<audio id="voice-s3" src="audio/s3.wav" data-start="42"></audio>
|
||||||
|
<audio id="voice-s4" src="audio/s4.wav" data-start="62"></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 });
|
||||||
|
|
||||||
|
// S1
|
||||||
|
tl.from("#s1-badge", { opacity: 0, y: 30, duration: 1.2, ease: "power3.out" }, 0.6);
|
||||||
|
tl.from("#s1-sub", { opacity: 0, y: 18, duration: 0.9, ease: "power1.out" }, 2.3);
|
||||||
|
tl.from("#s1-line", { scaleX: 0, duration: 0.8, ease: "power1.out" }, 3.2);
|
||||||
|
tl.to("#s1-sub", { opacity: 0.25, duration: 1.2, ease: "power1.out" }, 20);
|
||||||
|
|
||||||
|
// S2
|
||||||
|
tl.from("#s2-cap", { opacity: 0, y: 16, duration: 0.8 }, 24.6);
|
||||||
|
tl.to("#s2-cap", { opacity: 0.25, duration: 1.0 }, 40);
|
||||||
|
|
||||||
|
// S3
|
||||||
|
tl.from("#s3 svg", { opacity: 0, scale: 1.04, duration: 1.0, ease: "power1.out" }, 42.4);
|
||||||
|
|
||||||
|
// S4
|
||||||
|
tl.from("#s4-hum", { opacity: 0, filter: "blur(6px)", scale: 1.02, duration: 1.4, ease: "power2.out" }, 63);
|
||||||
|
tl.from("#s4-sub", { opacity: 0, y: 16, duration: 0.9, ease: "power1.out" }, 65);
|
||||||
|
|
||||||
|
window.__timelines["main"] = tl;
|
||||||
|
</script>
|
||||||
|
</body></html>
|
||||||
Loading…
Reference in New Issue
Block a user