99 lines
5.6 KiB
HTML
99 lines
5.6 KiB
HTML
|
<!doctype html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8"/>
|
||
|
|
<title>The Recovery Rhythm</title>
|
||
|
|
<meta property="og:type" content="website">
|
||
|
|
<meta property="og:title" content="The Recovery Rhythm">
|
||
|
|
<meta property="og:description" content="EL DESLIZ the wobble in the stack LA PAUSA the breath before correction EL SELLO pressure applied, true EL ALCANCE load balanced, crew ready">
|
||
|
|
<meta property="og:url" content="https://amada-zambrano.4ort.net/">
|
||
|
|
<meta name="twitter:card" content="summary">
|
||
|
|
<meta name="description" content="EL DESLIZ the wobble in the stack LA PAUSA the breath before correction EL SELLO pressure applied, true EL ALCANCE load balanced, crew ready">
|
||
|
|
<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:"IBM Plex Mono",monospace}
|
||
|
|
#root{position:relative;width:1920px;height:1080px;overflow:hidden}
|
||
|
|
.clip{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
|
||
|
|
.scene-text{font-size:72px;font-weight:300;letter-spacing:-2px;opacity:0;transform:translateY(40px)}
|
||
|
|
.scene-sub{font-size:24px;margin-top:20px;opacity:0;transform:translateY(20px);color:#8b7355}
|
||
|
|
.grid-bg{position:absolute;inset:0;background-image:linear-gradient(#1a1f26 1px,transparent 1px),linear-gradient(90deg,#1a1f26 1px,transparent 1px);background-size:120px 120px;opacity:0.15;z-index:-1}
|
||
|
|
.comal-glow{position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,#c9a87a 0%,#8b7355 30%,transparent 70%);top:50%;left:50%;transform:translate(-50%,-50%) scale(0);mix-blend-mode:screen}
|
||
|
|
.steel-line{position:absolute;height:4px;background:linear-gradient(90deg,transparent,#c9a87a,transparent);width:0;left:50%;top:50%;transform-origin:left center}
|
||
|
|
</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">
|
||
|
|
<div class="grid-bg"></div>
|
||
|
|
|
||
|
|
<!-- AUDIO TRACKS -->
|
||
|
|
<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="22"></audio>
|
||
|
|
<audio id="voice-s4" src="audio/s4.wav" data-start="33"></audio>
|
||
|
|
<audio id="bgm" src="audio/music.mp3" data-start="0" data-volume="0.12"></audio>
|
||
|
|
|
||
|
|
<!-- SCENE 1: THE SLIP -->
|
||
|
|
<section id="s1" class="clip" data-start="0" data-duration="11" data-track-index="1">
|
||
|
|
<div class="scene-text" id="s1-title">EL DESLIZ</div>
|
||
|
|
<div class="scene-sub" id="s1-sub">the wobble in the stack</div>
|
||
|
|
<div class="comal-glow" id="s1-glow"></div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- SCENE 2: THE PAUSE -->
|
||
|
|
<section id="s2" class="clip" data-start="11" data-duration="11" data-track-index="1">
|
||
|
|
<div class="scene-text" id="s2-title">LA PAUSA</div>
|
||
|
|
<div class="scene-sub" id="s2-sub">the breath before correction</div>
|
||
|
|
<div class="steel-line" id="s2-line"></div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- SCENE 3: THE SEAL -->
|
||
|
|
<section id="s3" class="clip" data-start="22" data-duration="11" data-track-index="1">
|
||
|
|
<div class="scene-text" id="s3-title">EL SELLO</div>
|
||
|
|
<div class="scene-sub" id="s3-sub">pressure applied, true</div>
|
||
|
|
<div class="comal-glow" id="s3-glow" style="border-color:#c9a87a"></div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- SCENE 4: THE RISE -->
|
||
|
|
<section id="s4" class="clip" data-start="33" data-duration="12" data-track-index="1">
|
||
|
|
<div class="scene-text" id="s4-title">EL ALCANCE</div>
|
||
|
|
<div class="scene-sub" id="s4-sub">load balanced, crew ready</div>
|
||
|
|
<div class="steel-line" id="s4-line" style="height:8px;background:linear-gradient(90deg,transparent,#ffd7a8,transparent)"></div>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
window.__timelines = window.__timelines || {};
|
||
|
|
const tl = gsap.timeline({ paused: true });
|
||
|
|
|
||
|
|
// SCENE 1: EL DESLIZ — fade in title, glow expands
|
||
|
|
tl.to("#s1-title", { opacity: 1, y: 0, duration: 1.2, ease: "power2.out" }, 0.5);
|
||
|
|
tl.to("#s1-sub", { opacity: 1, y: 0, duration: 1.2, ease: "power2.out" }, 1.0);
|
||
|
|
tl.to("#s1-glow", { transform: "translate(-50%,-50%) scale(1)", duration: 4, ease: "expo.inOut" }, 1.5);
|
||
|
|
tl.to("#s1-glow", { opacity: 0, duration: 3, ease: "power1.in" }, 8);
|
||
|
|
|
||
|
|
// SCENE 2: LA PAUSE — line draws across
|
||
|
|
tl.to("#s2-title", { opacity: 1, y: 0, duration: 1, ease: "power2.out" }, 11.5);
|
||
|
|
tl.to("#s2-sub", { opacity: 1, y: 0, duration: 1, ease: "power2.out" }, 12);
|
||
|
|
tl.to("#s2-line", { width: "100%", duration: 5, ease: "power1.inOut" }, 12.5);
|
||
|
|
tl.to("#s2-line", { opacity: 0, duration: 1, ease: "power1.in" }, 17);
|
||
|
|
|
||
|
|
// SCENE 3: EL SELLO — glow pulses twice
|
||
|
|
tl.to("#s3-title", { opacity: 1, y: 0, duration: 1, ease: "power2.out" }, 22.5);
|
||
|
|
tl.to("#s3-sub", { opacity: 1, y: 0, duration: 1, ease: "power2.out" }, 23);
|
||
|
|
tl.to("#s3-glow", { transform: "translate(-50%,-50%) scale(1)", duration: 2, ease: "expo.inOut" }, 23.5);
|
||
|
|
tl.to("#s3-glow", { transform: "translate(-50%,-50%) scale(0.95)", duration: 1, ease: "power1.inOut" }, 26);
|
||
|
|
tl.to("#s3-glow", { transform: "translate(-50%,-50%) scale(1.05)", duration: 1, ease: "power1.inOut" }, 27);
|
||
|
|
tl.to("#s3-glow", { opacity: 0, duration: 2, ease: "power1.in" }, 30);
|
||
|
|
|
||
|
|
// SCENE 4: EL ALCANCE — thick golden line rises
|
||
|
|
tl.to("#s4-title", { opacity: 1, y: 0, duration: 1, ease: "power2.out" }, 33.5);
|
||
|
|
tl.to("#s4-sub", { opacity: 1, y: 0, duration: 1, ease: "power2.out" }, 34);
|
||
|
|
tl.to("#s4-line", { width: "100%", duration: 6, ease: "power2.inOut" }, 34.5);
|
||
|
|
tl.to("#s4-title", { color: "#ffd7a8", duration: 1, ease: "power1.out" }, 38);
|
||
|
|
|
||
|
|
window.__timelines["main"] = tl;
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|