/* ════════════════════════════════════════════════════════════════ Public pages Exports: HomePage, AboutPage, ThesisPage, BlogPage, BlogPostPage, WorkPage, AchievementsPage, ContactPage ════════════════════════════════════════════════════════════════ */ const { useState: useStatePublic, useEffect: useEffectPublic, useRef: useRefPublic } = React; /* ───────── Reveal-on-scroll hook (with resilience fallback) ───────── */ function useReveal(threshold = 0.25) { const ref = useRefPublic(null); const [shown, setShown] = useStatePublic(false); useEffectPublic(() => { if (!ref.current) return; const el = ref.current; // Immediate check: already in viewport at mount? const inViewportNow = () => { const r = el.getBoundingClientRect(); return r.top < window.innerHeight && r.bottom > 0; }; if (inViewportNow()) { setShown(true); return; } const obs = new IntersectionObserver(([entry]) => { if (entry.isIntersecting) { setShown(true); obs.disconnect(); } }, { threshold }); obs.observe(el); // Safety fallback for iframe quirks where IntersectionObserver doesn't fire const fallback = setTimeout(() => setShown(true), 2200); return () => { obs.disconnect(); clearTimeout(fallback); }; }, []); return [ref, shown]; } /* ───────── Scroll-progress hook ───────── */ function useScrollProgress() { const [p, setP] = useStatePublic(0); useEffectPublic(() => { const onScroll = () => { const max = document.documentElement.scrollHeight - window.innerHeight; setP(max > 0 ? Math.min(1, window.scrollY / max) : 0); }; onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); return p; } /* ───────── Teleprompter — scroll-locked text reveal ───────── Sets a `--reveal` CSS variable on each prompter element based on its vertical position in the viewport. CSS uses --reveal to drive opacity + transform. Throttled with rAF. */ const PROMPTER_SELECTOR = [ '.home-quote-word', '.home-quote-mark', '.home-link-letter', '.home-link-arrow', '.home-attribution', '.home-link-meta', '.home-hero-tag', '.home-hero-prompt', '.home-signoff-line', '.home-signoff-meta', ].join(','); function usePrompter() { useEffectPublic(() => { let rafQueued = false; let cache = []; const refreshCache = () => { cache = Array.from(document.querySelectorAll(PROMPTER_SELECTOR)); }; refreshCache(); const tick = () => { rafQueued = false; const vh = window.innerHeight; const start = vh * 0.95; const end = vh * 0.45; const span = start - end; for (let i = 0; i < cache.length; i++) { const el = cache[i]; if (!el.isConnected) continue; const rect = el.getBoundingClientRect(); const y = rect.top + rect.height * 0.5; let t = (start - y) / span; if (t < 0) t = 0; else if (t > 1) t = 1; el.style.setProperty('--reveal', t.toFixed(3)); } }; const onScroll = () => { if (rafQueued) return; rafQueued = true; requestAnimationFrame(tick); }; // Re-cache when DOM mutates (sections added dynamically etc.) const mo = new MutationObserver(() => { refreshCache(); onScroll(); }); mo.observe(document.body, { childList: true, subtree: true }); // Initial passes (after layout + after fonts settle) tick(); setTimeout(tick, 60); setTimeout(tick, 200); setTimeout(tick, 600); window.addEventListener('scroll', onScroll, { passive: true }); window.addEventListener('resize', onScroll); return () => { mo.disconnect(); window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); }; }, []); } /* ───────── Ambient petals + flowers — drifting particles in the background ───────── */ const SCRAMBLE_CHARS = "01<>{}[]/\\|+*-.,:;'~!@#$%^&*()=ABCDEFGHIJKLMNOPQRSTUVWXYZ"; function useScramble(target, trigger, duration = 700) { const [text, setText] = useStatePublic(target); useEffectPublic(() => { if (!trigger) { setText(target); return; } const safe = String(target); const start = performance.now(); let rafId; const step = (now) => { const t = Math.min(1, (now - start) / duration); const revealCount = Math.floor(t * (safe.length + 2)); let s = ""; for (let i = 0; i < safe.length; i++) { const c = safe[i]; if (i < revealCount) s += c; else if (c === " " || c === "·" || c === "—" || c === "/") s += c; else s += SCRAMBLE_CHARS[Math.floor(Math.random() * SCRAMBLE_CHARS.length)]; } setText(s); if (t < 1) rafId = requestAnimationFrame(step); else setText(safe); }; rafId = requestAnimationFrame(step); return () => cancelAnimationFrame(rafId); }, [target, trigger, duration]); return text; } function ScrambleText({ children, trigger = true, duration = 700, className }) { const target = typeof children === "string" ? children : ""; const text = useScramble(target, trigger, duration); return {text}; } function useElapsed() { const [s, setS] = useStatePublic(0); const startRef = useRefPublic(performance.now()); useEffectPublic(() => { const id = setInterval(() => setS(Math.floor((performance.now() - startRef.current) / 1000)), 1000); return () => clearInterval(id); }, []); return s; } const fmtClock = (s) => { const h = Math.floor(s / 3600); const m = Math.floor((s % 3600) / 60); const sec = s % 60; return `${String(h).padStart(2,"0")}:${String(m).padStart(2,"0")}:${String(sec).padStart(2,"0")}`; }; /* ───────── SectionStamp — precision-instrument HUD on each section ───────── */ function SectionStamp({ index = 0, kind = "scan", placement = "left", shown = true }) { const phaseStr = ["I", "II", "III", "IV", "V", "VI", "VII"][index % 7]; const pulseVal = 14 + ((index * 13) % 60); const sigVal = ((Math.sin(index * 0.71) * 0.5 + 0.5)).toFixed(3); const target = (kind || "").toUpperCase().slice(0, 9); return (
SIG {target}
PHS {phaseStr}
PUL {String(pulseVal).padStart(2, "0")}
·{sigVal}
); } const FlowerVariants = { rose: ( ), daisy: ( ), bloom: ( ), sprig: ( ), fern: ( ), }; function SectionFlower({ variant = "rose", placement = "right" }) { return ( ); } /* ──────────────────────────────────────────────────────────────── AmbientPetals — ambient canvas overlay (sakura ↔ snowflake) Light mode: sakura blossoms (5 petals + golden stamen, pink palette) Dark mode: snowflakes (6-arm crystals, cool palette) Shared physics: 3-layer parallax, tumble (scaleX compression), sine sway, slow rotation, periodic gusts, scroll-driven kick, pre-rendered sprite cache (rebuilt on theme change), DPR cap 1.5, pause on document.hidden. ──────────────────────────────────────────────────────────────── */ function AmbientPetals({ enabled = true }) { const canvasRef = useRefPublic(null); useEffectPublic(() => { if (!enabled) return; if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) return; const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext('2d'); const dpr = Math.min(window.devicePixelRatio || 1, 1.5); const resize = () => { const w = window.innerWidth, h = window.innerHeight; canvas.width = Math.round(w * dpr); canvas.height = Math.round(h * dpr); canvas.style.width = w + 'px'; canvas.style.height = h + 'px'; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); }; resize(); window.addEventListener('resize', resize); // ────────── palettes ────────── const SAKURA_COLORS = [ 'rgba(244, 154, 184, 1)', 'rgba(238, 130, 168, 1)', 'rgba(248, 178, 200, 1)', 'rgba(252, 198, 214, 1)', 'rgba(245, 168, 192, 1)', ]; const SAKURA_STAMEN = 'rgba(255, 215, 130, 0.55)'; const SNOW_COLORS = [ 'rgba(245, 248, 255, 1)', 'rgba(220, 232, 248, 1)', 'rgba(255, 255, 255, 1)', 'rgba(195, 215, 240, 1)', ]; // ────────── shape drawing ────────── function drawSakuraPetal(c, size) { c.beginPath(); c.moveTo(0, 0); c.bezierCurveTo(size * 0.42, -size * 0.20, size * 0.40, -size * 0.78, 0, -size); c.bezierCurveTo(-size * 0.40, -size * 0.78, -size * 0.42, -size * 0.20, 0, 0); c.closePath(); c.fill(); } function paintSakura(c, cx, cy, size, color) { c.save(); c.translate(cx, cy); c.fillStyle = color; for (let i = 0; i < 5; i++) { c.save(); c.rotate((i / 5) * Math.PI * 2); drawSakuraPetal(c, size); c.restore(); } c.fillStyle = SAKURA_STAMEN; c.beginPath(); c.arc(0, 0, size * 0.20, 0, Math.PI * 2); c.fill(); c.restore(); } function paintSnowflake(c, cx, cy, size, color) { c.save(); c.translate(cx, cy); c.strokeStyle = color; c.fillStyle = color; c.lineWidth = Math.max(1, size * 0.07); c.lineCap = 'round'; c.lineJoin = 'round'; for (let i = 0; i < 6; i++) { c.save(); c.rotate((i / 6) * Math.PI * 2); // main arm c.beginPath(); c.moveTo(0, 0); c.lineTo(0, -size); c.stroke(); // two pairs of branches at 30° (Math.PI / 6) angles const branches = [ { y: -size * 0.45, len: size * 0.26 }, { y: -size * 0.72, len: size * 0.34 }, ]; for (const b of branches) { const dx = Math.sin(Math.PI / 6) * b.len; const dy = Math.cos(Math.PI / 6) * b.len; c.beginPath(); c.moveTo(0, b.y); c.lineTo( dx, b.y - dy); c.moveTo(0, b.y); c.lineTo(-dx, b.y - dy); c.stroke(); } c.restore(); } c.beginPath(); c.arc(0, 0, size * 0.10, 0, Math.PI * 2); c.fill(); c.restore(); } // ────────── sprite cache ────────── // Pre-render each (shape × color × size-bucket) tile to an offscreen // canvas once. drawImage in the rAF loop. Rebuild on theme change. const SIZE_BUCKETS = [11, 17, 24]; // small, medium, large radii let spriteCache = null; // { shape, sprites: [...by colorIdx then by bucketIdx] } function buildSprites(shape) { const colors = shape === 'sakura' ? SAKURA_COLORS : SNOW_COLORS; const sprites = []; for (let ci = 0; ci < colors.length; ci++) { const perColor = []; for (let bi = 0; bi < SIZE_BUCKETS.length; bi++) { const size = SIZE_BUCKETS[bi]; const pad = Math.ceil(size * 0.3); const dim = size * 2 + pad * 2; const off = document.createElement('canvas'); off.width = Math.ceil(dim * dpr); off.height = Math.ceil(dim * dpr); off.style.width = dim + 'px'; off.style.height = dim + 'px'; const c = off.getContext('2d'); c.setTransform(dpr, 0, 0, dpr, 0, 0); if (shape === 'sakura') paintSakura(c, dim / 2, dim / 2, size, colors[ci]); else paintSnowflake(c, dim / 2, dim / 2, size, colors[ci]); perColor.push({ canvas: off, dim }); } sprites.push(perColor); } return { shape, sprites }; } // ────────── particle seed ────────── const isMobile = window.innerWidth < 768; const COUNT = isMobile ? 12 : 22; const LAYERS = [ { name: 'back', sizeMul: 0.55, speedMul: 0.45, opaBase: 0.45, opaJitter: 0.10 }, { name: 'mid', sizeMul: 1.00, speedMul: 1.00, opaBase: 0.72, opaJitter: 0.12 }, { name: 'front', sizeMul: 1.45, speedMul: 1.55, opaBase: 0.90, opaJitter: 0.08 }, ]; const pickLayer = () => { const r = Math.random(); if (r < 0.35) return 0; // back: 35% if (r < 0.75) return 1; // mid: 40% return 2; // front: 25% }; const particles = []; const W0 = window.innerWidth, H0 = window.innerHeight; for (let i = 0; i < COUNT; i++) { const layerIdx = pickLayer(); const layer = LAYERS[layerIdx]; const bucketIdx = Math.floor(Math.random() * SIZE_BUCKETS.length); const baseSize = SIZE_BUCKETS[bucketIdx] * layer.sizeMul; particles.push({ layerIdx, bucketIdx, colorIdx: 0, // assigned per-shape on rebuild x: Math.random() * W0, y: Math.random() * H0 * 1.4 - H0 * 0.2, vx: 0, vy: (0.40 + Math.random() * 0.55) * layer.speedMul, size: baseSize, rot: Math.random() * Math.PI * 2, vRot: (Math.random() - 0.5) * 0.010, tumblePhase: Math.random() * Math.PI * 2, tumbleFreq: 0.012 + Math.random() * 0.018, swayPhase: Math.random() * Math.PI * 2, swayFreq: 0.008 + Math.random() * 0.014, swayAmp: 0.6 + Math.random() * 1.6, opacity: layer.opaBase + (Math.random() - 0.5) * 2 * layer.opaJitter, }); } function reassignColors(shape) { const colors = shape === 'sakura' ? SAKURA_COLORS : SNOW_COLORS; for (const p of particles) p.colorIdx = Math.floor(Math.random() * colors.length); } // ────────── scroll velocity ────────── let scrollVel = 0; let lastScroll = window.scrollY; const onScroll = () => { const s = window.scrollY; scrollVel = scrollVel * 0.78 + (s - lastScroll) * 0.06; lastScroll = s; }; window.addEventListener('scroll', onScroll, { passive: true }); // ────────── gust state ────────── let gustEndAt = 0; let nextGustAt = performance.now() + (20 + Math.random() * 20) * 1000; let gustVx = 0; let gustVy = 0; let gustMag = 0; let gustDur = 0; let gustStartAt = 0; function startGust(now) { const dir = Math.random() < 0.5 ? -1 : 1; gustMag = 0.7 + Math.random() * 0.9; // 0.7-1.6 gustDur = 1200 + Math.random() * 800; // 1.2-2.0s gustStartAt = now; gustEndAt = now + gustDur; gustVx = dir; gustVy = 0.15 + Math.random() * 0.20; // slight downward bias nextGustAt = now + (20 + Math.random() * 20) * 1000; } // ────────── visibility (pause when tab hidden) ────────── let paused = document.hidden; const onVis = () => { paused = document.hidden; if (!paused) lastT = performance.now(); }; document.addEventListener('visibilitychange', onVis); // ────────── theme detection + initial cache build ────────── const currentShape = () => (document.documentElement.dataset.theme === 'dark') ? 'snowflake' : 'sakura'; let activeShape = currentShape(); spriteCache = buildSprites(activeShape); reassignColors(activeShape); // ────────── animation loop ────────── let rafId, lastT = performance.now(); const tick = (t) => { if (paused) { rafId = requestAnimationFrame(tick); return; } const dt = Math.min(2.5, (t - lastT) / 16.67); lastT = t; scrollVel *= 0.94; // Theme switch — rebuild sprites if changed const shape = currentShape(); if (shape !== activeShape) { activeShape = shape; spriteCache = buildSprites(shape); reassignColors(shape); } const sprites = spriteCache.sprites; const numColors = sprites.length; // Gust if (t > nextGustAt && t > gustEndAt) startGust(t); let gustFactor = 0; if (t < gustEndAt) { const elapsed = t - gustStartAt; gustFactor = gustMag * (1 - elapsed / gustDur); // linear decay to 0 } const gxFrame = gustVx * gustFactor; const gyFrame = gustVy * gustFactor; const w = window.innerWidth, h = window.innerHeight; ctx.clearRect(0, 0, w, h); const verticalKick = scrollVel * 0.6; const horizontalDrift = scrollVel * 0.18; for (let i = 0; i < particles.length; i++) { const p = particles[i]; const layer = LAYERS[p.layerIdx]; p.tumblePhase += p.tumbleFreq * dt; p.swayPhase += p.swayFreq * dt; p.rot += p.vRot * dt; const sway = Math.sin(p.swayPhase) * p.swayAmp; p.x += (sway + horizontalDrift + gxFrame * layer.speedMul) * dt; p.y += (p.vy + verticalKick + gyFrame * layer.speedMul) * dt; // Recycle off-screen if (p.y > h + p.size * 2) { p.y = -p.size * 2; p.x = Math.random() * w; p.tumblePhase = Math.random() * Math.PI * 2; p.swayPhase = Math.random() * Math.PI * 2; } if (p.x > w + p.size * 2) p.x = -p.size * 2; else if (p.x < -p.size * 2) p.x = w + p.size * 2; // Tumble: scaleX based on cosine (1 = face-on, 0.30 = edge-on) const cosT = Math.cos(p.tumblePhase); const scaleX = 0.30 + 0.70 * Math.abs(cosT); // Opacity dips slightly at edge angle const opaDip = 1 - (1 - Math.abs(cosT)) * 0.30; const opacity = Math.max(0, Math.min(1, p.opacity * opaDip)); if (opacity < 0.01) continue; // Pick sprite const colorBank = sprites[p.colorIdx % numColors]; const sprite = colorBank[p.bucketIdx]; const drawDim = sprite.dim * (p.size / SIZE_BUCKETS[p.bucketIdx]) * 1.0; ctx.save(); ctx.globalAlpha = opacity; ctx.translate(p.x, p.y); ctx.rotate(p.rot); ctx.scale(scaleX, 1); ctx.drawImage(sprite.canvas, -drawDim / 2, -drawDim / 2, drawDim, drawDim); ctx.restore(); } rafId = requestAnimationFrame(tick); }; rafId = requestAnimationFrame(tick); return () => { window.removeEventListener('resize', resize); window.removeEventListener('scroll', onScroll); document.removeEventListener('visibilitychange', onVis); cancelAnimationFrame(rafId); }; }, [enabled]); if (!enabled) return null; return