153 lines
5.4 KiB
HTML
153 lines
5.4 KiB
HTML
|
<!doctype html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8"/>
|
||
|
|
<title>The Triple-Verify Protocol</title>
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||
|
|
<style>
|
||
|
|
:root { --ink: #e0e0e0; --void: #05080a; --line: #2a2f35; --accent: #4d5d66; }
|
||
|
|
body { margin: 0; background: var(--void); color: var(--ink); font-family: 'Courier New', Courier, monospace; overflow: hidden; }
|
||
|
|
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; border: 1px solid var(--line); box-sizing: border-box; }
|
||
|
|
|
||
|
|
/* Background Grid */
|
||
|
|
.grid-bg {
|
||
|
|
position: absolute; inset: 0;
|
||
|
|
background-image:
|
||
|
|
linear-gradient(var(--line) 1px, transparent 1px),
|
||
|
|
linear-gradient(90deg, var(--line) 1px, transparent 1px);
|
||
|
|
background-size: 100px 100px;
|
||
|
|
opacity: 0.15; z-index: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Scene Container */
|
||
|
|
.clip {
|
||
|
|
position: absolute; inset: 0;
|
||
|
|
display: flex; flex-direction: column; justify-content: center; align-items: center;
|
||
|
|
padding: 120px; box-sizing: border-box; z-index: 10;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Typography */
|
||
|
|
h1 {
|
||
|
|
font-size: 72px; letter-spacing: -2px;
|
||
|
|
text-transform: uppercase;
|
||
|
|
border-bottom: 4px solid var(--accent);
|
||
|
|
padding-bottom: 20px;
|
||
|
|
margin: 0 0 40px 0;
|
||
|
|
opacity: 0; transform: translateY(30px);
|
||
|
|
text-align: left;
|
||
|
|
}
|
||
|
|
|
||
|
|
p.spec {
|
||
|
|
font-size: 32px; max-width: 1200px;
|
||
|
|
line-height: 1.4;
|
||
|
|
text-align: left;
|
||
|
|
opacity: 0; filter: blur(8px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.data-row {
|
||
|
|
display: flex; gap: 40px; margin-top: 60px;
|
||
|
|
font-size: 24px; opacity: 0; transform: translateY(20px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.metric {
|
||
|
|
border-left: 2px solid var(--accent);
|
||
|
|
padding-left: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Scene Specifics */
|
||
|
|
#s1 .grid-bg { background-position: 0 0; }
|
||
|
|
#s2 .grid-bg { background-position: 50px 50px; animation: drift 12s linear infinite; }
|
||
|
|
#s3 .grid-bg { background-size: 50px 50px; opacity: 0.3; }
|
||
|
|
|
||
|
|
@keyframes drift {
|
||
|
|
0% { background-position: 0 0; }
|
||
|
|
100% { background-position: 100px 100px; }
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<!-- ROOT: Total Duration 45s -->
|
||
|
|
<div id="root" data-composition-id="triple_verify" data-start="0" data-width="1920" data-height="1080" data-duration="45">
|
||
|
|
|
||
|
|
<!-- AUDIO TRACKS (Direct Children of Root) -->
|
||
|
|
<!-- Narration Files (Generated by Factory) -->
|
||
|
|
<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>
|
||
|
|
|
||
|
|
<!-- Music Track -->
|
||
|
|
<audio id="bgm" src="audio/music.mp3" data-start="0" data-volume="0.12"></audio>
|
||
|
|
|
||
|
|
<!-- SCENE 1: INSPECTION (0-15s) -->
|
||
|
|
<section id="s1" class="clip" data-start="0" data-duration="15" data-track-index="1">
|
||
|
|
<div class="grid-bg"></div>
|
||
|
|
<h1 id="s1-title">PHASE I: INSPECTION</h1>
|
||
|
|
<p id="s1-text" class="spec">
|
||
|
|
Visual confirmation against spec.<br/>
|
||
|
|
Variance tolerance: ±0.0mm.
|
||
|
|
</p>
|
||
|
|
<div id="s1-data" class="data-row">
|
||
|
|
<span class="metric">SOURCE: Floor Log 409-B</span>
|
||
|
|
<span class="metric">STATUS: CLEAR</span>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- SCENE 2: VERIFICATION (15-30s) -->
|
||
|
|
<section id="s2" class="clip" data-start="15" data-duration="15" data-track-index="1">
|
||
|
|
<div class="grid-bg"></div>
|
||
|
|
<h1 id="s2-title">PHASE II: VERIFICATION</h1>
|
||
|
|
<p id="s2-text" class="spec">
|
||
|
|
Independent measurement.<br/>
|
||
|
|
Cross-check against known standard.
|
||
|
|
</p>
|
||
|
|
<div id="s2-data" class="data-row">
|
||
|
|
<span class="metric">INSTRUMENT: Calibrated Laser</span>
|
||
|
|
<span class="metric">DRIFT: 0.00%</span>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- SCENE 3: AUDIT (30-45s) -->
|
||
|
|
<section id="s3" class="clip" data-start="30" data-duration="15" data-track-index="1">
|
||
|
|
<div class="grid-bg"></div>
|
||
|
|
<h1 id="s3-title">PHASE III: AUDIT</h1>
|
||
|
|
<p id="s3-text" class="spec">
|
||
|
|
Permanent record.<br/>
|
||
|
|
The chain of custody closes.
|
||
|
|
</p>
|
||
|
|
<div id="s3-data" class="data-row">
|
||
|
|
<span class="metric">SIGNATURE: ALBERT KARACA</span>
|
||
|
|
<span class="metric">CYCLE: LOCKED</span>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// TIMELINES (Synchronous Registration)
|
||
|
|
window.__timelines = window.__timelines || {};
|
||
|
|
const tl = gsap.timeline({ paused: true });
|
||
|
|
|
||
|
|
// Scene 1 Animations (Start 0)
|
||
|
|
tl.to("#s1-title", { opacity: 1, y: 0, duration: 1.2, ease: "expo.out" }, 0.5);
|
||
|
|
tl.to("#s1-text", { opacity: 1, blur: "0px", duration: 1.0, ease: "power2.out" }, 1.8);
|
||
|
|
tl.to("#s1-data", { opacity: 1, y: 0, duration: 1.0, ease: "power2.out" }, 3.2);
|
||
|
|
|
||
|
|
// Scene 2 Animations (Start 15)
|
||
|
|
tl.to("#s2-title", { opacity: 1, y: 0, duration: 1.2, ease: "expo.out" }, 15.5);
|
||
|
|
tl.to("#s2-text", { opacity: 1, blur: "0px", duration: 1.0, ease: "power2.out" }, 16.8);
|
||
|
|
tl.to("#s2-data", { opacity: 1, y: 0, duration: 1.0, ease: "power2.out" }, 18.2);
|
||
|
|
|
||
|
|
// Scene 3 Animations (Start 30)
|
||
|
|
tl.to("#s3-title", { opacity: 1, y: 0, duration: 1.2, ease: "expo.out" }, 30.5);
|
||
|
|
tl.to("#s3-text", { opacity: 1, blur: "0px", duration: 1.0, ease: "power2.out" }, 31.8);
|
||
|
|
tl.to("#s3-data", { opacity: 1, y: 0, duration: 1.0, ease: "power2.out" }, 33.2);
|
||
|
|
|
||
|
|
// Fade Out (End 45)
|
||
|
|
tl.to("#s3-data", { opacity: 0, duration: 2.0 }, 43.0);
|
||
|
|
|
||
|
|
window.__timelines["triple_verify"] = tl;
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|