Installation
Usage
"use client"
import * as React from "react"
import { WarpSpeed } from "@/components/warp-speed"
export function LaunchHero() {
const [boost, setBoost] = React.useState(false)
return (
<WarpSpeed boost={boost} className="flex min-h-[32rem] flex-col items-center justify-center gap-6 px-6 text-center">
<h1 className="text-5xl font-semibold tracking-tight">Launch day.</h1>
<button
type="button"
onPointerEnter={() => setBoost(true)}
onPointerLeave={() => setBoost(false)}
className="rounded-full bg-primary px-5 py-2 text-primary-foreground"
>
Get started
</button>
</WarpSpeed>
)
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| colors | string[] | [] (theme: --primary, --chart-2, --chart-4) | Two or three colours for the streaks. Any CSS colour. |
| speed | number | 1 | Cruising speed, from 0.25 to 3. 1 is an unhurried glide. |
| density | number | 1 | How many streaks, from 0.5 to 1.5. 1 is about 4,200 on a desktop and 2,200 on a phone. |
| boost | boolean | false | Jump to hyperspace while true: wire it to a button's hover or a launch moment. |
| autoplay | boolean | true | When nobody is steering, the heading drifts and now and then the ship takes a short jump. Off, the flight sleeps a few seconds after the last steer. |
| interactive | boolean | true | The pointer steers; pressing and holding jumps. Presses on links and buttons stay theirs. |
| scrim | boolean | true | A soft shade of the background behind the middle, so text over the streaks stays readable. |
| moment | number | undefined (moves) | Holds the flight still at this moment, in seconds of cruising: a fixed frame for a calm hero, or the frame you capture. Steering and the jump still work. |
| captureRef | Ref<WarpSpeedHandle> | — | Gets { capture(width, height) }, which draws the flight as it is right now again at that size, on your background colour, and resolves a PNG Blob: a 4K hero, a wallpaper, a social card. It works on a software renderer too, and rejects with a plain message when the device can't draw that size. |
| ...props | HTMLAttributes<HTMLDivElement> | — | Any div attribute. Your className is merged last, so it wins; size the background with it. |
Accessibility
- The canvas and its still image are decorative and hidden from assistive technology; your content is ordinary markup above them.
- A soft shade sits behind the middle, so text above keeps its contrast over bright streaks.
- With prefers-reduced-motion it shows one still frame and ignores the pointer.
- It pauses off-screen and in hidden tabs, and frees its GPU memory when removed.
- Without WebGL2, on a software renderer, or on a device that can't hold a smooth frame rate even with fewer streaks, it shows a still image in your theme colours.
Changelog
- v1.1.0Latest
New: `moment` holds a frame still, and `captureRef` saves it as a PNG at any size.