104 lines
5.7 KiB
HTML
104 lines
5.7 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:#0b0f14;color:#f4efe4;font-family:Georgia,'Times New Roman',serif}
|
||
|
|
#root{position:relative;width:1920px;height:1080px;overflow:hidden;background:#0b0f14}
|
||
|
|
.bg{position:absolute;inset:0;background-size:cover;background-position:center}
|
||
|
|
.veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,11,14,.25),rgba(8,11,14,.82))}
|
||
|
|
.clip{position:absolute;inset:0;display:grid;place-items:center}
|
||
|
|
.inner{position:relative;max-width:1500px;padding:0 90px;text-align:center}
|
||
|
|
h1{font-size:96px;font-weight:700;letter-spacing:-1px;margin:0 0 26px;line-height:1.05}
|
||
|
|
h2{font-size:64px;font-weight:700;margin:0 0 20px;line-height:1.1}
|
||
|
|
p{font-size:40px;line-height:1.4;color:#cfc8bc;margin:14px auto;max-width:1250px}
|
||
|
|
.rule{width:120px;height:4px;background:#c9a35c;margin:30px auto}
|
||
|
|
.kicker{font-size:24px;letter-spacing:5px;text-transform:uppercase;color:#c9a35c;margin-bottom:26px}
|
||
|
|
.lede{font-size:30px;color:#a9a29a;letter-spacing:1px}
|
||
|
|
.tag{font-size:22px;color:#7d786f;letter-spacing:2px;margin-top:40px}
|
||
|
|
/* scene-specific treatments */
|
||
|
|
#s1 h1{color:#f4efe4}
|
||
|
|
#s2 h2,#s3 h2,#s4 h2,#s5 h2{color:#f4efe4}
|
||
|
|
.num{font-size:180px;line-height:1;color:rgba(201,163,92,0.25);font-weight:700;position:absolute;top:40px;right:80px}
|
||
|
|
</style></head>
|
||
|
|
<body>
|
||
|
|
<div id="root" data-composition-id="main" data-start="0" data-width="1920" data-height="1080" data-duration="58">
|
||
|
|
<div class="veil"></div>
|
||
|
|
|
||
|
|
<audio id="voice-s1" src="audio/s1.wav" data-start="0"></audio>
|
||
|
|
<audio id="voice-s2" src="audio/s2.wav" data-start="12"></audio>
|
||
|
|
<audio id="voice-s3" src="audio/s3.wav" data-start="25"></audio>
|
||
|
|
<audio id="voice-s4" src="audio/s4.wav" data-start="38"></audio>
|
||
|
|
<audio id="voice-s5" src="audio/s5.wav" data-start="50"></audio>
|
||
|
|
<audio id="bgm" src="audio/music.mp3" data-start="0" data-volume="0.13"></audio>
|
||
|
|
|
||
|
|
<section id="s1" class="clip" data-start="0" data-duration="12" data-track-index="1">
|
||
|
|
<div class="bg" style="background-image:url('https://images.pexels.com/photos/10481323/pexels-photo-10481323.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940')"></div>
|
||
|
|
<div class="inner">
|
||
|
|
<div class="kicker">Patrol photography · Ahmed Jacobs, Columbus</div>
|
||
|
|
<h1>The Documented Eye</h1>
|
||
|
|
<p class="lede">One aperture, two disciplines — the evidence frame and the art frame share the same patience.</p>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section id="s2" class="clip" data-start="12" data-duration="13" data-track-index="1">
|
||
|
|
<div class="bg" style="background-image:url('https://images.pexels.com/photos/16954318/pexels-photo-16954318.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940')"></div>
|
||
|
|
<div class="inner">
|
||
|
|
<div class="num">1</div>
|
||
|
|
<h2>First, the bookend</h2>
|
||
|
|
<p>Every scene opens where any scene does: a wide shot of the whole — orientation before detail. North marker. Scale card. The frame could be a courtroom in a year.</p>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section id="s3" class="clip" data-start="25" data-duration="13" data-track-index="1">
|
||
|
|
<div class="bg" style="background-image:url('https://images.pexels.com/photos/10481287/pexels-photo-10481287.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940')"></div>
|
||
|
|
<div class="inner">
|
||
|
|
<div class="num">2</div>
|
||
|
|
<h2>Chain, by hand</h2>
|
||
|
|
<p>Each item gets its own numbered frame, then a scale reference, then a continuity shot tying it to the scene. The camera is a witness under oath — it never editorializes.</p>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section id="s4" class="clip" data-start="38" data-duration="12" data-track-index="1">
|
||
|
|
<div class="bg" style="background-image:url('https://images.pexels.com/photos/6069527/pexels-photo-6069527.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940')"></div>
|
||
|
|
<div class="inner">
|
||
|
|
<div class="num">3</div>
|
||
|
|
<h2>The same eye, off duty</h2>
|
||
|
|
<p>Downtown after rain, that discipline relaxes into composition — the grid of the Short North skyline, shadow as subject. Same patience, different assignment.</p>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section id="s5" class="clip" data-start="50" data-duration="8" data-track-index="1">
|
||
|
|
<div class="veil" style="background:linear-gradient(180deg,rgba(8,11,14,.6),rgba(8,11,14,.95))"></div>
|
||
|
|
<div class="inner">
|
||
|
|
<h2>Slow down and look</h2>
|
||
|
|
<p>One frame at a time. The scene tells you what it is — if you're willing to be told.</p>
|
||
|
|
<div class="rule"></div>
|
||
|
|
<p class="tag">ahmed-jacobs.4ort.net · case file & field notes</p>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
window.__timelines = window.__timelines || {};
|
||
|
|
const tl = gsap.timeline({ paused: true });
|
||
|
|
tl.from("#s1 .kicker",{opacity:0,y:24,duration:.7,ease:"power3.out"},0.3);
|
||
|
|
tl.from("#s1 h1",{opacity:0,y:30,duration:.8,ease:"power3.out"},0.6);
|
||
|
|
tl.from("#s1 .lede",{opacity:0,duration:.7},1.1);
|
||
|
|
tl.to("#s1",{opacity:0,duration:.7},11.2);
|
||
|
|
|
||
|
|
tl.from("#s2 h2",{opacity:0,y:26,duration:.6,ease:"power3.out"},12.6);
|
||
|
|
tl.from("#s2 p",{opacity:0,duration:.6},13.2);
|
||
|
|
tl.to("#s2",{opacity:0,duration:.7},24.2);
|
||
|
|
|
||
|
|
tl.from("#s3 h2",{opacity:0,y:26,duration:.6,ease:"power3.out"},25.6);
|
||
|
|
tl.from("#s3 p",{opacity:0,duration:.6},26.2);
|
||
|
|
tl.to("#s3",{opacity:0,duration:.7},37.2);
|
||
|
|
|
||
|
|
tl.from("#s4 h2",{opacity:0,y:26,duration:.6,ease:"power3.out"},38.6);
|
||
|
|
tl.from("#s4 p",{opacity:0,duration:.6},39.2);
|
||
|
|
tl.to("#s4",{opacity:0,duration:.7},49.2);
|
||
|
|
|
||
|
|
tl.from("#s5 h2",{opacity:0,y:24,duration:.6,ease:"power3.out"},50.6);
|
||
|
|
tl.from("#s5 .tag",{opacity:0,duration:.6},51.6);
|
||
|
|
window.__timelines["main"] = tl;
|
||
|
|
</script>
|
||
|
|
</body></html>
|