184 lines
6.9 KiB
HTML
184 lines
6.9 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8"/>
|
|
<title>Reading the Stone — Barbara Haber</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
|
<style>
|
|
:root {
|
|
--stone-warm: #d4a574;
|
|
--shadow-deep: #1a1f29;
|
|
--frost-blue: #c8d4e8;
|
|
--earth-dark: #2d2a26;
|
|
}
|
|
body {
|
|
margin: 0;
|
|
background: var(--shadow-deep);
|
|
color: var(--frost-blue);
|
|
font-family: Georgia, serif;
|
|
}
|
|
#root {
|
|
position: relative;
|
|
width: 1920px;
|
|
height: 1080px;
|
|
overflow: hidden;
|
|
background: radial-gradient(ellipse at center bottom, var(--earth-dark) 0%, var(--shadow-deep) 60%);
|
|
}
|
|
.clip {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: grid;
|
|
place-items: center;
|
|
}
|
|
.scene-text {
|
|
max-width: 1200px;
|
|
text-align: center;
|
|
padding: 0 120px;
|
|
z-index: 10;
|
|
}
|
|
h1 {
|
|
font-size: 72px;
|
|
font-weight: 400;
|
|
letter-spacing: 0.12em;
|
|
margin-bottom: 24px;
|
|
color: var(--stone-warm);
|
|
text-transform: uppercase;
|
|
}
|
|
h2 {
|
|
font-size: 48px;
|
|
font-weight: 300;
|
|
letter-spacing: 0.08em;
|
|
margin-bottom: 32px;
|
|
color: var(--frost-blue);
|
|
}
|
|
p.narration {
|
|
font-size: 32px;
|
|
line-height: 1.6;
|
|
font-style: italic;
|
|
color: rgba(200, 212, 232, 0.85);
|
|
}
|
|
.image-backdrop {
|
|
position: absolute;
|
|
inset: 0;
|
|
object-fit: cover;
|
|
filter: brightness(0.6) sepia(0.2);
|
|
transition: transform 4s ease-out;
|
|
}
|
|
.data-tag {
|
|
position: absolute;
|
|
bottom: 60px;
|
|
left: 60px;
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 18px;
|
|
color: var(--stone-warm);
|
|
opacity: 0.7;
|
|
}
|
|
.source-line {
|
|
position: absolute;
|
|
bottom: 40px;
|
|
right: 60px;
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 14px;
|
|
color: rgba(200, 212, 232, 0.5);
|
|
}
|
|
/* Scene-specific fades */
|
|
#s1 { background: linear-gradient(to top, var(--earth-dark) 0%, transparent 40%); }
|
|
#s2 { background: linear-gradient(to bottom, transparent 0%, var(--shadow-deep) 70%); }
|
|
#s3 { background: radial-gradient(circle at 30% 50%, var(--stone-warm) 0%, transparent 30%); }
|
|
#s4 { background: linear-gradient(to right, var(--shadow-deep) 0%, transparent 50%); }
|
|
</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="52">
|
|
|
|
<!-- Audio tracks -->
|
|
<audio id="voice-s1" src="audio/s1.wav" data-start="0" data-volume="1.0"></audio>
|
|
<audio id="voice-s2" src="audio/s2.wav" data-start="12" data-volume="1.0"></audio>
|
|
<audio id="voice-s3" src="audio/s3.wav" data-start="24" data-volume="1.0"></audio>
|
|
<audio id="voice-s4" src="audio/s4.wav" data-start="36" data-volume="1.0"></audio>
|
|
<audio id="bgm" src="audio/music.mp3" data-start="0" data-volume="0.12"></audio>
|
|
|
|
<!-- Scene 1: Title -->
|
|
<section id="s1" class="clip" data-start="0" data-duration="12" data-track-index="1">
|
|
<div class="scene-text">
|
|
<h1>Reading the Stone</h1>
|
|
<p class="narration">In Santa Paula, the garden wakes before the sun.</p>
|
|
</div>
|
|
<img class="image-backdrop"
|
|
src="https://images.pexels.com/photos/29231544/pexels-photo-29231544.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=1080&w=1920"
|
|
alt="Frost on morning leaves">
|
|
<div class="data-tag">frost-protection: Q1468846</div>
|
|
<div class="source-line">pexels · frost-kissed-green-leaf</div>
|
|
</section>
|
|
|
|
<!-- Scene 2: The Pattern -->
|
|
<section id="s2" class="clip" data-start="12" data-duration="12" data-track-index="1">
|
|
<div class="scene-text">
|
|
<h2>The Microclimates</h2>
|
|
<p class="narration">South-facing stone holds the day's heat into midnight. Sandstone warms faster than granite, releases slower. The frost retreats first from the red rocks.</p>
|
|
</div>
|
|
<img class="image-backdrop"
|
|
src="https://pixabay.com/get/gd3b39c596ac8f168003a0ea041d4ddd0dbadd1027cf2657541dfa7761104c61f10022d0a0734e06abfa87975ed2f54e7c3c985da6beef5b4dda1531fab8d5d01_1280.jpg"
|
|
alt="Morning frost on grass">
|
|
<div class="data-tag">soil-classification: Q386963</div>
|
|
<div class="source-line">pixabay · morning-frost-grass</div>
|
|
</section>
|
|
|
|
<!-- Scene 3: The Measurement -->
|
|
<section id="s3" class="clip" data-start="24" data-duration="12" data-track-index="1">
|
|
<div class="scene-text">
|
|
<h2>Water Retention Curve</h2>
|
|
<p class="narration">Clay holds water tight—freezes late, thaws slow. Sand drains quick—freezes fast, thaws first. The Van Genuchten equation maps the boundary.</p>
|
|
</div>
|
|
<img class="image-backdrop"
|
|
src="https://images.pexels.com/photos/1042392/pexels-photo-1042392.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=1080&w=1920"
|
|
alt="Frosted nettle leaves">
|
|
<div class="data-tag">water-retention-curve: Q889790</div>
|
|
<div class="source-line">pexels · green-oregano-leaves</div>
|
|
</section>
|
|
|
|
<!-- Scene 4: The Practice -->
|
|
<section id="s4" class="clip" data-start="36" data-duration="16" data-track-index="1">
|
|
<div class="scene-text">
|
|
<h2>The Garden's Memory</h2>
|
|
<p class="narration">We do not fight the frost—we read it. Plant the peaches where the stone keeps warm. Leave the roses to the clay's slow thaw. This is the ledger that closes with warmth.</p>
|
|
</div>
|
|
<img class="image-backdrop"
|
|
src="https://images.pexels.com/photos/34870781/pexels-photo-34870781.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=1080&w=1920"
|
|
alt="Variegated leaves in frost">
|
|
<div class="source-line">pexels · frosted-variegated-leaves</div>
|
|
</section>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
window.__timelines = window.__timelines || {};
|
|
const tl = gsap.timeline({ paused: true });
|
|
|
|
// Scene 1: Title fade-in
|
|
tl.to("#s1 h1", { opacity: 1, y: 0, duration: 1.2, ease: "power3.out" }, 0.5);
|
|
tl.to("#s1 p.narration", { opacity: 1, duration: 1.8, ease: "power2.inOut" }, 1.8);
|
|
tl.to(".image-backdrop", { scale: 1.03, duration: 12, ease: "none" }, 0);
|
|
|
|
// Scene 2: Transition
|
|
tl.to("#s1 .scene-text", { opacity: 0, duration: 0.8, ease: "power2.in" }, 11);
|
|
tl.to("#s2 h2", { opacity: 1, y: 0, duration: 1.2, ease: "power3.out" }, 12.5);
|
|
tl.to("#s2 p.narration", { opacity: 1, duration: 1.8, ease: "power2.inOut" }, 13.8);
|
|
|
|
// Scene 3: Deep dive
|
|
tl.to("#s2 .scene-text", { opacity: 0, duration: 0.8, ease: "power2.in" }, 23);
|
|
tl.to("#s3 h2", { opacity: 1, y: 0, duration: 1.2, ease: "power3.out" }, 24.5);
|
|
tl.to("#s3 p.narration", { opacity: 1, duration: 1.8, ease: "power2.inOut" }, 25.8);
|
|
|
|
// Scene 4: Resolution
|
|
tl.to("#s3 .scene-text", { opacity: 0, duration: 0.8, ease: "power2.in" }, 35);
|
|
tl.to("#s4 h2", { opacity: 1, y: 0, duration: 1.2, ease: "power3.out" }, 36.5);
|
|
tl.to("#s4 p.narration", { opacity: 1, duration: 2.2, ease: "power2.inOut" }, 37.8);
|
|
tl.to("#s4 .scene-text", { opacity: 0, duration: 2, ease: "power2.in" }, 48);
|
|
|
|
window.__timelines["main"] = tl;
|
|
</script>
|
|
</body>
|
|
</html>
|