Segmented rings rush toward the viewer through a twisting tunnel whose far end sways, with sparks spiraling along the walls and a glowing core.
Warp 4.0
npx shadcn@latest add https://hyperblur.dev/r/bg-vortex.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bg-vortex.tsx.
import { BgVortex } from "@/components/hyperblur/bg-vortex"
<div className="relative h-96"><BgVortex><h1>Warp 4.0</h1></BgVortex></div>| Prop | Type | Default | Description |
|---|---|---|---|
| color | string | "#3a2a8f" | Color of the far rings. Hex color. |
| accent | string | "#7fb3ff" | Color of the near rings, sparks and core. Hex color. |
| background | string | "#040409" | Void color. Hex color. |
| rings | number | 32 | Number of rings in the tunnel, from 8 to 80. |
| twist | number | 2.4 | How much the rings rotate along the depth of the tunnel. |
| sparks | number | 160 | Number of spiraling sparks, up to 600. |
| speed | number | 1 | Travel speed. |
| className | string | "" | Extra classes for the root. The root is absolutely positioned and fills its parent. |
| children | ReactNode | Content rendered on top of the background. |