A 3D starfield that cruises, spools up into streaking light speed with a blue-shifted core, then drops out with a flash. Can also hold a fixed warp level.
Launch Week
npx shadcn@latest add https://hyperblur.dev/r/bg-warp-stars.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bg-warp-stars.tsx.
import { BgWarpStars } from "@/components/hyperblur/bg-warp-stars"
<div className="relative h-96"><BgWarpStars><h1>Launch day</h1></BgWarpStars></div>| Prop | Type | Default | Description |
|---|---|---|---|
| color | string | "#ffffff" | Star color at rest. Hex color. |
| accent | string | "#7fb3ff" | Shift color for stars near the center at warp, and the core glow. Hex color. |
| background | string | "#020308" | Space color. |
| stars | number | 420 | Number of stars, from 40 to 1500. |
| cycle | boolean | true | Loops cruise, jump and drop out. Set false to hold the warp level. |
| warp | number | 0.6 | Fixed warp level from 0 to 1, used when cycle is false. |
| speed | number | 1 | Speed multiplier for the whole cycle. |
| children | ReactNode | Content rendered above the background. | |
| className | string | "" | Extra classes for the root element. |