125 lines
5.2 KiB
HTML
125 lines
5.2 KiB
HTML
<!doctype html>
|
|
<html><head><meta charset="UTF-8"/>
|
|
<title>The First Breath</title>
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:title" content="The First Breath">
|
|
<meta property="og:description" content="THE FIRST BREATH OFFSET: 0.00mm SERVICE">
|
|
<meta property="og:url" content="https://bryan-mubarak.4ort.net/">
|
|
<meta name="twitter:card" content="summary">
|
|
<meta name="description" content="THE FIRST BREATH OFFSET: 0.00mm SERVICE">
|
|
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
|
<style>
|
|
:root { --ink: #ffffff; --void: #050505; --steel: #8899a6; --gold: #d4af37; }
|
|
body { margin:0; background: var(--void); color: var(--ink); font-family: 'Inter', system-ui, sans-serif; overflow: hidden; }
|
|
#root { position: relative; width: 1920px; height: 1080px; overflow: hidden; }
|
|
.clip { position: absolute; inset: 0; display: grid; place-items: center; }
|
|
|
|
/* SCENE 1: THE THRESHOLD */
|
|
#s1-bg {
|
|
position: absolute; inset: 0;
|
|
background: radial-gradient(circle at 50% 50%, #1a1a1a 0%, #000000 80%);
|
|
filter: blur(40px);
|
|
}
|
|
#s1-text {
|
|
font-size: 120px; letter-spacing: -4px;
|
|
font-weight: 800; text-transform: uppercase;
|
|
background: linear-gradient(to bottom, var(--ink) 0%, var(--steel) 100%);
|
|
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
|
|
mix-blend-mode: exclusion;
|
|
}
|
|
|
|
/* SCENE 2: THE GEOMETRY */
|
|
#s2-line {
|
|
position: absolute; top: 50%; left: 50%;
|
|
width: 0; height: 2px; background: var(--gold);
|
|
transform-origin: left center;
|
|
}
|
|
#s2-fork {
|
|
position: absolute; top: 50%; left: 50%;
|
|
width: 40px; height: 40px;
|
|
border-radius: 50%; border: 2px solid var(--gold);
|
|
box-shadow: 0 0 30px rgba(212, 175, 55, 0.4);
|
|
transform: translate(-50%, -50%) scale(0);
|
|
}
|
|
#s2-label {
|
|
position: absolute; bottom: 15%; left: 10%;
|
|
font-size: 32px; font-family: monospace; color: var(--steel);
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
/* SCENE 3: THE SERVICE */
|
|
#s3-plate {
|
|
position: absolute; top: 50%; left: 50%;
|
|
width: 600px; height: 600px;
|
|
border-radius: 50%;
|
|
border: 1px solid var(--ink);
|
|
box-shadow: 0 0 100px rgba(255,255,255,0.1);
|
|
transform: translate(-50%, -50%) rotateX(80deg);
|
|
perspective: 1000px;
|
|
}
|
|
#s3-steam {
|
|
position: absolute; top: 50%; left: 50%;
|
|
width: 200px; height: 200px;
|
|
background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, transparent 70%);
|
|
filter: blur(60px);
|
|
transform: translate(-50%, -50%) translateY(200px);
|
|
}
|
|
#s3-title {
|
|
font-size: 96px; letter-spacing: -2px;
|
|
font-weight: 900; text-align: center;
|
|
background: linear-gradient(180deg, var(--ink) 0%, var(--gold) 100%);
|
|
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
|
|
}
|
|
</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 (REQUIRED FOR VOICE) -->
|
|
<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: 0-15s -->
|
|
<section id="s1" class="clip" data-start="0" data-duration="15" data-track-index="1">
|
|
<div id="s1-bg"></div>
|
|
<h1 id="s1-title">THE FIRST BREATH</h1>
|
|
</section>
|
|
|
|
<!-- SCENE 2: 15-30s -->
|
|
<section id="s2" class="clip" data-start="15" data-duration="15" data-track-index="1">
|
|
<div id="s2-line"></div>
|
|
<div id="s2-fork"></div>
|
|
<div id="s2-label">OFFSET: 0.00mm</div>
|
|
</section>
|
|
|
|
<!-- SCENE 3: 30-45s -->
|
|
<section id="s3" class="clip" data-start="30" data-duration="15" data-track-index="1">
|
|
<div id="s3-plate"></div>
|
|
<div id="s3-steam"></div>
|
|
<h1 id="s3-title">SERVICE</h1>
|
|
</section>
|
|
|
|
<script>
|
|
window.__timelines = window.__timelines || {};
|
|
const tl = gsap.timeline({ paused: true });
|
|
|
|
// SCENE 1: Title fade in and out
|
|
tl.to("#s1-title", { opacity: 1, y: 0, duration: 2.5, ease: "expo.out" }, 0.5);
|
|
tl.to("#s1-title", { opacity: 0, scale: 1.1, duration: 3, ease: "power2.in" }, 12);
|
|
|
|
// SCENE 2: The Line draws, the Fork blooms
|
|
tl.to("#s2-line", { width: "80vw", duration: 4, ease: "power2.inOut" }, 15.5);
|
|
tl.to("#s2-fork", { scale: 1, duration: 2, ease: "back.out(1.7)" }, 16.5);
|
|
tl.to("#s2-fork", { boxShadow: "0 0 80px rgba(212, 175, 55, 0.9)", duration: 3 }, 18);
|
|
tl.to("#s2-label", { letterSpacing: "8px", color: "#fff", duration: 4 }, 22);
|
|
|
|
// SCENE 3: Plate rotates to face, steam rises
|
|
tl.to("#s3-plate", { rotateX: 0, duration: 4, ease: "power3.inOut" }, 30.5);
|
|
tl.to("#s3-steam", { y: "-30%", opacity: 0.8, duration: 6, ease: "power1.in" }, 31);
|
|
tl.to("#s3-title", { opacity: 1, y: 0, duration: 2, ease: "expo.out" }, 34);
|
|
tl.to("#s3-plate", { borderColor: "#d4af37", boxShadow: "0 0 200px rgba(212, 175, 55, 0.3)", duration: 4 }, 36);
|
|
</script>
|
|
</body></html>
|