/* ============================================================ Motion Graphics Layer for GFA Persona Matrix Lab - Canvas-driven perspective grid + flow particles - WireframeCube (header brand) - Matrix3D — extruded heatmap in isometric/perspective view - useCountUp hook — animated number tickers ============================================================ */ const { useEffect: useMGEffect, useRef: useMGRef, useState: useMGState, useMemo: useMGMemo } = React; // === 1) Perspective grid + flow background ============================ function MotionBackdrop({ intensity = 1, motion = true }) { const ref = useMGRef(null); useMGEffect(() => { const cv = ref.current; if (!cv) return; const ctx = cv.getContext('2d'); let raf, t0 = performance.now(); function resize() { const dpr = Math.min(2, window.devicePixelRatio || 1); cv.width = cv.clientWidth * dpr; cv.height = cv.clientHeight * dpr; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); } resize(); window.addEventListener('resize', resize); // Generate flow particles (depth z, x, y) drifting toward camera const N = Math.floor(70 * intensity); const particles = Array.from({ length: N }, () => ({ x: (Math.random() - 0.5) * 2, y: (Math.random() - 0.5) * 2, z: Math.random() * 4 + 0.2, sp: 0.18 + Math.random() * 0.6, })); function project(x, y, z, w, h) { // simple perspective: camera at z=0 looking +z const f = 1.2; const sx = w/2 + (x * f / z) * w/2; const sy = h/2 + (y * f / z) * h/2; return [sx, sy, 1 / z]; } function frame(now) { const dt = Math.min(0.05, (now - t0) / 1000); t0 = now; const w = cv.clientWidth, h = cv.clientHeight; // bg — softer + animated tint const tintShift = (Math.sin(now/4000) + 1) * 0.5; ctx.fillStyle = `oklch(${0.06 + tintShift*0.02} 0.015 ${70 + tintShift*30} / 0.72)`; ctx.fillRect(0, 0, w, h); // Floor grid (perspective): vertical lines toward vanishing point ctx.lineWidth = 1; const cx = w/2, cy = h * 0.55; const vanishY = cy + 0; // horizon // verticals const lineCount = 22; for (let i = -lineCount; i <= lineCount; i++) { const xOff = i / lineCount; // parametric: from (cx + xOff*w, h) toward (cx, vanishY) const x0 = cx + xOff * w * 0.9; const y0 = h; const x1 = cx + xOff * w * 0.0; const y1 = vanishY; const alpha = 0.05 + (1 - Math.abs(xOff)) * 0.07; ctx.strokeStyle = `oklch(0.78 0.12 220 / ${alpha * intensity})`; ctx.beginPath(); ctx.moveTo(x0, y0); ctx.lineTo(x1, y1); ctx.stroke(); } // horizontals (scrolling) const off = motion ? ((now / 1500) % 1) : 0; for (let i = 0; i < 14; i++) { const t = (i + off) / 14; const y = vanishY + Math.pow(t, 1.5) * (h - vanishY); const widthRatio = Math.pow(t, 1.5); const x0 = cx - widthRatio * w * 0.9; const x1 = cx + widthRatio * w * 0.9; const alpha = 0.04 + t * 0.06; ctx.strokeStyle = `oklch(0.78 0.12 220 / ${alpha * intensity})`; ctx.beginPath(); ctx.moveTo(x0, y); ctx.lineTo(x1, y); ctx.stroke(); } // Flow particles for (const p of particles) { if (motion) p.z -= dt * p.sp; if (p.z < 0.05) { p.z = 4; p.x = (Math.random() - 0.5) * 2; p.y = (Math.random() - 0.5) * 2; } const [sx, sy, inv] = project(p.x, p.y, p.z, w, h); const sz = Math.max(0.4, inv * 4); const a = Math.min(0.7, inv * 0.8); ctx.fillStyle = `oklch(0.80 0.14 72 / ${a * intensity})`; ctx.beginPath(); ctx.arc(sx, sy, sz, 0, Math.PI * 2); ctx.fill(); } // Scanlines pulse — horizontal scanner if (motion) { const sy = ((now / 70) % h); const grad = ctx.createLinearGradient(0, sy - 80, 0, sy + 80); grad.addColorStop(0, 'rgba(240, 180, 80, 0)'); grad.addColorStop(0.5, `rgba(240, 180, 80, ${0.04 * intensity})`); grad.addColorStop(1, 'rgba(240, 180, 80, 0)'); ctx.fillStyle = grad; ctx.fillRect(0, sy - 80, w, 160); } raf = requestAnimationFrame(frame); } raf = requestAnimationFrame(frame); return () => { cancelAnimationFrame(raf); window.removeEventListener('resize', resize); }; }, [intensity, motion]); return ( ); } // === 2) Wireframe rotating cube (brand mark) =========================== function WireCube({ size = 28, color = 'oklch(0.80 0.14 72)' }) { const ref = useMGRef(null); useMGEffect(() => { let raf, a = 0; function frame() { a += 0.012; if (ref.current) { ref.current.style.transform = `rotateX(${28 + Math.sin(a*0.7)*8}deg) rotateY(${a * 60}deg)`; } raf = requestAnimationFrame(frame); } raf = requestAnimationFrame(frame); return () => cancelAnimationFrame(raf); }, []); const s = size; const half = s / 2; const faces = [ { t: `translateZ(${half}px)` }, { t: `translateZ(${-half}px) rotateY(180deg)` }, { t: `rotateY(90deg) translateZ(${half}px)` }, { t: `rotateY(-90deg) translateZ(${half}px)` }, { t: `rotateX(90deg) translateZ(${half}px)` }, { t: `rotateX(-90deg) translateZ(${half}px)` }, ]; return (
{faces.map((f, i) => (
))}
); } // === 3) Isometric/Perspective 3D Matrix =============================== function Matrix3D({ matrix, rotateX = 55, rotateZ = 35, cellSize = 30, gap = 2 }) { const ref = useMGRef(null); const stateRef = useMGRef({ rX: rotateX, rZ: rotateZ, autoRotate: true }); const [, force] = useMGState(0); function apply() { if (ref.current) { ref.current.style.transform = `rotateX(${stateRef.current.rX}deg) rotateZ(${stateRef.current.rZ}deg)`; } } useMGEffect(() => { let raf, t0 = performance.now(); function frame(now) { const dt = (now - t0) / 1000; t0 = now; if (stateRef.current.autoRotate) { stateRef.current.rZ = (stateRef.current.rZ + dt * 8) % 360; apply(); } raf = requestAnimationFrame(frame); } raf = requestAnimationFrame(frame); return () => cancelAnimationFrame(raf); }, []); function onPointerDown(e) { stateRef.current.autoRotate = false; force(x => x + 1); const start = { x: e.clientX, y: e.clientY, rX: stateRef.current.rX, rZ: stateRef.current.rZ }; const move = (ev) => { const dx = ev.clientX - start.x; const dy = ev.clientY - start.y; stateRef.current.rZ = (start.rZ + dx * 0.5) % 360; stateRef.current.rX = Math.max(10, Math.min(85, start.rX - dy * 0.4)); apply(); }; const up = () => { window.removeEventListener('pointermove', move); window.removeEventListener('pointerup', up); }; window.addEventListener('pointermove', move); window.addEventListener('pointerup', up); } function toggleRotate() { stateRef.current.autoRotate = !stateRef.current.autoRotate; force(x => x + 1); } function reset() { stateRef.current.rX = 55; stateRef.current.rZ = 35; stateRef.current.autoRotate = false; apply(); force(x => x + 1); } if (!matrix.rows.length) { return
쿼리를 구성하세요
; } const max = Math.max(1, ...matrix.rows.flatMap(r => r.cells)); const rows = matrix.rows.length; const cols = matrix.cols.length; const totalW = cols * (cellSize + gap); const totalD = rows * (cellSize + gap); return (
{/* Floor plane */}
{/* Cells */} {matrix.rows.map((row, ri) => row.cells.map((v, ci) => { const intensity = Math.min(1, v / max); const h = Math.max(2, intensity * 100); const x = -totalW/2 + ci * (cellSize + gap) + cellSize/2; const y = -totalD/2 + ri * (cellSize + gap) + cellSize/2; return ( ); }) )}
{/* Controls */}
3D drag to rotate
rX {stateRef.current.rX.toFixed(0)}° rZ {stateRef.current.rZ.toFixed(0)}°
); } function Cell3D({ x, y, size, height, intensity, value, title }) { const fill = `oklch(${0.30 + intensity * 0.50} ${0.04 + intensity * 0.18} ${72 - intensity * 30})`; const sideFill = `oklch(${0.18 + intensity * 0.30} ${0.04 + intensity * 0.14} ${72 - intensity * 30})`; const darkFill = `oklch(${0.12 + intensity * 0.20} ${0.03 + intensity * 0.10} ${72 - intensity * 30})`; const top = -height; return (
e.currentTarget.style.filter = 'brightness(1.4)'} onMouseLeave={e => e.currentTarget.style.filter = 'brightness(1)'} > {/* Top face */}
{/* Front side */}
{/* Right side */}
); } // === 4) useCountUp hook =============================================== function useCountUp(value, duration = 600) { const [display, setDisplay] = useMGState(value); const prevRef = useMGRef(value); useMGEffect(() => { const start = prevRef.current; const end = value; if (start === end) return; const t0 = performance.now(); let raf; function frame(now) { const t = Math.min(1, (now - t0) / duration); const eased = 1 - Math.pow(1 - t, 3); setDisplay(start + (end - start) * eased); if (t < 1) raf = requestAnimationFrame(frame); else { prevRef.current = end; setDisplay(end); } } raf = requestAnimationFrame(frame); return () => cancelAnimationFrame(raf); }, [value]); return display; } // === 5) ParallaxPanel — subtle tilt on mouse ========================== function ParallaxPanel({ children, intensity = 1, className = '', ...rest }) { const ref = useMGRef(null); function onMove(e) { if (!ref.current || intensity === 0) return; const r = ref.current.getBoundingClientRect(); const x = (e.clientX - r.left) / r.width - 0.5; const y = (e.clientY - r.top) / r.height - 0.5; ref.current.style.transform = `perspective(1200px) rotateY(${x * 3 * intensity}deg) rotateX(${-y * 2 * intensity}deg) translateZ(${4 * intensity}px)`; } function onLeave() { if (ref.current) ref.current.style.transform = 'perspective(1200px) rotateY(0deg) rotateX(0deg) translateZ(0px)'; } return (
{children}
); } Object.assign(window, { MotionBackdrop, WireCube, Matrix3D, useCountUp, ParallaxPanel });