127 Components
Warp Speed
Backgrounds3D hyperspace starfield using perspective projection (`screenX = x / z`, `screenY = y / z`), delta-time streak rendering, a cursor-following vanishing point, and a warp jump accelerator.
Warp Speed · SUBLIGHT
3D Hyperspace Projection
Projects 3D star coordinates via screenX = x / z with cursor-steered vanishing point and velocity streak ramps.
Move cursor to steer vanishing point · Click button to jump
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:lucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/warp-speed.json"
Props
TypeScript props supported by <WarpSpeed />.
| Prop | Type | Default | Description |
|---|---|---|---|
| speed | number | 180 | Base forward Z-axis travel speed. |
| starCount | number | 320 | Number of 3D stars inside the projection volume. |
| streakLength | number | 1.4 | Length multiplier for each star's motion-blur streak. |
| warp | boolean | false | Ramps velocity up 5x for the hyperspace jump effect. |
| center | { x: number; y: number } | { x: 0.5, y: 0.5 } | Normalized vanishing point coordinates (0 to 1). |
| followCursor | boolean | true | Steers the vanishing point toward the cursor on hover. |
| children | React.ReactNode | — | Optional foreground content rendered above the warp tunnel. |
| className | string | — | Additional Tailwind CSS classes for the container. |
Key Features
- Projects `(x, y, z)` coordinates each frame using `x / z` perspective division and draws velocity streaks from the previous frame.
- Smoothly ramps velocity 5x when `warp` mode is engaged.
- Vanishing point smoothly tracks the user's pointer or locks to a custom `center` coordinate.
Keyboard & Accessibility
- Marks the `<canvas>` layer with `aria-hidden='true'`.
- Interactive 'Engage Warp Jump' toggle button is keyboard accessible.
- Maintains high-contrast text legibility over the `#03050C` space canvas.