93 lines
7.5 KiB
HTML
93 lines
7.5 KiB
HTML
<!doctype html>
|
||
<html><head>
|
||
<meta name="description" content="Hemlock needles decay into scent. Moss holds water like memory."><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:#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}
|
||
.bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(0.7)}
|
||
.title{font-size:3.5rem;font-weight:300;letter-spacing:0.04em;text-align:center;max-width:1400px;padding:0 60px;opacity:0;transform:translateY(30px)}
|
||
.subtitle{font-size:1.5rem;font-weight:300;letter-spacing:0.08em;text-transform:uppercase;color:#8B9E7E;text-align:center;max-width:1000px;padding:0 60px;opacity:0;transform:translateY(20px)}
|
||
.caption{font-size:1.1rem;font-weight:300;color:#E8E2D6;text-align:center;max-width:1200px;padding:0 80px;opacity:0;line-height:1.6;transform:translateY(15px)}
|
||
.data-line{font-family:'IBM Plex Mono',monospace;font-size:1.3rem;color:#6B8E5A;text-align:center;max-width:1000px;padding:0 60px;opacity:0;letter-spacing:0.02em}
|
||
.footer-text{font-family:'IBM Plex Mono',monospace;font-size:0.9rem;color:#6B5B4A;text-align:center;max-width:800px;padding:0 60px;opacity:0;letter-spacing:0.05em}
|
||
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400&display=swap');
|
||
</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="78">
|
||
<section id="s1" class="clip" data-start="0" data-duration="10" data-track-index="1">
|
||
<div class="bg" style="background-image:url('https://pixabay.com/get/gf2940c6b4195533273f46050fcb45a288f9dab04e8f78689c9aab6d70377d5acedc8f008e3c365e27f0261c914b7893dab1604f04d035b50226c4a36353c0621_1280.jpg')"></div>
|
||
<h1 class="title" id="s1-title">Rothrock State Forest, Pennsylvania</h1>
|
||
<p class="subtitle" id="s1-sub">Where the trees remember how to breathe</p>
|
||
</section>
|
||
<section id="s2" class="clip" data-start="10" data-duration="12" data-track-index="1">
|
||
<div class="bg" style="background-image:url('https://pixabay.com/get/g9d2762db164a3283464463fcd31b5239772285326a28adea5ddb81791033a1ddf17d11fa88a512643080189d651cbb0c32517ac2d03b5a83ffc5961dd65230b1_1280.jpg')"></div>
|
||
<p class="caption" id="s2-caption">Hemlock needles decay into scent. Moss holds water like memory.</p>
|
||
</section>
|
||
<section id="s3" class="clip" data-start="22" data-duration="15" data-track-index="1">
|
||
<div class="bg" style="background-image:url('https://pixabay.com/get/gf2fa6d7afa87e0127d2f0143c6a9e349e3a3efe28e32d48264f176b5bff1a5aef7f646f1f0414b6e4befb44ffd98a88581e7527a69a42e573c77536b9b930c09_1280.jpg')"></div>
|
||
<h1 class="title" id="s3-title">Attention Restoration Theory</h1>
|
||
<p class="caption" id="s3-caption">Fascination. Being Away. Extent. Incompatibility. The four mechanisms the Kaplans named.</p>
|
||
</section>
|
||
<section id="s4" class="clip" data-start="37" data-duration="12" data-track-index="1">
|
||
<div class="bg" style="background-image:url('https://pixabay.com/get/g3010b9633561dc3e41be76175445d5d71c8f6fdc15d5dba825b4a336ba546a31e9354bf529ce297b8675e2ab2e3f95b787f82c4dcb6f92a224ac81765c6ca936_1280.jpg')"></div>
|
||
<p class="caption" id="s4-caption">Phytoncides — tree breath — raise natural killer cells. Lower cortisol. The forest literally changes your blood.</p>
|
||
</section>
|
||
<section id="s5" class="clip" data-start="49" data-duration="12" data-track-index="1">
|
||
<div class="bg" style="background-image:url('https://pixabay.com/get/g5c55c06a0b4f2944daccbc69ea37cd7e37c3dcbe7851bb62fd69a6f5c2c8f566e6682b7b88285e738cd2f85330d04451e7a061993fd1dad95900329e4d868a5c_1280.jpg')"></div>
|
||
<div class="data-line" id="s5-data">Minimum effective dose: 40 minutes</div>
|
||
<div class="data-line" id="s5-data2" style="margin-top:60px;">Optimal window: 75–90 minutes</div>
|
||
<div class="data-line" id="s5-data3" style="margin-top:120px;">23 hikes, January–July 2026</div>
|
||
</section>
|
||
<section id="s6" class="clip" data-start="61" data-duration="10" data-track-index="1">
|
||
<div class="bg" style="background-image:url('https://pixabay.com/get/g5c55c06a0b4f2944daccbc69ea37cd7e37c3dcbe7851bb62fd69a6f5c2c8f566e6682b7b88285e738cd2f85330d04451e7a061993fd1dad95900329e4d868a5c_1280.jpg')"></div>
|
||
<p class="caption" id="s6-caption">One chord progression at the overlook. The guitar compounds the fascination.</p>
|
||
</section>
|
||
<section id="s7" class="clip" data-start="71" data-duration="7" data-track-index="1">
|
||
<div class="bg" style="background-image:url('https://pixabay.com/get/gf2940c6b4195533273f46050fcb45a288f9dab04e8f78689c9aab6d70377d5acedc8f008e3c365e27f0261c914b7893dab1604f04d035b50226c4a36353c0621_1280.jpg')"></div>
|
||
<p class="footer-text" id="s7-footer">alfred-rosenberg.4ort.net — The forest doesn't care about your Trello board. That indifference is the medicine.</p>
|
||
</section>
|
||
<!-- Audio elements as 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="10"></audio>
|
||
<audio id="voice-s3" src="audio/s3.wav" data-start="22"></audio>
|
||
<audio id="voice-s4" src="audio/s4.wav" data-start="37"></audio>
|
||
<audio id="voice-s5" src="audio/s5.wav" data-start="49"></audio>
|
||
<audio id="voice-s6" src="audio/s6.wav" data-start="61"></audio>
|
||
<audio id="voice-s7" src="audio/s7.wav" data-start="71"></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: 0-10s
|
||
tl.to("#s1-title", { opacity: 1, y: 0, duration: 1.2, ease: "power3.out" }, 0.5);
|
||
tl.to("#s1-sub", { opacity: 1, y: 0, duration: 1, ease: "power3.out" }, 1.2);
|
||
tl.to("#s1-title", { opacity: 0, duration: 0.5 }, 9.5);
|
||
tl.to("#s1-sub", { opacity: 0, duration: 0.5 }, 9.5);
|
||
// Scene 2: 10-22s
|
||
tl.to("#s2-caption", { opacity: 1, y: 0, duration: 1, ease: "power3.out" }, 10.5);
|
||
tl.to("#s2-caption", { opacity: 0, duration: 0.5 }, 21.5);
|
||
// Scene 3: 22-37s
|
||
tl.to("#s3-title", { opacity: 1, y: 0, duration: 1, ease: "power3.out" }, 22.5);
|
||
tl.to("#s3-caption", { opacity: 1, y: 0, duration: 1, ease: "power3.out" }, 23.5);
|
||
tl.to("#s3-title", { opacity: 0, duration: 0.5 }, 36.5);
|
||
tl.to("#s3-caption", { opacity: 0, duration: 0.5 }, 36.5);
|
||
// Scene 4: 37-49s
|
||
tl.to("#s4-caption", { opacity: 1, y: 0, duration: 1, ease: "power3.out" }, 37.5);
|
||
tl.to("#s4-caption", { opacity: 0, duration: 0.5 }, 48.5);
|
||
// Scene 5: 49-61s
|
||
tl.to("#s5-data", { opacity: 1, y: 0, duration: 0.8, ease: "power3.out" }, 49.5);
|
||
tl.to("#s5-data2", { opacity: 1, y: 0, duration: 0.8, ease: "power3.out" }, 50.5);
|
||
tl.to("#s5-data3", { opacity: 1, y: 0, duration: 0.8, ease: "power3.out" }, 51.5);
|
||
tl.to(["#s5-data","#s5-data2","#s5-data3"], { opacity: 0, duration: 0.5 }, 60.5);
|
||
// Scene 6: 61-71s
|
||
tl.to("#s6-caption", { opacity: 1, y: 0, duration: 1, ease: "power3.out" }, 61.5);
|
||
tl.to("#s6-caption", { opacity: 0, duration: 0.5 }, 70.5);
|
||
// Scene 7: 71-78s
|
||
tl.to("#s7-footer", { opacity: 1, y: 0, duration: 1, ease: "power3.out" }, 71.5);
|
||
window.__timelines["main"] = tl;
|
||
</script>
|
||
</body></html> |