# Hyperspeed (Moonarc)

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.

- Pro block. Install: `npx shadcn@latest add @moonarc-pro/hyperspeed` (license key required)
- Tier C · category background · trigger always, pointer, click
- Readout: `<Hyperspeed boost={4}>`
- Browser support: widely (Chrome 56 · Firefox 51 · Safari 15); elsewhere: without WebGL2, a still starburst in the colour
- Measured cost: 1.5 kB raw JS · 928 B gzip · + runtime + shader + canvas + gl, 11.1 kB raw in all (with dependencies 11.1 kB raw; CSS 5.1 kB raw)
- Page: https://moonarc.dev/components/hyperspeed/

## 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. |

## Usage

```astro
<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>
```

## 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.

## Craft

- 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

## Source

Pro block. The source is served by the license-gated registry: `npx shadcn@latest add @moonarc-pro/hyperspeed` with a key in components.json (https://moonarc.dev/account/). Related free primitives: meteors.