A 3D perspective grid background with animated light beams that create a time-warp effect around content.
Installation
import { WarpBackground } from "@/components/ui/warp-background"
export default function Example() {
return (
<WarpBackground>
<div className="w-80">
<h2>Warp Background</h2>
<p>This component creates a warp background effect.</p>
</div>
</WarpBackground>
)
}
Custom Configuration
import { WarpBackground } from "@/components/ui/warp-background"
export default function Example() {
return (
<WarpBackground
perspective={150}
beamsPerSide={5}
beamSize={4}
beamDuration={4}
>
<div className="w-80">
<h2>Custom Warp Effect</h2>
<p>Adjust the perspective and beam properties.</p>
</div>
</WarpBackground>
)
}
| Prop | Type | Default | Description |
|---|
children | React.ReactNode | - | Content to display inside the warp animation |
perspective | number | 100 | 3D perspective depth in pixels |
beamsPerSide | number | 3 | Number of light beams per side of the grid |
beamSize | number | 5 | Size of each beam as percentage of grid |
beamDelayMax | number | 3 | Maximum animation delay in seconds |
beamDelayMin | number | 0 | Minimum animation delay in seconds |
beamDuration | number | 3 | Duration of beam animation in seconds |
gridColor | string | "var(--border)" | Color of the grid lines |
className | string | - | Additional CSS classes for the container |
The component creates a 3D grid on all four sides (top, bottom, left, right) with animated beams that travel along the grid.
Increase perspective for a more subtle 3D effect, or decrease it for a more dramatic warping appearance.