{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "warp-background",
  "type": "registry:ui",
  "title": "Warp Background",
  "description": "A card with a time warping background effect.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/magicui/warp-background.tsx",
      "content": "\"use client\"\n\nimport React, { useCallback, useMemo, type HTMLAttributes } from \"react\"\nimport { motion } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface WarpBackgroundProps extends HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode\n  perspective?: number\n  beamsPerSide?: number\n  beamSize?: number\n  beamDelayMax?: number\n  beamDelayMin?: number\n  beamDuration?: number\n  gridColor?: string\n}\n\nconst Beam = ({\n  width,\n  x,\n  delay,\n  duration,\n}: {\n  width: string | number\n  x: string | number\n  delay: number\n  duration: number\n}) => {\n  const hue = Math.floor(Math.random() * 360)\n  const ar = Math.floor(Math.random() * 10) + 1\n\n  return (\n    <motion.div\n      style={\n        {\n          \"--x\": `${x}`,\n          \"--width\": `${width}`,\n          \"--aspect-ratio\": `${ar}`,\n          \"--background\": `linear-gradient(hsl(${hue} 80% 60%), transparent)`,\n        } as React.CSSProperties\n      }\n      className={`absolute top-0 left-(--x) aspect-[1/var(--aspect-ratio)] w-(--width) [background:var(--background)]`}\n      initial={{ y: \"100cqmax\", x: \"-50%\" }}\n      animate={{ y: \"-100%\", x: \"-50%\" }}\n      transition={{\n        duration,\n        delay,\n        repeat: Infinity,\n        ease: \"linear\",\n      }}\n    />\n  )\n}\n\nexport const WarpBackground: React.FC<WarpBackgroundProps> = ({\n  children,\n  perspective = 100,\n  className,\n  beamsPerSide = 3,\n  beamSize = 5,\n  beamDelayMax = 3,\n  beamDelayMin = 0,\n  beamDuration = 3,\n  gridColor = \"var(--border)\",\n  ...props\n}) => {\n  const generateBeams = useCallback(() => {\n    const beams = []\n    const cellsPerSide = Math.floor(100 / beamSize)\n    const step = cellsPerSide / beamsPerSide\n\n    for (let i = 0; i < beamsPerSide; i++) {\n      const x = Math.floor(i * step)\n      const delay = Math.random() * (beamDelayMax - beamDelayMin) + beamDelayMin\n      beams.push({ x, delay })\n    }\n    return beams\n  }, [beamsPerSide, beamSize, beamDelayMax, beamDelayMin])\n\n  const topBeams = useMemo(() => generateBeams(), [generateBeams])\n  const rightBeams = useMemo(() => generateBeams(), [generateBeams])\n  const bottomBeams = useMemo(() => generateBeams(), [generateBeams])\n  const leftBeams = useMemo(() => generateBeams(), [generateBeams])\n\n  return (\n    <div className={cn(\"relative rounded border p-20\", className)} {...props}>\n      <div\n        style={\n          {\n            \"--perspective\": `${perspective}px`,\n            \"--grid-color\": gridColor,\n            \"--beam-size\": `${beamSize}%`,\n          } as React.CSSProperties\n        }\n        className={\n          \"@container-[size] pointer-events-none absolute top-0 left-0 size-full overflow-hidden [clipPath:inset(0)] perspective-(--perspective) transform-3d\"\n        }\n      >\n        {/* top side */}\n        <div className=\"@container absolute z-20 h-[100cqmax] w-[100cqi] origin-[50%_0%] transform-[rotateX(-90deg)] bg-size-[var(--beam-size)_var(--beam-size)] [background:linear-gradient(var(--grid-color)_0_1px,transparent_1px_var(--beam-size))_50%_-0.5px_/var(--beam-size)_var(--beam-size),linear-gradient(90deg,var(--grid-color)_0_1px,transparent_1px_var(--beam-size))_50%_50%_/var(--beam-size)_var(--beam-size)] transform-3d\">\n          {topBeams.map((beam, index) => (\n            <Beam\n              key={`top-${index}`}\n              width={`${beamSize}%`}\n              x={`${beam.x * beamSize}%`}\n              delay={beam.delay}\n              duration={beamDuration}\n            />\n          ))}\n        </div>\n        {/* bottom side */}\n        <div className=\"@container absolute top-full h-[100cqmax] w-[100cqi] origin-[50%_0%] transform-[rotateX(-90deg)] bg-size-[var(--beam-size)_var(--beam-size)] [background:linear-gradient(var(--grid-color)_0_1px,transparent_1px_var(--beam-size))_50%_-0.5px_/var(--beam-size)_var(--beam-size),linear-gradient(90deg,var(--grid-color)_0_1px,transparent_1px_var(--beam-size))_50%_50%_/var(--beam-size)_var(--beam-size)] transform-3d\">\n          {bottomBeams.map((beam, index) => (\n            <Beam\n              key={`bottom-${index}`}\n              width={`${beamSize}%`}\n              x={`${beam.x * beamSize}%`}\n              delay={beam.delay}\n              duration={beamDuration}\n            />\n          ))}\n        </div>\n        {/* left side */}\n        <div className=\"@container absolute top-0 left-0 h-[100cqmax] w-[100cqh] origin-[0%_0%] transform-[rotate(90deg)_rotateX(-90deg)] bg-size-[var(--beam-size)_var(--beam-size)] [background:linear-gradient(var(--grid-color)_0_1px,transparent_1px_var(--beam-size))_50%_-0.5px_/var(--beam-size)_var(--beam-size),linear-gradient(90deg,var(--grid-color)_0_1px,transparent_1px_var(--beam-size))_50%_50%_/var(--beam-size)_var(--beam-size)] transform-3d\">\n          {leftBeams.map((beam, index) => (\n            <Beam\n              key={`left-${index}`}\n              width={`${beamSize}%`}\n              x={`${beam.x * beamSize}%`}\n              delay={beam.delay}\n              duration={beamDuration}\n            />\n          ))}\n        </div>\n        {/* right side */}\n        <div className=\"@container absolute top-0 right-0 h-[100cqmax] w-[100cqh] origin-[100%_0%] transform-[rotate(-90deg)_rotateX(-90deg)] bg-size-[var(--beam-size)_var(--beam-size)] [background:linear-gradient(var(--grid-color)_0_1px,transparent_1px_var(--beam-size))_50%_-0.5px_/var(--beam-size)_var(--beam-size),linear-gradient(90deg,var(--grid-color)_0_1px,transparent_1px_var(--beam-size))_50%_50%_/var(--beam-size)_var(--beam-size)] transform-3d\">\n          {rightBeams.map((beam, index) => (\n            <Beam\n              key={`right-${index}`}\n              width={`${beamSize}%`}\n              x={`${beam.x * beamSize}%`}\n              delay={beam.delay}\n              duration={beamDuration}\n            />\n          ))}\n        </div>\n      </div>\n      <div className=\"relative\">{children}</div>\n    </div>\n  )\n}\n",
      "type": "registry:ui"
    }
  ]
}