2026-08-20 15:16:59 +02:00
<!doctype html>
2026-08-21 00:48:11 +02:00
< html > < head >
< meta name = "description" content = "CPD-21-AJ · THIRD SHIFT · HIGH + 4TH Forensic photography is not art. It is custody. An accurate reproduction of a crime scene — one that can survive…" > < meta charset = "UTF-8" / >
2026-08-20 15:16:59 +02:00
< script src = "https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js" > < / script >
< style >
body{margin:0;background:#141210;color:#e8e2d4;font-family:Georgia,'Times New Roman',serif}
#root{position:relative;width:1920px;height:1080px;overflow:hidden}
.clip{position:absolute;inset:0}
.bg{position:absolute;inset:0}
/* ---- manila paper field ---- */
#s1 .bg{background:
radial-gradient(ellipse at 30% 20%, #d8c9a3 0%, #c7b689 45%, #a8946a 100%);
opacity:0}
.grain{position:absolute;inset:0;opacity:0;
background-image:repeating-linear-gradient(0deg, rgba(60,45,20,.05) 0 1px, transparent 1px 3px)}
.file-col{position:absolute;left:160px;top:120px;width:1600px;height:820px;
border:3px solid #6b5936;background:rgba(232,226,212,.42);
transform:rotate(-0.4deg);opacity:0}
.ticker{position:absolute;left:210px;top:240px;font-family:'Courier New',monospace;
font-size:30px;color:#4a3c1e;letter-spacing:2px;opacity:0}
.h1{position:absolute;left:210px;top:320px;font-size:96px;line-height:1.05;
color:#26200f;width:1300px;opacity:0}
.sub{position:absolute;left:212px;top:700px;font-size:38px;color:#4a3c1e;
font-style:italic;width:1200px;opacity:0}
/* ---- twelve-shot grid ---- */
#s2{background:#0d0f14}
.gridline{position:absolute;background:#5b6b52}
.cell{position:absolute;border:2px solid #8fa086;opacity:0}
.cell b{display:grid;place-items:center;width:100%;height:100%;
font-family:'Courier New',monospace;font-size:26px;color:#c9d4c2}
.cross{position:absolute;border:2px solid #e0572e;opacity:0}
.rule{position:absolute;font-family:'Courier New',monospace;font-size:30px;
color:#c2cbb9;letter-spacing:1px;opacity:0}
.h2{position:absolute;left:120px;top:70px;font-family:'Courier New',monospace;
font-size:44px;letter-spacing:4px;color:#c9d4c2;opacity:0}
.line{position:absolute;left:120px;top:150px;font-family:'Courier New',monospace;
font-size:34px;color:#8fa086;opacity:0}
/* ---- custody chain ---- */
#s3 .bg{background:radial-gradient(circle at 50% 55%, #2a2620 0%, #141210 75%)}
.chain-label{font-family:'Courier New',monospace;font-size:30px;color:#d9b45c;opacity:0}
.stamp{position:absolute;left:120px;top:120px;width:600px;height:180px;
border:5px solid #b8432f;color:#b8432f;font-family:'Courier New',monospace;
font-size:52px;font-weight:bold;display:grid;place-items:center;
letter-spacing:4px;transform:rotate(-6deg);opacity:0}
.sig{position:absolute;left:120px;top:380px;font-family:'Courier New',monospace;
font-size:32px;color:#8fa086;opacity:0}
.h3{position:absolute;left:820px;top:200px;font-size:74px;width:1000px;
color:#e8e2d4;line-height:1.1;opacity:0}
.closing{position:absolute;left:820px;top:700px;font-size:38px;color:#b6ac95;
width:900px;font-style:italic;opacity:0}
2026-08-21 00:48:11 +02:00
< / style > < script defer src = "https://analytics.4ort.xyz/script.js" data-website-id = "d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b" > < / script >
< / head >
2026-08-20 15:16:59 +02:00
< body >
< div id = "root" data-composition-id = "main" data-start = "0" data-width = "1920" data-height = "1080" data-duration = "60" >
< section id = "s1" class = "clip" data-start = "0" data-duration = "20" data-track-index = "1" >
< div class = "bg" > < / div >
< div class = "grain" > < / div >
< div class = "file-col" > < / div >
< div class = "ticker" > CPD-21-AJ · THIRD SHIFT · HIGH + 4TH< / div >
< h1 class = "h1" > Forensic photography is not art.< br > It is custody.< / h1 >
< div class = "sub" > An accurate reproduction of a crime scene — one that can survive cross-examination.< / div >
< / section >
< section id = "s2" class = "clip" data-start = "20" data-duration = "20" data-track-index = "1" >
< div class = "bg" > < / div >
< h2 class = "h2" > PROTOCOL — TWELVE MINIMUM< / h2 >
< div class = "line" > OVERVIEW → TIGHT → OVERVIEW. OVERLAP SO SCALE CHECKS OUT.< / div >
< div class = "rule" style = "left:120px;top:900px" > A RULER IN FRAME, OR A COURTROOM HAS NO NUMBERS.< / div >
< div class = "cell" style = "left:120px;top:250px;width:280px;height:200px" > < b > 01< / b > < / div >
< div class = "cell" style = "left:430px;top:250px;width:280px;height:200px" > < b > 07< / b > < / div >
< div class = "cell" style = "left:740px;top:250px;width:280px;height:200px" > < b > 02< / b > < / div >
< div class = "cell" style = "left:1050px;top:250px;width:280px;height:200px" > < b > 08< / b > < / div >
< div class = "cell" style = "left:1360px;top:250px;width:280px;height:200px" > < b > 03< / b > < / div >
< div class = "cell" style = "left:120px;top:480px;width:280px;height:200px" > < b > 12< / b > < / div >
< div class = "cell" style = "left:430px;top:480px;width:280px;height:200px" > < b > 09< / b > < / div >
< div class = "cell" style = "left:740px;top:480px;width:280px;height:200px" > < b > 04< / b > < / div >
< div class = "cell" style = "left:1050px;top:480px;width:280px;height:200px" > < b > 10< / b > < / div >
< div class = "cell" style = "left:1360px;top:480px;width:280px;height:200px" > < b > 05< / b > < / div >
< div class = "cross" style = "left:740px;top:480px;width:280px;height:200px" > < / div >
< / section >
< section id = "s3" class = "clip" data-start = "40" data-duration = "20" data-track-index = "1" >
< div class = "bg" > < / div >
< div class = "stamp" > EVIDENCE< / div >
< div class = "sig" > SIGNED · DATED · ORIENTED< / div >
< h3 class = "h3" > A photograph with a chain of custody is evidence.< br > Without one, it is a pretty lie.< / h3 >
< div class = "closing" > Same rule I bring to a canvas — admit what the frame leaves out.< / div >
< / section >
< audio id = "voice-s1" src = "audio/s1.wav" data-start = "0" > < / audio >
< audio id = "voice-s2" src = "audio/s2.wav" data-start = "20" > < / audio >
< audio id = "voice-s3" src = "audio/s3.wav" data-start = "40" > < / audio >
< audio id = "bgm" src = "audio/music.mp3" data-start = "0" data-volume = "0.15" > < / audio >
< / div >
< script >
window.__timelines = window.__timelines || {};
const tl = gsap.timeline({ paused: true });
/* scene 1 — manila file unfolds */
tl.to(".file-col", { opacity: 1, duration: 0.8, ease: "power3.out" }, 0.4);
tl.to(".ticker", { opacity: 1, duration: 0.5 }, 1.0);
tl.to(".h1", { opacity: 1, y: 0, duration: 0.9, ease: "power3.out" }, 1.4);
tl.from(".h1", { y: 30, duration: 0.9, ease: "power3.out" }, 1.4);
tl.to(".sub", { opacity: 1, duration: 0.8 }, 3.4);
tl.to(".grain", { opacity: 1, duration: 2 }, 4);
tl.to(".ticker", { opacity: 0, duration: 0.4 }, 18.5);
/* scene 2 — grid builds */
tl.to(".h2", { opacity: 1, duration: 0.6 }, 21);
tl.to(".line", { opacity: 1, duration: 0.6 }, 22);
[".cell"].forEach(()=>{});
tl.to(".cell", { opacity: 1, stagger: 0.5, duration: 0.3, ease: "power1.out" }, 22.6);
tl.to(".cross", { opacity: 1, scale: 1.2, duration: 0.5 }, 26.5);
tl.to(".rule", { opacity: 1, duration: 0.6 }, 28);
tl.to(".h2", { opacity: 0, duration: 0.4 }, 38.5);
/* scene 3 — custody stamp */
tl.to(".stamp", { opacity: 1, rotation: -6, duration: 0.5, ease: "back.out(2)" }, 41);
tl.to(".sig", { opacity: 1, duration: 0.5 }, 43);
tl.to(".h3", { opacity: 1, duration: 0.7, ease: "power3.out" }, 45);
tl.to(".closing", { opacity: 1, duration: 0.6 }, 52);
window.__timelines["main"] = tl;
< / script >
< / body > < / html >
