// Frame 01 v2: ASCII Terminal — 带图作品网格 + 浮动 chatbot + 光标变形 if (typeof window.getSiteCursorStyle !== 'function') { window.getSiteCursorStyle = function getSiteCursorStyleFallback(cur, C) { return { position: 'fixed', pointerEvents: 'none', zIndex: 200, left: cur.x, top: cur.y, transform: 'translate(-50%,-50%)', opacity: cur.visible ? 1 : 0, width: 10, height: 10, borderRadius: '50%', background: (C && C.curDefault) || '#6fb36f', }; }; } // Low-fi ASCII-ish placeholder "images" — each work gets a unique pattern const PATTERNS = [ { bg: '#1a1410', fg: '#d97757', glyph: '▞▚' }, { bg: '#10181a', fg: '#6fb3a8', glyph: '◢◣' }, { bg: '#181018', fg: '#b87fd9', glyph: '░▒▓' }, { bg: '#1a1a10', fg: '#d4c06f', glyph: '╱╲' }, { bg: '#101a14', fg: '#6fd48e', glyph: '●○' }, { bg: '#1a1010', fg: '#d96f6f', glyph: '▼▲' }, ]; const SELECTED_WORKS_DOTS = [ [2.08,50.08], [34.08,50.08], [58.049,50.08], [66.049,50.08], [74.049,50.08], [98.018,50.08], [130.018,50.08], [145.986,50.08], [177.986,50.08], [2.08,42.08], [10.08,42.08], [26.08,42.08], [34.08,42.08], [50.049,42.08], [82.049,42.08], [98.018,42.08], [122.018,42.08], [145.986,42.08], [169.986,42.08], [2.08,34.08], [18.08,34.08], [34.08,34.08], [50.049,34.08], [82.049,34.08], [98.018,34.08], [114.018,34.08], [145.986,34.08], [161.986,34.08], [2.08,26.08], [18.08,26.08], [34.08,26.08], [50.049,26.08], [82.049,26.08], [98.018,26.08], [106.018,26.08], [114.018,26.08], [122.018,26.08], [145.986,26.08], [153.986,26.08], [2.08,18.08], [34.08,18.08], [50.049,18.08], [82.049,18.08], [98.018,18.08], [130.018,18.08], [145.986,18.08], [161.986,18.08], [2.08,10.08], [34.08,10.08], [50.049,10.08], [82.049,10.08], [98.018,10.08], [130.018,10.08], [145.986,10.08], [169.986,10.08], [2.08,2.08], [34.08,2.08], [58.049,2.08], [66.049,2.08], [74.049,2.08], [98.018,2.08], [106.018,2.08], [114.018,2.08], [122.018,2.08], [145.986,2.08], [177.986,2.08], ]; const HERO_SLIDES = [ { id: 'eye', en: 'Curiosity broadens my horizons', zh: '好奇心拓宽了我的视野', alt: 'ASCII eye' }, { id: 'coffee', en: 'No ideas? Coffee, then pretend to think.', zh: '没灵感？喝杯咖啡，再假装思考。', alt: 'ASCII coffee cup' }, { id: 'cat', en: 'Cats taught empathy.', zh: '猫教会了我共情。', alt: 'ASCII cat' }, ]; // Fit silhouettes into one optical frame while preserving character proportions. const HERO_ART_LAYOUT = Object.fromEntries(Object.entries(window.HERO_ASCII_ART).map(([id, text]) => { const rows = text.split('\n'); const points = rows.flatMap((row, y) => Array.from(row).flatMap((glyph, x) => glyph === ' ' ? [] : [{x, y}])); const minX = Math.min(...points.map(p => p.x)), maxX = Math.max(...points.map(p => p.x)); const minY = Math.min(...points.map(p => p.y)), maxY = Math.max(...points.map(p => p.y)); const width = maxX - minX + 1, height = maxY - minY + 1; const scale = Math.min(64 / width, 27 / height); const w = Math.round(width * scale), h = Math.round(height * scale); const left = Math.floor((90 - w) / 2), top = Math.floor((27 - h) / 2); const grid = Array.from({length: 35}, () => Array(90).fill(' ')); for (let y = 0; y < h; y++) for (let x = 0; x < w; x++) { grid[top + y][left + x] = rows[minY + Math.min(height - 1, Math.floor(y / scale))][minX + Math.min(width - 1, Math.floor(x / scale))] || ' '; } return [id, {art: grid.map(row => row.join('')).join('\n'), bottom: top + h}]; })); // Stable per-cell variation keeps motion independent of React renders and slide changes. const HeroAsciiArt = React.memo(function HeroAsciiArt({ id, label, art }) { const characters = React.useMemo(() => { const ramp = '.super*%&#'; return Array.from(art || window.HERO_ASCII_ART[id]).map((glyph, index) => { if (glyph === ' ' || glyph === '\n') return glyph; const random = seed => { const value = Math.sin((index + 1) * 127.1 + seed * 311.7) * 43758.5453; return value - Math.floor(value); }; const density = Math.max(0, ramp.indexOf(glyph)) / (ramp.length - 1); return {glyph}; }); }, [id, art]); return 
{characters}
; }); // One shared character field moves between silhouettes instead of cross-fading images. function HeroMorphArt({ id, label, reduced }) { const [art, setArt] = React.useState(HERO_ART_LAYOUT[id].art); const current = React.useRef(art); React.useEffect(() => { const target = HERO_ART_LAYOUT[id].art; if (reduced || current.current === target) { current.current = target; setArt(target); return; } const points = text => text.split('\n').flatMap((row, y) => Array.from(row).flatMap((glyph, x) => glyph === ' ' ? [] : [{x, y, glyph}]) ); const from = points(current.current), to = points(target); const count = Math.max(from.length, to.length); const glyphs = 'super.#%*&'; let frame, start; const tick = now => { if (start === undefined) start = now; const progress = Math.min(1, (now - start) / 250); if (progress === 1) { current.current = target; setArt(target); return; } // Update on each animation frame so the 250ms eased morph stays fluid. { const grid = Array.from({length: 35}, () => Array(90).fill(' ')); const ease = progress * progress * (3 - 2 * progress); const spread = Math.sin(Math.PI * progress); for (let i = 0; i < count; i++) { const a = from[Math.floor(i * from.length / count)]; const b = to[Math.floor(i * to.length / count)]; const phase = i * 2.39996; const x = Math.round(a.x + (b.x - a.x) * ease + Math.sin(phase + progress * 4) * spread * 5); const y = Math.round(a.y + (b.y - a.y) * ease + Math.cos(phase + progress * 3) * spread * 2.5); if (x >= 0 && x < 90 && y >= 0 && y < 35) { grid[y][x] = progress < .18 ? a.glyph : progress > .82 ? b.glyph : glyphs[(i + Math.floor(progress * 12)) % glyphs.length]; } } const next = grid.map(row => row.join('')).join('\n'); current.current = next; setArt(next); } frame = requestAnimationFrame(tick); }; frame = requestAnimationFrame(tick); return () => cancelAnimationFrame(frame); }, [id, reduced]); return
; } function HeroMorphCaption({ text, reduced }) { const [display, setDisplay] = React.useState(text); const current = React.useRef(text); React.useEffect(() => { const before = current.current; if (reduced || before === text) { current.current = text; setDisplay(text); return; } const glyphs = 'super.#%*&'; let frame, start; const tick = now => { if (start === undefined) start = now; const progress = Math.min(1, (now - start) / 250); const eased = progress * progress * (3 - 2 * progress); const length = Math.round(before.length + (text.length - before.length) * eased); const next = progress === 1 ? text : Array.from({length}, (_, index) => { const threshold = ((index * 17 + 7) % 31) / 31; if (eased > .25 + threshold * .7) return text[index] || ''; if (eased < threshold * .2) return before[index] || ''; return text[index] === ' ' ? ' ' : glyphs[(index + Math.floor(eased * 16)) % glyphs.length]; }).join(''); current.current = next; setDisplay(next); if (progress < 1) frame = requestAnimationFrame(tick); }; frame = requestAnimationFrame(tick); return () => cancelAnimationFrame(frame); }, [text, reduced]); return

; } // Original pixel portrait: side-swept hair, round glasses and a collared shirt. const HERO_PORTRAIT_PIXELS = [ ' ##### ', ' ######## ', ' ### ### ', ' ## ## ', ' # # ', ' ## ### ### # ', ' # # # # # # ', ' # ### ### # ', ' # # # ', ' # # ', ' # ### # ', ' # # ', ' ## ## ', ' ## # # ## ', ' # #### # ', ' # # # # ', ' # # # # ', ]; function HeroPortraitBadge() { const Surface = window.GlassSurface; return ; } function AsciiHeroSection({ lang, children }) { const section = React.useRef(null); const quickScroll = React.useRef(0); const [reduced, setReduced] = React.useState(() => window.matchMedia('(prefers-reduced-motion: reduce)').matches); React.useEffect(() => { const media = window.matchMedia('(prefers-reduced-motion: reduce)'); const update = () => setReduced(media.matches); media.addEventListener('change', update); return () => media.removeEventListener('change', update); }, []); React.useEffect(() => { const root = section.current; if (reduced) return; const cards = Array.from(root.querySelectorAll('.hero-stack-card')); const copy = root.querySelector('.hero-stack-copy'); let frame = 0; const clamp = n => Math.max(0, Math.min(1, n)); const ease = n => n * n * (3 - 2 * n); const render = () => { frame = 0; root.style.setProperty('--hero-viewport-width', `${document.documentElement.clientWidth}px`); const vh = window.innerHeight; const progress = Math.max(0, -root.getBoundingClientRect().top / vh); const entry = ease(clamp(progress / .8)); const cardTop = cards[0].offsetTop; const stackGap = window.innerWidth <= 720 ? 28 : 40; const lift = Math.max(0, cardTop - Math.max(90, (vh - cards[0].offsetHeight) / 2)); cards.forEach((card, i) => { const exit = ease(clamp((progress - .8 - i * .8) / .8)); const isLast = i === cards.length - 1; // Add a short upward pop as Work follows the releasing sticky stage. const lastExit = ease(clamp((progress - 3.05) / .55)); const depth = Math.max(0, i - Math.max(0, (progress - .8) / .8)); const y = -lift * entry - depth * stackGap - (isLast ? lastExit * vh * .65 : exit * (vh + card.offsetHeight)); const scale = 1 - Math.min(3, depth) * .07; card.style.transform = `translate(-50%, ${y}px) scale(${scale}) rotate(${(isLast ? lastExit : exit) * -5}deg)`; card.style.opacity = '1'; card.style.visibility = !isLast && exit >= 1 ? 'hidden' : 'visible'; }); // Only fade text when a card approaches its actual horizontal and vertical bounds. const textBounds = Array.from(copy.querySelectorAll('.hero-lead, .hero-description')).map(el => el.getBoundingClientRect()); let copyOpacity = 1; cards.forEach(card => { if (card.style.visibility === 'hidden') return; const bounds = card.getBoundingClientRect(); textBounds.forEach(text => { const horizontalOverlap = bounds.left < text.right && bounds.right > text.left; if (horizontalOverlap && bounds.bottom > text.top - 24 && bounds.top < text.bottom + 24) { copyOpacity = Math.min(copyOpacity, 1 - ease(clamp((text.bottom + 24 - bounds.top) / 48))); } }); }); copy.style.opacity = String(copyOpacity); copy.style.visibility = copyOpacity === 0 ? 'hidden' : 'visible'; const arrow = root.querySelector('.hero-stack-arrow'); const lastBounds = cards[cards.length - 1].getBoundingClientRect(); const arrowOpacity = 1 - ease(clamp((32 - lastBounds.bottom) / 64)); arrow.style.opacity = String(arrowOpacity); arrow.style.visibility = arrowOpacity === 0 ? 'hidden' : 'visible'; }; const schedule = () => { if (!frame) frame = requestAnimationFrame(render); }; window.addEventListener('scroll', schedule, {passive: true}); window.addEventListener('resize', schedule); render(); return () => { cancelAnimationFrame(frame); window.removeEventListener('scroll', schedule); window.removeEventListener('resize', schedule); }; }, [reduced]); React.useEffect(() => { const stop = () => { cancelAnimationFrame(quickScroll.current); quickScroll.current = 0; window.__heroQuickScrollActive = false; }; window.addEventListener('wheel', stop, {passive: true}); window.addEventListener('touchstart', stop, {passive: true}); window.addEventListener('keydown', stop); return () => { stop(); window.removeEventListener('wheel', stop); window.removeEventListener('touchstart', stop); window.removeEventListener('keydown', stop); }; }, []); const onArrowClick = event => { if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return; event.preventDefault(); cancelAnimationFrame(quickScroll.current); const root = section.current; const works = document.getElementById('works'); const startY = window.scrollY; const rootY = root.getBoundingClientRect().top + startY; const destination = works.getBoundingClientRect().top + startY - 80; if (reduced) { window.scrollTo(0, destination); history.replaceState(null, '', '#works'); return; } const vh = window.innerHeight; const stops = [.8, 1.6, 2.4, 3.05].map(p => rootY + p * vh).concat(destination).filter(y => y > startY + 1 && y <= destination); if (!stops.length) return; window.__heroQuickScrollActive = true; let phase = 0, phaseStart, from = startY; const tick = now => { if (phaseStart === undefined) phaseStart = now; const duration = phase === 0 && startY < rootY + vh * .5 ? 340 : phase === stops.length - 1 ? 320 : 210; const t = Math.min(1, (now - phaseStart) / duration); const eased = t * t * (3 - 2 * t); window.scrollTo(0, from + (stops[phase] - from) * eased); if (t === 1) { from = stops[phase++]; phaseStart = now; if (phase === stops.length) { quickScroll.current = 0; window.__heroQuickScrollActive = false; history.replaceState(null, '', '#works'); return; } } quickScroll.current = requestAnimationFrame(tick); }; quickScroll.current = requestAnimationFrame(tick); }; const slides = [HERO_SLIDES[2], HERO_SLIDES[1], HERO_SLIDES[0]]; return (
{children}
{slides.map((slide, index) =>

{slide[lang]}

)}

