124 lines
6.9 KiB
HTML
124 lines
6.9 KiB
HTML
<!doctype html>
|
|
<html><head><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:#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}
|
|
</style></head>
|
|
<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> |