Warp Speed Tunnel React component
A hyperspace star-streak tunnel shader: stars fly out from a vanishing point that drifts toward the pointer, and pressing and holding spools up to warp speed, stretching every star into a long streak with a flash in the core.
About the Warp Speed Tunnel component
Warp Speed Tunnel is the classic jump to hyperspace as a background: stars stream out of a vanishing point in thin streaks, the centre glows, and the whole field drifts slightly toward your pointer.
Press and hold anywhere on it and it spools up to warp speed, stretching every star into a long line, then eases back to cruising when you let go.
When to use it
Use it for launch pages, 'coming soon' screens, game and sci-fi themes, speed-focused product heroes or a loading screen that's fun to wait on.
Warp is a press-and-hold toy; if the background sits behind buttons, people still click them normally, since only presses on the background itself count.
Installation
Add the Warp Speed Tunnel component to your project with the shadcn CLI. It lands in components/warp-speed-tunnel.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/warp-speed-tunnelOr copy the source by hand and install its dependencies:
npm install clsx tailwind-mergeProps
<WarpSpeedTunnel /> accepts 8 props, all optional. It also accepts the usual <div> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| children Content shown on top of the background. | React.ReactNode | — |
| colors Star colours (two are mixed per star), the tunnel glow and the warp flash. | [string, string, string, string] | DEFAULT_COLORS |
| background Base colour behind the effect. | string | DEFAULT_BACKGROUND |
| speed Animation speed multiplier. | number | 1 |
| intensity Overall brightness of the effect. | number | 1 |
| interactive The vanishing point drifts toward the pointer; press and hold to jump to warp speed. | boolean | true |
| resolution Render scale: 1 is full resolution, lower values are cheaper on very large screens. | number | 1 |
| paused Freeze the animation on its current frame. | boolean | false |
- children
Content shown on top of the background.
React.ReactNode - colors
Star colours (two are mixed per star), the tunnel glow and the warp flash.
[string, string, string, string]Default: DEFAULT_COLORS - background
Base colour behind the effect.
stringDefault: DEFAULT_BACKGROUND - speed
Animation speed multiplier.
numberDefault: 1 - intensity
Overall brightness of the effect.
numberDefault: 1 - interactive
The vanishing point drifts toward the pointer; press and hold to jump to warp speed.
booleanDefault: true - resolution
Render scale: 1 is full resolution, lower values are cheaper on very large screens.
numberDefault: 1 - paused
Freeze the animation on its current frame.
booleanDefault: false
npm dependencies
Installed for you by the shadcn CLI.
Warp Speed Tunnel FAQ
- How do I put content on top?
- Pass it as children. WarpSpeedTunnel is a relative container with the effect drawn behind its children, so give it a height (or make it absolute inset-0 inside a section) and lay your content out inside.
- Can I change the colours?
- Pass colors with four colours: two star colours mixed per star, the glow at the centre of the tunnel and the flash at warp speed.
- Is it heavy on performance?
- It's one small WebGL shader. It only animates while it's on screen and the tab is visible, caps the pixel density at 1.5x, and resolution={0.6} renders it smaller and scales it up on very large screens.
- What about reduced motion?
- With reduced motion turned on, or paused set, it draws a single still frame instead of animating. Without WebGL it falls back to a soft CSS gradient in the same colours.
