Hyperspeed
Draws a jump to light speed: streaks of light rush out of a vanishing point, longer and brighter toward the edge, in one colour with a hot head in a second tone. Three layers of angular sectors on the GPU, each streak at its own pace; the vanishing point leans toward the pointer, and holding the pointer down on the host (or Space or Enter while the host itself has focus) punches the drive: streaks stretch and the rush speeds up, easing back on release. Every constant is a custom property re-read when the element's style changes. Without WebGL2 or JavaScript a still starburst stands in. Fills its positioned parent.
Live demo
Hyperspeed.
hold to jump
Live, from the library itself: scroll, hover, navigate away and back. The demo is never gated.
Adjust · props are custom properties, set inline, so you edit the running instance
Measured
JavaScript with its libs
11.1 kB raw
1.5 kB raw of its own, 928 B gzip. The rest is the runtime, the shader runner, the canvas helper and the GL core, loaded once for every effect on the page.
CSS 5.1 kB raw including the base tokens. Measured from a production build, and again in CI for every change that can move it.
Browser support
Chrome 56 · Firefox 51 · Safari 15; needs webgl2. Elsewhere: without WebGL2, a still starburst in the colour.
Install Pro
The demo above is never gated; the source is. With a key in components.json (see account), the registry serves it like any other item:
npx shadcn@latest add @moonarc-pro/hyperspeed<section class="relative min-h-[60vh] bg-black text-white">
<Hyperspeed color="oklch(0.72 0.14 230)" />
<h1 class="relative">Hold to jump.</h1>
</section>Without a key the registry answers 401 with an upgrade message. Related free primitives: meteors.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
color | string | 'oklch(0.72 0.14 230)' | Streak colour; any CSS colour, theme tokens included. |
head | string | color lifted 60 % toward white | The colour of a streak's leading end. |
density | number | 90 | Angular sectors in the first layer; each layer adds more. |
speed | number | 1 | Rush speed multiplier. |
streak | number | 1 | Streak length multiplier. |
width | number | 1.6 | Streak width in CSS px at the edge. |
boost | number | 4 | How much faster the drive runs while held; 0 disables the hold. |
Reduced motion
No loop: one frame of streaks at a fixed moment; holding does nothing.
With ClientRouter
Bound through the shared runtime: loop, observers and pointer listener are released before the swap and the WebGL context is lost on purpose after it; five round trips leave one context. Under transition:persist the canvas keeps its context and starts again on the next page.
Why it is built this way
- Sectors, not particles: the angle is cut into cells and a hash decides which hold a streak and where it is along its run. That gives thousands of streaks in one pass with no buffers.
- Travel on z²: a streak crawls near the centre and races at the edge, which is what reads as depth.
- Width is measured across the arc in pixels, so a streak stays a hairline near the centre and never smears into a wedge.
- The drive eases in over ~400 ms and out over ~700 ms; its time is accumulated, so letting go never snaps the streaks back.
- The hold listens on the host because the canvas takes no pointer events. Space or Enter hold it while the host itself has focus, and only while the hold does something (the effect running on the GPU, boost above 0, motion allowed); a link, a button or the page body as the host keeps its own keys.
Replaces: Hyperspeed (React Bits) · Warp / starfield backgrounds. See the migration table.
Related
Dither
ProDraws slow noise waves on the GPU, ordered-dithered into pixel cells of one colour on the page's ground, for the look of a 1-bit screen.
Moves thousands of particles along an invisible current, leaving fading trails.
Plasma
ProDraws glowing ribbons of light drifting through each other: four sine fields interfere on the GPU, the sum folds into soft bands, and each band glows in a colour sliding between two tones with a hot core at its peak.
Also: view transitions · how costs are measured · browser support · accessibility policy · five-minute setup · MCP for agents · this page as Markdown