diff --git a/app/page.tsx b/app/page.tsx index 520c497..6b1a767 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -5,6 +5,7 @@ import { PostListItem } from '@/components/post-list-item'; import { TimelineWrapper } from '@/components/timeline-wrapper'; import { SidebarLayout } from '@/components/sidebar-layout'; import { JsonLd } from '@/components/json-ld'; +import { HeroSection } from '@/components/hero-section'; export default function HomePage() { const posts = getAllPostsSorted().slice(0, siteConfig.postsPerPage); @@ -34,14 +35,13 @@ export default function HomePage() {
-
-

- {siteConfig.name} 的最新動態 -

-

- {siteConfig.tagline} -

-
+

+ {siteConfig.name} 的最新動態 — {siteConfig.tagline} +

+
diff --git a/components/hero-section.tsx b/components/hero-section.tsx new file mode 100644 index 0000000..736fca6 --- /dev/null +++ b/components/hero-section.tsx @@ -0,0 +1,117 @@ +'use client'; + +import { useState, useEffect } from 'react'; +import { MatrixRain } from './matrix-rain'; +import { TerminalWindow } from './terminal-window'; + +interface HeroSectionProps { + title: string; + tagline: string; +} + +type Phase = 'matrix' | 'transition' | 'terminal'; + +const MIN_MATRIX_DURATION = 1500; +const MAX_MATRIX_DURATION = 6000; +const TRANSITION_DURATION = 600; + +export function HeroSection({ title, tagline }: HeroSectionProps) { + const [phase, setPhase] = useState('matrix'); + const [matrixOpacity, setMatrixOpacity] = useState(1); + const [terminalOpacity, setTerminalOpacity] = useState(0); + const [reducedMotion, setReducedMotion] = useState(false); + + useEffect(() => { + const mq = window.matchMedia('(prefers-reduced-motion: reduce)'); + setReducedMotion(mq.matches); + }, []); + + const handleMatrixComplete = () => { + setPhase('transition'); + setMatrixOpacity(0); + setTerminalOpacity(1); + }; + + useEffect(() => { + if (phase !== 'matrix') return; + + const startTime = Date.now(); + let maxTimerId: ReturnType; + let minTimerId: ReturnType; + + const scheduleTransition = () => { + const elapsed = Date.now() - startTime; + const remaining = Math.max(0, MIN_MATRIX_DURATION - elapsed); + if (remaining > 0) { + minTimerId = setTimeout(handleMatrixComplete, remaining); + } else { + handleMatrixComplete(); + } + }; + + const onLoad = () => { + window.removeEventListener('load', onLoad); + clearTimeout(maxTimerId); + scheduleTransition(); + }; + + if (document.readyState === 'complete') { + scheduleTransition(); + } else { + window.addEventListener('load', onLoad); + maxTimerId = setTimeout(() => { + window.removeEventListener('load', onLoad); + handleMatrixComplete(); + }, MAX_MATRIX_DURATION); + } + + return () => { + window.removeEventListener('load', onLoad); + clearTimeout(maxTimerId); + clearTimeout(minTimerId); + }; + }, [phase]); + + useEffect(() => { + if (phase === 'transition') { + const id = setTimeout(() => setPhase('terminal'), TRANSITION_DURATION); + return () => clearTimeout(id); + } + }, [phase]); + + // Skip Matrix entirely if user prefers reduced motion + useEffect(() => { + if (reducedMotion) { + setPhase('terminal'); + setMatrixOpacity(0); + setTerminalOpacity(1); + } + }, [reducedMotion]); + + return ( +
+ {/* Matrix rain - full area, fades out */} + {!reducedMotion && ( + + )} + + {/* Terminal - fades in over Matrix */} +
+ +
+
+ ); +} diff --git a/components/matrix-rain.tsx b/components/matrix-rain.tsx new file mode 100644 index 0000000..7267851 --- /dev/null +++ b/components/matrix-rain.tsx @@ -0,0 +1,118 @@ +'use client'; + +import { useEffect, useRef } from 'react'; + +// Matrix-style characters: katakana, numbers, Latin +const CHARS = 'ｱｲｳｴｵｶｷｸｹｺｻｼｽｾｿﾀﾁﾂﾃﾄﾅﾆﾇﾈﾉﾊﾋﾌﾍﾎﾏﾐﾑﾒﾓﾔﾕﾖﾗﾘﾙﾚﾛﾜﾝ0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ'; + +interface MatrixRainProps { + /** Opacity 0-1 for fade out control */ + opacity?: number; + className?: string; +} + +interface Drop { + x: number; + y: number; + speed: number; + chars: string[]; + charIndex: number; +} + +export function MatrixRain({ + opacity = 1, + className = '', +}: MatrixRainProps) { + const canvasRef = useRef(null); + + useEffect(() => { + const canvas = canvasRef.current; + if (!canvas) return; + + const ctx = canvas.getContext('2d'); + if (!ctx) return; + + const resize = () => { + const dpr = Math.min(window.devicePixelRatio ?? 1, 2); + const rect = canvas.getBoundingClientRect(); + canvas.width = rect.width * dpr; + canvas.height = rect.height * dpr; + ctx.scale(dpr, dpr); + canvas.style.width = `${rect.width}px`; + canvas.style.height = `${rect.height}px`; + }; + + resize(); + window.addEventListener('resize', resize); + + const fontSize = 14; + const columns = Math.floor(canvas.getBoundingClientRect().width / fontSize); + const drops: Drop[] = Array.from({ length: columns }, (_, i) => ({ + x: i * fontSize, + y: Math.random() * -100, + speed: 0.15 + Math.random() * 0.4, + chars: Array.from({ length: 20 }, () => + CHARS[Math.floor(Math.random() * CHARS.length)] + ), + charIndex: Math.floor(Math.random() * 20), + })); + + let animationId: number; + + const draw = () => { + const rect = canvas.getBoundingClientRect(); + ctx.fillStyle = 'rgba(15, 23, 42, 0.05)'; + ctx.fillRect(0, 0, rect.width, rect.height); + + ctx.font = `${fontSize}px "JetBrains Mono", "SF Mono", "Fira Code", monospace`; + + drops.forEach((drop) => { + // Bright green for leading char + ctx.fillStyle = 'rgba(34, 197, 94, 1)'; + ctx.fillText(drop.chars[drop.charIndex], drop.x, drop.y); + + // Dimmer trailing chars + for (let i = 1; i < 8; i++) { + const idx = (drop.charIndex - i + 20) % 20; + const alpha = 1 - i * 0.12; + ctx.fillStyle = `rgba(34, 197, 94, ${alpha * 0.4})`; + ctx.fillText( + drop.chars[idx], + drop.x, + drop.y - i * fontSize + ); + } + + drop.y += drop.speed * fontSize; + if (drop.y > rect.height + 100) { + drop.y = -50; + drop.charIndex = (drop.charIndex + 1) % 20; + } else { + drop.charIndex = (drop.charIndex + 1) % 20; + } + }); + + animationId = requestAnimationFrame(draw); + }; + + draw(); + + return () => { + cancelAnimationFrame(animationId); + window.removeEventListener('resize', resize); + }; + }, []); + + return ( +