130 lines
5.7 KiB
HTML
130 lines
5.7 KiB
HTML
|
<!doctype html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8"/>
|
||
|
|
<title>The Inland Guide: Soil Physics of Spokane Sandy Loam</title>
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||
|
|
<style>
|
||
|
|
:root {
|
||
|
|
--void: #0a0a0a;
|
||
|
|
--ink: #ffffff;
|
||
|
|
--accent: #d4af37; /* The color of dry wheat */
|
||
|
|
--border: 2px solid var(--ink);
|
||
|
|
}
|
||
|
|
body { margin: 0; background: var(--void); color: var(--ink); font-family: 'Courier New', Courier, monospace; overflow: hidden; }
|
||
|
|
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; }
|
||
|
|
|
||
|
|
.clip { position: absolute; inset: 0; display: grid; place-items: center; padding: 80px; box-sizing: border-box; }
|
||
|
|
|
||
|
|
/* Typography */
|
||
|
|
h1 { font-size: 80px; letter-spacing: -2px; line-height: 1.1; margin: 0 0 40px 0; text-transform: uppercase; }
|
||
|
|
p.data-label { font-size: 28px; margin-top: 40px; opacity: 0.8; max-width: 1200px; }
|
||
|
|
.metric { font-size: 42px; border-bottom: var(--border); padding-bottom: 10px; margin-top: 20px; display: inline-block; }
|
||
|
|
|
||
|
|
/* Visual Elements */
|
||
|
|
.stratum-grid {
|
||
|
|
position: absolute; bottom: 120px; left: 10%; width: 80%; height: 200px;
|
||
|
|
background: repeating-linear-gradient(0deg, transparent, transparent 19px, rgba(255,255,255,0.05) 20px);
|
||
|
|
border: var(--border);
|
||
|
|
}
|
||
|
|
.moisture-front {
|
||
|
|
position: absolute; bottom: 120px; left: 10%; width: 80%; height: 0%;
|
||
|
|
background: linear-gradient(to top, var(--accent), transparent);
|
||
|
|
transition: height 0.1s;
|
||
|
|
}
|
||
|
|
.alpha-circle {
|
||
|
|
width: 300px; height: 300px; border-radius: 50%; border: 4px dashed var(--ink);
|
||
|
|
display: flex; align-items: center; justify-content: center; font-size: 32px;
|
||
|
|
animation: rotate 20s linear infinite;
|
||
|
|
}
|
||
|
|
@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
|
||
|
|
|
||
|
|
.water-bar {
|
||
|
|
width: 600px; height: 80px; border: var(--border); margin: 20px 0;
|
||
|
|
background: #111; position: relative;
|
||
|
|
}
|
||
|
|
.bar-fill {
|
||
|
|
position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
|
||
|
|
background: var(--ink); transition: width 0.1s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.title-card {
|
||
|
|
position: absolute; top: 40px; left: 40px;
|
||
|
|
border: var(--border); padding: 20px 40px; font-size: 48px; font-weight: bold;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<!-- ROOT COMPOSITION -->
|
||
|
|
<div id="root" data-composition-id="main" data-start="0" data-width="1920" data-height="1080" data-duration="47">
|
||
|
|
|
||
|
|
<!-- AUDIO TRACKS (REQUIRED FOR RENDER) -->
|
||
|
|
<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="37"></audio>
|
||
|
|
|
||
|
|
<!-- SCENE 1: THE PROBLEM -->
|
||
|
|
<section id="s1" class="clip" data-start="0" data-duration="12" data-track-index="1">
|
||
|
|
<div class="title-card" id="s1-title">SPokane<br>Sandy Loam</div>
|
||
|
|
<div class="stratum-grid" id="s1-grid"></div>
|
||
|
|
<div class="moisture-front" id="s1-water"></div>
|
||
|
|
<p class="data-label" id="s1-text">July Noon: 38°C | Evapotranspiration Rate Rising</p>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- SCENE 2: THE CONSTANT -->
|
||
|
|
<section id="s2" class="clip" data-start="12" data-duration="13" data-track-index="1">
|
||
|
|
<h1 id="s2-title">Alpha = 0.036 cm⁻¹</h1>
|
||
|
|
<div class="alpha-circle" id="s2-ring">PORE SCALE DISTRIBUTION</div>
|
||
|
|
<p class="data-label" id="s2-text">The Geometry of Departure</p>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- SCENE 3: THE CAPACITY -->
|
||
|
|
<section id="s3" class="clip" data-start="25" data-duration="12" data-track-index="1">
|
||
|
|
<h1 id="s3-title">Available Water</h1>
|
||
|
|
<div class="water-bar"><div class="bar-fill" id="s3-field"></div></div>
|
||
|
|
<p class="data-label">Field Capacity: 27%</p>
|
||
|
|
<div class="water-bar"><div class="bar-fill" id="s3-wilt"></div></div>
|
||
|
|
<p class="data-label">Wilting Point: 12%</p>
|
||
|
|
<p class="data-label metric" id="s3-range">Δ = 15% Survival Corridor</p>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- SCENE 4: THE RESOLUTION -->
|
||
|
|
<section id="s4" class="clip" data-start="37" data-duration="10" data-track-index="1">
|
||
|
|
<h1 id="s4-title">Not Healing.<br>Anticipating.</h1>
|
||
|
|
<p class="data-label" id="s4-text">Water Accordingly.</p>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- GSAP TIMELINE -->
|
||
|
|
<script>
|
||
|
|
window.__timelines = window.__timelines || {};
|
||
|
|
const tl = gsap.timeline({ paused: true });
|
||
|
|
|
||
|
|
// Scene 1: Heat and Moisture Loss
|
||
|
|
tl.to("#s1-title", { opacity: 1, duration: 1.5, ease: "power2.inOut" }, 0.2);
|
||
|
|
tl.to("#s1-grid", { opacity: 1, duration: 1 }, 0.5);
|
||
|
|
tl.to("#s1-water", { height: "40%", duration: 3, ease: "expo.out" }, 1);
|
||
|
|
tl.to("#s1-water", { height: "10%", duration: 5, ease: "power1.in" }, 4); // Rapid drying
|
||
|
|
tl.to("#s1-text", { opacity: 1, duration: 1 }, 2);
|
||
|
|
|
||
|
|
// Scene 2: The Alpha Constant
|
||
|
|
tl.to("#s2-title", { opacity: 1, scale: 1.1, duration: 2, ease: "back.out(1.7)" }, 12.2);
|
||
|
|
tl.to("#s2-ring", { rotation: 360, duration: 10, ease: "none" }, 12); // Continuous spin
|
||
|
|
tl.to("#s2-text", { opacity: 1, duration: 1 }, 13);
|
||
|
|
|
||
|
|
// Scene 3: The Range
|
||
|
|
tl.to("#s3-title", { opacity: 1, duration: 1 }, 25.2);
|
||
|
|
tl.to("#s3-field", { width: "27%", duration: 2, ease: "power2.out" }, 26);
|
||
|
|
tl.to("#s3-wilt", { width: "12%", duration: 2, ease: "power2.out" }, 28);
|
||
|
|
tl.to("#s3-range", { opacity: 1, scale: 1.2, duration: 1, ease: "elastic.out(1, 0.5)" }, 32);
|
||
|
|
|
||
|
|
// Scene 4: The Mandate
|
||
|
|
tl.to("#s4-title", { opacity: 1, letterSpacing: "0.5em", duration: 2, ease: "expo.in" }, 37.2);
|
||
|
|
tl.to("#s4-text", { opacity: 1, duration: 1 }, 40);
|
||
|
|
tl.to("body", { backgroundColor: "#1a1a1a", duration: 2 }, 44); // Fade out
|
||
|
|
|
||
|
|
window.__timelines["main"] = tl;
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|