82 lines
5.0 KiB
HTML
82 lines
5.0 KiB
HTML
|
<!doctype html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta name="description" content="412 WINTER 1984 — KENTUCKY RIDGE 411 ONE BEAM MISSING — ONE TON SHORT ZERO FRACTURE COVENANT — ESTABLISHED 2026">
|
||
|
|
<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: 'Courier New', monospace; }
|
||
|
|
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: linear-gradient(to bottom, #0b0f14, #1a1a1a); }
|
||
|
|
.clip { position: absolute; inset: 0; display: grid; place-items: center; }
|
||
|
|
.ledger-line { font-size: 48px; letter-spacing: 4px; color: #d4af37; text-shadow: 0 0 20px #d4af37; }
|
||
|
|
.ledger-error { font-size: 48px; letter-spacing: 4px; color: #ff4444; text-shadow: 0 0 30px #ff4444; animation: shake 0.5s ease-in-out infinite; }
|
||
|
|
.seal { font-size: 72px; letter-spacing: 8px; color: #44ff44; text-shadow: 0 0 40px #44ff44; }
|
||
|
|
.subtitle { position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%); font-size: 32px; color: #888; text-align: center; }
|
||
|
|
.scene-bg { position: absolute; inset: 0; background: radial-gradient(circle at center, #1a1a1a 0%, #000 70%); opacity: 0.6; }
|
||
|
|
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
|
||
|
|
.beam-grid { position: absolute; inset: 0; background-image: repeating-linear-gradient(#222 0, #222 1px, transparent 1px, transparent 60px), repeating-linear-gradient(90deg, #222 0, #222 1px, transparent 1px, transparent 60px); opacity: 0.3; }
|
||
|
|
.snow { position: absolute; inset: 0; background: radial-gradient(circle, #fff 1px, transparent 2px); background-size: 200px 200px; animation: snowfall 8s linear infinite; opacity: 0.2; }
|
||
|
|
@keyframes snowfall { 0% { background-position: 0 0; } 100% { background-position: 0 200px; } }
|
||
|
|
</style>
|
||
|
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="root" data-composition-id="main" data-width="1920" data-height="1080" data-duration="45">
|
||
|
|
<!-- AUDIO ELEMENTS (REQUIRED for voice playback) -->
|
||
|
|
<audio id="voice-s1" src="audio/s1.wav" data-start="0"></audio>
|
||
|
|
<audio id="voice-s2" src="audio/s2.wav" data-start="15"></audio>
|
||
|
|
<audio id="voice-s3" src="audio/s3.wav" data-start="30"></audio>
|
||
|
|
<audio id="bgm" src="audio/music.mp3" data-start="0" data-volume="0.12"></audio>
|
||
|
|
|
||
|
|
<!-- SCENE 1: ERROR (0-15s) -->
|
||
|
|
<section id="s1" class="clip" data-start="0" data-duration="15" data-track-index="1">
|
||
|
|
<div class="scene-bg"></div>
|
||
|
|
<div class="beam-grid"></div>
|
||
|
|
<div class="snow"></div>
|
||
|
|
<h1 class="ledger-line" id="s1-number">412</h1>
|
||
|
|
<div class="subtitle" id="s1-sub">WINTER 1984 — KENTUCKY RIDGE</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- SCENE 2: DISCOVERY (15-30s) -->
|
||
|
|
<section id="s2" class="clip" data-start="15" data-duration="15" data-track-index="1">
|
||
|
|
<div class="scene-bg" style="background: radial-gradient(circle at center, #330000 0%, #000 70%)"></div>
|
||
|
|
<div class="beam-grid"></div>
|
||
|
|
<h1 class="ledger-error" id="s2-number">411</h1>
|
||
|
|
<div class="subtitle" id="s2-sub">ONE BEAM MISSING — ONE TON SHORT</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- SCENE 3: COVENANT (30-45s) -->
|
||
|
|
<section id="s3" class="clip" data-start="30" data-duration="15" data-track-index="1">
|
||
|
|
<div class="scene-bg" style="background: radial-gradient(circle at center, #003300 0%, #000 70%)"></div>
|
||
|
|
<div class="beam-grid"></div>
|
||
|
|
<h1 class="seal" id="s3-seal">ZERO</h1>
|
||
|
|
<div class="subtitle" id="s3-sub">FRACTURE COVENANT — ESTABLISHED 2026</div>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
window.__timelines = window.__timelines || {};
|
||
|
|
const tl = gsap.timeline({ paused: true });
|
||
|
|
|
||
|
|
// SCENE 1: ERROR (0-15s)
|
||
|
|
tl.to("#s1-number", { opacity: 1, scale: 1, duration: 3, ease: "power2.out" }, 0.5);
|
||
|
|
tl.to("#s1-sub", { opacity: 1, y: 0, duration: 2, ease: "power1.out" }, 1.5);
|
||
|
|
tl.to("#s1-number", { letterSpacing: "8px", duration: 4, ease: "power2.inOut" }, 4);
|
||
|
|
tl.to("#s1", { filter: "brightness(1.2)", duration: 1, ease: "power1.out" }, 10);
|
||
|
|
tl.to("#s1", { filter: "brightness(1)", duration: 1, ease: "power1.in" }, 13);
|
||
|
|
|
||
|
|
// SCENE 2: DISCOVERY (15-30s)
|
||
|
|
tl.fromTo("#s2-number", { opacity: 0, x: 0 }, { opacity: 1, x: 0, duration: 0.1, ease: "steps(1)" }, 15);
|
||
|
|
tl.to("#s2-number", { letterSpacing: "12px", duration: 2, ease: "power2.out" }, 16);
|
||
|
|
tl.to("#s2-sub", { opacity: 1, y: 0, duration: 2, ease: "power1.out" }, 17);
|
||
|
|
tl.to("#s2", { filter: "hueRotate(45deg) brightness(1.5)", duration: 0.5, ease: "power1.out" }, 22);
|
||
|
|
tl.to("#s2", { filter: "none", duration: 2, ease: "power2.in" }, 25);
|
||
|
|
|
||
|
|
// SCENE 3: COVENANT (30-45s)
|
||
|
|
tl.to("#s3-seal", { opacity: 1, scale: 1, duration: 4, ease: "expo.out" }, 30.5);
|
||
|
|
tl.to("#s3-sub", { opacity: 1, y: 0, duration: 3, ease: "power1.out" }, 32);
|
||
|
|
tl.to("#s3-seal", { boxShadow: "0 0 80px #44ff44", duration: 5, ease: "power2.in" }, 35);
|
||
|
|
tl.to("#s3", { filter: "brightness(1.3) saturate(1.5)", duration: 3, ease: "power1.out" }, 40);
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|