Browse components
Hyperspeed
A night highway of light trails rushing toward you. Hold the pointer down to punch it into warp.
Hyperspeed
Installation
npx shadcn@latest add @glint-ui/hyperspeedFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/hyperspeed.json
Usage
import { Hyperspeed } from "@/components/ui/hyperspeed";
<div className="relative h-96">
<Hyperspeed boost={4} />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| leftColor | string | "#ff2d78" | Oncoming light trails. |
| rightColor | string | "#3ee0ff" | Outgoing light trails. |
| sideColor | string | "#c9c3ff" | Lane markings and roadside posts. |
| speed | number | 1 | Cruise speed. |
| boost | number | 4 | Speed multiplier while the pointer is held. |
| density | number | 0.6 | How busy the lanes are. |
| className | string | — | Extra classes for the root element. |