{NAV_PRIMARY.map((item, i) => { const Orn = NAV_ORNAMENTS[i]; return ( ); })}

setHovered(i)} onMouseLeave={() => setHovered(null)} onFocus={() => setHovered(i)} onBlur={() => setHovered(null)} onClick={onClose} tabIndex={open ? 0 : -1} > {item.label}

); } /* ============================================================ Top nav ============================================================ */ function Nav() { const [open, setOpen] = useState(false); // Lock body scroll while menu is open useEffect(() => { document.body.classList.toggle('menu-open', open); }, [open]); return ( <> setOpen(false)} /> ); } /* ============================================================ MobileJumpCta — persistent thumb-zone primary action on phones. Mobile drops the top nav menu + inline CTA, so without this the only path to convert is scrolling the whole ~7-viewport page to the email form. This pill rides in the bottom thumb zone (where most taps land), appears once the reader reaches the Manifesto (so the cinematic hero + cover/donut scrolljack scenes stay clean), and hides again when the real form scrolls into view so it never doubles that button. Desktop is unaffected — CSS gates the pill to <=720px and this effect bails on wider viewports. Anchors to #work-with-me, the email-capture section. */ function MobileJumpCta() { const [visible, setVisible] = useState(false); useEffect(() => { if (!window.matchMedia('(max-width: 720px)').matches) return; const manifesto = document.querySelector('.manifesto'); const submit = document.querySelector('.work-with-me__submit'); if (!manifesto || !submit) return; /* `reached` latches once the Manifesto first scrolls in, so the pill doesn't flicker in the gap before the form. `buttonIn` hides it the instant the REAL submit button is on screen — the Manifesto is shorter than a viewport so the form section always peeks in behind it; keying off the actual button (not the whole section) is what gives the pill a real window and avoids doubling the button the user can already tap. */ let reached = false; let buttonIn = false; const io = new IntersectionObserver((entries) => { for (const e of entries) { if (e.target === manifesto && e.isIntersecting) reached = true; if (e.target === submit) buttonIn = e.isIntersecting; } setVisible(reached && !buttonIn); }, { threshold: 0 }); io.observe(manifesto); io.observe(submit); return () => io.disconnect(); }, []); return ( Join the crew ↗ ); } /* ============================================================ ScrollProgress — thin top-edge progress hairline on phones. The page is ~7 viewports tall and dominated by pinned scrolljack, so the native scrollbar conveys almost no sense of position. This gives a quiet orientation cue. Passive scroll listener + rAF throttle (never blocks the scroll thread); updates a single `scaleX` so it stays on the compositor. Bails on desktop. Works under both Lenis and native scroll since it reads window.scrollY each frame. */ function ScrollProgress() { const fillRef = useRef(null); useEffect(() => { if (!window.matchMedia('(max-width: 720px)').matches) return; const fill = fillRef.current; if (!fill) return; let ticking = false; const update = () => { ticking = false; const max = document.documentElement.scrollHeight - window.innerHeight; const p = max > 0 ? Math.min(1, Math.max(0, window.scrollY / max)) : 0; fill.style.transform = `scaleX(${p.toFixed(4)})`; }; const onScroll = () => { if (!ticking) { ticking = true; requestAnimationFrame(update); } }; update(); window.addEventListener('scroll', onScroll, { passive: true }); window.addEventListener('resize', onScroll, { passive: true }); return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); }; }, []); return (

); } /* ============================================================ VelocityMarquee — an editorial keyword band that drifts slowly at rest and SURGES + leans (skew) with scroll velocity, reading window.__scrollVel from the velocity layer in index.html. This is the showcase for the momentum feel the owner loved: scroll fast and the strip accelerates and tilts into the motion, then eases back to a slow drift. Transform-only (compositor) rAF loop; static under reduced-motion. Content is the core offerings, tripled for a seamless wrap. ============================================================ */ function VelocityMarquee() { const rootRef = useRef(null); const trackRef = useRef(null); // Pauses the leftward drift while the user hovers/focuses the bar so // the now-clickable keyword links are easy to hit. const pausedRef = useRef(false); /* Latch the bar to a fixed strip under the nav once the user has scrolled past the sprout (the whole intro-cover-jack scrolls above the nav line). Once latched it never un-sticks — it stays pinned even when scrolling back to the top. Tracks the live nav height so it always sits just under the logo. */ useEffect(() => { const root = rootRef.current; const icj = document.querySelector('.intro-cover-jack'); const nav = document.querySelector('.nav'); if (!root || !icj) return; const navH = () => (nav ? nav.offsetHeight : 64); const setTop = () => root.style.setProperty('--marquee-top', navH() + 'px'); setTop(); window.addEventListener('resize', setTop, { passive: true }); let latched = false; const io = new IntersectionObserver((entries) => { for (const e of entries) { // boundingClientRect.bottom <= navH means the section has // scrolled fully above the nav line (we're past the sprout). if (!latched && e.boundingClientRect.bottom <= navH()) { latched = true; root.classList.add('is-stuck'); io.disconnect(); } } }, { threshold: 0 }); io.observe(icj); return () => { io.disconnect(); window.removeEventListener('resize', setTop); }; }, []); useEffect(() => { const track = trackRef.current; if (!track) return; if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return; let x = 0; let raf = 0; const BASE = 0.5; // px/frame idle leftward drift const BOOST = 13; // scroll-velocity contribution const loop = () => { const v = window.__scrollVel || 0; if (!pausedRef.current) x -= BASE + Math.abs(v) * BOOST; const oneRun = track.scrollWidth / 3; // content is tripled if (oneRun && x <= -oneRun) x += oneRun; track.style.transform = `translate3d(${x.toFixed(2)}px,0,0) skewX(${(v * -3).toFixed(2)}deg)`; raf = requestAnimationFrame(loop); }; raf = requestAnimationFrame(loop); return () => cancelAnimationFrame(raf); }, []); // Each keyword links to its service FAQ page — the rotating header // doubles as a discovery nav into the AEO FAQ set. const items = [ { label: 'AI Automations', href: '/ai-automation-faq.html' }, { label: 'Custom Software', href: '/custom-software-faq.html' }, { label: 'Beautiful Websites', href: '/web-design-faq.html' }, { label: 'SEO Rankings', href: '/seo-services-faq.html' }, { label: 'Ad Campaigns', href: '/paid-advertising-faq.html' }, { label: 'Funnels that Convert', href: '/marketing-funnels-faq.html' }, ]; // Tripled for the seamless wrap. Only the first copy is exposed to // assistive tech + keyboard; the duplicates are decorative. const run = [0, 1, 2].flatMap((copy) => items.map((it) => ({ ...it, copy }))); const pause = () => { pausedRef.current = true; }; const resume = () => { pausedRef.current = false; }; return ( ); } /* ============================================================ Preloader — first-visit "curtain." The Crewsive wordmark fixed at the top (exactly where the nav logo lands) FILLS left-to-right with its caustic gradient as a load progress indicator: a dim ghost copy sits under a caustic-filled copy that's clipped from the left, revealed by load progress. Dismissed on the REAL window load event (a timed loader on a fast page just inflates LCP), with a min- display so it doesn't flash and a hard fallback so it never traps. Once per session; skipped under reduced-motion. On exit the dark overlay cross-fades out — the filled preloader logo and the nav's own caustic logo coincide, so it reads as one continuous mark. ============================================================ */ function Preloader() { const skip = (() => { try { if (sessionStorage.getItem('crewsive_preloaded')) return true; } catch (e) {} return window.matchMedia('(prefers-reduced-motion: reduce)').matches; })(); const [done, setDone] = useState(skip); const [exiting, setExiting] = useState(false); const [count, setCount] = useState(0); useEffect(() => { if (skip) return; document.body.classList.add('is-preloading'); let raf = 0; let loaded = false; const start = performance.now(); const COUNT_DUR = 1100; const tick = (now) => { const p = Math.min(1, (now - start) / COUNT_DUR); const target = loaded ? 100 : Math.round(p * 90); setCount((c) => (target > c ? target : c)); if (!loaded || count < 100) raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); let finished = false; const finish = () => { if (finished) return; finished = true; loaded = true; setCount(100); // Hold "100" a beat, play the curtain exit, then unmount. setTimeout(() => setExiting(true), 360); setTimeout(() => { try { sessionStorage.setItem('crewsive_preloaded', '1'); } catch (e) {} document.body.classList.remove('is-preloading'); setDone(true); }, 360 + 780); }; if (document.readyState === 'complete') { setTimeout(finish, 650); // min display so it doesn't flash } else { window.addEventListener('load', () => setTimeout(finish, 250), { once: true }); } const fallback = setTimeout(finish, 3500); // never trap the user return () => { cancelAnimationFrame(raf); clearTimeout(fallback); document.body.classList.remove('is-preloading'); }; // eslint-disable-next-line }, []); if (done) return null; return ( ); } /* ============================================================ HeroMeta — top-level fixed strip carrying the location + live local time. Used to live inside the hero shelf and scroll out with it; pulled up to App-level so it stays pinned at the top of the viewport across the hero AND the IntroCoverJack white stage, then fades to 0 as the circle bloom finishes covering the viewport. mix-blend-mode:difference keeps the strip readable across the dark hero, the white stage, and the post-inversion dark stage without manual color swaps. ============================================================ */ function HeroMeta() { const [now, setNow] = useState(() => new Date()); const ref = useRef(null); useEffect(() => { const id = setInterval(() => setNow(new Date()), 60000); return () => clearInterval(id); }, []); /* Scroll-driven fade. Sample raw progress through the IntroCoverJack pin distance and fade the strip from 1 → 0 as the circle bloom completes (FADE_END matches CIRCLE_END in IntroCoverJack — 0.46 of the 560vh pin). Stays at full opacity anywhere else on the page. */ useEffect(() => { if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return; const el = ref.current; if (!el) return; const wrap = document.querySelector('.intro-cover-jack'); const FADE_START = 0.40; const FADE_END = 0.46; let raf = 0; const apply = () => { raf = 0; if (!wrap) { el.style.opacity = '1'; return; } const r = wrap.getBoundingClientRect(); const sd = wrap.offsetHeight - window.innerHeight; if (sd <= 0) { el.style.opacity = '1'; return; } const scrolled = Math.max(0, Math.min(sd, -r.top)); const raw = scrolled / sd; let opacity; if (raw <= FADE_START) opacity = 1; else if (raw >= FADE_END) opacity = 0; else opacity = 1 - (raw - FADE_START) / (FADE_END - FADE_START); el.style.opacity = opacity.toFixed(3); }; const onScroll = () => { if (!raf) raf = requestAnimationFrame(apply); }; apply(); window.addEventListener('scroll', onScroll, { passive: true }); window.addEventListener('resize', onScroll, { passive: true }); return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); if (raf) cancelAnimationFrame(raf); }; }, []); const time = now.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", hour12: false }); return ( ); } /* ============================================================ Rolldown — vaan-group-style per-character vertical swap. Each character is its own inline-block span with a staggered transition-delay (via the --i custom property), so on hover the original label rolls up and out one letter at a time while the replacement copy rolls in from below the same way. Real spaces are preserved between words so multi-line copy wraps naturally; the space slot also counts toward the stagger so there's no rhythm break across word boundaries. ============================================================ */ function splitChars(text) { let i = 0; const out = []; const words = text.split(' '); words.forEach((word, wi) => { const charSpans = Array.from(word).map((ch, ci) => ( {ch} )); // Wrap each word so its chars stay together — line-wrapping // can only happen at the real spaces BETWEEN words. out.push( {charSpans} ); if (wi < words.length - 1) { out.push(' '); i++; // keep stagger continuous across the space } }); return out; } function Rolldown({ label, detail, size = 'sm' }) { return (

{/* label sits in a clipped frame so its rolling chars get hidden when they leave the row's bounds */} {splitChars(label)} {/* detail is absolutely positioned over the label position and allowed to overflow downward — the row never resizes */}

); } /* ============================================================ Hero — current (v2, 2026-05-07). Copy grounded in voice-of-customer research run 2026-05-07. Lead with the universal mission ("I help businesses grow"), first-person, with the offer named in the sub line. The previous hero (cascade animation + headless-i + i-ball choreography that arced from "business" to land on "Together", plus the three-pillar Together / To Your Data / To Your Customers rolldowns) is fully archived at `archive/hero-v1-2026-05-07.md` along with revival instructions. The cascade per-character animation is preserved here — every .hw-char still gets a --ci index and animates in. The i-ball choreography and rolldown push-wave delays are gone (no destination to land on without rolldowns), but `Rolldown`, `splitChars`, and all related CSS classes remain in place so the form can be revived later without rebuilding it. ============================================================ */ function Hero() { const headlineRef = useRef(null); const howTagRef = useRef(null); const hintRef = useRef(null); /* "how?" tag entrance — armed ~1.2s after mount so it lands just as the headline's tail letters are settling, then the row fades in and its own .hw-char chars rise via the shared mask machinery. */ useEffect(() => { const tag = howTagRef.current; if (!tag) return; void tag.offsetHeight; const id = setTimeout(() => { tag.classList.add('is-armed'); tag.classList.add('revealed'); }, 1200); return () => clearTimeout(id); }, []); /* Lock-in + post-reveal scroll hint. First hover/focus locks the rolled-up paragraph open for the session. ~1.4s after that lock fires, if the user hasn't scrolled, a "check it out ↓" hint fades in below the paragraph. The first real scroll fades the hint back out — its job is to point users to the rest of the page, not linger once they've taken the cue. */ useEffect(() => { const tag = howTagRef.current; const hint = hintRef.current; if (!tag) return; let revealTimer = 0; let scrollOff = null; /* Higher than the headline's exit threshold (10vh) so the hint stays visible while the user begins scrolling. The counter-translate in the parallax handler keeps it pinned to the same viewport position the whole time. */ const SCROLL_THRESHOLD = 380; const showHintIfStill = () => { if (!hint) return; if (window.scrollY > SCROLL_THRESHOLD) return; hint.classList.add('is-shown'); const onScroll = () => { if (window.scrollY > SCROLL_THRESHOLD) { hint.classList.remove('is-shown'); window.removeEventListener('scroll', onScroll); scrollOff = null; } }; window.addEventListener('scroll', onScroll, { passive: true }); scrollOff = onScroll; }; const lock = () => { tag.classList.add('is-locked'); revealTimer = setTimeout(showHintIfStill, 1400); }; tag.addEventListener('mouseenter', lock, { once: true }); tag.addEventListener('focus', lock, { once: true, capture: true }); return () => { tag.removeEventListener('mouseenter', lock); tag.removeEventListener('focus', lock, true); if (revealTimer) clearTimeout(revealTimer); if (scrollOff) window.removeEventListener('scroll', scrollOff); }; }, []); /* Headline reveal — adds `.revealed` to the

on the second paint frame so the initial off-screen state lands as a real paint before the transition kicks in. Per-letter timing and rotation are baked into inline CSS variables (--cd, --cr) at render time; the `.revealed` class flips them to their resting values via a long expoOut curve. / useEffect(() => { const h1 = headlineRef.current; if (!h1) return; // Force a layout read so the initial off-screen state is // committed as a real paint, then flip the class. Browsers // throttle rAF in unfocused tabs, so a plain microtask + a // forced reflow is more reliable than chained rAF here. void h1.offsetHeight; const id = setTimeout(() => h1.classList.add('revealed'), 0); return () => clearTimeout(id); }, []); / Headline scroll-exit — once the user starts to scroll past a small threshold, each character drops back below its line mask with a snappy curve, mirroring the entrance in reverse. Stagger is tighter than the entrance (15ms/char) so the exit feels like a single coordinated gesture. Restored on scroll back to top so the entrance animation can replay. / useEffect(() => { if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return; const h1 = headlineRef.current; if (!h1) return; const chars = h1.querySelectorAll('.hw-char'); if (!chars.length) return; chars.forEach(c => { c.dataset.entryDelay = c.style.transitionDelay || ''; }); const STEP_MS = 15; / Exit threshold — wait until the user has scrolled ~20% of a viewport before dropping the headline. Anything smaller (we tried 8px first) made the exit fire on the merest trackpad twitch and felt jumpy. Tied to viewport height so the trigger feels proportionally the same on a 13" laptop and a 4K desktop. / const exitThreshold = () => Math.max(60, window.innerHeight 0.10); let exiting = false; let raf = 0; const apply = () => { raf = 0; const shouldExit = window.scrollY > exitThreshold(); if (shouldExit && !exiting) { exiting = true; chars.forEach((c, i) => { c.style.transitionDelay = `${i * STEP_MS}ms`; c.classList.add('is-exit'); }); } else if (!shouldExit && exiting) { exiting = false; chars.forEach(c => { c.classList.remove('is-exit'); c.style.transitionDelay = c.dataset.entryDelay || ''; }); } }; const onScroll = () => { if (!raf) raf = requestAnimationFrame(apply); }; apply(); window.addEventListener('scroll', onScroll, { passive: true }); return () => { window.removeEventListener('scroll', onScroll); if (raf) cancelAnimationFrame(raf); }; }, []); /* Scroll-jack motion. As the user scrolls through the first 100vh of the page, translate the shelf upward by an equal amount and apply gentle parallax to the how-tag for depth. The headline is intentionally excluded — it has its own per-letter exit (see useEffect above) and parallax on top of that would compound transforms and look chaotic. The meta-strip used to live inside this transform and parallax in tandem with the shelf, but it's now a top-level fixed `` that persists through the IntroCoverJack stage and fades out with the circle bloom — see HeroMeta below. Reduced-motion skips this — RAF-throttled, no React re-renders. / useEffect(() => { if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return; const shelf = document.querySelector('.hero-jackshelf'); if (!shelf) return; const howtag = document.querySelector('.hero-howtag'); const hint = document.querySelector('.hero-howtaghint'); const PARALLAX_HOWTAG = 0.32; let raf = 0; const apply = () => { raf = 0; const vh = window.innerHeight; const t = Math.min(Math.max(window.scrollY, 0), vh); shelf.style.transform = `translate3d(0, ${-t}px, 0)`; if (howtag) howtag.style.transform = `translate3d(0, ${-t PARALLAX_HOWTAG}px, 0)`; /* Hint is a child of .hero-howtag and inherits both the shelf's −t transform and the howtag's extra −t·0.32. We counter-translate by exactly that combined amount so the hint stays anchored to its starting viewport position while everything around it parallaxes. The translateX(-50%) is preserved here because JS inline transform overrides the CSS's translateX(-50%) centering. / if (hint) hint.style.transform = `translate(-50%, ${t (1 + PARALLAX_HOWTAG)}px)`; }; const onScroll = () => { if (raf) return; raf = requestAnimationFrame(apply); }; apply(); window.addEventListener('scroll', onScroll, { passive: true }); window.addEventListener('resize', onScroll, { passive: true }); return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); if (raf) cancelAnimationFrame(raf); }; }, []); return (

{/* meta-strip lives at top-level now (see ) so it persists through the IntroCoverJack white stage and fades out with the circle bloom rather than scrolling out with the hero shelf. /}
{(() => { // Per-letter Ouro-style entrance: each .hw-char gets a // randomized duration (--cd), small rotation (--cr), // and staggered delay, baked in via inline styles. // Seed-based PRNG keeps the values stable across the // minute-tick re-render of the parent Hero. const heroWords = [ { t: 'I' }, { t: 'help' }, { t: 'businesses', em: true }, { t: 'grow.', em: true }, ]; const seedRand = (n) => { const x = Math.sin(n 12.9898 + 78.233) * 43758.5453; return x - Math.floor(x); }; let ci = 0; return (
{heroWords.map((w, wi) => ( {Array.from(w.t).map((ch, chi) => { const i = ci++; const r1 = seedRand(i * 3 + 1); const r2 = seedRand(i * 3 + 2); const r3 = seedRand(i * 3 + 3); const dur = (0.82 + r1 * 0.45).toFixed(2); // 0.82s – 1.27s const rot = (r2 * 4 - 2).toFixed(1); // -2deg – +2deg const delay = Math.round(60 + r3 * 320 + i * 18); // 60–380ms + per-letter walk return ( {ch} ); })} {wi < heroWords.length - 1 ? ' ' : ''} ))}
); })()} {(() => { // Secondary "how?" tag — rises in like the hero (per // letter, masked, randomized timing). On hover, the // word slides up and out and the paragraph rises into // the same visual line, exactly like the original // Crewsive "Together" rolldown. After the first hover, // a `.is-locked` class on the parent keeps the // paragraph visible for the rest of the session. // // The detail copy is a placeholder — swap it for the // real answer to "how?". const howWord = 'how?'; const detailText = 'Custom-built websites, SEO, automations, software, ad systems, and reporting — end-to-end, by one person.'; const seedRand = (n) => { const x = Math.sin(n * 12.9898 + 78.233) * 43758.5453; return x - Math.floor(x); }; const detailWords = detailText.split(' '); let detIdx = 0; return (

{Array.from(howWord).map((ch, i) => { const r1 = seedRand((i + 100) * 3 + 1); const r2 = seedRand((i + 100) * 3 + 2); const r3 = seedRand((i + 100) * 3 + 3); const dur = (0.85 + r1 * 0.40).toFixed(2); const rot = (r2 * 4 - 2).toFixed(1); const delay = Math.round(40 + r3 * 220 + i * 22); return ( {ch} ); })} {detailWords.map((word, wi) => ( {Array.from(word).map((ch, ci) => ( {ch} ))} {wi < detailWords.length - 1 ? ' ' : ''} ))}

); })()}

); } /* ============================================================ Intro — intentionally blank white card. Sits behind the hero shelf during the hero-jack lift; its only job right now is to be the clean white surface that the dark Hero card rises off of, and that the IntroCoverJack scroll-jack reveals. ============================================================ / function Intro() { return
; } / ============================================================ IntroCoverJack — scroll-jacked transition that comes immediately after the hero-jack. A dark card covers a little more than the left third of the viewport. As the user scrolls through the sticky zone, the dark card translates left until it's fully off-screen, leaving the blank white page behind. The right side of the viewport stays white the entire time because the cover only spans ~37% of the width. ============================================================ / function IntroCoverJack() { const wrapRef = useRef(null); useEffect(() => { const wrap = wrapRef.current; if (!wrap) return; if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return; const cover = wrap.querySelector('.intro-cover-jackcover'); if (!cover) return; const phrase = wrap.querySelector('.intro-cover-jackphrase'); const phraseChars = phrase ? phrase.querySelectorAll('.hw-char') : []; // Cache each char's original entry delay so we can restore it // after an exit. Exit uses a tighter, staggered timing. phraseChars.forEach((c) => { c.dataset.entryDelay = c.style.transitionDelay || ''; }); const circle = wrap.querySelector('.intro-cover-jackcircle'); / Second cascade — "Hi, I'm Luke." rises in after the user has scrolled most of the way into the inverted circle. The cascade itself reuses the shared `.hw-word` / `.hw-char` rise machinery; we just toggle `.revealed` on its parent. / const hi = wrap.querySelector('.intro-cover-jackhi'); / Cache HI chars + their original entry-cascade delays so the reverse (scroll-up past HI_EXIT_AT) can restore them cleanly. Mirrors the phraseChars caching above. / const hiChars = hi ? hi.querySelectorAll('.hw-char') : []; hiChars.forEach((c) => { c.dataset.entryDelay = c.style.transitionDelay || ''; }); / Fourth cascade — "I help businesses get more customers and streamline workflows with custom tailored solutions" rises mid donut→sprout morph and holds across the entire sprout stage. No per-char exit animation — the line stays put until the pin releases and the whole stage scrolls out as a unit. / const love = wrap.querySelector('.intro-cover-jack__love'); const loveChars = love ? love.querySelectorAll('.hw-char') : []; loveChars.forEach((c) => { c.dataset.entryDelay = c.style.transitionDelay || ''; }); let loveRevealed = false; let hiRevealed = false; let hiExiting = false; let phraseRevealed = false; / exitMode tracks which kind of fall we're showing right now: null = at rest (cascade-in done, chars at baseline) 'fwd' = forward, scroll-driven inline-transform fall — chars follow scroll position so they "rain down" in lockstep with the circle bloom rather than firing as a one-shot timed CSS transition 'bwd' = backward, legacy class-based stagger fall when the user scrolls back above REVEAL_AT after having revealed once Mode-switch transitions cleanly clear the previous mode's state (inline transform + transition for fwd, .is-exit class + transitionDelay for bwd). / let exitMode = null; const EXIT_STEP_MS = 15; / Tunable thresholds — fractions of sticky-scroll progress (raw 0 → 1 across the stage's pin distance). REVEAL_AT cascade-in begins COVER_START.. dark cover slides off the left ..COVER_END PHRASE_EXIT_AT.. scroll-driven per-char drop-out; ..PHRASE_EXIT_END completes well before the circle finishes so the headline is gone by mid-bloom CIRCLE_START.. white-difference circle grows from ..CIRCLE_END center, inverting white→black + dark→light No parallax on the phrase — a `transform` on it would create a stacking context that traps the italic accent's z-index inside, defeating the circle's blue-stays-blue carve-out. / / Wrapper is 400vh = 300vh of pin scroll. Setup phase (cover slide + phrase + circle bloom) runs as before (0.04 → 0.46). Dots area is now donut → sprout only (hammer + answer copy removed). Timeline: 0.04–0.33 cover slide + phrase reveal/exit + circle bloom 0.34–0.43 donut SPAWN (Hi-Luke rises with it) 0.43–0.52 donut HOLD continues — total donut hold = 0.18 0.52–0.58 donut → sprout morph (Hi exits at 0.52; Love rises mid-morph at 0.55) 0.58–1.00 sprout HOLD — "I help businesses get more customers and streamline workflows with custom tailored solutions" holds across the entire stage; per-char .is-exit drop fires only at 0.97, as the user is actively scrolling out — same gesture the hero headline uses. / const REVEAL_AT = 0.04; const COVER_START = 0.12; const COVER_END = 0.23; const PHRASE_EXIT_AT = 0.25; const PHRASE_EXIT_END = 0.33; const CIRCLE_START = 0.25; / Circle bloom finishes exactly as the donut stage settles so the inverted area is at full size before the HI dwell. / const CIRCLE_END = 0.46; / Trigger the "Hi, I'm Luke." cascade once the circle has bloomed enough that the centered headline lands inside the inverted area — otherwise the dark text would briefly read as dark-on-white outside the circle's edge. / const HI_REVEAL_AT = 0.34; / HI exits exactly at the donut → sprout morph start, so the text leaves as the dots begin rearranging into the leaf. / const HI_EXIT_AT = 0.52; const HI_EXIT_STEP_MS = 15; / Love copy rises mid donut → sprout morph (0.52..0.58), lands in place as the dots resettle into the sprout, then holds across the long sprout stage. Per-char DROPS below the line mask at LOVE_EXIT_AT as the user begins scrolling out of the pinned section — same .is-exit gesture the hero headline uses on first scroll. / const LOVE_REVEAL_AT = 0.55; let raf = 0; const apply = () => { raf = 0; const r = wrap.getBoundingClientRect(); const vw = window.innerWidth; const vh = window.innerHeight; / On phones the cover fills the whole viewport (it shares the screen with the phrase on desktop). So slide the cover off a touch sooner on mobile to give the phrase ("That's what I build for.") behind it a real visible beat before its own exit at PHRASE_EXIT_AT. / const isMobile = vw <= 720; const coverEnd = isMobile ? 0.18 : COVER_END; / On phones the cover is FULL-SCREEN, so the phrase must stay hidden until the cover has completely cleared (coverEnd = 0.18) — otherwise it cascades in behind the cover and is just "already there" when the cover wipes off. Reveal a hair after the cover clears, hold through the middle, then drop out by ~0.34 (just before the donut / "Hi, I'm Luke." rises at HI_REVEAL_AT). On desktop the cover is only the left panel and the phrase sits beside it, so it can reveal early — keep originals. / const revealAt = isMobile ? 0.19 : REVEAL_AT; const phraseExitAt = isMobile ? 0.40 : PHRASE_EXIT_AT; const phraseExitEnd = isMobile ? 0.46 : PHRASE_EXIT_END; / The phrase now holds much longer on mobile (0.19 → 0.40 vs 0.30). To avoid colliding with the donut/circle, shift the WHOLE post-phrase timeline (Hi, sprout, circle) later by the same amount — relative spacing is preserved, so the choreography stays intact, just packed into the back half of the pin. Desktop keeps every original value (POST = 0). / const POST = isMobile ? 0.20 : 0; const circleStart = isMobile ? 0.40 : CIRCLE_START; const circleEnd = CIRCLE_END + POST; const hiRevealAt = HI_REVEAL_AT + POST; const hiExitAt = HI_EXIT_AT + POST; const loveRevealAt = LOVE_REVEAL_AT + POST; const stickyDistance = Math.max(1, wrap.offsetHeight - vh); const scrolled = Math.max(0, Math.min(stickyDistance, -r.top)); const raw = scrolled / stickyDistance; // Phrase reveal / exit. // beforeRev (first time) : not revealed, no exit // normal window : revealed, no exit // pastFwd (raw≥PHRASE_EXIT) : revealed, scroll-driven fwd fall // beforeRev (after reveal) : revealed, class-based bwd fall if (phrase && phraseChars.length) { const beforeRev = raw <= revealAt; const inFwdExit = raw >= phraseExitAt; if (!beforeRev && !phraseRevealed) { phraseRevealed = true; phrase.classList.add('revealed'); } if (inFwdExit) { // Leaving bwd mode — strip its class state. if (exitMode === 'bwd') { phraseChars.forEach((c) => { c.classList.remove('is-exit'); c.style.transitionDelay = c.dataset.entryDelay || ''; }); } // Entering fwd mode — kill CSS transitions so the inline // transform we set on each frame tracks scroll directly. if (exitMode !== 'fwd') { phraseChars.forEach((c) => { c.style.transition = 'none'; }); exitMode = 'fwd'; } / Scroll-driven per-char fall. Each char gets its own segment of the exit window: start = (i / N) * STAGGER_SPREAD duration = FALL_DURATION So the leftmost char begins falling at exitProg ≈ 0 and the rightmost finishes around exitProg ≈ 1. Quadratic ease-in approximates gravity. The vertical distance (1.35em + 16px) matches the hero's `.is-exit` rule so the fall feels like the same gesture. / const STAGGER_SPREAD = 0.55; const FALL_DURATION = 0.45; const exitWin = phraseExitEnd - phraseExitAt; const exitProg = Math.min(1, (raw - phraseExitAt) / exitWin); const N = phraseChars.length; phraseChars.forEach((c, i) => { const start = (i / Math.max(1, N - 1)) STAGGER_SPREAD; const cp = Math.max(0, Math.min(1, (exitProg - start) / FALL_DURATION)); const eased = cp * cp; c.style.transform = `translate3d(0, calc(${eased.toFixed(3)} * (1.35em + 16px)), 0.02px)`; }); } else if (beforeRev && phraseRevealed) { // Strip fwd-mode inline state if we just left it. if (exitMode === 'fwd') { phraseChars.forEach((c) => { c.style.transform = ''; c.style.transition = ''; }); } // Legacy backward fall — staggered class-based one-shot. if (exitMode !== 'bwd') { phraseChars.forEach((c, i) => { c.style.transitionDelay = `${i * EXIT_STEP_MS}ms`; c.classList.add('is-exit'); }); exitMode = 'bwd'; } } else { // At rest — clear whichever mode we were just in. if (exitMode === 'fwd') { phraseChars.forEach((c) => { c.style.transform = ''; c.style.transition = ''; }); } if (exitMode === 'bwd') { phraseChars.forEach((c) => { c.classList.remove('is-exit'); c.style.transitionDelay = c.dataset.entryDelay || ''; }); } exitMode = null; } } // Cover slide. `coverEnd` is pulled earlier on mobile (see // top of apply) so the full-screen cover clears in time for // the phrase behind it to register before it exits. const cp = raw <= COVER_START ? 0 : raw >= coverEnd ? 1 : (raw - COVER_START) / (coverEnd - COVER_START); cover.style.transform = `translate3d(${(-cp * 100).toFixed(2)}%, 0, 0)`; // "Hi, I'm Luke." reveal — toggle .revealed on the headline // when scroll crosses HI_REVEAL_AT. The cascade-in animation // uses the same shared CSS as every other rise group. if (hi) { if (raw > hiRevealAt && !hiRevealed) { hiRevealed = true; hi.classList.add('revealed'); } else if (raw <= hiRevealAt && hiRevealed) { hiRevealed = false; hi.classList.remove('revealed'); } /* Love copy reveal + per-char DROP exit — rises mid donut → sprout morph as the dots resolve into the leaf, holds through the long sprout stage, then drops below the .hw-word line mask once the user begins scrolling out of the pinned section. Mirrors Hi-Luke's exit: `.is-exiting` on the wrapper lifts the bottom clip so chars stay visible while falling, and `.is-exit` on each char drives the staggered drop. / if (love) { if (raw > loveRevealAt && !loveRevealed) { loveRevealed = true; love.classList.add('revealed'); } else if (raw <= loveRevealAt && loveRevealed) { loveRevealed = false; love.classList.remove('revealed'); } } / Exit cascade — class-based fall, same gesture the hero h1 uses on first scroll. We add `.is-exiting` to the wrapper (which lifts the .hw-word bottom clip in CSS so chars remain visible while falling) and `.is-exit` to each char with a staggered transition-delay so they drop one-by-one. The donut already tracks the chars' bounding rects per frame, so collision happens automatically as they translate down through it. / const shouldHiExit = raw > hiExitAt && hiRevealed; if (shouldHiExit && !hiExiting) { hiExiting = true; hi.classList.add('is-exiting'); hiChars.forEach((c, i) => { c.style.transitionDelay = `${i HI_EXIT_STEP_MS}ms`; c.classList.add('is-exit'); }); } else if (!shouldHiExit && hiExiting) { hiExiting = false; hi.classList.remove('is-exiting'); hiChars.forEach((c) => { c.classList.remove('is-exit'); c.style.transitionDelay = c.dataset.entryDelay || ''; }); } } // Circle inversion. White overlay clipped to a circle that // grows from center; with mix-blend-mode: difference, the // area inside the circle inverts the white stage and dark // text simultaneously. Eased with ease-out quad so the // arrival feels softer than the departure. if (circle) { const t = raw <= circleStart ? 0 : raw >= circleEnd ? 1 : (raw - circleStart) / (circleEnd - circleStart); const eased = 1 - (1 - t) * (1 - t); const maxR = Math.hypot(vw, vh) / 2 + 80; const radius = eased * maxR; circle.style.clipPath = `circle(${radius.toFixed(1)}px at 50% 50%)`; } }; const onScroll = () => { if (raf) return; raf = requestAnimationFrame(apply); }; apply(); window.addEventListener('scroll', onScroll, { passive: true }); window.addEventListener('resize', onScroll, { passive: true }); return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); if (raf) cancelAnimationFrame(raf); }; }, []); /* Desktop auto-snap REMOVED (2026-05-28). The old "sticky auto-pull to dwell points" effect lerped the page to the next rest state when you paused mid-transition — which read as the page scrolling by itself and fought the wheel. Section pacing now comes from even scroll-distance-per-stage (CSS section heights); momentum + native scroll handle the rest. This also removes a permanent rAF loop. / return (

{(() => { // Right-side phrase that cascades in like the hero h1. // Same `.hw-word` / `.hw-char` machinery so the existing // mask + per-char rise CSS does the heavy lifting; the // `.revealed` class is added by the scroll handler once // the user enters the sticky zone. const phraseWords = [ { t: 'That’s' }, { t: 'what' }, { t: 'I' }, { t: 'build', em: true }, { t: 'for.', em: true }, ]; const seedRand = (n) => { const x = Math.sin(n 12.9898 + 78.233) * 43758.5453; return x - Math.floor(x); }; let ci = 0; return (
{phraseWords.map((w, wi) => ( {Array.from(w.t).map((ch, chi) => { const i = ci++; const r1 = seedRand((i + 200) * 3 + 1); const r2 = seedRand((i + 200) * 3 + 2); const r3 = seedRand((i + 200) * 3 + 3); const dur = (0.82 + r1 * 0.45).toFixed(2); const rot = (r2 * 4 - 2).toFixed(1); const delay = Math.round(60 + r3 * 320 + i * 18); return ( {ch} ); })} {wi < phraseWords.length - 1 ? ' ' : ''} ))}
); })()}

When the actual work isn’t the problem, the business side is.

{(() => { // Second cascade — "Hi, I'm Luke." Lives behind the // circle (z=auto) so the difference blend inverts its // dark ink to light inside the inverted area; "Luke." // is italicized + lifted above the circle so the brand // accent stays accent-blue regardless of the inversion. const hiWords = [ { t: 'Hi,' }, { t: 'I’m' }, { t: 'Luke.', em: true }, ]; const seedRand = (n) => { const x = Math.sin(n * 12.9898 + 78.233) * 43758.5453; return x - Math.floor(x); }; let ci = 0; return (
{hiWords.map((w, wi) => ( {Array.from(w.t).map((ch, chi) => { const i = ci++; const r1 = seedRand((i + 400) * 3 + 1); const r2 = seedRand((i + 400) * 3 + 2); const r3 = seedRand((i + 400) * 3 + 3); const dur = (0.82 + r1 * 0.45).toFixed(2); const rot = (r2 * 4 - 2).toFixed(1); const delay = Math.round(60 + r3 * 320 + i * 18); return ( {ch} ); })} {wi < hiWords.length - 1 ? ' ' : ''} ))}
); })()} {(() => { // Third cascade — "I help businesses get more customers // and streamline workflows with custom tailored solutions" // Rises mid donut→sprout morph and holds across the // entire sprout stage. No per-char exit animation — the // line stays put until the pin releases and the whole // stage scrolls out as a unit. // Regular ink at z-auto so the difference-blend circle // inverts it; italic accents lifted above the dot canvas // so they stay brand-blue. // The closing phrase "custom tailored solutions" carries the // .em accent — that's the brand promise. All other words // paint white via .intro-cover-jack__love's base color. const loveWords = [ { t: 'I' }, { t: 'help' }, { t: 'businesses' }, { t: 'get' }, { t: 'more' }, { t: 'customers' }, { t: 'and' }, { t: 'streamline' }, { t: 'workflows' }, { t: 'with' }, { t: 'custom', em: true }, { t: 'tailored', em: true }, { t: 'solutions', em: true }, ]; const seedRand = (n) => { const x = Math.sin(n * 12.9898 + 78.233) * 43758.5453; return x - Math.floor(x); }; let ci = 0; return (
{loveWords.map((w, wi) => ( {Array.from(w.t).map((ch, chi) => { const i = ci++; const r1 = seedRand((i + 1200) * 3 + 1); const r2 = seedRand((i + 1200) * 3 + 2); const r3 = seedRand((i + 1200) * 3 + 3); const dur = (0.82 + r1 * 0.45).toFixed(2); const rot = (r2 * 4 - 2).toFixed(1); const delay = Math.round(40 + r3 * 200 + i * 10); return ( {ch} ); })} {wi < loveWords.length - 1 ? ' ' : ''} ))}
); })()}
); } /* ============================================================ Manifesto — the first "normal website" section the page scrolls into after the IntroCoverJack ends. Calm, dark, editorial; uses the same tokens as the rest of the site so it reads as a graceful continuation, not a new chapter. Layout: • Eyebrow + section number (mono uppercase) • Big serif statement (no italic accents — that visual move was used hard in the scrolljack; this section is the quieter follow-through) • Three-card services strip — AI, sites, discovery • Closing CTA row with email + scroll-to-top ============================================================ / function Manifesto() { return (

I build:
{/ The four core offerings — paired in a 2x2 grid. These are the front-of-house outputs people see and buy. /}

Profitable ad campaigns

SEO rankings that crush your competitors

Beautiful websites that sell

Funnels that convert

{/ Transitional line — sets up the back-of-house category (AI + custom software) that visitors don't usually see but that powers everything above. /}
But there's more that goes on behind the scenes.
{/ Back-of-house offerings — the engine room. Same tile language as the front-of-house grid above, just two wider tiles instead of four. /}

AI automations

Custom software

{/ Closing tagline — the catch-all promise. Italic serif at the same scale as the transitional aside so the two "plain text" beats read as a matched pair bracketing the back-of-house tiles. */}
If you do it on a computer, I can automate it.

); } Object.assign(window, { CrewsiveWordmark, Nav, HeroMeta, Hero, Intro, IntroCoverJack, Manifesto });