Live preview — fully interactive
The prompt
Build a free, one-screen-plus waitlist for ORBIT 01, a fictional first public drop. The page must feel like a paid Aceternity launch: dark, timed, quiet, and too finished to give away. Three sections in this order: Hero, Form, Share. ## Design system - Tokens: background #08080d, text #f2f2f7, secondary #8a8a99, accent #7c6cff, border #23232e, hint #565869, card fill #101018 / rgba(16,16,24,0.72) - Font stack: Inter, system-ui, sans-serif. Antialiased. Selection fill #7c6cff - Type: eyebrow 12px / 600 / 0.22em / uppercase / #7c6cff; h1 clamp(40px, 7vw, 80px) / 700 / -0.04em / line-height 1.04; lede 16px / 1.65 / max 480px; countdown nums clamp(28px, 4.6vw, 44px) / 600 / tabular-nums; form h2 22px; body 14px; fine 12px; share 14px / 600 - Radii: cells 16px, form 20px, inputs and submit 12px, pills 999px - Spacing: page pad 24px, hero core 48px 0 28px, form pad 32px, countdown gap 10px, share pad 40px 24px 56px - Max widths: hero copy 760px, form 560px, nav 1120px ## Layout - Fixed atmosphere layer under the page: 64px hairline grid (masked to an ellipse at 50% 28%), 720px violet wash at the top, 400px mouse orb, SVG feTurbulence grain at opacity 0.05 - Hero (data-block Hero, id block-hero): 56px bar (ring mark + ORBIT left, Closed beta pill right), giant 01 watermark at 0.035 opacity, 3-line h1, lede, 4-cell countdown inside a 48s orbit halo, reserved meta - Form (data-block Form, id block-form): centered 560px card, kicker Seat request, email + ripple submit in one 56px row (stack under 640px), success overlay absolutely filling the card - Share (data-block Share, id block-share): top hairline, three 48px pill buttons (X, LinkedIn, Copy link) all using href # or a button, footer ORBIT 01 - Body scrolls. Never lock overflow on body. overflow-x hidden only. ## Motion - Engine: GSAP 3.12.5 from cdnjs. No ScrollTrigger. Default entrance ease power4.out - Split each h1 .line into words then chars with createElement (never GSAP SplitText). Set chars to yPercent 118 / rotation 9 before paint. Each line i tweens to 0 / 0, duration 0.85s, stagger 0.024s, at 0.28 + i * 0.16s. transform-origin 0% 100% - Eyebrow fade 0.7s at 0.12s. Lede fade 0.7s at -=0.35. Cells from y 20, 0.55s, stagger 0.06s, at 1.05s. Meta 0.6s at 1.25s. Form from y 24, 0.8s at 1.2s. Share from y 16, 0.7s at 1.45s - Countdown: TARGET = Date.now() + a millisecond offset of 18 days + 7 hours + 42 minutes + 19 seconds. Tick every 1000ms. Pad to two digits with string concat. Digit change 0.28s power2.out - Submit ripple: circle at click point, size = max(width, height), scale 0 to 8 and fade in 0.7s, then remove - Success: live block to y -12 / opacity 0 in 0.4s, done block from y 16 in 0.5s delay 0.18s - Mouse orb: gsap.quickTo x/y, 0.6s power3.out, pointer:fine only - prefers-reduced-motion: skip split and entrance, show the final state ## Constraints - Single self-contained HTML file. Inline CSS. Scripts at the bottom. - Load only https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js - 60fps: transform and opacity only for motion. English only. Anchors href #. - No template-literal interpolation anywhere. Join strings with +. Countdown date is computed at runtime from Date.now() plus an offset — never bake a timestamp into the source. - Form is client-side only: preventDefault, no network. Original markup — do not paste Aceternity or React Bits source.
The code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ORBIT 01 — First public drop</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
html { color-scheme: dark; -webkit-font-smoothing: antialiased; }
html, body { background: #08080d; color: #f2f2f7; }
body { font-family: 'Inter', system-ui, sans-serif; min-height: 100vh; overflow-x: hidden; }
::selection { background: #7c6cff; color: #fff; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
.fx { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.grid {
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(242, 242, 247, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(242, 242, 247, 0.035) 1px, transparent 1px);
background-size: 64px 64px;
mask-image: radial-gradient(ellipse 70% 58% at 50% 28%, #000 18%, transparent 76%);
-webkit-mask-image: radial-gradient(ellipse 70% 58% at 50% 28%, #000 18%, transparent 76%);
}
.wash {
position: absolute; width: 720px; height: 720px; left: 50%; top: -120px;
margin-left: -360px;
background: radial-gradient(circle, rgba(124, 108, 255, 0.22), transparent 68%);
}
.orb {
position: absolute; width: 400px; height: 400px; top: 0; left: 0;
border-radius: 50%;
background: radial-gradient(circle, rgba(124, 108, 255, 0.2), transparent 68%);
mix-blend-mode: screen; will-change: transform;
}
.grain {
position: absolute; inset: 0; opacity: 0.05;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
section { position: relative; z-index: 1; }
.sr {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
#block-hero { padding: 20px 24px 10px; }
.bar {
width: min(1120px, 100%); margin: 0 auto;
height: 56px; display: flex; align-items: center; justify-content: space-between;
}
.brand {
display: flex; align-items: center; gap: 10px;
font-size: 13px; font-weight: 700; letter-spacing: 0.18em;
}
.mark {
width: 18px; height: 18px; border-radius: 50%;
border: 1.5px solid #7c6cff; display: grid; place-items: center;
}
.mark-dot { width: 5px; height: 5px; border-radius: 50%; background: #7c6cff; }
.pill {
display: inline-flex; align-items: center; gap: 8px;
height: 28px; padding: 0 11px; border-radius: 999px;
border: 1px solid #23232e; background: rgba(16, 16, 24, 0.7);
font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #8a8a99;
}
.live {
width: 6px; height: 6px; border-radius: 50%; background: #7c6cff;
animation: live 1.6s ease-in-out infinite;
}
@keyframes live { 0%, 100% { opacity: 1; } 50% { opacity: 0.28; } }
.hero-core {
position: relative;
display: flex; flex-direction: column; align-items: center; text-align: center;
padding: 48px 0 28px; width: min(760px, 100%); margin: 0 auto;
}
.watermark {
position: absolute; left: 50%; top: 38%;
transform: translate(-50%, -50%);
font-size: clamp(140px, 28vw, 300px); font-weight: 700;
letter-spacing: -0.07em; line-height: 1; color: #f2f2f7;
opacity: 0.035; pointer-events: none; user-select: none;
}
.eyebrow {
font-size: 12px; font-weight: 600; letter-spacing: 0.22em;
text-transform: uppercase; color: #7c6cff; margin-bottom: 22px; opacity: 0;
}
h1 {
font-size: clamp(40px, 7vw, 80px); font-weight: 700;
letter-spacing: -0.04em; line-height: 1.04;
}
h1 .line { display: block; overflow: hidden; padding: 0.06em 0; }
h1 .word { display: inline-block; white-space: nowrap; }
h1 .char { display: inline-block; will-change: transform; transform-origin: 0% 100%; }
h1 .accent .char { color: #7c6cff; }
.lede {
margin-top: 22px; max-width: 480px; color: #8a8a99;
font-size: 16px; line-height: 1.65; opacity: 0;
}
.cd-stage {
position: relative; display: flex; justify-content: center;
margin: 36px 0 18px; padding: 28px 8px;
}
.halo-hold {
position: absolute; left: 50%; top: 50%;
width: min(520px, 92vw); height: 200px;
transform: translate(-50%, -50%); pointer-events: none;
}
.halo {
width: 100%; height: 100%; border-radius: 50%;
border: 1px solid rgba(124, 108, 255, 0.16);
animation: orbit-spin 48s linear infinite;
}
.sat {
position: absolute; top: -3px; left: 50%; width: 6px; height: 6px;
margin-left: -3px; border-radius: 50%; background: #7c6cff;
}
@keyframes orbit-spin { to { transform: rotate(360deg); } }
.cd {
position: relative; z-index: 1;
display: grid; grid-template-columns: repeat(4, minmax(72px, 92px)); gap: 10px;
}
.cell {
overflow: hidden; padding: 16px 8px 14px; border-radius: 16px;
background: rgba(16, 16, 24, 0.72); border: 1px solid #23232e;
box-shadow: inset 0 1px 0 rgba(242, 242, 247, 0.04); opacity: 0;
}
.num {
display: block; font-size: clamp(28px, 4.6vw, 44px); font-weight: 600;
letter-spacing: -0.03em; line-height: 1;
font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
will-change: transform;
}
.lbl {
display: block; margin-top: 10px;
font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: #8a8a99;
}
.meta { font-size: 13px; color: #8a8a99; opacity: 0; }
#block-form { padding: 16px 24px 64px; }
.form-shell {
position: relative; width: min(560px, 100%); margin: 0 auto; padding: 32px;
border-radius: 20px; background: rgba(16, 16, 24, 0.72);
border: 1px solid #23232e;
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.4), 0 0 80px rgba(124, 108, 255, 0.07);
opacity: 0;
}
.kicker {
font-size: 11px; font-weight: 600; letter-spacing: 0.2em;
text-transform: uppercase; color: #7c6cff; margin-bottom: 10px;
}
.form-shell h2 {
font-size: 22px; font-weight: 650; letter-spacing: -0.03em; line-height: 1.2;
}
.form-sub { margin: 10px 0 22px; color: #8a8a99; font-size: 14px; line-height: 1.55; }
.row { display: flex; gap: 10px; }
#email {
flex: 1; min-width: 0; height: 56px; padding: 0 18px;
border-radius: 12px; border: 1px solid #23232e; background: #101018;
outline: none; caret-color: #f2f2f7;
}
#email::placeholder { color: #565869; }
#email:focus { border-color: #7c6cff; }
#email.is-err { border-color: #ff5c8a; }
input:-webkit-autofill {
-webkit-text-fill-color: #f2f2f7;
-webkit-box-shadow: 0 0 0 1000px #101018 inset;
caret-color: #f2f2f7;
}
.btn {
position: relative; overflow: hidden; flex-shrink: 0;
height: 56px; padding: 0 26px; border: none; border-radius: 12px;
background: #7c6cff; color: #fff; font-size: 15px; font-weight: 600;
letter-spacing: 0.01em; cursor: pointer;
transition: transform 0.18s ease, filter 0.18s ease;
}
.btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn:active { transform: scale(0.97); }
.btn:disabled { cursor: default; filter: none; transform: none; }
.btn:focus-visible { outline: 2px solid #7c6cff; outline-offset: 3px; }
.btn-label { position: relative; z-index: 1; }
.ripple {
position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.35);
transform: scale(0); animation: ripple 0.7s ease-out forwards; pointer-events: none;
}
@keyframes ripple { to { transform: scale(8); opacity: 0; } }
.fine { margin-top: 14px; font-size: 12px; color: #565869; }
.form-done {
position: absolute; inset: 0; padding: 32px;
display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center; opacity: 0; pointer-events: none;
}
.form-done p { margin-top: 10px; color: #8a8a99; font-size: 14px; line-height: 1.55; max-width: 360px; }
.check {
width: 48px; height: 48px; border-radius: 50%;
border: 1.5px solid #7c6cff; margin-bottom: 16px; position: relative;
}
.check::after {
content: ''; position: absolute; left: 16px; top: 11px;
width: 12px; height: 20px;
border-right: 2px solid #7c6cff; border-bottom: 2px solid #7c6cff;
transform: rotate(45deg);
}
#block-share {
padding: 40px 24px 56px; border-top: 1px solid #23232e;
text-align: center; opacity: 0;
}
.share-kicker {
font-size: 11px; font-weight: 600; letter-spacing: 0.2em;
text-transform: uppercase; color: #7c6cff; margin-bottom: 8px;
}
.share-lede { color: #8a8a99; font-size: 14px; margin-bottom: 22px; }
.share-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.share {
display: inline-flex; align-items: center; gap: 8px;
height: 48px; padding: 0 18px; border-radius: 999px;
border: 1px solid #23232e; background: rgba(16, 16, 24, 0.55);
color: #f2f2f7; font-size: 14px; font-weight: 600; cursor: pointer;
transition: transform 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.share:hover { border-color: #7c6cff; transform: translateY(-1px); }
.share:active { transform: scale(0.97); }
.share:focus-visible { outline: 2px solid #7c6cff; outline-offset: 3px; }
.share svg { display: block; }
.foot { margin-top: 28px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #565869; }
@media (max-width: 640px) {
.row { flex-direction: column; }
.btn { width: 100%; }
.cd { grid-template-columns: repeat(4, minmax(64px, 1fr)); gap: 8px; }
.cell { padding: 14px 4px 12px; border-radius: 14px; }
.hero-core { padding: 36px 0 20px; }
.form-shell { padding: 24px 20px; }
}
@media (prefers-reduced-motion: reduce) {
.halo, .live { animation: none !important; }
.orb { display: none; }
}
</style>
</head>
<body>
<div class="fx" aria-hidden="true">
<div class="grid"></div>
<div class="wash"></div>
<div class="orb"></div>
<div class="grain"></div>
</div>
<section data-block="Hero" id="block-hero">
<header class="bar">
<a class="brand" href="#">
<span class="mark"><span class="mark-dot"></span></span>
ORBIT
</a>
<span class="pill"><span class="live"></span><span id="pill-txt">Closed beta</span></span>
</header>
<div class="hero-core">
<p class="watermark" aria-hidden="true">01</p>
<p class="eyebrow">First public drop</p>
<h1 id="headline">
<span class="line">First look</span>
<span class="line accent">ORBIT 01</span>
<span class="line">goes live.</span>
</h1>
<p class="lede">A quiet instrument for people who design in the dark. We open the list when the clock hits zero — not before.</p>
<div class="cd-stage">
<div class="halo-hold" aria-hidden="true"><div class="halo"><span class="sat"></span></div></div>
<div class="cd" role="timer" aria-label="Time remaining until ORBIT 01 opens">
<div class="cell"><span class="num" id="cd-d">00</span><span class="lbl">Days</span></div>
<div class="cell"><span class="num" id="cd-h">00</span><span class="lbl">Hours</span></div>
<div class="cell"><span class="num" id="cd-m">00</span><span class="lbl">Mins</span></div>
<div class="cell"><span class="num" id="cd-s">00</span><span class="lbl">Secs</span></div>
</div>
</div>
<p class="meta"><span id="reserved">2,847 reserved</span> · No spam. One note when we open.</p>
</div>
</section>
<section data-block="Form" id="block-form">
<div class="form-shell" id="form-shell">
<div class="form-live" id="form-live">
<p class="kicker">Seat request</p>
<h2>Leave an email. Nothing else.</h2>
<p class="form-sub">We write once. If it is not the open, it is not us.</p>
<form id="waitlist" novalidate>
<label class="sr" for="email">Work email</label>
<div class="row">
<input id="email" name="email" type="email" autocomplete="email" inputmode="email" spellcheck="false" placeholder="you@studio.com" required />
<button class="btn" id="submit" type="submit"><span class="btn-label">Request access</span></button>
</div>
</form>
<p class="fine">No card. Leave in one click. We never sell the list.</p>
</div>
<div class="form-done" id="form-done">
<div class="check" aria-hidden="true"></div>
<h2>You are on the list.</h2>
<p id="seat-line">Seat reserved. We will write once.</p>
</div>
</div>
</section>
<section data-block="Share" id="block-share">
<p class="share-kicker">Move the list</p>
<p class="share-lede">It does not jump the queue. It makes the room.</p>
<div class="share-row">
<a class="share" href="#" id="share-x">
<svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.74l7.725-8.835L1.254 2.25H8.08l4.253 5.622zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
<span>X</span>
</a>
<a class="share" href="#" id="share-li">
<svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor" aria-hidden="true"><path d="M4.98 3.5C4.98 4.88 3.88 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1s2.48 1.12 2.48 2.5zM.22 8.25h4.56V23H.22V8.25zM8.22 8.25h4.37v2.01h.06c.61-1.16 2.1-2.38 4.32-2.38 4.62 0 5.47 3.04 5.47 6.99V23h-4.56v-7.23c0-1.72-.03-3.94-2.4-3.94-2.4 0-2.77 1.87-2.77 3.81V23H8.22V8.25z"/></svg>
<span>LinkedIn</span>
</a>
<button class="share" type="button" id="share-copy">
<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
<span id="copy-lbl">Copy link</span>
</button>
</div>
<p class="foot">ORBIT 01 · First drop</p>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script>
(function () {
var REDUCE = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
var FINE = window.matchMedia('(pointer: fine)').matches;
var OFFSET_MS = ((((18 * 24) + 7) * 60 + 42) * 60 + 19) * 1000;
var TARGET = Date.now() + OFFSET_MS;
var reserved = 2847;
var primed = false;
function pad2(n) {
n = Math.max(0, Math.floor(n));
return (n < 10 ? '0' : '') + n;
}
function setReserved() {
document.getElementById('reserved').textContent = reserved.toLocaleString('en-US') + ' reserved';
}
setReserved();
function pulse(el) {
if (REDUCE) return;
gsap.fromTo(el, { y: 8, opacity: 0.4 }, { y: 0, opacity: 1, duration: 0.28, ease: 'power2.out' });
}
function writeCell(id, value) {
var el = document.getElementById(id);
var next = pad2(value);
if (el.textContent !== next) {
el.textContent = next;
if (primed) pulse(el);
}
}
function tick() {
var rem = TARGET - Date.now();
if (rem < 0) rem = 0;
var total = Math.floor(rem / 1000);
var days = Math.floor(total / 86400);
total = total % 86400;
var hours = Math.floor(total / 3600);
total = total % 3600;
var mins = Math.floor(total / 60);
var secs = total % 60;
writeCell('cd-d', days);
writeCell('cd-h', hours);
writeCell('cd-m', mins);
writeCell('cd-s', secs);
if (rem === 0) document.getElementById('pill-txt').textContent = 'We are live';
}
tick();
primed = true;
setInterval(tick, 1000);
if (!REDUCE) {
document.querySelectorAll('#headline .line').forEach(function (line) {
var text = line.textContent;
line.textContent = '';
text.split(' ').forEach(function (word, wi, arr) {
var w = document.createElement('span');
w.className = 'word';
word.split('').forEach(function (ch) {
var c = document.createElement('span');
c.className = 'char';
c.textContent = ch;
w.appendChild(c);
});
line.appendChild(w);
if (wi < arr.length - 1) line.appendChild(document.createTextNode(' '));
});
});
gsap.set('#headline .char', { yPercent: 118, rotation: 9 });
var tl = gsap.timeline({ defaults: { ease: 'power4.out' } });
tl.to('.eyebrow', { opacity: 1, duration: 0.7 }, 0.12);
document.querySelectorAll('#headline .line').forEach(function (line, i) {
tl.to(
line.querySelectorAll('.char'),
{ yPercent: 0, rotation: 0, duration: 0.85, stagger: 0.024 },
0.28 + i * 0.16
);
});
tl.to('.lede', { opacity: 1, duration: 0.7 }, '-=0.35')
.fromTo('.cell', { y: 20, opacity: 0 }, { y: 0, opacity: 1, duration: 0.55, stagger: 0.06, ease: 'power3.out' }, 1.05)
.to('.meta', { opacity: 1, duration: 0.6 }, 1.25)
.fromTo('.form-shell', { y: 24, opacity: 0 }, { y: 0, opacity: 1, duration: 0.8, ease: 'power3.out' }, 1.2)
.fromTo('#block-share', { y: 16, opacity: 0 }, { y: 0, opacity: 1, duration: 0.7, ease: 'power3.out' }, 1.45);
} else {
gsap.set(['.eyebrow', '.lede', '.meta', '.cell', '.form-shell', '#block-share'], { opacity: 1, y: 0 });
}
if (FINE && !REDUCE) {
var orb = document.querySelector('.orb');
gsap.set(orb, { x: window.innerWidth / 2 - 200, y: 64 });
var qx = gsap.quickTo(orb, 'x', { duration: 0.6, ease: 'power3.out' });
var qy = gsap.quickTo(orb, 'y', { duration: 0.6, ease: 'power3.out' });
window.addEventListener('pointermove', function (e) {
qx(e.clientX - 200);
qy(e.clientY - 200);
});
}
function spawnRipple(btn, e) {
var r = btn.getBoundingClientRect();
var span = document.createElement('span');
var size = Math.max(r.width, r.height);
var x = r.width / 2 - size / 2;
var y = r.height / 2 - size / 2;
if (e && typeof e.clientX === 'number') {
x = e.clientX - r.left - size / 2;
y = e.clientY - r.top - size / 2;
}
span.className = 'ripple';
span.style.width = span.style.height = size + 'px';
span.style.left = x + 'px';
span.style.top = y + 'px';
btn.appendChild(span);
setTimeout(function () { span.remove(); }, 700);
}
var btn = document.getElementById('submit');
var form = document.getElementById('waitlist');
var input = document.getElementById('email');
btn.addEventListener('click', function (e) { spawnRipple(btn, e); });
form.addEventListener('submit', function (e) {
e.preventDefault();
var email = input.value.trim();
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
input.classList.add('is-err');
input.focus();
gsap.fromTo(input, { x: -6 }, { x: 0, duration: 0.36, ease: 'power2.out' });
return;
}
input.classList.remove('is-err');
reserved += 1;
setReserved();
document.getElementById('seat-line').textContent =
'Seat ' + reserved.toLocaleString('en-US') + ' is yours. We will write once.';
gsap.to('#form-live', {
opacity: 0, y: -12, duration: 0.4, ease: 'power2.in',
onComplete: function () {
document.getElementById('form-live').style.pointerEvents = 'none';
}
});
gsap.fromTo('#form-done', { opacity: 0, y: 16 }, { opacity: 1, y: 0, duration: 0.5, delay: 0.18, ease: 'power3.out' });
btn.disabled = true;
});
input.addEventListener('input', function () { input.classList.remove('is-err'); });
document.querySelectorAll('a[href="#"]').forEach(function (a) {
a.addEventListener('click', function (ev) { ev.preventDefault(); });
});
var copyLbl = document.getElementById('copy-lbl');
document.getElementById('share-copy').addEventListener('click', function () {
var url = window.location.href;
function done() {
copyLbl.textContent = 'Copied';
setTimeout(function () { copyLbl.textContent = 'Copy link'; }, 1800);
}
if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(url).then(done).catch(done);
} else {
done();
}
});
})();
</script>
</body>
</html>About this section
A one-screen-plus waitlist for ORBIT 01, a fictional first public drop: masked split-text headline, a four-cell countdown aimed at Date.now() plus a fixed offset, a client-only email capture with a Material ripple submit, and a three-button share strip. The free lead-magnet page — written to feel like it should not be free.