Warp Background
A card-sized warped spacetime grid background, with beams from all four sides streaming into the depths of the tunnel.
CSS 3D perspective folds four grid walls into a tunnel, and beams fly along those walls into the distance for a warp-speed effect. Pure CSS transforms and keyframes, with no WebGL dependency.
Loading preview…
npx shadcn@latest add https://webberui.com/r/warp-background.jsonPlayground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
100
3
5
3
210
<WarpBackground />
Installation
npx shadcn@latest add https://webberui.com/r/warp-background.jsonOr, once registries are configured in components.json, install it as @webberui/warp-background.
Usage
import { WarpBackground } from "@/components/ui/warp-background";
<WarpBackground className="p-10">
<h3 className="text-2xl font-semibold">Through the warp</h3>
</WarpBackground>The container needs explicit dimensions: set the height and padding through className (for example h-[320px] max-w-md p-10), and put the layout that centers the foreground content on className too.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
perspective | number | 100 | Perspective strength (px) — smaller warps more violently |
beamsPerSide | number | 3 | Number of beams flying on each side at once |
beamSize | number | 5 | Grid cell and beam width (as a % of the container) |
beamDelayMin | number | 0 | Minimum beam delay (seconds) |
beamDelayMax | number | 3 | Maximum beam delay (seconds) |
beamDuration | number | 3 | Seconds for one beam to fly the full distance |
gridColor | string | rgba(128,128,140,0.28) | Grid line color |
beamHue | number | — | Fixed hue (0~360); when omitted, each beam picks a random color |
children | ReactNode | — | Foreground content layered above the grid |
className | string | — | Forwarded to the container; set size and padding here |
Accessibility
- When the user has "reduce motion" enabled at the system level, only the static perspective grid is kept and the beams do not fly
- The background layer carries
aria-hiddenandpointer-events-none, so it interferes with neither foreground interaction nor announcement - Because the beams use random hues, they only render after the client has mounted, avoiding an SSR hydration mismatch