"use client" import React, { useCallback, useEffect, useMemo, useRef, useState } from "react" import { cn } from "@/lib/utils" interface FlickeringGridProps extends React.HTMLAttributes { squareSize?: number gridGap?: number flickerChance?: number color?: string width?: number height?: number className?: string maxOpacity?: number } export const FlickeringGrid: React.FC = ({ squareSize = 4, gridGap = 6, flickerChance = 0.3, color = "rgb(0, 0, 0)", width, height, className, maxOpacity = 0.3, ...props }) => { const canvasRef = useRef(null) const containerRef = useRef(null) const [isInView, setIsInView] = useState(false) const [canvasSize, setCanvasSize] = useState({ width: 0, height: 0 }) const memoizedColor = useMemo(() => { const toRGBA = (color: string) => { if (typeof window === "undefined") { return `rgba(0, 0, 0,` } const canvas = document.createElement("canvas") canvas.width = canvas.height = 1 const ctx = canvas.getContext("2d") if (!ctx) return "rgba(255, 0, 0," ctx.fillStyle = color ctx.fillRect(0, 0, 1, 1) const [r, g, b] = Array.from(ctx.getImageData(0, 0, 1, 1).data) return `rgba(${r}, ${g}, ${b},` } return toRGBA(color) }, [color]) const setupCanvas = useCallback( (canvas: HTMLCanvasElement, width: number, height: number) => { const dpr = window.devicePixelRatio || 1 canvas.width = width * dpr canvas.height = height * dpr canvas.style.width = `${width}px` canvas.style.height = `${height}px` const cols = Math.ceil(width / (squareSize + gridGap)) const rows = Math.ceil(height / (squareSize + gridGap)) const squares = new Float32Array(cols * rows) for (let i = 0; i < squares.length; i++) { squares[i] = Math.random() * maxOpacity } return { cols, rows, squares, dpr } }, [squareSize, gridGap, maxOpacity] ) const updateSquares = useCallback( (squares: Float32Array, deltaTime: number) => { for (let i = 0; i < squares.length; i++) { if (Math.random() < flickerChance * deltaTime) { squares[i] = Math.random() * maxOpacity } } }, [flickerChance, maxOpacity] ) const drawGrid = useCallback( ( ctx: CanvasRenderingContext2D, width: number, height: number, cols: number, rows: number, squares: Float32Array, dpr: number ) => { ctx.clearRect(0, 0, width, height) ctx.fillStyle = "transparent" ctx.fillRect(0, 0, width, height) for (let i = 0; i < cols; i++) { for (let j = 0; j < rows; j++) { const opacity = squares[i * rows + j] ctx.fillStyle = `${memoizedColor}${opacity})` ctx.fillRect( i * (squareSize + gridGap) * dpr, j * (squareSize + gridGap) * dpr, squareSize * dpr, squareSize * dpr ) } } }, [memoizedColor, squareSize, gridGap] ) useEffect(() => { const canvas = canvasRef.current const container = containerRef.current const ctx = canvas?.getContext("2d") ?? null let animationFrameId: number | null = null let resizeObserver: ResizeObserver | null = null let intersectionObserver: IntersectionObserver | null = null let gridParams: ReturnType | null = null if (canvas && container && ctx) { const updateCanvasSize = () => { const newWidth = width || container.clientWidth const newHeight = height || container.clientHeight setCanvasSize({ width: newWidth, height: newHeight }) gridParams = setupCanvas(canvas, newWidth, newHeight) } updateCanvasSize() let lastTime = 0 const animate = (time: number) => { if (!isInView || !gridParams) return const deltaTime = (time - lastTime) / 1000 lastTime = time updateSquares(gridParams.squares, deltaTime) drawGrid( ctx, canvas.width, canvas.height, gridParams.cols, gridParams.rows, gridParams.squares, gridParams.dpr ) animationFrameId = requestAnimationFrame(animate) } resizeObserver = new ResizeObserver(() => { updateCanvasSize() }) resizeObserver.observe(container) intersectionObserver = new IntersectionObserver( ([entry]) => { setIsInView(entry.isIntersecting) }, { threshold: 0 } ) intersectionObserver.observe(canvas) if (isInView) { animationFrameId = requestAnimationFrame(animate) } } return () => { if (animationFrameId !== null) { cancelAnimationFrame(animationFrameId) } if (resizeObserver) { resizeObserver.disconnect() } if (intersectionObserver) { intersectionObserver.disconnect() } } }, [setupCanvas, updateSquares, drawGrid, width, height, isInView]) return (

) }

Flickering Grid

Instalação