91 lines
4.7 KiB
HTML
91 lines
4.7 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:#10131a;color:#d8dde6;font-family:Inter,system-ui,sans-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}
|
|
/* terminal aesthetic — green-on-dark, like the scanner's own display */
|
|
.term{position:absolute;width:1200px;padding:40px 56px;background:#0a0e14;border:1px solid #1c2a22;border-radius:4px;font-family:'JetBrains Mono','Roboto Mono',monospace}
|
|
.termhead{color:#5a6b5a;font-size:22px;letter-spacing:2px;margin-bottom:24px}
|
|
.termhead::before{content:'> ';color:#2fae4f}
|
|
.line{font-size:40px;line-height:1.5;color:#d8dde6}
|
|
.good{color:#2fae4f}
|
|
.bad{color:#d9534f}
|
|
.dim{color:#6b7a74}
|
|
.hl{color:#e0b94c}
|
|
.cursor{display:inline-block;width:18px;height:40px;background:#2fae4f;vertical-align:-6px;animation:blink 1s steps(2) infinite}
|
|
@keyframes blink{50%{opacity:0}}
|
|
.big{font-size:96px;font-weight:700;letter-spacing:1px}
|
|
.grid{position:absolute;inset:0;background-image:linear-gradient(rgba(47,174,79,0.05) 1px,transparent 1px),linear-gradient(90deg,rgba(47,174,79,0.05) 1px,transparent 1px);background-size:60px 60px}
|
|
</style></head>
|
|
<body>
|
|
<div id="root" data-composition-id="main" data-start="0" data-width="1920" data-height="1080" data-duration="54">
|
|
<div class="grid"></div>
|
|
|
|
<!-- SCENE 1: the beep -->
|
|
<section id="s1" class="clip" data-start="0" data-duration="14" data-track-index="1">
|
|
<div class="term">
|
|
<div class="termhead">CAGE / COUNT GUN / 3:00 AM</div>
|
|
<div class="line" id="s1-a">SCAN <span class="good">BEEP</span></div>
|
|
<div class="line dim" id="s1-b">resolved 00001412 qty 24</div>
|
|
<div class="line dim" id="s1-c">on-hand 24 sys 24</div>
|
|
<div class="cursor"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- SCENE 2: the flat thunk -->
|
|
<section id="s2" class="clip" data-start="14" data-duration="16" data-track-index="1">
|
|
<div class="term">
|
|
<div class="termhead">CAGE / COUNT GUN / SAME U.P.C.</div>
|
|
<div class="line" id="s2-a">SCAN <span class="bad">THUNK</span></div>
|
|
<div class="line dim" id="s2-b">resolved 00001412 qty 23</div>
|
|
<div class="line bad" id="s2-c">variance -1 $6.49</div>
|
|
<div class="line dim" id="s2-d">recheck required</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- SCENE 3: the recheck -->
|
|
<section id="s3" class="clip" data-start="30" data-duration="13" data-track-index="1">
|
|
<div class="term">
|
|
<div class="termhead">THE ONLY NUMBER THAT MATTERS</div>
|
|
<div class="line" id="s3-a" style="font-size:64px;line-height:1.3">90% recheck.<br><span class="dim" id="s3-b">10% talent.</span></div>
|
|
<div class="line dim" id="s3-c">rescan the slot. check the back.</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- SCENE 4: off duty -->
|
|
<section id="s4" class="clip" data-start="43" data-duration="11" data-track-index="1">
|
|
<div class="term">
|
|
<div class="termhead hl">OFF DUTY</div>
|
|
<div class="line hl big" id="s4-a">ONE MORE PASS</div>
|
|
<div class="line dim" id="s4-b">the beep is a floor, not a ceiling</div>
|
|
</div>
|
|
</section>
|
|
|
|
<audio id="voice-s1" src="audio/s1.wav" data-start="1"></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="44"></audio>
|
|
<audio id="bgm" src="audio/music.mp3" data-start="0" data-volume="0.12"></audio>
|
|
|
|
<script>
|
|
window.__timelines = window.__timelines || {};
|
|
const tl = gsap.timeline({ paused: true });
|
|
tl.from("#s1-a", { opacity: 0, x: 30, duration: 0.5, ease: "power1.out" }, 1.2);
|
|
tl.from("#s1-b", { opacity: 0, duration: 0.4 }, 2.8);
|
|
tl.from("#s1-c", { opacity: 0, duration: 0.4 }, 4.0);
|
|
tl.from("#s2-a", { opacity: 0, x: 30, duration: 0.5, ease: "power1.out" }, 15.2);
|
|
tl.from("#s2-b", { opacity: 0, duration: 0.4 }, 17.0);
|
|
tl.from("#s2-c", { opacity: 0, scale: 0.96, duration: 0.5 }, 18.6);
|
|
tl.from("#s2-d", { opacity: 0, duration: 0.4 }, 21.0);
|
|
tl.from("#s3-a", { opacity: 0, y: 24, duration: 0.6 }, 31.2);
|
|
tl.from("#s3-b", { opacity: 0, duration: 0.5 }, 32.8);
|
|
tl.from("#s3-c", { opacity: 0, duration: 0.4 }, 34.6);
|
|
tl.from("#s4-a", { opacity: 0, letterSpacing: "8px", duration: 0.7 }, 44.2);
|
|
tl.from("#s4-b", { opacity: 0, duration: 0.5 }, 46.0);
|
|
window.__timelines["main"] = tl;
|
|
</script>
|
|
</div>
|
|
</body></html> |