143 lines
7.7 KiB
HTML
143 lines
7.7 KiB
HTML
|
<!doctype html>
|
||
|
|
<html><head>
|
||
|
|
<meta name="description" content="Negros, Philippines The Bird That Lives in a Sketch Ptilinopus arcanus We know it from a handful of skins, and one sketch. collected 1896 · drawn once ·…"><meta charset="UTF-8"/>
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||
|
|
<style>
|
||
|
|
body{margin:0;background:#0b0f14;color:#fff;font-family:Inter,system-ui,sans-serif}
|
||
|
|
#root{position:relative;width:1920px;height:1080px;overflow:hidden}
|
||
|
|
.clip{position:absolute;inset:0;display:grid;place-items:center}
|
||
|
|
|
||
|
|
/* shared aged-paper ground */
|
||
|
|
.paper{position:absolute;inset:0;background:
|
||
|
|
radial-gradient(ellipse at 30% 20%, #efe6d2 0%, #e5d9bf 45%, #d8c9a8 100%);}
|
||
|
|
.grain{position:absolute;inset:0;opacity:.25;
|
||
|
|
background:repeating-linear-gradient(0deg, rgba(120,90,40,.06) 0 2px, transparent 2px 5px),
|
||
|
|
repeating-linear-gradient(90deg, rgba(120,90,40,.05) 0 3px, transparent 3px 7px);}
|
||
|
|
.rule{position:absolute;left:0;right:0;height:6px;background:#6e1f1f;opacity:.9}
|
||
|
|
|
||
|
|
.kicker{position:relative;font-family:Georgia,serif;font-size:26px;letter-spacing:.32em;
|
||
|
|
text-transform:uppercase;color:#7a4a2a}
|
||
|
|
h1{position:relative;font-family:Georgia,serif;font-weight:400;color:#33301f;
|
||
|
|
margin:0;max-width:1500px;line-height:1.12}
|
||
|
|
.sub{position:relative;font-family:Georgia,serif;font-style:italic;font-size:34px;color:#5c4426}
|
||
|
|
|
||
|
|
.plate{opacity:0;position:relative;text-align:center}
|
||
|
|
|
||
|
|
/* sketch frame */
|
||
|
|
.sketchbox{position:relative;width:820px;height:660px;border:1px solid #9c865d;
|
||
|
|
background:#f3ecd9;box-shadow:0 14px 40px rgba(80,60,20,.25)}
|
||
|
|
.corner{position:absolute;width:34px;height:34px;border:3px solid #6e1f1f;opacity:.8}
|
||
|
|
.c-tl{top:10px;left:10px;border-right:none;border-bottom:none}
|
||
|
|
.c-tr{top:10px;right:10px;border-left:none;border-bottom:none}
|
||
|
|
.c-bl{bottom:10px;left:10px;border-right:none;border-top:none}
|
||
|
|
.c-br{bottom:10px;right:10px;border-left:none;border-top:none}
|
||
|
|
.digit{position:relative;font-family:Georgia,serif;font-size:420px;color:#6e1f1f;line-height:1}
|
||
|
|
</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-start="0" data-width="1920" data-height="1080" data-duration="64">
|
||
|
|
|
||
|
|
<!-- scene 1: opening — the hidden bird -->
|
||
|
|
<section id="s1" class="clip" data-start="0" data-duration="11" data-track-index="1">
|
||
|
|
<div class="paper"><div class="grain"/></div>
|
||
|
|
<div class="rule" style="top:120px;opacity:.6"/>
|
||
|
|
<div class="rule" style="bottom:120px;opacity:.6"/>
|
||
|
|
<div class="plate" id="s1-plate">
|
||
|
|
<div class="kicker" id="s1-kick">Negros, Philippines</div>
|
||
|
|
<h1 id="s1-title" style="font-size:90px;margin-top:28px">The Bird That Lives<br/>in a Sketch</h1>
|
||
|
|
<div class="sub" id="s1-sub" style="margin-top:36px">Ptilinopus arcanus</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- scene 2: the record — skins and a sketch -->
|
||
|
|
<section id="s2" class="clip" data-start="11" data-duration="15" data-track-index="1">
|
||
|
|
<div class="paper"><div class="grain"/></div>
|
||
|
|
<div class="sketchbox" id="s2-frame">
|
||
|
|
<div class="corner c-tl"/><div class="corner c-tr"/>
|
||
|
|
<div class="corner c-bl"/><div class="corner c-br"/>
|
||
|
|
<div class="plate" id="s2-plate" style="padding:120px 90px">
|
||
|
|
<h1 id="s2-title" style="font-size:64px">We know it from a handful<br/>of skins, and one sketch.</h1>
|
||
|
|
<div class="sub" id="s2-sub" style="margin-top:26px">collected 1896 · drawn once · never photographed</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- scene 3: the place — Negros lowland forest -->
|
||
|
|
<section id="s3" class="clip" data-start="26" data-duration="14" data-track-index="1">
|
||
|
|
<div class="paper"><div class="grain"/></div>
|
||
|
|
<div class="rule" style="top:150px"/>
|
||
|
|
<div class="plate" id="s3-plate" style="padding:0 120px">
|
||
|
|
<div class="kicker" id="s3-kick">Home Range</div>
|
||
|
|
<h1 id="s3-title" style="font-size:76px;margin-top:30px">Lowland forest of Negros,<br/>under Mount Kanlaon.</h1>
|
||
|
|
<div class="sub" id="s3-sub" style="margin-top:30px">cleared for cane and pasture, decade after decade</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- scene 4: the countdown -->
|
||
|
|
<section id="s4" class="clip" data-start="40" data-duration="11" data-track-index="1">
|
||
|
|
<div class="paper"><div class="grain"/></div>
|
||
|
|
<div class="sketchbox" id="s4-frame" style="width:760px;height:620px">
|
||
|
|
<div class="corner c-tl"/><div class="corner c-tr"/>
|
||
|
|
<div class="corner c-bl"/><div class="corner c-br"/>
|
||
|
|
<div class="plate" id="s4-plate" style="padding:0 80px">
|
||
|
|
<h1 id="s4-title" style="font-size:66px">Critically Endangered</h1>
|
||
|
|
<div class="digit" id="s4-num" style="margin-top:20px">0</div>
|
||
|
|
<div class="sub" id="s4-sub" style="margin-top:0">confirmed sightings this decade</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- scene 5: memory is a refusal to let go -->
|
||
|
|
<section id="s5" class="clip" data-start="51" data-duration="13" data-track-index="1">
|
||
|
|
<div class="paper"><div class="grain"/></div>
|
||
|
|
<div class="rule" style="top:200px"/>
|
||
|
|
<div class="rule" style="bottom:200px"/>
|
||
|
|
<div class="plate" id="s5-plate" style="padding:0 120px">
|
||
|
|
<h1 id="s5-title" style="font-size:76px">A species held in memory<br/>is not yet lost.</h1>
|
||
|
|
<div class="sub" id="s5-sub" style="margin-top:36px">sketches, specimens, records —<br/>how we refuse to let it go</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- narration audio, direct children of root -->
|
||
|
|
<audio id="voice-s1" src="audio/s1.wav" data-start="0"></audio>
|
||
|
|
<audio id="voice-s2" src="audio/s2.wav" data-start="11"></audio>
|
||
|
|
<audio id="voice-s3" src="audio/s3.wav" data-start="26"></audio>
|
||
|
|
<audio id="voice-s4" src="audio/s4.wav" data-start="40"></audio>
|
||
|
|
<audio id="voice-s5" src="audio/s5.wav" data-start="51"></audio>
|
||
|
|
<audio id="bgm" src="audio/music.mp3" data-start="0" data-volume="0.15"></audio>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
window.__timelines = window.__timelines || {};
|
||
|
|
const tl = gsap.timeline({ paused: true });
|
||
|
|
|
||
|
|
// scene 1
|
||
|
|
tl.to("#s1-plate", { opacity: 1, duration: 0.5, ease: "power2.out" }, 0.3);
|
||
|
|
tl.from("#s1-kick", { opacity: 0, y: 18, duration: 0.4 }, 0.8);
|
||
|
|
tl.from("#s1-title", { opacity: 0, y: 30, duration: 0.7, ease: "power3.out" }, 1.4);
|
||
|
|
tl.from("#s1-sub", { opacity: 0, letterSpacing: "0.2em", duration: 0.6 }, 2.6);
|
||
|
|
|
||
|
|
// scene 2
|
||
|
|
tl.from("#s2-frame", { scale: 0.96, opacity: 0.4, duration: 1.2, ease: "power2.out" }, 11.4);
|
||
|
|
tl.to("#s2-plate", { opacity: 1, duration: 0.6 }, 12.3);
|
||
|
|
tl.fromTo("#s2-title", { y: 24, opacity: 0 }, { y: 0, opacity: 1, duration: 0.6, ease: "power2.out" }, 13.0);
|
||
|
|
tl.fromTo("#s2-sub", { opacity: 0 }, { opacity: 1, duration: 0.5 }, 14.6);
|
||
|
|
|
||
|
|
// scene 3
|
||
|
|
tl.to("#s3-plate", { opacity: 1, duration: 0.6 }, 26.4);
|
||
|
|
tl.fromTo("#s3-title", { y: 26, opacity: 0 }, { y: 0, opacity: 1, duration: 0.6, ease: "power2.out" }, 27.2);
|
||
|
|
tl.fromTo("#s3-sub", { opacity: 0 }, { opacity: 1, duration: 0.5 }, 29.0);
|
||
|
|
|
||
|
|
// scene 4 — the countdown
|
||
|
|
tl.to("#s4-plate", { opacity: 1, duration: 0.6 }, 40.4);
|
||
|
|
tl.fromTo("#s4-num", { opacity: 0, scale: 0.85 }, { opacity: 1, scale: 1, duration: 1.2, ease: "power2.out" }, 41.5);
|
||
|
|
|
||
|
|
// scene 5
|
||
|
|
tl.to("#s5-plate", { opacity: 1, duration: 0.6 }, 51.4);
|
||
|
|
tl.fromTo("#s5-title", { y: 26, opacity: 0 }, { y: 0, opacity: 1, duration: 0.6, ease: "power2.out" }, 52.2);
|
||
|
|
tl.fromTo("#s5-sub", { opacity: 0 }, { opacity: 1, duration: 0.5 }, 54.0);
|
||
|
|
|
||
|
|
window.__timelines["main"] = tl;
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
</body></html>
|