'use client'; import { useRef, useEffect } from 'react'; interface BurstButtonProps { label?: string; gap?: number; color?: string; scale?: number; } interface ParticleProps { color: string; gap: number; } class Particle { x: number; y: number; homeX: number; homeY: number; vx: number; vy: number; color: string; isExploded: boolean; ctx: CanvasRenderingContext2D; constructor(x: number, y: number, ctx: CanvasRenderingContext2D) { this.x = x; this.y = y; this.homeX = x; this.homeY = y; this.vx = 0; this.vy = 0; this.color = '#1c1917'; this.isExploded = false; this.ctx = ctx; } update(mouse: { x: number, y: number }, btnW: number, btnH: number, props: ParticleProps, canvasLogicalWidth: number, canvasLogicalHeight: number) { if (this.isExploded) { this.x += this.vx; this.y += this.vy; this.vx *= 0.95; this.vy *= 0.95; // Slowly return home const dx = this.homeX - this.x; const dy = this.homeY - this.y; this.x += dx * 0.05; this.y += dy * 0.05; // Reset if close enough if (Math.abs(dx) < 0.5 && Math.abs(dy) < 0.5) { this.isExploded = false; this.x = this.homeX; this.y = this.homeY; } } else { // Subtle hover effect const mx = mouse?.x || 0; const my = mouse?.y || 0; // Check if mouse is near button center const cx = canvasLogicalWidth / 2; const cy = canvasLogicalHeight / 2; // Simple noise wiggle if (Math.abs(mx - cx) < btnW / 2 + 20 && Math.abs(my - cy) < btnH / 2 + 20) { // Tighter wiggle for solid feel this.x = this.homeX + (Math.random() - 0.5) * 1; this.y = this.homeY + (Math.random() - 0.5) * 1; this.color = props.color; } else { this.x = this.homeX; this.y = this.homeY; this.color = '#1c1917'; } } } explode() { this.isExploded = true; const angle = Math.random() * Math.PI * 2; const force = Math.random() * 10 + 5; this.vx = Math.cos(angle) * force; this.vy = Math.sin(angle) * force; } draw() { this.ctx.fillStyle = this.color; this.ctx.fillRect(this.x, this.y, 1, 1); } } export const BurstButton = (props: BurstButtonProps) => { const { label = "DISPERSE", gap = 1, color = "#000000", scale = 1.0 } = props; const canvasRef = useRef(null); const mouseRef = useRef({ x: 0, y: 0 }); // Store props in ref to access inside animation loop without dependency issues const propsRef = useRef({ gap, color, scale }); useEffect(() => { propsRef.current = { gap, color, scale }; }, [gap, color, scale]); useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext('2d'); if (!ctx) return; let particles: Particle[] = []; let animationId: number; // Button dimensions (virtual) const charWidth = 10 * scale; const btnW = Math.max(120 * scale, label.length * charWidth + 40 * scale); const btnH = 40 * scale; const initParticles = () => { particles = []; const dpr = window.devicePixelRatio || 1; const cx = canvas.width / (2 * dpr); const cy = canvas.height / (2 * dpr); const step = Math.max(1, (propsRef.current.gap || 0) + 1); for (let y = cy - btnH / 2; y < cy + btnH / 2; y += step) { for (let x = cx - btnW / 2; x < cx + btnW / 2; x += step) { particles.push(new Particle(x, y, ctx)); } } }; const resize = () => { const parent = canvas.parentElement; if (parent) { const dpr = window.devicePixelRatio || 1; canvas.width = parent.clientWidth * dpr; canvas.height = parent.clientHeight * dpr; canvas.style.width = `${parent.clientWidth}px`; canvas.style.height = `${parent.clientHeight}px`; ctx.scale(dpr, dpr); initParticles(); } }; const animate = () => { const dpr = window.devicePixelRatio || 1; const logicalW = canvas.width / dpr; const logicalH = canvas.height / dpr; ctx.clearRect(0, 0, logicalW, logicalH); particles.forEach(p => { p.update(mouseRef.current, btnW, btnH, propsRef.current, logicalW, logicalH); p.draw(); }); if (!particles.some(p => p.isExploded)) { const fontSize = 12 * scale; ctx.font = `600 ${fontSize}px "Inter", sans-serif`; ctx.fillStyle = 'white'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(label, logicalW / 2, logicalH / 2); } animationId = requestAnimationFrame(animate); }; const handleClick = (e: MouseEvent) => { const rect = canvas.getBoundingClientRect(); const mx = e.clientX - rect.left; const my = e.clientY - rect.top; const dpr = window.devicePixelRatio || 1; const logicalW = canvas.width / dpr; const logicalH = canvas.height / dpr; const cx = logicalW / 2; const cy = logicalH / 2; if (mx >= cx - btnW / 2 && mx <= cx + btnW / 2 && my >= cy - btnH / 2 && my <= cy + btnH / 2) { particles.forEach(p => p.explode()); } }; const handleMouseMove = (e: MouseEvent) => { const rect = canvas.getBoundingClientRect(); mouseRef.current = { x: e.clientX - rect.left, y: e.clientY - rect.top }; }; window.addEventListener('resize', resize); canvas.addEventListener('click', handleClick); canvas.addEventListener('mousemove', handleMouseMove); resize(); animate(); return () => { window.removeEventListener('resize', resize); canvas.removeEventListener('click', handleClick); canvas.removeEventListener('mousemove', handleMouseMove); cancelAnimationFrame(animationId); }; }, [label, scale]); // Removed gap and color as they are handled via refs return

Burst Button UI