Warp

Immersive 3D warp effects with animated light beams and perspective grids. Perfect for React applications requiring futuristic backgrounds with Next.js integration and TypeScript support.

motion

shadcn-ui

Loading component...

"use client";import { cn } from "@/lib/utils";import { motion } from "motion/react";import React, { HTMLAttributes, useCallback, useMemo, useState, useEffect } from "react";interface WarpBackgroundProps extends HTMLAttributes<HTMLDivElement> {  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, setHue] = useState(0);  const [ar, setAr] = useState(1);    useEffect(() => {    setHue(Math.floor(Math.random() * 360));    setAr(Math.floor(Math.random() * 10) + 1);  }, []);  return (    <motion.div      style={        {          "--x": `${x}`,          "--width": `${width}`,          "--aspect-ratio": `${ar}`,          "--background": `linear-gradient(hsl(${hue} 80% 60%), transparent)`,        } as React.CSSProperties      }      className={`absolute left-[var(--x)] top-0 [aspect-ratio:1/var(--aspect-ratio)] [background:var(--background)] [width:var(--width)]`}      initial={{ y: "100cqmax", x: "-50%" }}      animate={{ y: "-100%", x: "-50%" }}      transition={{        duration,        delay,        repeat: Infinity,        ease: "linear",      }}    />  );};export const WarpBackground: React.FC<WarpBackgroundProps> = ({  children,  perspective = 100,  className,  beamsPerSide = 3,  beamSize = 5,  beamDelayMax = 3,  beamDelayMin = 0,  beamDuration = 3,  gridColor = "var(--border)",  ...props}) => {  const [isClient, setIsClient] = useState(false);    useEffect(() => {    setIsClient(true);  }, []);  const generateBeams = useCallback(() => {    if (!isClient) {      // Return deterministic beams for SSR      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 = beamDelayMin + (i / beamsPerSide) * (beamDelayMax - beamDelayMin);        beams.push({ x, delay });      }      return beams;    }        // Client-side random beams    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, isClient]);  const topBeams = useMemo(() => generateBeams(), [generateBeams]);  const rightBeams = useMemo(() => generateBeams(), [generateBeams]);  const bottomBeams = useMemo(() => generateBeams(), [generateBeams]);  const leftBeams = useMemo(() => generateBeams(), [generateBeams]);  return (    <div className={cn("relative rounded border p-20", className)} {...props}>      <div        style={          {            "--perspective": `${perspective}px`,            "--grid-color": gridColor,            "--beam-size": `${beamSize}%`,          } as React.CSSProperties        }        className={          "pointer-events-none absolute left-0 top-0 size-full overflow-hidden [clipPath:inset(0)] [container-type:size] [perspective:var(--perspective)] [transform-style:preserve-3d]"        }      >        {/* top side */}        <div className="absolute z-20 [transform-style:preserve-3d] [background-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)] [container-type:inline-size] [height:100cqmax] [transform-origin:50%_0%] [transform:rotateX(-90deg)] [width:100cqi]">          {topBeams.map((beam, index) => (            <Beam              key={`top-${index}`}              width={`${beamSize}%`}              x={`${beam.x * beamSize}%`}              delay={beam.delay}              duration={beamDuration}            />          ))}        </div>        {/* bottom side */}        <div className="absolute top-full [transform-style:preserve-3d] [background-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)] [container-type:inline-size] [height:100cqmax] [transform-origin:50%_0%] [transform:rotateX(-90deg)] [width:100cqi]">          {bottomBeams.map((beam, index) => (            <Beam              key={`bottom-${index}`}              width={`${beamSize}%`}              x={`${beam.x * beamSize}%`}              delay={beam.delay}              duration={beamDuration}            />          ))}        </div>        {/* left side */}        <div className="absolute left-0 top-0 [transform-style:preserve-3d] [background-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)] [container-type:inline-size] [height:100cqmax] [transform-origin:0%_0%] [transform:rotate(90deg)_rotateX(-90deg)] [width:100cqh]">          {leftBeams.map((beam, index) => (            <Beam              key={`left-${index}`}              width={`${beamSize}%`}              x={`${beam.x * beamSize}%`}              delay={beam.delay}              duration={beamDuration}            />          ))}        </div>        {/* right side */}        <div className="absolute right-0 top-0 [transform-style:preserve-3d] [background-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)] [container-type:inline-size] [height:100cqmax] [width:100cqh] [transform-origin:100%_0%] [transform:rotate(-90deg)_rotateX(-90deg)]">          {rightBeams.map((beam, index) => (            <Beam              key={`right-${index}`}              width={`${beamSize}%`}              x={`${beam.x * beamSize}%`}              delay={beam.delay}              duration={beamDuration}            />          ))}        </div>      </div>      <div className="relative">{children}</div>    </div>  );};

Installation

npx shadcn@latest add https://www.shadcn.io/registry/warp-background.json

npx shadcn@latest add https://www.shadcn.io/registry/warp-background.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/warp-background.json

bunx shadcn@latest add https://www.shadcn.io/registry/warp-background.json

Features

3D perspective effects using CSS transforms and container queries for immersive depth perception
Animated light beams with randomized colors, timing, and trajectories using Framer Motion
Customizable parameters controlling beam count, size, duration, and perspective intensity
Grid-based layout with dynamic background patterns adapting to beam configurations
Motion integration providing smooth animations with configurable delays and durations
Responsive adaptation automatically adjusting to container dimensions and viewport changes
TypeScript support with complete interface definitions for reliable integration
shadcn/ui compatibility seamlessly integrating with Card components and design systems

Use Cases

This free open source React component works well for:

Hero sections - Futuristic backgrounds for sci-fi and tech landing pages built with Next.js
Product showcases - Immersive 3D effects highlighting innovative products using TypeScript
Gaming interfaces - Space-themed backgrounds for game menus and dashboards
Tech conferences - Dynamic backgrounds for event websites and presentations using shadcn/ui design
Portfolio headers - Eye-catching 3D effects showcasing technical capabilities
Brand experiences - Futuristic animations expressing innovation and cutting-edge technology using Tailwind CSS

API Reference

WarpBackground

Prop	Type	Default	Description
`children`	`ReactNode`	`undefined`	Content to display inside the warp container
`perspective`	`number`	`100`	CSS perspective value in pixels for 3D depth effect
`beamsPerSide`	`number`	`3`	Number of light beams per side of the container
`beamSize`	`number`	`5`	Size of each beam as percentage of container width
`beamDelayMax`	`number`	`3`	Maximum delay in seconds before beam animation starts
`beamDelayMin`	`number`	`0`	Minimum delay in seconds before beam animation starts
`beamDuration`	`number`	`3`	Duration in seconds for each beam animation cycle
`gridColor`	`string`	`"var(--border)"`	CSS color value for the grid background pattern
`className`	`string`	`undefined`	Additional CSS classes for the container

Implementation Notes

Component uses CSS container queries and 3D transforms for perspective effects
Light beams animated with Framer Motion using random hue values and aspect ratios
Grid patterns created with CSS gradients and positioned using CSS custom properties
Beam timing randomized between delayMin and delayMax for natural animation sequences
Perspective value controls 3D depth perception (lower values = more dramatic effect)
Compatible with shadcn/ui design system and supports content overlay with proper z-indexing
Hydration-safe implementation preventing server-client mismatches during SSR
Performance optimized using CSS transforms and hardware acceleration for smooth animations