"use client" import React, { HTMLAttributes, useCallback, useMemo } from "react" import { motion } from "motion/react" import { cn } from "@/lib/utils" interface WarpBackgroundProps extends HTMLAttributes { children: React.ReactNode perspective?: number beamsPerSide?: number beamSize?: number beamDelayMax?: number beamDelayMin?: number beamDuration?: number gridColor?: string } const Beam = ({ width, x, delay, duration, }: { width: string | number x: string | number delay: number duration: number }) => { const hue = Math.floor(Math.random() * 360) const ar = Math.floor(Math.random() * 10) + 1 return ( ) } export const WarpBackground: React.FC = ({ children, perspective = 100, className, beamsPerSide = 3, beamSize = 5, beamDelayMax = 3, beamDelayMin = 0, beamDuration = 3, gridColor = "var(--border)", ...props }) => { const generateBeams = useCallback(() => { const beams = [] const cellsPerSide = Math.floor(100 / beamSize) const step = cellsPerSide / beamsPerSide for (let i = 0; i < beamsPerSide; i++) { const x = Math.floor(i * step) const delay = Math.random() * (beamDelayMax - beamDelayMin) + beamDelayMin beams.push({ x, delay }) } return beams }, [beamsPerSide, beamSize, beamDelayMax, beamDelayMin]) const topBeams = useMemo(() => generateBeams(), [generateBeams]) const rightBeams = useMemo(() => generateBeams(), [generateBeams]) const bottomBeams = useMemo(() => generateBeams(), [generateBeams]) const leftBeams = useMemo(() => generateBeams(), [generateBeams]) return (

{/* top side */}

{topBeams.map((beam, index) => ( ))}

{/* bottom side */}

{bottomBeams.map((beam, index) => ( ))}

{/* left side */}

{leftBeams.map((beam, index) => ( ))}

{/* right side */}

{rightBeams.map((beam, index) => ( ))}

{children}

) }

Warp Background

Instalação

Dependências