/* global React, ReactDOM, PANELS, DeputyOrb, ChatWindow, playMenuTick, playSelect, playClose, WorkReel, WhatIDo, AboutMe, BadgeCoronation, Contact */ const { useState, useEffect, useRef, useCallback } = React; const MENU = [ { tag:"01", id:"START NEW GAME", meta:"06 WORKS" }, { tag:"02", id:"CHARACTER STATUS", meta:"ABOUT · CV" }, { tag:"03", id:"LOAD ARCHIVE", meta:"WHAT I DO" }, { tag:"04", id:"SIDE QUESTS", meta:"AI LAB" }, { tag:"05", id:"COMMS", meta:"OPEN ↗" }, ]; const STATUS = ["SYSTEM ONLINE","OPEN TO WORK","AI DEPUTY ACTIVE","UPDATED 2026"]; const STATUS_COL = ["var(--violet)","var(--acid)","var(--rose)","var(--warn)"]; // 02 · SYSTEM INDEX — directory of the four content chapters const INDEX = [ { tag:"01", id:"CHARACTER PROFILE", cn:"角色档案_", en:"WHO RUNS THIS SYSTEM", img:"assets/tape-01.png", edge:"#a07bff", to:"#about" }, { tag:"02", id:"TIMELINE / JOURNEY", cn:"履历_", en:"HOW THIS SYSTEM EVOLVED", img:"assets/tape-02.png", edge:"#8bf06a", to:"#timeline" }, { tag:"03", id:"SKILLS", cn:"能力栈_", en:"WHAT THIS SYSTEM CAN DO", img:"assets/tape-03.png", edge:"#ff5fce", to:"#skills" }, { tag:"04", id:"PROJECTS", cn:"精选作品_", en:"MISSIONS & CASE FILES", img:"assets/tape-04.png", edge:"#ff8a3d", to:"#work" }, { tag:"05", id:"CONTACT", cn:"请联系我_", en:"FINAL CUTSCENE → OPEN CHANNEL", img:"assets/tape-05.png", edge:"#ffc24d", to:"#coronation" }, ]; // Stylized motorcycle + rider silhouette (placeholder for OC art). // Dark fills + violet rim accents on the upper edges. function OCPlaceholder(){ return ( ); } // Floating CRT screen, top-right of hero function FloatingCRT(){ return (

CAM_02 · LIVE

● REC00:42:18

); } // ---------- MENU ITEM ---------- function MenuItem({ m, active, onPick, delay=0 }){ const enter = () => playMenuTick(); return ( ); } // ---------- PANEL ---------- function Panel({ openKey, onClose }){ const def = openKey ? PANELS[openKey] : null; const open = !!def; const Render = def?.render; return (

{ if(e.target.classList.contains("panel-overlay")) onClose(); }}>

