172 lines
5.5 KiB
HTML
172 lines
5.5 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8"/>
|
|
<title>Turmeric at Dawn</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
|
<style>
|
|
:root {
|
|
--gold: #D4AF37;
|
|
--clay: #8B4513;
|
|
--smoke: #2C2C2C;
|
|
--earth: #1a0f0a;
|
|
}
|
|
body {
|
|
margin: 0;
|
|
background: var(--earth);
|
|
color: #fff;
|
|
font-family: 'Courier New', monospace;
|
|
overflow: hidden;
|
|
}
|
|
#root {
|
|
position: relative;
|
|
width: 1920px;
|
|
height: 1080px;
|
|
overflow: hidden;
|
|
background: radial-gradient(ellipse at center, #2a1a10 0%, #0d0805 100%);
|
|
}
|
|
.clip {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: grid;
|
|
place-items: center;
|
|
padding: 80px;
|
|
box-sizing: border-box;
|
|
}
|
|
.particle-field {
|
|
position: absolute;
|
|
inset: 0;
|
|
background-image:
|
|
radial-gradient(var(--gold) 1px, transparent 1px),
|
|
radial-gradient(var(--clay) 1px, transparent 1px);
|
|
background-size: 60px 60px, 90px 90px;
|
|
background-position: 0 0, 30px 30px;
|
|
opacity: 0;
|
|
}
|
|
.spice-cloud {
|
|
position: absolute;
|
|
width: 800px;
|
|
height: 800px;
|
|
border-radius: 50%;
|
|
background: radial-gradient(circle, rgba(212,175,55,0.4) 0%, transparent 70%);
|
|
filter: blur(60px);
|
|
transform: translate(-50%, -50%) scale(0);
|
|
top: 50%;
|
|
left: 50%;
|
|
}
|
|
h1 {
|
|
font-size: 8rem;
|
|
letter-spacing: 0.05em;
|
|
text-transform: uppercase;
|
|
background: linear-gradient(to bottom, var(--gold), var(--clay));
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
text-align: center;
|
|
opacity: 0;
|
|
white-space: nowrap;
|
|
}
|
|
p.subtitle {
|
|
font-size: 1.8rem;
|
|
letter-spacing: 0.15em;
|
|
color: var(--gold);
|
|
margin-top: 2rem;
|
|
opacity: 0;
|
|
text-align: center;
|
|
}
|
|
.coordinates {
|
|
position: absolute;
|
|
bottom: 60px;
|
|
left: 60px;
|
|
font-size: 1.2rem;
|
|
color: rgba(212,175,55,0.7);
|
|
letter-spacing: 0.2em;
|
|
opacity: 0;
|
|
}
|
|
.hand-texture {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: repeating-linear-gradient(
|
|
45deg,
|
|
transparent,
|
|
transparent 2px,
|
|
rgba(139,69,19,0.03) 2px,
|
|
rgba(139,69,19,0.03) 4px
|
|
);
|
|
pointer-events: none;
|
|
}
|
|
</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="45">
|
|
|
|
<!-- Audio tracks -->
|
|
<audio id="voice-s1" src="audio/s1.wav" data-start="0"></audio>
|
|
<audio id="voice-s2" src="audio/s2.wav" data-start="15"></audio>
|
|
<audio id="voice-s3" src="audio/s3.wav" data-start="30"></audio>
|
|
<audio id="bgm" src="audio/music.mp3" data-start="0" data-volume="0.12"></audio>
|
|
|
|
<!-- Scene 1: The Coordinates -->
|
|
<section id="s1" class="clip" data-start="0" data-duration="15" data-track-index="1">
|
|
<div class="particle-field"></div>
|
|
<div class="hand-texture"></div>
|
|
<h1 id="s1-title">TURMERIC</h1>
|
|
<p class="subtitle" id="s1-sub">AT DAWN</p>
|
|
<div class="coordinates" id="s1-coords">37°N · 120.3°W · SACRAMENTO VALLEY</div>
|
|
</section>
|
|
|
|
<!-- Scene 2: The Soil Speaks -->
|
|
<section id="s2" class="clip" data-start="15" data-duration="15" data-track-index="1">
|
|
<div class="spice-cloud" id="s2-cloud"></div>
|
|
<div class="hand-texture"></div>
|
|
<h1 id="s2-title">THE SOIL SPEAKS</h1>
|
|
<p class="subtitle" id="s2-sub">IN GOLD AND CLAY</p>
|
|
</section>
|
|
|
|
<!-- Scene 3: The Feast Begins -->
|
|
<section id="s3" class="clip" data-start="30" data-duration="15" data-track-index="1">
|
|
<div class="spice-cloud" id="s3-cloud" style="--gold: #FFD700;"></div>
|
|
<div class="hand-texture"></div>
|
|
<h1 id="s3-title">THE FEAST BEGINS</h1>
|
|
<p class="subtitle" id="s3-sub">WHERE TURMERIC MEETS MEMORY</p>
|
|
</section>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
window.__timelines = window.__timelines || {};
|
|
const tl = gsap.timeline({ paused: true });
|
|
|
|
// Scene 1: Title reveal (0-15s)
|
|
tl.to(".particle-field", { opacity: 0.3, duration: 4, ease: "power2.inOut" }, 0.5);
|
|
tl.to("#s1-title", { opacity: 1, y: 0, duration: 2.5, ease: "expo.out" }, 1.2);
|
|
tl.to("#s1-sub", { opacity: 1, letterSpacing: "0.3em", duration: 3, ease: "power2.out" }, 4.8);
|
|
tl.to("#s1-coords", { opacity: 1, x: 0, duration: 2, ease: "linear" }, 7.5);
|
|
|
|
// Transition to Scene 2 (15s mark)
|
|
tl.to(".particle-field", { opacity: 0, duration: 1.5, ease: "power2.in" }, 13.5);
|
|
tl.to("#s1-title", { opacity: 0, scale: 1.1, duration: 1.5, ease: "power2.in" }, 13.5);
|
|
|
|
// Scene 2: Cloud expansion (15-30s)
|
|
tl.to("#s2-cloud", { scale: 1.8, duration: 6, ease: "elastic.out(1, 0.7)" }, 15.5);
|
|
tl.to("#s2-title", { opacity: 1, y: 0, duration: 2, ease: "expo.out" }, 16.8);
|
|
tl.to("#s2-sub", { opacity: 1, letterSpacing: "0.3em", duration: 3, ease: "power2.out" }, 19.2);
|
|
|
|
// Transition to Scene 3 (30s mark)
|
|
tl.to("#s2-cloud", { scale: 2.5, opacity: 0.6, duration: 2, ease: "power2.out" }, 28);
|
|
tl.to("#s2-title", { opacity: 0, scale: 0.9, duration: 2, ease: "power2.in" }, 28);
|
|
|
|
// Scene 3: Final bloom (30-45s)
|
|
tl.to("#s3-cloud", { scale: 2.8, duration: 8, ease: "power3.out" }, 30.5);
|
|
tl.to("#s3-title", { opacity: 1, y: 0, duration: 2.5, ease: "expo.out" }, 31.2);
|
|
tl.to("#s3-sub", { opacity: 1, letterSpacing: "0.3em", duration: 4, ease: "power2.out" }, 34.5);
|
|
|
|
window.__timelines["main"] = tl;
|
|
</script>
|
|
</body>
|
|
</html>
|