2026-08-20 20:36:34 +02:00
<!doctype html>
2026-08-21 13:13:03 +02:00
< html > < head >
< meta name = "description" content = "Corpus Christi · Texas Coast The Cure Forty years of concrete, salt, and waiting You don't fight the concrete. You guide it. The float is where the art…" > < meta charset = "UTF-8" / >
2026-08-20 20:36:34 +02:00
< script src = "https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js" > < / script >
< style >
body{margin:0;background:#14100c;color:#eee7de;font-family:Georgia,'Times New Roman',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;opacity:0}
.veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,8,6,.15),rgba(10,8,6,.85))}
.title{font-size:96px;font-weight:700;letter-spacing:2px;text-shadow:0 4px 24px rgba(0,0,0,.7);padding:0 120px;text-align:center;opacity:0}
.sub{font-size:40px;font-style:italic;font-weight:400;margin-top:-24px;opacity:0;padding:0 160px;text-align:center}
.body-t{font-size:52px;line-height:1.35;max-width:1400px;padding:0 140px;text-align:center;text-shadow:0 2px 12px rgba(0,0,0,.8);opacity:0}
.kicker{position:absolute;top:60px;left:80px;font-size:28px;letter-spacing:6px;text-transform:uppercase;color:#d8b06a;opacity:0}
.frame{position:absolute;inset:60px;border:2px solid rgba(216,176,106,.35);opacity:0}
.stripe{position:absolute;left:0;right:0;bottom:0;height:14px;background:linear-gradient(90deg,#8a7a5a,#d8b06a,#8a7a5a);opacity:0}
2026-08-21 13:13:03 +02:00
< / style > < script defer src = "https://analytics.4ort.xyz/script.js" data-website-id = "d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b" > < / script >
< / head >
2026-08-20 20:36:34 +02:00
< body >
< div id = "root" data-composition-id = "main" data-start = "0" data-width = "1920" data-height = "1080" data-duration = "100" >
< 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 = "35" > < / audio >
< audio id = "voice-s4" src = "audio/s4.wav" data-start = "60" > < / audio >
< audio id = "voice-s5" src = "audio/s5.wav" data-start = "85" > < / audio >
< audio id = "bgm" src = "audio/music.mp3" data-start = "0" data-volume = "0.13" > < / audio >
<!-- S1: Dawn pour -->
< section id = "s1" class = "clip" data-start = "0" data-duration = "15" data-track-index = "1" >
< div class = "bg" style = "background-image:url('https://images.pexels.com/photos/10045617/pexels-photo-10045617.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940')" > < / div >
< div class = "veil" > < / div >
< div class = "frame" > < / div >
< div class = "kicker" > Corpus Christi · Texas Coast< / div >
< div class = "title" id = "s1-title" > The Cure< / div >
< div class = "sub" id = "s1-sub" > Forty years of concrete, salt, and waiting< / div >
< div class = "stripe" > < / div >
< / section >
<!-- S2: The pour -->
< section id = "s2" class = "clip" data-start = "15" data-duration = "20" data-track-index = "1" >
< div class = "bg" style = "background-image:url('https://images.pexels.com/photos/7004238/pexels-photo-7004238.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940')" > < / div >
< div class = "veil" > < / div >
< div class = "body-t" id = "s2-title" > You don't fight the concrete. You guide it.< / div >
< / section >
<!-- S3: The float -->
< section id = "s3" class = "clip" data-start = "35" data-duration = "25" data-track-index = "1" >
< div class = "bg" style = "background-image:url('https://images.pexels.com/photos/3964653/pexels-photo-3964653.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940')" > < / div >
< div class = "veil" > < / div >
< div class = "body-t" id = "s3-title" > The float is where the art lives.< / div >
< / section >
<!-- S4: The cure -->
< section id = "s4" class = "clip" data-start = "60" data-duration = "25" data-track-index = "1" >
< div class = "bg" style = "background-image:url('https://pixabay.com/get/gf139cd5aa4893e1d40ab847f825bd651d8bd753ce4273fb9cfe9215080b9d7fc5b6a696825eb65cabafc5609740fa6407aefee6aae04a82c8297a2f097f911b1_1280.jpg')" > < / div >
< div class = "veil" > < / div >
< div class = "body-t" id = "s4-title" > Then the hardest part — you wait. Seven days. Keep it wet.< / div >
< / section >
<!-- S5: The coast -->
< section id = "s5" class = "clip" data-start = "85" data-duration = "15" data-track-index = "1" >
< div class = "bg" style = "background-image:url('https://pixabay.com/get/g56be1f4eff539a702bfea38787f3f107c06ada4fb071f64fc0eb078f945687d2f672df27f2180b17e0a413bd8a14e06df0bfe1a8c246b33d47ef4a7abb8ad94e_1280.jpg')" > < / div >
< div class = "veil" > < / div >
< div class = "body-t" id = "s5-title" > Build it so your grandkids don't have to fix it.< / div >
< div class = "stripe" > < / div >
< / section >
< / div >
< script >
window.__timelines = window.__timelines || {};
const tl = gsap.timeline({ paused: true });
// S1: dawn reveal
tl.to("#s1 .bg", { opacity: 1, duration: 2.4, ease: "power2.out" }, 0.2);
tl.fromTo(".frame", { opacity: 0 }, { opacity: 1, duration: 1.5 }, 1.0);
tl.to(".kicker", { opacity: 1, y: 0, duration: 0.8 }, 1.6);
tl.to("#s1-title", { opacity: 1, y: 0, duration: 0.9, ease: "power3.out" }, 2.2);
tl.to("#s1-sub", { opacity: 1, duration: 0.9, ease: "power2.out" }, 3.2);
tl.to(".stripe", { opacity: 1, duration: 0.6 }, 4.0);
// S2: pour
tl.to("#s2 .bg", { opacity: 1, duration: 1.8, ease: "power2.out" }, 15.2);
tl.fromTo("#s2-title", { opacity: 0, y: 26 }, { opacity: 1, y: 0, duration: 1.1, ease: "power3.out" }, 16.0);
// S3: float
tl.to("#s3 .bg", { opacity: 1, duration: 1.8, ease: "power2.out" }, 35.2);
tl.fromTo("#s3-title", { opacity: 0, scale: 0.97 }, { opacity: 1, scale: 1, duration: 1.4, ease: "power2.out" }, 36.0);
// S4: cure
tl.to("#s4 .bg", { opacity: 1, duration: 1.8, ease: "power2.out" }, 60.2);
tl.fromTo("#s4-title", { opacity: 0, y: 26 }, { opacity: 1, y: 0, duration: 1.1, ease: "power3.out" }, 61.0);
// S5: coast
tl.to("#s5 .bg", { opacity: 1, duration: 2.0, ease: "power2.out" }, 85.2);
tl.fromTo("#s5-title", { opacity: 0, y: 22 }, { opacity: 1, y: 0, duration: 1.2, ease: "power3.out" }, 86.0);
tl.to("#s5 .stripe", { opacity: 1, duration: 0.8 }, 92.0);
window.__timelines["main"] = tl;
< / script >
< / body > < / html >
