109 lines
7.6 KiB
HTML
109 lines
7.6 KiB
HTML
<!doctype html>
|
|
<html><head>
|
|
<meta name="description" content="It's a slow walk under the trees, on purpose. No mileage. Just presence — the gift Japan gave the world in 1982."><meta charset="UTF-8"/>
|
|
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&family=IBM+Plex+Mono:wght@300;400&display=swap');
|
|
body{margin:0;background:#0e120c;color:#f1ecdf;font-family:'Cormorant Garamond',Georgia,serif}
|
|
#root{position:relative;width:1920px;height:1080px;overflow:hidden}
|
|
.clip{position:absolute;inset:0}
|
|
.bg{position:absolute;inset:0;background-size:cover;background-position:center}
|
|
.shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,14,9,.55) 0%,rgba(10,14,9,.18) 45%,rgba(6,9,5,.82) 100%)}
|
|
.vignette{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 55%,rgba(5,7,4,.75) 100%)}
|
|
.title{position:absolute;left:220px;right:220px;top:50%;transform:translateY(-40%);text-align:left}
|
|
.kicker{font-family:'IBM Plex Mono',monospace;font-size:30px;letter-spacing:.35em;color:#b9c97f;text-transform:uppercase;margin-bottom:.6em;font-weight:300}
|
|
.title h1{font-size:96px;line-height:1.06;font-weight:400;margin:0;text-shadow:0 3px 30px rgba(0,0,0,.65)}
|
|
.title .serif-i{font-style:italic;color:#e3dcc4}
|
|
.title p{font-size:42px;line-height:1.45;margin:.5em 0 0;color:#e8e2ce;font-weight:300;max-width:1100px}
|
|
.data{position:absolute;right:180px;bottom:120px;text-align:right}
|
|
.data .num{font-family:'IBM Plex Mono',monospace;font-size:120px;color:#c8d98a;font-weight:300;line-height:1}
|
|
.data .lbl{font-family:'IBM Plex Mono',monospace;font-size:28px;color:#a9b98a;letter-spacing:.15em;text-transform:uppercase}
|
|
.tag{position:absolute;left:220px;bottom:110px;font-family:'IBM Plex Mono',monospace;font-size:24px;color:#b9c97f;letter-spacing:.18em;text-transform:uppercase}
|
|
.cite{position:absolute;left:220px;bottom:70px;font-family:'IBM Plex Mono',monospace;font-size:22px;color:rgba(233,228,210,.6)}
|
|
.pillrow{position:absolute;right:180px;top:220px;text-align:right}
|
|
.pill{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:30px;color:#10200f;background:#c8d98a;padding:.25em .8em;border-radius:2px;margin:0 0 .5em .5em;letter-spacing:.04em}
|
|
.footer{position:absolute;left:220px;right:220px;bottom:120px}
|
|
.footer h2{font-size:84px;font-weight:400;margin:0 0 .3em}
|
|
.footer p{font-size:40px;line-height:1.4;font-weight:300;color:#e8e2ce;max-width:1180px}
|
|
</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="72">
|
|
|
|
<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/30904588/pexels-photo-30904588.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=1920')"></div>
|
|
<div class="shade"></div><div class="vignette"></div>
|
|
<div class="title">
|
|
<div class="kicker">Shinrin-yoku · 1982 · Japan</div>
|
|
<h1>Forest <span class="serif-i">bathing</span> is not a hike.</h1>
|
|
<p>It's a slow walk under the trees, on purpose. No mileage. Just presence — the gift Japan gave the world in 1982.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="s2" class="clip" data-start="17" data-duration="17" data-track-index="1">
|
|
<div class="bg" style="background-image:url('https://images.pexels.com/photos/37989137/pexels-photo-37989137.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=1920')"></div>
|
|
<div class="shade"></div><div class="vignette"></div>
|
|
<div class="title">
|
|
<div class="kicker">Attention Restoration Theory · Kaplan & Kaplan</div>
|
|
<h1>Soft focus <span class="serif-i">restores</span> you.</h1>
|
|
<p>Nature holds your attention without effort. That meadow of your mind gets its rest — like a fallow field regaining its soil.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="s3" class="clip" data-start="34" data-duration="19" data-track-index="1">
|
|
<div class="bg" style="background-image:url('https://pixabay.com/get/gcfa28d3e07059346079353b330038272f33339ad3e81426c1767e0ed223f5d05d681ce7a3394994628010970953ccb8bab3c4f606a3341933431e7f35a820d2c_1280.jpg')"></div>
|
|
<div class="shade"></div><div class="vignette"></div>
|
|
<div class="pillrow">
|
|
<span class="pill">+NK cell activity</span>
|
|
<span class="pill">↓ cortisol</span>
|
|
</div>
|
|
<div class="title">
|
|
<div class="kicker">The chemistry · Phytoncides</div>
|
|
<h1>The trees are <span class="serif-i">breathing out.</span></h1>
|
|
<p>Antimicrobial compounds called phytoncides raise natural-killer-cell activity and lower cortisol. You were built to breathe them back in.</p>
|
|
</div>
|
|
<div class="cite">Li, Q. (2010) · Environ Health Prev Med · Wikidata Q48645</div>
|
|
</section>
|
|
|
|
<section id="s4" class="clip" data-start="53" data-duration="19" data-track-index="1">
|
|
<div class="bg" style="background-image:url('https://images.pexels.com/photos/17808901/pexels-photo-17808901.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=1920')"></div>
|
|
<div class="shade"></div><div class="vignette"></div>
|
|
<div class="tag">Rothrock State Forest · n = 23 hikes · 2026</div>
|
|
<div class="footer">
|
|
<h2>Forty minutes in. <span class="serif-i">Fear down.</span></h2>
|
|
<p>My own data says the anxiety meter starts dropping on the trail. You don't have to believe the graphs. Just step off the pavement and let the fog lift.</p>
|
|
</div>
|
|
<div class="data">
|
|
<div class="num">40<span style="font-size:60px">min</span></div>
|
|
<div class="lbl">minimal effective dose</div>
|
|
</div>
|
|
</section>
|
|
|
|
<audio id="voice-s1" src="audio/s1.wav" data-start="0" data-volume="1"></audio>
|
|
<audio id="voice-s2" src="audio/s2.wav" data-start="17" data-volume="1"></audio>
|
|
<audio id="voice-s3" src="audio/s3.wav" data-start="34" data-volume="1"></audio>
|
|
<audio id="voice-s4" src="audio/s4.wav" data-start="53" data-volume="1"></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 });
|
|
tl.from("#s1 .title", { opacity: 0, y: 90, duration: 1.2, ease: "power3.out" }, 0.4);
|
|
tl.to("#s1 .bg", { scale: 1.08, duration: 16, ease: "sine.inOut" }, 0);
|
|
tl.set("#s2 .title", { opacity: 0, y: 90 });
|
|
tl.set("#s3 .title", { opacity: 0, y: 90 });
|
|
tl.set("#s3 .pillrow", { opacity: 0, y: 40 });
|
|
tl.to("#s2 .title", { opacity: 1, y: 0, duration: 1.1, ease: "power3.out" }, 17.4);
|
|
tl.to("#s2 .bg", { scale: 1.08, duration: 16, ease: "sine.inOut" }, 17);
|
|
tl.to("#s3 .title", { opacity: 1, y: 0, duration: 1.1, ease: "power3.out" }, 34.4);
|
|
tl.to("#s3 .pillrow", { opacity: 1, y: 0, duration: 1, ease: "power3.out" }, 35.4);
|
|
tl.to("#s3 .bg", { scale: 1.09, duration: 18, ease: "sine.inOut" }, 34);
|
|
tl.set("#s4 .tag", { opacity: 0 });
|
|
tl.set("#s4 .data", { opacity: 0, y: 60 });
|
|
tl.to("#s4 .footer", { opacity: 1, y: 0, duration: 1.1, ease: "power3.out" }, 53.4);
|
|
tl.to("#s4 .tag", { opacity: 1, duration: 1, ease: "power2.out" }, 53.6);
|
|
tl.to("#s4 .data", { opacity: 1, y: 0, duration: 1.2, ease: "power3.out" }, 54.6);
|
|
tl.to("#s4 .bg", { scale: 1.09, duration: 18, ease: "sine.inOut" }, 53);
|
|
window.__timelines["main"] = tl;
|
|
</script>
|
|
</body></html> |