{def && ( <>

{def.tag} {openKey}

)}

); } // ---------- MAIN APP ---------- function App(){ const [openPanel, setOpenPanel] = useState(null); const [chatOpen, setChatOpen] = useState(false); const [activeMenu, setActiveMenu] = useState(null); const [menuIn, setMenuIn] = useState(false); const [mobileMenuOpen, setMobileMenuOpen] = useState(false); const [activeSection, setActiveSection] = useState("HOME"); useEffect(()=>{ window.__openChat = ()=> setChatOpen(true); return ()=>{ try{ delete window.__openChat; }catch(e){} }; }, []); // ---- scroll-spy: track current section for the mobile nav label/highlight ---- useEffect(()=>{ const map = [[".hero-screen","HOME"],["#index","INDEX"],["#about","PROFILE"],["#timeline","TIMELINE"],["#skills","SKILLS"],["#work","PROJECTS"],["#coronation","CONTACT"]]; const els = map.map(([sel,label])=>{ const el=document.querySelector(sel); return el?{el,label}:null; }).filter(Boolean); if(!els.length) return; const io = new IntersectionObserver((entries)=>{ entries.forEach(e=>{ if(e.isIntersecting){ const m=els.find(x=>x.el===e.target); if(m) setActiveSection(m.label); } }); }, { rootMargin:"-45% 0px -45% 0px", threshold:0 }); els.forEach(x=>io.observe(x.el)); return ()=> io.disconnect(); }, []); // lock body scroll while the mobile menu sheet is open useEffect(()=>{ if(mobileMenuOpen){ const p=document.body.style.overflow; document.body.style.overflow="hidden"; return ()=>{ document.body.style.overflow=p; }; } }, [mobileMenuOpen]); const [playing, setPlaying] = useState(true); const videoStartRef = useRef(false); const blinkRef = useRef(null); const playingRef = useRef(false); const aliveT0 = useRef(0); useEffect(()=>{ playingRef.current = playing; }, [playing]); const [sound, setSound] = useState(false); // false = muted (default) const soundRef = useRef(false); useEffect(()=>{ soundRef.current = sound; }, [sound]); const ambientRef = useRef(null); // {ctx, gain, nodes} const stageRef = useRef(null); const glowRef = useRef(null); const ocRef = useRef(null); const kanjiRef = useRef(null); const heroRef = useRef(null); const dimRef = useRef(null); const titleRef = useRef(null); const hintRef = useRef(null); const menuRef = useRef(null); const menuSecRef = useRef(null); const indexSecRef = useRef(null); const indexFlashRef = useRef(null); const flashFiredRef = useRef(false); const tapeRowRef = useRef(null); const tapeStageRef = useRef(null); const [tapeActive, setTapeActive] = useState(0); const tapePos = useRef(0); // smoothed carousel position (float index) const tapeTarget = useRef(0); // snap target index const tapeVel = useRef(0); // inertia velocity const tapeActiveRef = useRef(0); const tapeDragEnd = useRef(0); // ts of last real swipe — guards the click that follows const target = useRef({ x:0.55, y:0.55 }); const current = useRef({ x:0.55, y:0.55 }); // ---- SINGLE smooth-scroll provider (Lenis). Initialised exactly once. ---- useEffect(()=>{ if (!window.Lenis) return; const lenis = new window.Lenis({ duration: 1.1, easing: (t)=> Math.min(1, 1.001 - Math.pow(2, -10*t)), smoothWheel: true, wheelMultiplier: 1, touchMultiplier: 1.6, }); window.__lenis = lenis; let raf; const loop = (t)=>{ lenis.raf(t); raf = requestAnimationFrame(loop); }; raf = requestAnimationFrame(loop); return ()=>{ cancelAnimationFrame(raf); lenis.destroy(); if(window.__lenis===lenis) window.__lenis=null; }; }, []); // cursor → spotlight lerp loop useEffect(()=>{ function onMove(e){ const w = window.innerWidth, h = window.innerHeight; target.current.x = e.clientX / w; target.current.y = e.clientY / h; } window.addEventListener("mousemove", onMove); let raf; function tick(){ current.current.x += (target.current.x - current.current.x) * 0.06; current.current.y += (target.current.y - current.current.y) * 0.06; const cx = current.current.x, cy = current.current.y; if (glowRef.current){ glowRef.current.style.left = (cx*100)+"%"; glowRef.current.style.top = (cy*100)+"%"; } // "alive" still — JS-driven so it runs regardless of CSS-animation quirks. if (!playingRef.current){ if (!aliveT0.current) aliveT0.current = performance.now(); const el = (performance.now() - aliveT0.current) / 1000; // seconds since alive start const tt = performance.now() / 1000; const sc = 1.038 + 0.014 * Math.sin(tt * 0.85); const tx = 0.22 * Math.sin(tt * 0.55) + (cx - 0.5) * 0.5; const ty = 0.16 * Math.sin(tt * 0.42 + 1) + (cy - 0.5) * 0.4; const rot = 0.14 * Math.sin(tt * 0.6); if (ocRef.current) ocRef.current.style.transform = `scale(${sc}) translate(${tx}%, ${ty}%) rotate(${rot}deg)`; // two soft blinks during the still hold (~1.4s and ~3.0s) if (blinkRef.current){ const pulse = (c,w)=>{ const k=(el-c)/w; return (k>0&&k<1)? Math.sin(k*Math.PI) : 0; }; const b = Math.max(pulse(1.4,0.34), pulse(3.0,0.34)*0.85); blinkRef.current.style.opacity = b.toFixed(3); } } raf = requestAnimationFrame(tick); } raf = requestAnimationFrame(tick); return ()=>{ window.removeEventListener("mousemove", onMove); cancelAnimationFrame(raf);}; }, []); // scroll → fade hero title, grow OC dim, parallax OC + reveal menu useEffect(()=>{ function onScroll(){ const y = window.scrollY || window.pageYOffset || 0; const vh = window.innerHeight || 1; const p = Math.min(Math.max(y / (vh*0.7), 0), 1); if (dimRef.current) dimRef.current.style.opacity = String(p); // Hero PIN handoff: gentle push-in toward the OC — transform + opacity ONLY (no filter on scroll) if (heroRef.current){ const s = 1 + p*0.5; // softer push-in heroRef.current.style.transformOrigin = "72% 46%"; // focal point = OC right side heroRef.current.style.transform = `scale(${s.toFixed(4)})`; } if (titleRef.current){ titleRef.current.style.opacity = String(1 - Math.min(p*1.6, 1)); titleRef.current.style.transform = `translateY(${(-p*70).toFixed(1)}px)`; } if (hintRef.current) hintRef.current.style.opacity = String(1 - Math.min(p*1.8, 1)); // sound is an OPENING-only ambiance: once you page past the hero, cut it automatically if (soundRef.current && p > 0.6){ setSound(false); } } window.addEventListener("scroll", onScroll, { passive:true }); onScroll(); return ()=> window.removeEventListener("scroll", onScroll); }, []); // UNIFIED entrance: reveal [data-cine] elements ONCE on enter (opacity 0→1, y 60→0). // No per-frame scroll transforms. Primary = IntersectionObserver; fallback = a cheap // rect check on each Lenis scroll (covers cases where IO is throttled). Each element // is revealed once, then dropped from the watch set so steady-state scroll stays free. useEffect(()=>{ let pending = Array.prototype.slice.call(document.querySelectorAll("[data-cine]")); const reveal = (el)=>{ el.classList.add("in"); }; const sweep = ()=>{ if (!pending.length) return; const vh = window.innerHeight || 1; pending = pending.filter((el)=>{ const r = el.getBoundingClientRect(); if (r.top < vh*0.86 && r.bottom > 0){ reveal(el); return false; } return true; }); }; const io = new IntersectionObserver((entries)=>{ entries.forEach((e)=>{ if (e.isIntersecting){ reveal(e.target); io.unobserve(e.target); pending = pending.filter((x)=>x!==e.target); } }); }, { threshold:0.18, rootMargin:"0px 0px -8% 0px" }); pending.forEach((el)=> io.observe(el)); sweep(); // reveal whatever is already on screen const onScroll = ()=> sweep(); if (window.__lenis) window.__lenis.on("scroll", onScroll); window.addEventListener("scroll", onScroll, { passive:true }); window.addEventListener("resize", onScroll); return ()=>{ io.disconnect(); if (window.__lenis) window.__lenis.off("scroll", onScroll); window.removeEventListener("scroll", onScroll); window.removeEventListener("resize", onScroll); }; }, []); // keyboard shortcuts useEffect(()=>{ function onKey(e){ if (e.key === "Escape"){ if (chatOpen) { setChatOpen(false); playClose(); return; } if (openPanel){ setOpenPanel(null); playClose(); return; } } if (e.key === "`" || e.key === "~"){ e.preventDefault(); setChatOpen(o => !o); playSelect(); } // when the INDEX carousel is in view, ←/→ browse, Enter inserts const ix = document.getElementById("index"); if (ix && !chatOpen && !openPanel){ const r = ix.getBoundingClientRect(); const inView = r.top < window.innerHeight*0.5 && r.bottom > window.innerHeight*0.5; if (inView){ if (e.key === "ArrowLeft"){ e.preventDefault(); stepTape(-1); } else if (e.key === "ArrowRight"){ e.preventDefault(); stepTape(1); } else if (e.key === "Enter"){ e.preventDefault(); onTapeClick(tapeActiveRef.current); } } } } window.addEventListener("keydown", onKey); return ()=> window.removeEventListener("keydown", onKey); }, [openPanel, chatOpen, activeMenu, stepTape, onTapeClick]); const pick = useCallback((id)=>{ setActiveMenu(id); setOpenPanel(id); }, []); // ---- SOUND: opening-only ambiance (video audio + low hum). Always starts OFF // so the breathing button invites a click; auto-cuts when you page past hero. ---- function buildAmbient(){ try{ const AC = window.AudioContext || window.webkitAudioContext; if (!AC) return null; const ctx = new AC(); const master = ctx.createGain(); master.gain.value = 0; master.connect(ctx.destination); // low hum (two detuned oscillators) const o1 = ctx.createOscillator(); o1.type="sine"; o1.frequency.value=56; const o2 = ctx.createOscillator(); o2.type="sine"; o2.frequency.value=56.4; const humG = ctx.createGain(); humG.gain.value=0.14; o1.connect(humG); o2.connect(humG); humG.connect(master); // faint filtered noise "tape hiss" const buf = ctx.createBuffer(1, ctx.sampleRate*2, ctx.sampleRate); const d = buf.getChannelData(0); for (let i=0;i{ const v = ocRef.current; if (v){ v.muted = !sound; if (sound){ const pr = v.play && v.play(); if (pr && pr.catch) pr.catch(()=>{}); } } if (sound){ if (!ambientRef.current) ambientRef.current = buildAmbient(); const a = ambientRef.current; if (a){ if (a.ctx.state === "suspended") a.ctx.resume(); a.master.gain.cancelScheduledValues(a.ctx.currentTime); a.master.gain.setTargetAtTime(0.5, a.ctx.currentTime, 0.6); // fade in } } else { const a = ambientRef.current; if (a){ a.master.gain.cancelScheduledValues(a.ctx.currentTime); a.master.gain.setTargetAtTime(0, a.ctx.currentTime, 0.4); } } }, [sound]); const toggleSound = useCallback(()=>{ try{ playSelect(); }catch(e){} setSound(s => !s); }, []); // smooth scroll to a section anchor (via the single Lenis instance) const goTo = useCallback((sel)=>{ try{ playSelect(); }catch(e){} if (sel === "#top"){ if (window.__lenis) window.__lenis.scrollTo(0); else window.scrollTo({ top:0, behavior:"smooth" }); return; } const el = document.querySelector(sel); if (!el) return; // CONTACT (#coronation) is a 480vh scroll-scrubbed cinematic; the contact panel // only appears at the very END. Jump to the bottom of that section so the // contact card is revealed directly instead of landing on the animation start. if (sel === "#coronation"){ const vh = window.innerHeight || 0; const target = window.scrollY + el.getBoundingClientRect().top + (el.offsetHeight - vh); if (window.__lenis){ window.__lenis.scrollTo(target); } else { window.scrollTo({ top:target, behavior:"smooth" }); } return; } if (window.__lenis){ window.__lenis.scrollTo(el, { offset:0 }); } else { const y = window.scrollY + el.getBoundingClientRect().top; window.scrollTo({ top:y, behavior:"smooth" }); } }, []); // ---- INDEX cassette carousel: drag / wheel / arrows, inertia + snap-to-center ---- const N = INDEX.length; const clampTape = (v)=> Math.max(0, Math.min(N-1, v)); const snapTape = useCallback((i)=>{ i = clampTape(i); tapeTarget.current = i; tapeVel.current = 0; try{ playTick && playTick({freq:300+i*40,dur:0.07,type:"square",gain:0.05}); }catch(e){} }, []); const stepTape = useCallback((d)=>{ snapTape(Math.round(tapeTarget.current)+d); }, [snapTape]); const onTapeClick = useCallback((i)=>{ // ignore the click that browsers synthesise at the end of a swipe/drag if (tapeDragEnd.current && performance.now() - tapeDragEnd.current < 320) return; if (Math.round(tapePos.current) !== i){ snapTape(i); return; } // not centered → just bring to center try{ playSelect(); }catch(e){} goTo(INDEX[i].to); }, [snapTape]); // carousel render loop + input useEffect(()=>{ const stage = tapeStageRef.current, track = tapeRowRef.current; if (!stage || !track) return; const cards = Array.prototype.slice.call(track.children); let raf = 0, dragging=false, startX=0, startY=0, startPos=0, lastX=0, lastT=0, moved=false, axis=null; const SPACING = ()=> Math.min(window.innerWidth*0.30, 420); // px between tape centers function layout(){ const pos = tapePos.current; const sp = SPACING(); for (let i=0;i 6 || Math.abs(dy) > 6)){ axis = Math.abs(dx) >= Math.abs(dy) ? "x" : "y"; if (axis === "x" && stage.setPointerCapture){ try{ stage.setPointerCapture(e.pointerId); }catch(_){} } } if (axis === "y"){ dragging=false; return; } if (axis !== "x") return; if (Math.abs(dx) > 4) moved=true; let p = startPos - dx / SPACING(); // ONE swipe = ONE card: cap the live drag to ~1 card each side of where it began, // so you can never fling visually through several tapes at once. p = Math.max(startPos - 1.15, Math.min(startPos + 1.15, p)); tapePos.current = Math.max(-0.4, Math.min(N-0.6, p)); tapeTarget.current = tapePos.current; // follow finger lastX = e.clientX; lastT = performance.now(); } function up(e){ if (!dragging) return; dragging=false; if (axis === "x" && moved) tapeDragEnd.current = performance.now(); // suppress the trailing click // land on AT MOST ±1 from the card the gesture started on, then let the spring // (tapeVel inertia + rebound in tick()) carry it home with the bouncy settle. const startIndex = Math.round(startPos); const delta = tapePos.current - startPos; // index units dragged (+ = next) let dir = 0; if (delta > 0.16) dir = 1; else if (delta < -0.16) dir = -1; snapTape(startIndex + dir); axis = null; } stage.addEventListener("pointerdown", down); window.addEventListener("pointermove", move); window.addEventListener("pointerup", up); window.addEventListener("resize", layout); layout(); return ()=>{ cancelAnimationFrame(raf); stage.removeEventListener("pointerdown", down); window.removeEventListener("pointermove", move); window.removeEventListener("pointerup", up); window.removeEventListener("resize", layout); }; }, [snapTape, stepTape]); // ===== DIRECTION-SEPARATED INPUT ===== // The page NEVER pins. Vertical wheel/scroll is left entirely to the page (Lenis). // Only a HORIZONTAL-dominant wheel (trackpad sideways) over the carousel switches cards. // Card switching otherwise comes from swipe (pointer drag), arrows and dots. useEffect(()=>{ const stage = tapeStageRef.current; if (!stage) return; let acc=0, cd=0; function onWheel(e){ // vertical intent → do nothing, let the page scroll normally if (Math.abs(e.deltaX) <= Math.abs(e.deltaY)) return; e.preventDefault(); // horizontal intent only const now = performance.now(); if (now < cd) return; acc += e.deltaX; if (Math.abs(acc) > 40){ stepTape(acc>0?1:-1); acc=0; cd = now + 340; } } stage.addEventListener("wheel", onWheel, { passive:false }); return ()=> stage.removeEventListener("wheel", onWheel); }, [stepTape]); // (image-first crossfade removed — video plays full-bleed from the start) return ( <> {/* fixed night bg */}

{/* fixed OC backdrop — full-bleed image→video, persists through scroll */}

{/* OC media: full-bleed video, plays from the start */}