130 lines
8.9 KiB
HTML
130 lines
8.9 KiB
HTML
|
<!doctype html>
|
||
|
|
<html><head><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.4)}
|
||
|
|
.vignette{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 40%,#0b0f14 100%);pointer-events:none}
|
||
|
|
h1{font-size:3.5rem;font-weight:700;text-align:center;text-shadow:0 4px 24px rgba(0,0,0,0.8);max-width:90%;line-height:1.2}
|
||
|
|
h2{font-size:2rem;font-weight:400;text-align:center;text-shadow:0 2px 16px rgba(0,0,0,0.7);max-width:80%;opacity:0.9}
|
||
|
|
.skate-line{width:60%;height:4px;background:linear-gradient(90deg,transparent,#ff6b35,#00d4aa,transparent);border-radius:2px;opacity:0}
|
||
|
|
.pulse-ring{position:absolute;width:200px;height:200px;border:3px solid #ff6b35;border-radius:50%;opacity:0;transform:scale(0.3)}
|
||
|
|
.ink-splash{position:absolute;width:300px;height:300px;background:radial-gradient(circle,#ff6b35 0%,#00d4aa 50%,transparent 70%);border-radius:50%;opacity:0;transform:scale(0.1)}
|
||
|
|
.deck-silhouette{width:120px;height:400px;background:linear-gradient(180deg,#1a1a2e 0%,#16213e 50%,#0f0f23 100%);border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,0.6);opacity:0}
|
||
|
|
.glitch-text{position:relative;display:inline-block}
|
||
|
|
.glitch-text::before,.glitch-text::after{content:attr(data-text);position:absolute;top:0;left:0;width:100%;height:100%}
|
||
|
|
.glitch-text::before{animation:glitch-1 2s infinite linear alternate-reverse;clip-path:polygon(0 0,100% 0,100% 35%,0 35%);color:#ff6b35}
|
||
|
|
.glitch-text::after{animation:glitch-2 3s infinite linear alternate-reverse;clip-path:polygon(0 65%,100% 65%,100% 100%,0 100%);color:#00d4aa}
|
||
|
|
@keyframes glitch-1{0%{transform:translate(0)}20%{transform:translate(-3px)}40%{transform:translate(3px)}60%{transform:translate(-1px)}80%{transform:translate(2px)}100%{transform:translate(0)}}
|
||
|
|
@keyframes glitch-2{0%{transform:translate(0)}20%{transform:translate(2px)}40%{transform:translate(-2px)}60%{transform:translate(1px)}80%{transform:translate(-3px)}100%{transform:translate(0)}}
|
||
|
|
.particle{position:absolute;width:4px;height:4px;background:#ff6b35;border-radius:50%;opacity:0}
|
||
|
|
.scanline{position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#00d4aa,transparent);opacity:0.3;animation:scan 0.1s linear infinite}
|
||
|
|
@keyframes scan{0%{top:0}100%{top:1080px}}
|
||
|
|
</style></head>
|
||
|
|
<body>
|
||
|
|
<div id="root" data-composition-id="main" data-start="0" data-width="1920" data-height="1080" data-duration="58">
|
||
|
|
<!-- Scene 1: Gulf Coast skate (0-11s) -->
|
||
|
|
<section id="s1" class="clip" data-start="0" data-duration="11" data-track-index="1">
|
||
|
|
<div class="bg" style="background-image:url('https://images.unsplash.com/photo-1505118380757-91f5f5632de0?w=1920&q=80')"></div>
|
||
|
|
<div class="vignette"></div>
|
||
|
|
<h1>The Gulf Coast doesn't care about your schedule.</h1>
|
||
|
|
<h2>It moves in tides and humidity. And somehow that rhythm became mine.</h2>
|
||
|
|
<div class="skate-line" id="s1-line"></div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Scene 2: Studio anxiety to art (11-24s) -->
|
||
|
|
<section id="s2" class="clip" data-start="11" data-duration="13" data-track-index="1">
|
||
|
|
<div class="bg" style="background-image:url('https://images.unsplash.com/photo-1513364776144-60967b0f800f?w=1920&q=80')"></div>
|
||
|
|
<div class="vignette"></div>
|
||
|
|
<h1 class="glitch-text" data-text="Anxiety shows up uninvited.">Anxiety shows up uninvited.</h1>
|
||
|
|
<h2>Loud and static. But when pen hits deck, noise becomes signal.</h2>
|
||
|
|
<div class="ink-splash" id="s2-splash"></div>
|
||
|
|
<div class="pulse-ring" id="s2-ring"></div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Scene 3: Deck press process (24-36s) -->
|
||
|
|
<section id="s3" class="clip" data-start="24" data-duration="12" data-track-index="1">
|
||
|
|
<div class="bg" style="background-image:url('https://images.unsplash.com/photo-1558618047-3c8c76ca7d13?w=1920&q=80')"></div>
|
||
|
|
<div class="vignette"></div>
|
||
|
|
<div class="deck-silhouette" id="s3-deck"></div>
|
||
|
|
<h1>Pressing a deck in a Florida garage is a gamble.</h1>
|
||
|
|
<h2>The glue fights the heat. The wood breathes. You work with the chaos.</h2>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Scene 4: Streaming games (36-47s) -->
|
||
|
|
<section id="s4" class="clip" data-start="36" data-duration="11" data-track-index="1">
|
||
|
|
<div class="bg" style="background-image:url('https://images.unsplash.com/photo-1493711662062-fa541adb3fc8?w=1920&q=80')"></div>
|
||
|
|
<div class="vignette"></div>
|
||
|
|
<div class="scanline"></div>
|
||
|
|
<h1>Same energy, different screen.</h1>
|
||
|
|
<h2>Streaming strategy games. Building worlds pixel by pixel. The deadline is always now.</h2>
|
||
|
|
<div class="particle" id="s4-p1"></div>
|
||
|
|
<div class="particle" id="s4-p2"></div>
|
||
|
|
<div class="particle" id="s4-p3"></div>
|
||
|
|
<div class="particle" id="s4-p4"></div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Scene 5: Finished deck, riding (47-58s) -->
|
||
|
|
<section id="s5" class="clip" data-start="47" data-duration="11" data-track-index="1">
|
||
|
|
<div class="bg" style="background-image:url('https://images.unsplash.com/photo-1541667825387-2f0d7d8d7b27?w=1920&q=80')"></div>
|
||
|
|
<div class="vignette"></div>
|
||
|
|
<h1>The finished deck hits pavement.</h1>
|
||
|
|
<h2>Graphics scraped real. Anxiety worn smooth. Tomorrow I'll wake up and do it again.</h2>
|
||
|
|
<div class="skate-line" id="s5-line"></div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Audio elements - 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="11"></audio>
|
||
|
|
<audio id="voice-s3" src="audio/s3.wav" data-start="24"></audio>
|
||
|
|
<audio id="voice-s4" src="audio/s4.wav" data-start="36"></audio>
|
||
|
|
<audio id="voice-s5" src="audio/s5.wav" data-start="47"></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: Gulf Coast
|
||
|
|
tl.from("#s1 h1", { opacity: 0, y: 40, duration: 1.2, ease: "power3.out" }, 0.3);
|
||
|
|
tl.from("#s1 h2", { opacity: 0, y: 30, duration: 1, ease: "power3.out" }, 0.8);
|
||
|
|
tl.to("#s1-line", { opacity: 1, scaleX: 1, duration: 2, ease: "power2.out", transformOrigin: "center" }, 1.5);
|
||
|
|
tl.from("#s1-line", { scaleX: 0, duration: 2, ease: "power2.out", transformOrigin: "center" }, 1.5);
|
||
|
|
tl.to("#s1 h1, #s1 h2, #s1-line", { opacity: 0, duration: 0.5, ease: "power2.in" }, 10.5);
|
||
|
|
|
||
|
|
// Scene 2: Studio
|
||
|
|
tl.from("#s2 h1", { opacity: 0, scale: 1.1, duration: 1, ease: "power3.out" }, 11.2);
|
||
|
|
tl.from("#s2 h2", { opacity: 0, y: 30, duration: 1, ease: "power3.out" }, 11.8);
|
||
|
|
tl.to("#s2-splash", { opacity: 0.6, scale: 1, duration: 2, ease: "power2.out", transformOrigin: "center" }, 12);
|
||
|
|
tl.to("#s2-ring", { opacity: 0.8, scale: 1.5, duration: 3, ease: "power1.out", transformOrigin: "center" }, 12.5);
|
||
|
|
tl.to("#s2-ring", { opacity: 0, scale: 2.5, duration: 2, ease: "power1.in", transformOrigin: "center" }, 15.5);
|
||
|
|
tl.to("#s2 h1, #s2 h2, #s2-splash, #s2-ring", { opacity: 0, duration: 0.5, ease: "power2.in" }, 23.5);
|
||
|
|
|
||
|
|
// Scene 3: Deck press
|
||
|
|
tl.to("#s3-deck", { opacity: 1, y: 0, duration: 1, ease: "power3.out" }, 24.3);
|
||
|
|
tl.from("#s3 h1", { opacity: 0, y: 40, duration: 1, ease: "power3.out" }, 24.5);
|
||
|
|
tl.from("#s3 h2", { opacity: 0, y: 30, duration: 1, ease: "power3.out" }, 25.2);
|
||
|
|
tl.to("#s3-deck", { rotationY: 360, duration: 8, ease: "none" }, 24.5);
|
||
|
|
tl.to("#s3 h1, #s3 h2, #s3-deck", { opacity: 0, duration: 0.5, ease: "power2.in" }, 35.5);
|
||
|
|
|
||
|
|
// Scene 4: Streaming
|
||
|
|
tl.from("#s4 h1", { opacity: 0, x: -50, duration: 1, ease: "power3.out" }, 36.3);
|
||
|
|
tl.from("#s4 h2", { opacity: 0, y: 30, duration: 1, ease: "power3.out" }, 36.8);
|
||
|
|
tl.to("#s4-p1", { opacity: 1, x: 300, y: -200, duration: 3, ease: "power1.out" }, 37);
|
||
|
|
tl.to("#s4-p2", { opacity: 1, x: -250, y: 150, duration: 3, ease: "power1.out" }, 37.3);
|
||
|
|
tl.to("#s4-p3", { opacity: 1, x: 400, y: 100, duration: 3, ease: "power1.out" }, 37.6);
|
||
|
|
tl.to("#s4-p4", { opacity: 1, x: -350, y: -180, duration: 3, ease: "power1.out" }, 37.9);
|
||
|
|
tl.to("#s4 h1, #s4 h2, #s4-p1, #s4-p2, #s4-p3, #s4-p4", { opacity: 0, duration: 0.5, ease: "power2.in" }, 46.5);
|
||
|
|
|
||
|
|
// Scene 5: Finished deck
|
||
|
|
tl.from("#s5 h1", { opacity: 0, y: 40, duration: 1, ease: "power3.out" }, 47.3);
|
||
|
|
tl.from("#s5 h2", { opacity: 0, y: 30, duration: 1, ease: "power3.out" }, 47.8);
|
||
|
|
tl.to("#s5-line", { opacity: 1, scaleX: 1, duration: 2, ease: "power2.out", transformOrigin: "center" }, 48.5);
|
||
|
|
tl.from("#s5-line", { scaleX: 0, duration: 2, ease: "power2.out", transformOrigin: "center" }, 48.5);
|
||
|
|
tl.to("#s5 h1, #s5 h2", { opacity: 0.3, duration: 3, ease: "power1.out" }, 52);
|
||
|
|
|
||
|
|
window.__timelines["main"] = tl;
|
||
|
|
</script>
|
||
|
|
</body></html>
|