/* global React, ReactDOM */ const { useState, useEffect, useRef, useMemo } = React; // ───────────────────────────────────────────────────────────────────────── // Scroll reveal: tag any element with data-reveal, gets .in when in viewport // ───────────────────────────────────────────────────────────────────────── function useReveal() { useEffect(() => { const els = document.querySelectorAll('[data-reveal]:not(.in)'); if (!els.length) return; const io = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } }); }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' }); els.forEach((el) => io.observe(el)); return () => io.disconnect(); }); } // ───────────────────────────────────────────────────────────────────────── // Nav // ───────────────────────────────────────────────────────────────────────── function Nav() { const [scrolled, setScrolled] = useState(false); const [open, setOpen] = useState(false); const [t, setT] = useState(new Date()); const progressRef = useRef(null); useEffect(() => { let raf = null; const update = () => { raf = null; setScrolled(window.scrollY > 80); if (progressRef.current) { const max = document.documentElement.scrollHeight - window.innerHeight; const pct = max > 0 ? window.scrollY / max : 0; progressRef.current.style.transform = `scaleX(${pct})`; } }; const onScroll = () => { if (raf == null) raf = requestAnimationFrame(update); }; window.addEventListener('scroll', onScroll, { passive: true }); update(); const id = setInterval(() => setT(new Date()), 1000 * 30); return () => { window.removeEventListener('scroll', onScroll); clearInterval(id); if (raf != null) cancelAnimationFrame(raf); }; }, []); useEffect(() => { document.body.style.overflow = open ? 'hidden' : ''; return () => { document.body.style.overflow = ''; }; }, [open]); useEffect(() => { const onKey = (e) => { if (e.key === 'Escape') setOpen(false); }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, []); const time = t.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit' }); const links = [ ['Work', '#work'], ['Approach', '#approach'], ['About', '#about'], ['Contact', '#contact'], ]; return (
Available · 2026 {time} GMT+8 — Singapore hello@ayen.studio
); } // ───────────────────────────────────────────────────────────────────────── // Progress rail (right side) // ───────────────────────────────────────────────────────────────────────── function ProgressRail() { const [p, setP] = useState(0); useEffect(() => { const on = () => { const max = document.documentElement.scrollHeight - window.innerHeight; setP(max > 0 ? window.scrollY / max : 0); }; window.addEventListener('scroll', on, { passive: true }); on(); return () => window.removeEventListener('scroll', on); }, []); const sections = [ 'Hero', 'Problem', 'Leak', 'Diagnosis', 'Belief', 'System', 'Work', 'About', 'Contact' ]; return (
{sections.map((s, i) => { const seg = i / (sections.length - 1); const active = Math.abs(p - seg) < 1 / (sections.length * 2); return (
{String(i+1).padStart(2,'0')} · {s}
); })}
); } // ───────────────────────────────────────────────────────────────────────── // Footer // ───────────────────────────────────────────────────────────────────────── function Footer() { return ( ); } // ───────────────────────────────────────────────────────────────────────── // BackToTop — floating button bottom-right, appears after 1 viewport scroll // ───────────────────────────────────────────────────────────────────────── function BackToTop() { const [show, setShow] = useState(false); useEffect(() => { let raf = null; const update = () => { raf = null; setShow(window.scrollY > window.innerHeight); }; const onScroll = () => { if (raf == null) raf = requestAnimationFrame(update); }; window.addEventListener('scroll', onScroll, { passive: true }); update(); return () => { window.removeEventListener('scroll', onScroll); if (raf != null) cancelAnimationFrame(raf); }; }, []); return ( ); } // ───────────────────────────────────────────────────────────────────────── // OperatorCursor — cinematic teal crosshair + corner brackets // replaces the native pointer on mouse devices // ───────────────────────────────────────────────────────────────────────── function OperatorCursor() { const dotRef = useRef(null); const frameRef = useRef(null); const labelRef = useRef(null); const [hover, setHover] = useState(false); const [active, setActive] = useState(false); const [hidden, setHidden] = useState(false); // touch-only devices: no cursor (CSS already keeps native pointer untouched there) const isTouch = typeof window !== 'undefined' && window.matchMedia && !window.matchMedia('(pointer: fine)').matches; useEffect(() => { if (isTouch) return; let raf = null; const onMove = (e) => { const x = e.clientX, y = e.clientY; if (raf) return; raf = requestAnimationFrame(() => { if (dotRef.current) dotRef.current.style.transform = `translate3d(${x}px, ${y}px, 0) translate(-50%, -50%)`; if (frameRef.current) frameRef.current.style.transform = `translate3d(${x}px, ${y}px, 0) translate(-50%, -50%)`; if (labelRef.current) labelRef.current.style.transform = `translate3d(${x}px, ${y}px, 0)`; raf = null; }); }; const onOver = (e) => { const t = e.target; if (!t || !t.closest) return; const interactive = t.closest('a, button, [role="button"], .btn, [data-cursor-hover]'); setHover(!!interactive); }; const onDown = () => setActive(true); const onUp = () => setActive(false); const onLeave = () => setHidden(true); const onEnter = () => setHidden(false); window.addEventListener('mousemove', onMove, { passive: true }); window.addEventListener('mouseover', onOver, { passive: true }); window.addEventListener('mousedown', onDown, { passive: true }); window.addEventListener('mouseup', onUp, { passive: true }); document.documentElement.addEventListener('mouseleave', onLeave); document.documentElement.addEventListener('mouseenter', onEnter); return () => { window.removeEventListener('mousemove', onMove); window.removeEventListener('mouseover', onOver); window.removeEventListener('mousedown', onDown); window.removeEventListener('mouseup', onUp); document.documentElement.removeEventListener('mouseleave', onLeave); document.documentElement.removeEventListener('mouseenter', onEnter); if (raf) cancelAnimationFrame(raf); }; }, [isTouch]); if (isTouch) return null; const frameSize = hover ? 56 : 32; const bracketLen = 7; return ( {/* center dot — exact pixel-perfect cursor position */}