{lang === 'en' ? 'More to explore.' : '还有更多，待探索。'}

); } function HeroDecodeText({ text, className, delay = 0, duration = 760 }) { const [rendered, setRendered] = React.useState(text); React.useEffect(() => { if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) { setRendered(text); return undefined; } const glyphs = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789<>/\\[]{}*+~'; const characters = Array.from(text); const codeTailLength = Math.max(4, Math.round(characters.length * .22)); let frame = 0; let start = 0; let lastPaint = -Infinity; const tick = (now) => { if (!start) start = now; const elapsed = now - start; const visibleProgress = Math.max(0, Math.min(1, (elapsed - delay) / duration)); if (elapsed - lastPaint >= 42 || visibleProgress === 1) { // Resolve the actual copy while the line is still heavily blurred, so the // final sharp frame never exposes a single scrambled glyph or tail. const resolveLine = elapsed - delay >= duration * .42 || visibleProgress === 1; const tailProgress = Math.max(0, Math.min(1, (elapsed - delay - duration * .04) / (duration * .34))); const visibleTailLength = Math.ceil(codeTailLength * (1 - tailProgress)); const scrambled = characters.map((character) => { if (/\s/.test(character)) return character; if (resolveLine) return character; return glyphs[Math.floor(Math.random() * glyphs.length)]; }).join('') + Array.from({ length: visibleTailLength }, () => glyphs[Math.floor(Math.random() * glyphs.length)]).join(''); setRendered(scrambled); lastPaint = elapsed; } if (visibleProgress < 1) frame = window.requestAnimationFrame(tick); }; frame = window.requestAnimationFrame(tick); return () => window.cancelAnimationFrame(frame); }, [text, delay, duration]); return {rendered} ; } function HeroRollingWords({ words, reducedText, interval = 2000 }) { const [reduceMotion, setReduceMotion] = React.useState(() => ( window.matchMedia('(prefers-reduced-motion: reduce)').matches )); const [rotation, setRotation] = React.useState({ current: 0, previous: null, active: false }); React.useEffect(() => { const media = window.matchMedia('(prefers-reduced-motion: reduce)'); const onChange = (event) => setReduceMotion(event.matches); media.addEventListener?.('change', onChange); return () => media.removeEventListener?.('change', onChange); }, []); React.useEffect(() => { if (reduceMotion || words.length < 2) return undefined; let frame = 0; const timer = window.setInterval(() => { setRotation((state) => ({ current: (state.current + 1) % words.length, previous: state.current, active: false, })); frame = window.requestAnimationFrame(() => { frame = window.requestAnimationFrame(() => { setRotation((state) => ({ ...state, active: true })); }); }); }, interval); return () => { window.clearInterval(timer); window.cancelAnimationFrame(frame); }; }, [reduceMotion, words.length, interval]); if (reduceMotion) { return {reducedText}; } const longestWord = words.reduce((longest, word) => ( word.length > longest.length ? word : longest ), words[0] || ''); return ( ); } function WorkCover({ n, img, t, cover, decorative = false }) { if (cover && cover.src) { return cover.type === 'video' ?