100 lines
7.8 KiB
HTML
100 lines
7.8 KiB
HTML
<!doctype html>
|
|
<html><head>
|
|
<meta charset="UTF-8"/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>The Ghost Dove — a conservation short by Alvin Jones</title>
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:title" content="The Ghost Dove — a conservation short by Alvin Jones">
|
|
<meta property="og:description" content="The Ghost Dove A bird that may be tiny hope, still flying Ptilinopus arcanus · Negros Fruit Dove · Critically Endangered Its one home Mount Kanlaon">
|
|
<meta property="og:url" content="https://alvin-jones.4ort.net/">
|
|
<meta name="twitter:card" content="summary">
|
|
<meta name="description" content="The Ghost Dove A bird that may be tiny hope, still flying Ptilinopus arcanus · Negros Fruit Dove · Critically Endangered Its one home Mount Kanlaon's…">
|
|
<h1 style="position:absolute;clip:rect(0 0 0 0);overflow:hidden;height:1px;width:1px;">The Ghost Dove — a conservation short film by Alvin Jones</h1>
|
|
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
|
<style>
|
|
body{margin:0;background:#0c1410;color:#e9f2e4;font-family:Georgia,'Times New Roman',serif}
|
|
#root{position:relative;width:1920px;height:1080px;overflow:hidden}
|
|
.clip{position:absolute;inset:0;display:grid;place-items:center}
|
|
.bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0}
|
|
.veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,20,12,.1) 0%,rgba(8,20,12,.72) 88%)}
|
|
.kicker{position:absolute;top:96px;left:120px;font-family:'Courier New',monospace;font-size:30px;letter-spacing:8px;text-transform:uppercase;opacity:0;color:#c6f0a8}
|
|
.title{position:absolute;left:120px;right:120px;top:300px;font-size:118px;line-height:1.05;font-weight:bold;opacity:0;color:#f4fbf0;text-shadow:0 3px 30px rgba(0,0,0,.6)}
|
|
.sub{position:absolute;left:120px;right:420px;top:560px;font-size:44px;line-height:1.4;opacity:0;color:#d7e8cf;font-style:italic}
|
|
.dove{position:absolute;right:150px;bottom:90px;max-height:560px;border-radius:6px;box-shadow:0 24px 70px rgba(0,0,0,.55);opacity:0;transform:translateY(40px)}
|
|
.cap{position:absolute;bottom:70px;left:120px;right:120px;font-size:40px;line-height:1.35;opacity:0;color:#eef6e9;font-family:'Courier New',monospace;letter-spacing:.5px}
|
|
.overline{position:absolute;left:120px;top:230px;font-family:'Courier New',monospace;font-size:26px;letter-spacing:6px;text-transform:uppercase;opacity:0;color:#9fd68a}
|
|
.body{position:absolute;left:120px;right:220px;top:330px;font-size:46px;line-height:1.42;opacity:0;color:#e7f1e0}
|
|
.range{position:absolute;right:180px;top:200px;width:520px;opacity:0;border:2px solid #9fd68a;border-radius:4px;transform:translateX(30px)}
|
|
.rangelab{position:absolute;right:180px;top:730px;width:520px;text-align:center;font-family:'Courier New',monospace;font-size:22px;letter-spacing:3px;color:#9fd68a;opacity:0}
|
|
.stat{position:absolute;left:120px;top:740px;font-family:'Courier New',monospace;font-size:28px;color:#c6f0a8;opacity:0;letter-spacing:2px}
|
|
.hand{position:absolute;right:240px;bottom:110px;opacity:0;font-size:44px;color:#d7c9a8;font-style:italic;text-align:center}
|
|
</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="62">
|
|
<section id="s1" class="clip" data-start="0" data-duration="17" data-track-index="1">
|
|
<div class="bg" style="background-image:url('https://images.pexels.com/photos/37518535/pexels-photo-37518535.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=1200&w=1920')"></div>
|
|
<div class="veil" style="background:linear-gradient(180deg,rgba(8,18,12,.25) 0%,rgba(8,18,12,.55) 55%,rgba(8,18,12,.85) 100%)"></div>
|
|
<div class="kicker" id="k1">The Ghost Dove</div>
|
|
<div class="title" id="t1">A bird that may be<br/>tiny hope, still flying</div>
|
|
<div class="sub" id="sub1">Ptilinopus arcanus · Negros Fruit Dove · Critically Endangered</div>
|
|
</section>
|
|
|
|
<section id="s2" class="clip" data-start="17" data-duration="15" data-track-index="1">
|
|
<div class="bg" style="background-image:url('https://images.pexels.com/photos/31044609/pexels-photo-31044609.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=1200&w=1920')"></div>
|
|
<div class="veil" style="background:linear-gradient(180deg,rgba(8,18,12,.3) 0%,rgba(8,18,12,.7) 100%)"></div>
|
|
<div class="overline" id="o2">Its one home</div>
|
|
<div class="body" id="b2">Mount Kanlaon's forest, island of Negros, Philippines. A century of timber and cane cleared the lowland. One mountain is now the whole world this bird never leaves.</div>
|
|
<div class="stat" id="st2">Endemic to Negros · forests of a single peak</div>
|
|
</section>
|
|
|
|
<section id="s3" class="clip" data-start="32" data-duration="15" data-track-index="1">
|
|
<div class="bg" style="background-image:url('https://images.pexels.com/photos/20858541/pexels-photo-20858541.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=1200&w=1920')"></div>
|
|
<div class="veil" style="background:linear-gradient(180deg,rgba(8,18,12,.3) 0%,rgba(8,18,12,.82) 100%)"></div>
|
|
<div class="overline" id="o3">The work of care</div>
|
|
<div class="body" id="b3">I spend my days with people the world forgets — the old, the slow. Conservation is the same craft: patience, attention, showing up for the fragile long after easy attention moves on.</div>
|
|
</section>
|
|
|
|
<section id="s4" class="clip" data-start="47" data-duration="15" data-track-index="1">
|
|
<div class="bg" style="background-image:url('https://images.pexels.com/photos/34627838/pexels-photo-34627838.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=1200&w=1920')"></div>
|
|
<div class="veil" style="background:linear-gradient(180deg,rgba(8,18,12,.3) 0%,rgba(8,18,12,.78) 100%)"></div>
|
|
<div class="overline" id="o4">Is it still there?</div>
|
|
<div class="body" id="b4">No one can say for certain. But caring for the endangered isn't counting the ones left. It's refusing to let the last one become the last one. That is care. That is hope. That is the work.</div>
|
|
<div class="hand" id="h4">alvin-jones · 4ort.mov</div>
|
|
</section>
|
|
|
|
<audio id="voice-s1" src="audio/s1.wav" data-start="0"></audio>
|
|
<audio id="voice-s2" src="audio/s2.wav" data-start="17"></audio>
|
|
<audio id="voice-s3" src="audio/s3.wav" data-start="32"></audio>
|
|
<audio id="voice-s4" src="audio/s4.wav" data-start="47"></audio>
|
|
<audio id="bgm" src="audio/music.mp3" data-start="0" data-volume="0.14"></audio>
|
|
</div>
|
|
<script>
|
|
window.__timelines = window.__timelines || {};
|
|
const tl = gsap.timeline({ paused: true });
|
|
// s1
|
|
tl.to("#k1", { opacity: 1, duration: 0.9, ease: "power3.out" }, 1.2);
|
|
tl.to("#t1", { opacity: 1, y: 0, duration: 1.1, ease: "power3.out" }, 2.0);
|
|
tl.from("#t1", { y: 34, duration: 1.1 }, 2.0);
|
|
tl.to("#sub1", { opacity: 1, duration: 1.0 }, 3.2);
|
|
tl.to({}, { duration: 0.4 }, 16.4);
|
|
tl.to("#k1", { opacity: 0, duration: 0.5 }, 16.1);
|
|
// s2
|
|
tl.from("#o2", { opacity: 0, y: 16, duration: 0.7 }, 17.6);
|
|
tl.to("#o2", { opacity: 1, y: 0, duration: 0.7 }, 17.6);
|
|
tl.to("#b2", { opacity: 1, duration: 1.0 }, 18.8);
|
|
tl.to("#st2", { opacity: 1, duration: 0.8 }, 20.4);
|
|
tl.to({}, { duration: 0.4 }, 31.2);
|
|
// s3
|
|
tl.to("#o3", { opacity: 1, y: 0, duration: 0.7 }, 32.6);
|
|
tl.from("#o3", { y: 16, duration: 0.7 }, 32.6);
|
|
tl.to("#b3", { opacity: 1, duration: 1.0 }, 33.8);
|
|
tl.to({}, { duration: 0.4 }, 46.2);
|
|
// s4
|
|
tl.to("#o4", { opacity: 1, y: 0, duration: 0.7 }, 47.6);
|
|
tl.from("#o4", { y: 16, duration: 0.7 }, 47.6);
|
|
tl.to("#b4", { opacity: 1, duration: 1.0 }, 48.8);
|
|
tl.to("#h4", { opacity: 1, duration: 0.8 }, 54.0);
|
|
window.__timelines["main"] = tl;
|
|
</script>
|
|
</body></html> |