110 lines
6.2 KiB
HTML
110 lines
6.2 KiB
HTML
|
<!doctype html>
|
||
|
|
<html lang="en"><head><meta charset="UTF-8"/>
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||
|
|
<title>The Rivera Rise</title>
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||
|
|
<style>
|
||
|
|
:root { --deep: #0b0f14; --gold: #c9a227; --bone: #e8e4dc; --shadow: rgba(0,0,0,0.85); }
|
||
|
|
body{margin:0;background:var(--deep);color:var(--bone);font-family:'Georgia',serif;line-height:1.4}
|
||
|
|
#root{position:relative;width:1920px;height:1080px;overflow:hidden}
|
||
|
|
.clip{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:80px}
|
||
|
|
|
||
|
|
/* Background layers */
|
||
|
|
.bg-layer{position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at center, var(--gold) 0%, transparent 70%)}
|
||
|
|
.bg-texture{position:absolute;inset:0;z-index:-2;background-image:url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noise"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noise)" opacity="0.08"/%3E%3C/svg%3E')}
|
||
|
|
|
||
|
|
/* Typography */
|
||
|
|
h1{font-size:120px;margin:0;font-weight:300;letter-spacing:-0.02em;text-transform:none;opacity:0;transform:translateY(60px)}
|
||
|
|
p{font-size:42px;margin-top:30px;font-style:italic;opacity:0;transform:translateY(-30px);max-width:900px}
|
||
|
|
.cite{font-size:24px;margin-top:60px;color:var(--gold);opacity:0;font-family:'Courier New',monospace}
|
||
|
|
|
||
|
|
/* Scene-specific styles */
|
||
|
|
#s1 .bg-layer{background:radial-gradient(circle at bottom, #1a0f0a 0%, #000 70%)}
|
||
|
|
#s2 .bg-layer{background:linear-gradient(to top, #0b0f14 0%, #c9a227 40%, #0b0f14 100%)}
|
||
|
|
#s3 .bg-layer{background:radial-gradient(circle at center, #ff6b35 0%, #c9a227 40%, #0b0f14 100%)}
|
||
|
|
|
||
|
|
/* Motion elements */
|
||
|
|
.hip-line{position:absolute;width:800px;height:4px;background:var(--gold);border-radius:2px;transform-origin:left center;opacity:0}
|
||
|
|
.foot-print{position:absolute;width:120px;height:120px;border:4px solid var(--gold);border-radius:50%;opacity:0;transform:scale(0)}
|
||
|
|
|
||
|
|
/* Captions */
|
||
|
|
.caption-box{position:absolute;bottom:120px;left:0;right:0;text-align:center;font-size:32px;font-family:sans-serif;opacity:0;letter-spacing:0.05em}
|
||
|
|
</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.15"></audio>
|
||
|
|
|
||
|
|
<!-- SCENE 1: The Fall -->
|
||
|
|
<section id="s1" class="clip" data-start="0" data-duration="15" data-track-index="1">
|
||
|
|
<div class="bg-texture"></div>
|
||
|
|
<div class="bg-layer"></div>
|
||
|
|
<h1 id="s1-title">The Fall</h1>
|
||
|
|
<p id="s1-narr">Mrs. Rivera fell in 2023.<br/>Hip frozen at forty degrees.</p>
|
||
|
|
<div class="cite" id="s1-cite">"I cannot feel my feet."</div>
|
||
|
|
<div class="caption-box" id="cap-s1">Mrs. Rivera fell in 2023<br/>Hip frozen at forty degrees</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- SCENE 2: The Release -->
|
||
|
|
<section id="s2" class="clip" data-start="15" data-duration="15" data-track-index="1">
|
||
|
|
<div class="bg-texture"></div>
|
||
|
|
<div class="bg-layer"></div>
|
||
|
|
<h1 id="s2-title">The Release</h1>
|
||
|
|
<p id="s2-narr">Needle at the psoas major.<br/>Breath held. Released.</p>
|
||
|
|
<div class="hip-line" id="hip-line"></div>
|
||
|
|
<div class="cite" id="s2-cite">Iliopsoas Release Protocol</div>
|
||
|
|
<div class="caption-box" id="cap-s2">Needle at the psoas major<br/>Breath held. Released</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- SCENE 3: The Dance -->
|
||
|
|
<section id="s3" class="clip" data-start="30" data-duration="15" data-track-index="1">
|
||
|
|
<div class="bg-texture"></div>
|
||
|
|
<div class="bg-layer"></div>
|
||
|
|
<h1 id="s3-title">The Dance</h1>
|
||
|
|
<p id="s3-narr">Six weeks later.<br/>Her foot finds the floor.</p>
|
||
|
|
<div class="foot-print" id="fp-1" style="top:60%;left:30%"></div>
|
||
|
|
<div class="foot-print" id="fp-2" style="top:60%;right:30%"></div>
|
||
|
|
<div class="cite" id="s3-cite">Wedding. Salsa. Remembered.</div>
|
||
|
|
<div class="caption-box" id="cap-s3">Six weeks later<br/>Her foot finds the floor</div>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
window.__timelines = window.__timelines || {};
|
||
|
|
const tl = gsap.timeline({ paused: true });
|
||
|
|
|
||
|
|
// SCENE 1: The Fall (0-15s)
|
||
|
|
tl.to("#s1-title", { opacity: 1, y: 0, duration: 1.5, ease: "power3.out" }, 0.5);
|
||
|
|
tl.to("#s1-narr", { opacity: 1, y: 0, duration: 1.2, ease: "power2.out" }, 2.0);
|
||
|
|
tl.to("#s1-cite", { opacity: 1, duration: 1.0, ease: "none" }, 4.5);
|
||
|
|
tl.to("#cap-s1", { opacity: 1, duration: 0.5, ease: "none" }, 0.2); // Caption fades in with voice
|
||
|
|
tl.to("#cap-s1", { opacity: 0, duration: 0.5, ease: "none" }, 14.5); // Fade out before cut
|
||
|
|
|
||
|
|
// SCENE 2: The Release (15-30s)
|
||
|
|
tl.to("#s2-title", { opacity: 1, y: 0, duration: 1.5, ease: "power3.out" }, 15.5);
|
||
|
|
tl.to("#s2-narr", { opacity: 1, y: 0, duration: 1.2, ease: "power2.out" }, 17.0);
|
||
|
|
tl.to("#hip-line", { x: 800, rotation: -15, opacity: 1, duration: 3.0, ease: "expo.inOut" }, 18.0);
|
||
|
|
tl.to("#s2-cite", { opacity: 1, duration: 1.0, ease: "none" }, 20.0);
|
||
|
|
tl.to("#cap-s2", { opacity: 1, duration: 0.5, ease: "none" }, 15.2);
|
||
|
|
tl.to("#cap-s2", { opacity: 0, duration: 0.5, ease: "none" }, 29.5);
|
||
|
|
|
||
|
|
// SCENE 3: The Dance (30-45s)
|
||
|
|
tl.to("#s3-title", { opacity: 1, y: 0, duration: 1.5, ease: "power3.out" }, 30.5);
|
||
|
|
tl.to("#s3-narr", { opacity: 1, y: 0, duration: 1.2, ease: "power2.out" }, 32.0);
|
||
|
|
tl.to("#fp-1", { scale: 1, opacity: 1, duration: 0.8, ease: "back.out(1.7)" }, 33.0);
|
||
|
|
tl.to("#fp-2", { scale: 1, opacity: 1, duration: 0.8, ease: "back.out(1.7)" }, 33.5);
|
||
|
|
tl.to("#s3-cite", { opacity: 1, duration: 1.0, ease: "none" }, 35.0);
|
||
|
|
tl.to("#cap-s3", { opacity: 1, duration: 0.5, ease: "none" }, 30.2);
|
||
|
|
tl.to("#cap-s3", { opacity: 0, duration: 0.5, ease: "none" }, 44.5);
|
||
|
|
|
||
|
|
// Final fade
|
||
|
|
tl.to("#root > section", { opacity: 0, duration: 1.0, stagger: 0.2 }, 44.0);
|
||
|
|
|
||
|
|
window.__timelines["main"] = tl;
|
||
|
|
</script>
|
||
|
|
</body></html>
|