function Nav() { const [scrolled, setScrolled] = React.useState(false); const [sheetOpen, setSheetOpen] = React.useState(false); React.useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 40); window.addEventListener('scroll', onScroll); return () => window.removeEventListener('scroll', onScroll); }, []); // Lock body scroll while the mobile sheet is open — but ONLY if // the sheet covers the full viewport. The current floating panel // is a small dropdown; locking scroll feels wrong (user can't // dismiss by scrolling, and the blur effect is invisible without // varied content behind the panel). Skip the lock entirely. // React.useEffect(() => { ... }, [sheetOpen]); const closeSheet = () => setSheetOpen(false); return (

{/* Desktop links — hidden on mobile via .nav-links { display: none } */}

How it works What it does Team FAQ Book a demo

{/* Mobile controls — only visible <720px (CSS gates display). Just the burger — the CTA lives inside the sheet now to keep the floating pill uncluttered. */}

{/* Portal scrim + sheet to so they escape the nav's containing block. With them inside

(position:fixed), fixed-positioned descendants got constrained to the nav's rect — the scrim only filled the pill area instead of the viewport. */} {typeof document !== 'undefined' && ReactDOM.createPortal( {/* Mobile-only scrim that darkens the page behind the menu. */}

How it works What it does Team FAQ Book a demo →

Catch it early. Save the shoot.

, document.body )}

); } function Marquee() { const items = [ "On-demand shot metadata", "Meal penalty exposure", "Schedule burndown", "Overtime tracking", "Liability gap detection", "Consecutive employment exposure", "Reporting error catches", "Interactive charts", "Contract questions", "Contact look-up", "Dropbox integration", "Scheduled tasks", "Role-based access", "Google Drive integration" ]; const trackRef = React.useRef(null); const wrapRef = React.useRef(null); React.useEffect(() => { const track = trackRef.current; const wrap = wrapRef.current; if (!track || !wrap) return; const SLOW = 40; // px/sec at rest const FAST = 150; // px/sec on hover let speed = SLOW; let target = SLOW; let x = 0; let last = performance.now(); let halfWidth = track.scrollWidth / 2; let raf; const onResize = () => { halfWidth = track.scrollWidth / 2; }; const ro = new ResizeObserver(onResize); ro.observe(track); const onEnter = () => { target = FAST; }; const onLeave = () => { target = SLOW; }; wrap.addEventListener('mouseenter', onEnter); wrap.addEventListener('mouseleave', onLeave); const tick = (now) => { const dt = Math.min(0.05, (now - last) / 1000); last = now; // ease speed toward target (~600ms time constant) speed += (target - speed) * Math.min(1, dt / 0.25); x -= speed * dt; if (halfWidth > 0) { // wrap seamlessly: the track is duplicated, so -halfWidth == 0 visually if (x <= -halfWidth) x += halfWidth; } track.style.transform = `translate3d(${x}px, 0, 0)`; raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => { cancelAnimationFrame(raf); ro.disconnect(); wrap.removeEventListener('mouseenter', onEnter); wrap.removeEventListener('mouseleave', onLeave); }; }, []); return ( <>

And so much more…

{[...items, ...items].map((it, i) => ( {it} ))}

); } function Tweaks({ tweaks, setTweaks, visible }) { if (!visible) return null; const colors = [ { name: 'spark', hex: '#FF5405' }, { name: 'safe', hex: '#3F6E4A' }, { name: 'reel', hex: '#6B3A1F' }, { name: 'leader', hex: '#C4A77A' }, { name: 'ink', hex: '#1C1A18' }, ]; return (

Tweaks live

Accent color

{colors.map(c => (

Paper grain

Cursor spark

Dark surface

Mobile preview

); } // Cursor click-spark effect function useClickSpark(enabled) { React.useEffect(() => { if (!enabled) return; const onClick = (e) => { const el = document.createElement('div'); el.className = 'click-spark'; el.style.left = e.clientX + 'px'; el.style.top = e.clientY + 'px'; el.innerHTML = ` `; document.body.appendChild(el); setTimeout(() => el.remove(), 600); }; document.addEventListener('click', onClick); return () => document.removeEventListener('click', onClick); }, [enabled]); } /* Soft Krew-orange glow that follows the cursor + a custom arrow drawn in the site's UI signature (1px ink stroke, 2px offset accent drop shadow). Renders nothing on touch/coarse-pointer devices. The arrow's tip is at (3,3) in viewBox units; CSS margin compensates so the tip sits exactly on the pointer coordinate. */ function useCursorGlow(enabled) { React.useEffect(() => { if (!enabled) return; if (window.matchMedia('(hover: none), (pointer: coarse)').matches) return; document.body.classList.add('has-krew-cursor'); const arrow = document.createElement('div'); arrow.className = 'cursor-arrow'; arrow.setAttribute('aria-hidden', 'true'); // Outline-only arrow drawn in Krew spark orange — no fill, no shadow. // Uses currentColor so the live --accent value flows through. arrow.innerHTML = ` `; document.body.appendChild(arrow); let mx = -1000, my = -1000; let visible = false; const onMove = (e) => { mx = e.clientX; my = e.clientY; arrow.style.left = mx + 'px'; arrow.style.top = my + 'px'; if (!visible) { visible = true; arrow.classList.add('is-visible'); } }; const onLeave = () => { visible = false; arrow.classList.remove('is-visible'); }; const onDown = () => arrow.classList.add('is-down'); const onUp = () => arrow.classList.remove('is-down'); document.addEventListener('mousemove', onMove); document.addEventListener('mouseleave', onLeave); document.addEventListener('mousedown', onDown); document.addEventListener('mouseup', onUp); window.addEventListener('blur', onLeave); return () => { document.removeEventListener('mousemove', onMove); document.removeEventListener('mouseleave', onLeave); document.removeEventListener('mousedown', onDown); document.removeEventListener('mouseup', onUp); window.removeEventListener('blur', onLeave); arrow.remove(); document.body.classList.remove('has-krew-cursor'); }; }, [enabled]); } function useReveal() { React.useEffect(() => { const io = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('in'); }); }, { threshold: 0.12 }); document.querySelectorAll('.reveal').forEach(el => io.observe(el)); return () => io.disconnect(); }, []); } /* Day/night glyph toggle — minimal sun/moon switch in the top-right. Both glyphs render in the same SVG; the one for the *current* mode is visible, and on hover the opposite glyph slides in to preview the switch destination. Keyboard activatable; respects reduced motion. */ function DayNightToggle({ dark, onToggle }) { return ( ); } window.Nav = Nav; window.Marquee = Marquee; window.Tweaks = Tweaks; window.DayNightToggle = DayNightToggle; window.useClickSpark = useClickSpark; window.useCursorGlow = useCursorGlow; window.useReveal = useReveal;