128 lines
5.6 KiB
HTML
128 lines
5.6 KiB
HTML
|
<!doctype html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8"/>
|
||
|
|
<title>Chain of Custody</title>
|
||
|
|
<meta property="og:type" content="website">
|
||
|
|
<meta property="og:title" content="Chain of Custody">
|
||
|
|
<meta property="og:description" content="SCENE I // THE FRACTURE SITE B-12 1987. Chicago. North Side. A vial mislabeled. SCENE II // THE SEAL SITE N-04 ✓ Triple-check. The seal holds. SCENE III…">
|
||
|
|
<meta property="og:url" content="https://carol-schroeder.4ort.net/">
|
||
|
|
<meta name="twitter:card" content="summary">
|
||
|
|
<meta name="description" content="SCENE I // THE FRACTURE SITE B-12 1987. Chicago. North Side. A vial mislabeled. SCENE II // THE SEAL SITE N-04 ✓ Triple-check. The seal holds. SCENE III…">
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||
|
|
<style>
|
||
|
|
:root { --ink: #e0e6ed; --gold: #cfb564; --seal: #ffffff; --void: #0b0f14; }
|
||
|
|
body { margin: 0; background: var(--void); color: var(--ink); font-family: 'Courier New', monospace; overflow: hidden; }
|
||
|
|
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; transform-origin: top left; }
|
||
|
|
|
||
|
|
/* SCENE GEOMETRY */
|
||
|
|
.vial {
|
||
|
|
width: 120px; height: 200px; border-left: 2px solid var(--ink); border-right: 2px solid var(--ink);
|
||
|
|
bottom: 100px; left: 50%; transform: translateX(-50%) rotate(0deg);
|
||
|
|
transition: border-color 2s ease;
|
||
|
|
}
|
||
|
|
.vial::before {
|
||
|
|
content: ''; position: absolute; top: 0; left: -2px; width: 124px; height: 2px; background: var(--ink);
|
||
|
|
}
|
||
|
|
.label {
|
||
|
|
position: absolute; top: 50px; left: 50%; transform: translateX(-50%);
|
||
|
|
width: 80px; height: 60px; border: 1px solid var(--ink);
|
||
|
|
display: grid; place-items: center; font-size: 10px; letter-spacing: 1px;
|
||
|
|
}
|
||
|
|
.label-text { font-size: 8px; text-align: center; line-height: 1.2; }
|
||
|
|
|
||
|
|
.seal-ring {
|
||
|
|
position: absolute; width: 160px; height: 160px; border-radius: 50%;
|
||
|
|
border: 4px solid transparent; box-shadow: 0 0 0 2px var(--ink);
|
||
|
|
bottom: 100px; left: 50%; transform: translateX(-50%) scale(0);
|
||
|
|
}
|
||
|
|
|
||
|
|
.grid-line {
|
||
|
|
position: absolute; height: 1px; background: rgba(207, 181, 100, 0.3);
|
||
|
|
}
|
||
|
|
|
||
|
|
.caption-box {
|
||
|
|
position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%);
|
||
|
|
max-width: 800px; text-align: center; font-size: 24px; line-height: 1.4;
|
||
|
|
opacity: 0; letter-spacing: 0.05em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.scene-marker {
|
||
|
|
position: absolute; top: 60px; left: 60px; font-size: 14px; opacity: 0.6;
|
||
|
|
}
|
||
|
|
</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" data-start="0">
|
||
|
|
|
||
|
|
<!-- AUDIO TRACKS -->
|
||
|
|
<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-marker">SCENE I // THE FRACTURE</div>
|
||
|
|
<div class="vial" id="vial-err">
|
||
|
|
<div class="label"><div class="label-text">SITE<br>B-12</div></div>
|
||
|
|
</div>
|
||
|
|
<div class="caption-box" id="cap-1">1987. Chicago. North Side.<br>A vial mislabeled.</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- SCENE 2: PROTOCOL (15-30s) -->
|
||
|
|
<section id="s2" class="clip" data-start="15" data-duration="15" data-track-index="1">
|
||
|
|
<div class="scene-marker">SCENE II // THE SEAL</div>
|
||
|
|
<div class="vial" id="vial-ok" style="border-color: var(--gold)">
|
||
|
|
<div class="label" style="border-color: var(--gold)">
|
||
|
|
<div class="label-text" style="color: var(--gold)">SITE<br>N-04<br>✓</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="seal-ring" id="ring-seal"></div>
|
||
|
|
<div class="caption-box" id="cap-2">Triple-check.<br>The seal holds.</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- SCENE 3: SEAM (30-45s) -->
|
||
|
|
<section id="s3" class="clip" data-start="30" data-duration="15" data-track-index="1">
|
||
|
|
<div class="scene-marker">SCENE III // THE SEAM</div>
|
||
|
|
<div id="grid-field"></div>
|
||
|
|
<div class="caption-box" id="cap-3">The error becomes the seam.<br>We grow from the scar.</div>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
window.__timelines = window.__timelines || {};
|
||
|
|
const tl = gsap.timeline({ paused: true });
|
||
|
|
|
||
|
|
// SCENE 1: The Error
|
||
|
|
tl.to("#vial-err", { x: "-50%", y: 100, duration: 2, ease: "power2.inOut" }, 0.5);
|
||
|
|
tl.to(".label-text", { color: "#ff4444", duration: 0.5 }, 3.0); // Label flashes red
|
||
|
|
tl.to("#vial-err", { rotation: 12, scale: 0.95, duration: 1.5, ease: "back.out(1.7)" }, 4.5); // The slip
|
||
|
|
tl.to("#cap-1", { opacity: 1, y: 0, duration: 1.5 }, 1.0);
|
||
|
|
tl.to("#cap-1", { opacity: 0, duration: 1.0 }, 12.0);
|
||
|
|
|
||
|
|
// SCENE 2: The Seal
|
||
|
|
tl.to("#vial-ok", { x: "-50%", y: 100, duration: 2, ease: "power2.out" }, 15.5);
|
||
|
|
tl.to("#ring-seal", { scale: 1, borderColor: "#cfb564", duration: 3, ease: "expo.out" }, 16.0);
|
||
|
|
tl.to("#cap-2", { opacity: 1, y: 0, duration: 1.5 }, 15.5);
|
||
|
|
tl.to("#cap-2", { opacity: 0, duration: 1.0 }, 28.0);
|
||
|
|
|
||
|
|
// SCENE 3: The Grid
|
||
|
|
for(let i=0; i<20; i++) {
|
||
|
|
let line = document.createElement('div');
|
||
|
|
line.className = 'grid-line';
|
||
|
|
line.style.left = '0';
|
||
|
|
line.style.right = '0';
|
||
|
|
line.style.bottom = (i * 60) + 'px';
|
||
|
|
document.getElementById('grid-field').appendChild(line);
|
||
|
|
}
|
||
|
|
tl.to(".grid-line", { opacity: 1, duration: 4, stagger: 0.2, ease: "power1.in" }, 30.5);
|
||
|
|
tl.to("#cap-3", { opacity: 1, y: 0, duration: 2 }, 31.0);
|
||
|
|
tl.to("#cap-3", { opacity: 0, duration: 1.5 }, 43.0);
|
||
|
|
|
||
|
|
window.__timelines["main"] = tl;
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|