BackgroundsProNew
Warp Background
A card sits inside a 3D grid tunnel with light beams racing along its walls.
Customize
beamColor
gridColor
Based on Warp Background (MIT license) · Terms of use
Props
10 properties| Property | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Content in the middle of the tunnel, usually a card. |
| perspective | number | 100 | Perspective depth in pixels. Lower means a deeper tunnel. |
| beamsPerSide | number | 3 | Beams on each wall. |
| beamSize | number | 5 | Beam width and grid step, in percent. |
| beamDuration | number | 3 | Seconds for a beam to cross a wall. |
| beamDelayMin | number | 0 | Shortest delay before a beam, in seconds. |
| beamDelayMax | number | 3 | Longest delay before a beam, in seconds. |
| beamColor | string | "rgba(255, 255, 255, 0.7)" | Beam color. |
| gridColor | string | "rgba(255, 255, 255, 0.08)" | Color of the grid lines on the walls. |
| className | string | — | Tailwind classes for the wrapper. |
Dependencies
3 required packages
npm install motion clsx tailwind-merge