A small rocket accelerates along a curved path and leaves a trail that fades behind it, then launches again.
Deploying
hyperblur / main · 4f25fbe
✓Build
✓Tests
•Edge network
npx shadcn@latest add https://hyperblur.dev/r/loader-rocket-trail.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/loader-rocket-trail.tsx.
import { LoaderRocketTrail } from "@/components/hyperblur/loader-rocket-trail"
<LoaderRocketTrail size={96} label="Deploying to production" />| Prop | Type | Default | Description |
|---|---|---|---|
| size | number | 72 | Width of the flight area in pixels. Height is 80% of it. |
| color | string | "#2f7bff" | Color of the trail, the dotted guide and the nose cone. |
| accent | string | "#ff8a4c" | Color of the fins and the flame. |
| speed | number | 2.4 | Seconds for one launch. |
| label | string | Visible caption under the loader. Without it, Loading is announced to screen readers only. |