"use client" import React, { useCallback, useEffect, useMemo, useRef, useState } from "react" import { AnimatePresence, motion, useAnimation } from "motion/react" interface GradientStop { color: string position: number } interface GradientType { stops: GradientStop[] centerX: number centerY: number } interface CanvasFractalGridProps { /** Size of each dot in pixels */ dotSize?: number /** Spacing between dots in pixels */ dotSpacing?: number /** Opacity of dots (0-1) */ dotOpacity?: number /** Duration of the background gradient animation in seconds */ gradientAnimationDuration?: number /** Stiffness of mouse tracking (higher values make it more responsive) */ mouseTrackingStiffness?: number /** Damping of mouse tracking (higher values make it less bouncy) */ mouseTrackingDamping?: number /** Intensity of the wave effect when hovering */ waveIntensity?: number /** Radius of the wave effect in pixels */ waveRadius?: number /** Array of gradient configurations for the background */ gradients?: GradientType[] /** Color of the dots (supports any valid CSS color) */ dotColor?: string /** Color of the dot glow effect (supports any valid CSS color) */ glowColor?: string /** Enable or disable the noise overlay */ enableNoise?: boolean /** Opacity of the noise overlay (0-1) */ noiseOpacity?: number /** Enable or disable the mouse glow effect */ enableMouseGlow?: boolean /** Set the initial performance level */ initialPerformance?: "low" | "medium" | "high" /** Enable or disable the gradient animation */ enableGradient?: boolean } const NoiseSVG = React.memo(() => ( )) NoiseSVG.displayName = "NoiseSVG" const NoiseOverlay: React.FC<{ opacity: number }> = ({ opacity }) => (

) const useResponsive = () => { const [windowSize, setWindowSize] = useState({ width: 0, height: 0, }) useEffect(() => { if (typeof window === "undefined") return const handleResize = () => { setWindowSize({ width: window.innerWidth, height: window.innerHeight, }) } // Set initial size handleResize() window.addEventListener("resize", handleResize) return () => window.removeEventListener("resize", handleResize) }, []) return { isMobile: windowSize.width < 768, isTablet: windowSize.width >= 768 && windowSize.width < 1024, isDesktop: windowSize.width >= 1024, } } const usePerformance = ( initialPerformance: "low" | "medium" | "high" = "medium" ) => { const [performance, setPerformance] = useState(initialPerformance) const [fps, setFps] = useState(60) useEffect(() => { if (typeof window === "undefined") return let frameCount = 0 let lastTime = globalThis.performance.now() let framerId: number const measureFps = (time: number) => { frameCount++ if (time - lastTime > 1000) { setFps(Math.round((frameCount * 1000) / (time - lastTime))) frameCount = 0 lastTime = time } framerId = requestAnimationFrame(measureFps) } framerId = requestAnimationFrame(measureFps) return () => cancelAnimationFrame(framerId) }, []) useEffect(() => { if (fps < 30 && performance !== "low") { setPerformance("low") } else if (fps >= 30 && fps < 50 && performance !== "medium") { setPerformance("medium") } else if (fps >= 50 && performance !== "high") { setPerformance("high") } }, [fps, performance]) return { performance, fps } } const Gradient: React.FC<{ gradients: GradientType[] animationDuration: number }> = React.memo(({ gradients, animationDuration }) => { const controls = useAnimation() useEffect(() => { controls.start({ background: gradients.map( (g) => `radial-gradient(circle at ${g.centerX}% ${g.centerY}%, ${g.stops .map((s) => `${s.color} ${s.position}%`) .join(", ")})` ), transition: { duration: animationDuration, repeat: Infinity, repeatType: "reverse", ease: "linear", }, }) }, [controls, gradients, animationDuration]) return ( ) }) Gradient.displayName = "Gradient" const DotCanvas: React.FC<{ dotSize: number dotSpacing: number dotOpacity: number waveIntensity: number waveRadius: number dotColor: string glowColor: string performance: "low" | "medium" | "high" mousePos: { x: number; y: number } }> = React.memo( ({ dotSize, dotSpacing, dotOpacity, waveIntensity, waveRadius, dotColor, glowColor, performance, mousePos, }) => { const canvasRef = useRef(null) const animationRef = useRef(null) const drawDots = useCallback( (ctx: CanvasRenderingContext2D, time: number) => { const { width, height } = ctx.canvas ctx.clearRect(0, 0, width, height) const performanceSettings = { low: { skip: 3 }, medium: { skip: 2 }, high: { skip: 1 }, } const skip = performanceSettings[performance].skip const cols = Math.ceil(width / dotSpacing) const rows = Math.ceil(height / dotSpacing) const centerX = mousePos.x * width const centerY = mousePos.y * height for (let i = 0; i < cols; i += skip) { for (let j = 0; j < rows; j += skip) { const x = i * dotSpacing const y = j * dotSpacing const distanceX = x - centerX const distanceY = y - centerY const distance = Math.sqrt( distanceX * distanceX + distanceY * distanceY ) let dotX = x let dotY = y if (distance < waveRadius) { const waveStrength = Math.pow(1 - distance / waveRadius, 2) const angle = Math.atan2(distanceY, distanceX) const waveOffset = Math.sin(distance * 0.05 - time * 0.005) * waveIntensity * waveStrength dotX += Math.cos(angle) * waveOffset dotY += Math.sin(angle) * waveOffset const glowRadius = dotSize * (1 + waveStrength) const gradient = ctx.createRadialGradient( dotX, dotY, 0, dotX, dotY, glowRadius ) gradient.addColorStop( 0, glowColor.replace("1)", `${dotOpacity * (1 + waveStrength)})`) ) gradient.addColorStop(1, glowColor.replace("1)", "0)")) ctx.fillStyle = gradient } else { ctx.fillStyle = dotColor.replace("1)", `${dotOpacity})`) } ctx.beginPath() ctx.arc(dotX, dotY, dotSize / 2, 0, Math.PI * 2) ctx.fill() } } }, [ dotSize, dotSpacing, dotOpacity, waveIntensity, waveRadius, dotColor, glowColor, performance, mousePos, ] ) useEffect(() => { if (typeof window === "undefined") return const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return const resizeCanvas = () => { canvas.width = window.innerWidth canvas.height = window.innerHeight } resizeCanvas() window.addEventListener("resize", resizeCanvas) let lastTime = 0 const animate = (time: number) => { if (time - lastTime > 16) { drawDots(ctx, time) lastTime = time } animationRef.current = requestAnimationFrame(animate) } animationRef.current = requestAnimationFrame(animate) return () => { window.removeEventListener("resize", resizeCanvas) if (animationRef.current) { cancelAnimationFrame(animationRef.current) } } }, [drawDots]) return (

Canvas Fractal Grid

Instalação

Dependências