'use client'; import { useEffect, useRef } from 'react'; interface RepelTextProps { text?: string; gap?: number; radius?: number; color?: string; scale?: number; } interface RepelParticleProps { text: string; gap: number; radius: number; color: string; scale: number; } interface MouseState { x: number; y: number; isActive: boolean; } class Particle { x: number; y: number; originX: number; originY: number; vx: number; vy: number; ease: number; ctx: CanvasRenderingContext2D; propsRef: React.MutableRefObject; mouseRef: React.MutableRefObject; constructor( x: number, y: number, ctx: CanvasRenderingContext2D, propsRef: React.MutableRefObject, mouseRef: React.MutableRefObject ) { this.x = x; this.y = y; this.originX = x; this.originY = y; this.vx = 0; this.vy = 0; this.ease = Math.random() * 0.1 + 0.05; this.ctx = ctx; this.propsRef = propsRef; this.mouseRef = mouseRef; } update() { const dx = this.mouseRef.current.x - this.x; const dy = this.mouseRef.current.y - this.y; const dist = Math.sqrt(dx * dx + dy * dy); const force = Math.max(0, 100 - dist) / 100; if (force > 0 && this.mouseRef.current.isActive) { const angle = Math.atan2(dy, dx); const push = force * 20; this.vx -= Math.cos(angle) * push * 0.5; this.vy -= Math.sin(angle) * push * 0.5; } const homeDx = this.originX - this.x; const homeDy = this.originY - this.y; this.vx += homeDx * this.ease * 0.5; this.vy += homeDy * this.ease * 0.5; this.vx *= 0.85; this.vy *= 0.85; this.x += this.vx; this.y += this.vy; } draw() { this.ctx.fillStyle = this.propsRef.current.color; this.ctx.beginPath(); this.ctx.arc(this.x, this.y, this.propsRef.current.radius, 0, Math.PI * 2); this.ctx.fill(); } } export const RepelText = (props: RepelTextProps) => { const { text = "VIBE", gap = 1, radius = 0.8, color = '#1c1917', scale = 1.0 } = props; const canvasRef = useRef(null); const mouseRef = useRef({ x: -9999, y: -9999, isActive: false }); const propsRef = useRef({ text, gap, radius, color, scale }); useEffect(() => { propsRef.current = { text, gap, radius, color, scale }; }, [text, gap, radius, color, scale]); useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext('2d'); if (!ctx) return; let animationId: number; let particles: Particle[] = []; const resize = () => { const parent = canvas.parentElement; if (parent) { const w = Math.max(1, parent.clientWidth); const h = Math.max(1, parent.clientHeight); const dpr = window.devicePixelRatio || 1; canvas.width = w * dpr; canvas.height = h * dpr; canvas.style.width = `${w}px`; canvas.style.height = `${h}px`; ctx.scale(dpr, dpr); initParticles(w, h); } }; const initParticles = (width: number, height: number) => { particles = []; if (width < 1 || height < 1) return; const iW = Math.floor(width); const iH = Math.floor(height); const maskCanvas = document.createElement('canvas'); maskCanvas.width = iW; maskCanvas.height = iH; const maskCtx = maskCanvas.getContext('2d'); if (!maskCtx) return; const fontSize = Math.min(iW * 0.2, 120) * scale; maskCtx.font = `700 ${fontSize}px "Playfair Display", serif`; maskCtx.textAlign = 'center'; maskCtx.textBaseline = 'middle'; maskCtx.fillStyle = 'white'; maskCtx.fillText(text, iW / 2, iH / 2); try { const imageData = maskCtx.getImageData(0, 0, iW, iH); const data = imageData.data; for (let y = 0; y < iH; y += gap) { for (let x = 0; x < iW; x += gap) { const index = (y * iW + x) * 4; if (index + 3 < data.length && data[index + 3] > 128) { particles.push(new Particle(x, y, ctx, propsRef, mouseRef)); } } } } catch (e) { console.error("Error generating particles:", e); } }; const animate = () => { ctx.clearRect(0, 0, canvas.width / (window.devicePixelRatio || 1), canvas.height / (window.devicePixelRatio || 1)); particles.forEach(p => { p.update(); p.draw(); }); animationId = requestAnimationFrame(animate); }; const handleMouseMove = (e: MouseEvent) => { const rect = canvas.getBoundingClientRect(); mouseRef.current.x = e.clientX - rect.left; mouseRef.current.y = e.clientY - rect.top; mouseRef.current.isActive = true; }; const handleMouseLeave = () => { mouseRef.current.isActive = false; }; window.addEventListener('resize', resize); canvas.addEventListener('mousemove', handleMouseMove); canvas.addEventListener('mouseleave', handleMouseLeave); resize(); animate(); return () => { window.removeEventListener('resize', resize); canvas.removeEventListener('mousemove', handleMouseMove); canvas.removeEventListener('mouseleave', handleMouseLeave); cancelAnimationFrame(animationId); }; }, [text, gap, radius, color, scale]); return

Repel Typography