117 lines
7.8 KiB
HTML
117 lines
7.8 KiB
HTML
|
<!doctype html>
|
||
|
|
<html lang="en"><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||
|
|
<title>Salt Air Protocol — Brett Castellaw</title>
|
||
|
|
<meta property="og:type" content="website">
|
||
|
|
<meta property="og:title" content="Salt Air Protocol — Brett Castellaw">
|
||
|
|
<meta property="og:description" content="Olympia shoreline. 0400 hours. Humidity gauge reads 97%. The moment the circuit dies.">
|
||
|
|
<meta property="og:image" content="https://images.pexels.com/photos/163125/board-printed-circuit-board-computer-electronics-163125.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=1080&w=1920">
|
||
|
|
<meta property="og:url" content="https://brett-castellaw.4ort.net/">
|
||
|
|
<meta name="twitter:card" content="summary_large_image">
|
||
|
|
<meta name="description" content="Olympia shoreline. 0400 hours. Humidity gauge reads 97%. The moment the circuit dies.">
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||
|
|
<style>
|
||
|
|
:root{--void:#0b0f14;--signal:#00d4ff;--scar:#ff3300;--copper:#b87333}
|
||
|
|
body{margin:0;background:var(--void);color:#fff;font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
|
||
|
|
#root{position:relative;width:1920px;height:1080px;overflow:hidden}
|
||
|
|
.clip{position:absolute;inset:0;display:grid;place-items:center}
|
||
|
|
.trace{position:absolute;left:50%;top:50%;width:0;height:2px;transform:translate(-50%,-50%)}
|
||
|
|
.crystal{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--copper)}
|
||
|
|
.gauge{position:absolute;bottom:120px;left:180px;font-size:96px;font-weight:700;letter-spacing:-4px;text-shadow:0 0 60px var(--signal)}
|
||
|
|
.title{font-size:84px;font-weight:800;line-height:1.1;letter-spacing:-3px;margin-bottom:24px;text-transform:uppercase}
|
||
|
|
.subtitle{font-size:36px;font-weight:400;opacity:0.85;max-width:640px;text-align:center;line-height:1.4}
|
||
|
|
.spec{font-size:48px;font-weight:600;color:var(--signal);letter-spacing:2px}
|
||
|
|
.vector-line{position:absolute;left:50%;top:0;width:4px;height:1080px;background:linear-gradient(to bottom,var(--copper),transparent);transform-origin:top center}
|
||
|
|
.dielectric{position:absolute;width:1920px;height:12px;background:repeating-linear-gradient(90deg,var(--signal) 0,var(--signal) 60px,#0077aa 60px,#0077aa 120px);border-radius:6px}
|
||
|
|
.seal-ring{position:absolute;width:480px;height:480px;border:3px solid var(--signal);border-radius:50%;box-shadow:0 0 120px var(--signal)}
|
||
|
|
img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0.35}
|
||
|
|
.data-label{position:absolute;bottom:80px;right:180px;font-size:24px;letter-spacing:4px;opacity:0.7}
|
||
|
|
</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="salt-air-protocol" data-start="0" data-width="1920" data-height="1080" data-duration="60">
|
||
|
|
|
||
|
|
<!-- SCENE 1: The Shoreline (0-15s) -->
|
||
|
|
<section id="s1" class="clip" data-start="0" data-duration="15" data-track-index="1">
|
||
|
|
<img class="bg" src="https://images.pexels.com/photos/163125/board-printed-circuit-board-computer-electronics-163125.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=1080&w=1920"/>
|
||
|
|
<div style="position:absolute;top:180px;text-align:left">
|
||
|
|
<h1 class="title" id="s1-title">SALT AIR<br/>PROTOCOL</h1>
|
||
|
|
<p class="subtitle" id="s1-sub">Olympia shoreline. 0400 hours.<br/>Humidity gauge reads 97%.<br/>The moment the circuit dies.</p>
|
||
|
|
</div>
|
||
|
|
<div class="gauge" id="s1-gauge">97%</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- SCENE 2: The Vector (15-30s) -->
|
||
|
|
<section id="s2" class="clip" data-start="15" data-duration="15" data-track-index="1">
|
||
|
|
<img class="bg" src="https://images.pexels.com/photos/10084204/pexels-photo-10084204.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=1080&w=1920"/>
|
||
|
|
<div class="vector-line" id="s2-vector"></div>
|
||
|
|
<div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center">
|
||
|
|
<h1 class="title" id="s2-title">COPPER CHLORIDE<br/>CRYSTALLIZATION</h1>
|
||
|
|
<p class="subtitle" id="s2-sub">Trace width: 0.15mm<br/>Corrosion rate: 2.3μm/day<br/>Dielectric breach imminent</p>
|
||
|
|
</div>
|
||
|
|
<div class="trace" id="s2-trace"></div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- SCENE 3: The Protocol (30-45s) -->
|
||
|
|
<section id="s3" class="clip" data-start="30" data-duration="15" data-track-index="1">
|
||
|
|
<img class="bg" src="https://images.pexels.com/photos/3520692/pexels-photo-3520692.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=1080&w=1920"/>
|
||
|
|
<div style="position:absolute;top:180px;text-align:center">
|
||
|
|
<h1 class="title" id="s3-title">REBUILD<br/>SEQUENCE</h1>
|
||
|
|
<p class="subtitle" id="s3-sub">Phase 1: Ion flush<br/>Phase 2: Dielectric regrowth<br/>Phase 3: Conformal coat</p>
|
||
|
|
</div>
|
||
|
|
<div class="dielectric" id="s3-dielectric"></div>
|
||
|
|
<div class="spec" id="s3-spec">12μm</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- SCENE 4: The Seal (45-60s) -->
|
||
|
|
<section id="s4" class="clip" data-start="45" data-duration="15" data-track-index="1">
|
||
|
|
<img class="bg" src="https://images.pexels.com/photos/163170/board-printed-circuit-board-computer-electronics-163170.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=1080&w=1920"/>
|
||
|
|
<div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center">
|
||
|
|
<h1 class="title" id="s4-title">SEALED</h1>
|
||
|
|
<p class="subtitle" id="s4-sub">Salt-proof. Storm-ready.<br/>The next 97% won't kill us.</p>
|
||
|
|
</div>
|
||
|
|
<div class="seal-ring" id="s4-seal"></div>
|
||
|
|
<div class="data-label" id="s4-label">BRETT-CASTELLAW // 4ORT.NET</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- AUDIO TRACKS — REQUIRED FOR VOICE RENDER -->
|
||
|
|
<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="voice-s4" src="audio/s4.wav" data-start="45"></audio>
|
||
|
|
<audio id="bgm" src="audio/music.mp3" data-start="0" data-volume="0.12"></audio>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
window.__timelines = window.__timelines || {};
|
||
|
|
const tl = gsap.timeline({ paused: true });
|
||
|
|
|
||
|
|
// Scene 1 animations
|
||
|
|
tl.to("#s1-title", { opacity: 1, y: 0, duration: 1.2, ease: "power3.out" }, 0.8);
|
||
|
|
tl.to("#s1-sub", { opacity: 1, y: 0, duration: 1.8, ease: "power2.out" }, 2.4);
|
||
|
|
tl.to("#s1-gauge", { opacity: 1, scale: 1, duration: 2.4, ease: "expo.out" }, 4.2);
|
||
|
|
tl.to("#s1-gauge", { opacity: 0, scale: 1.2, duration: 1.2, ease: "power1.in" }, 13.8);
|
||
|
|
|
||
|
|
// Scene 2 animations
|
||
|
|
tl.to("#s2-vector", { height: "100%", duration: 3.6, ease: "power2.inOut" }, 16.2);
|
||
|
|
tl.to("#s2-title", { opacity: 1, y: 0, duration: 1.8, ease: "power3.out" }, 17.4);
|
||
|
|
tl.to("#s2-sub", { opacity: 1, y: 0, duration: 2.4, ease: "power2.out" }, 19.2);
|
||
|
|
tl.to("#s2-trace", { width: "1200px", duration: 6.0, ease: "none" }, 21.0);
|
||
|
|
tl.from(".crystal", { x: "-600px", stagger: 0.3, duration: 1.2, ease: "back.out(1.7)" }, 24.6);
|
||
|
|
|
||
|
|
// Scene 3 animations
|
||
|
|
tl.to("#s3-title", { opacity: 1, y: 0, duration: 1.5, ease: "power3.out" }, 30.8);
|
||
|
|
tl.to("#s3-sub", { opacity: 1, y: 0, duration: 2.1, ease: "power2.out" }, 32.4);
|
||
|
|
tl.to("#s3-dielectric", { y: "50%", scaleX: 1, duration: 4.8, ease: "expo.inOut" }, 34.2);
|
||
|
|
tl.to("#s3-spec", { opacity: 1, scale: 1, duration: 1.8, ease: "elastic.out(1,0.6)" }, 38.4);
|
||
|
|
|
||
|
|
// Scene 4 animations
|
||
|
|
tl.to("#s4-seal", { opacity: 0, scale: 0.4, duration: 2.4, ease: "power2.out" }, 45.6);
|
||
|
|
tl.to("#s4-seal", { opacity: 1, scale: 1, duration: 3.6, ease: "expo.out" }, 46.8);
|
||
|
|
tl.to("#s4-title", { opacity: 1, y: 0, duration: 1.2, ease: "power3.out" }, 48.0);
|
||
|
|
tl.to("#s4-sub", { opacity: 1, y: 0, duration: 1.8, ease: "power2.out" }, 49.2);
|
||
|
|
tl.to("#s4-label", { opacity: 1, letterSpacing: "8px", duration: 3.0, ease: "power1.out" }, 52.2);
|
||
|
|
|
||
|
|
window.__timelines["salt-air-protocol"] = tl;
|
||
|
|
</script>
|
||
|
|
</body></html>
|