Hyperspeed
A hyperspace warp-travel tunnel animation, with star streaks jetting out from the vanishing point and leaving afterimage trails.
An interstellar jump simulated on canvas 2D: hundreds of star streaks accelerate outward from the vanishing point, paired with afterimage trails and lighter compositing to recreate the tunnel feel of hyperspace warp travel.
npx shadcn@latest add https://webberui.com/r/hyperspeed.jsonPlayground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
<Hyperspeed />
Installation
npx shadcn@latest add https://webberui.com/r/hyperspeed.jsonOr, once registries are configured in components.json, install it as @webberui/hyperspeed.
Usage
import { Hyperspeed } from "@/components/ui/hyperspeed";
<Hyperspeed speed={1.2} starCount={340} className="h-[360px] w-full rounded-xl" />The component does not give itself a height, so set explicit dimensions through className or a wrapping container (for example h-[360px]). Foreground content can be layered on top with absolute positioning.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
starCount | number | 320 | Number of stars — higher density is more spectacular and more expensive |
speed | number | 1 | Warp intensity, roughly 0.2 for a slow cruise up to 3 for a full-speed jump |
trailLength | number | 1 | Trail length multiplier — higher makes the streaks longer |
colors | string[] | Cool-toned jump light | Star streak palette, distributed at random across the stars |
background | string | "#05060f" | Tunnel base color |
originX | number | 0.5 | Horizontal position of the vanishing point (0~1) |
originY | number | 0.5 | Vertical position of the vanishing point (0~1) |
className | string | — | Forwarded to the outermost container |
Accessibility
- When the user has "reduce motion" enabled at the system level, one frozen frame of the warp is drawn and the animation then stops
- The canvas is marked
aria-hiddenas a purely decorative layer, so it does not interfere with assistive technology announcing the foreground content