Hyperspeed
hyperspeedCreates a warp-speed tunnel of luminous streaks rushing from a vanishing point.
Usage
Basic usage
Put it into the relative black bottom container. The component comes with block h-full w-full. The size is controlled by the container.
<div className="relative h-64 overflow-hidden rounded-xl bg-black">
<Hyperspeed className="absolute inset-0" />
</div>Overlay title
The light strip layer is aria-hidden, and the copywriting is placed on the upper layer pointer-events-none in the center.
<div className="relative h-64 overflow-hidden rounded-xl bg-black">
<Hyperspeed className="absolute inset-0" />
<div className="pointer-events-none absolute inset-0 flex items-center justify-center text-sm font-medium text-white/80">
Hyperspeed
</div>
</div>Full throttle (high-speed intensive)
speed increases the volume + density increases the density to create a sense of hyperspace jump acceleration.
<div className="relative h-64 overflow-hidden rounded-xl bg-black">
<Hyperspeed speed={3} density={90} className="absolute inset-0" />
</div>Straight tunnel (no twisting)
distortion=0 The road turbulence swings off, and the light band rushes straight towards it.
<div className="relative h-64 overflow-hidden rounded-xl bg-black">
<Hyperspeed distortion={0} density={56} className="absolute inset-0" />
</div>Customized car light color
leftColor / rightColor Pass any CSS color, overwriting the default chart token.
<div className="relative h-64 overflow-hidden rounded-xl bg-black">
<Hyperspeed
leftColor="oklch(0.72 0.2 40)"
rightColor="oklch(0.7 0.16 200)"
speed={1.5}
className="absolute inset-0"
/>
</div>When to Use
Use it when you need a strong impact warp tunnel/jump speed hero background. For purely geometric perspective grids (no motion tunnels) use RetroGrid; for low-key grid shading use GridPattern.
Import
import { Hyperspeed } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| speed | number | 1 | The overall propulsion speed multiplier, the larger it is, the faster it will rush. It is recommended to be 0.2–4 |
| density | number | 40 | The density of light strips on both sides of the road is larger and denser. It is recommended that 10–120 |
| distortion | number | 1 | Field of view distortion intensity (turbulence swing), 0=straight tunnel, recommended 0–2 |
| fade | number | 0.4 | Fog fade intensity, the greater the distance, the faster the distance will be engulfed by darkness, recommended 0–1 |
| leftColor | string | var(--color-chart-4) | Left (leaving) car light color, any CSS color |
| rightColor | string | var(--color-chart-2) | Right (approaching) car light color, any CSS color |
| className | string | — | Root container (itself block h-full w-full, the size is controlled by the container) |
| style | CSSProperties | — | Forward the root container inline style |
Slots
| Slot | Type | Description |
|---|---|---|
| fallback | ReactNode | Content rendered with the static fallback in reduced-motion or non-WebGL environments |
Usage Guidelines
- The glow is only visible on dark-colored containers, and is almost invisible on light-colored containers. It is recommended to use
bg-blackor dark-colored bases. - The single-shader OGL effect renders only on the client. SSR, unavailable WebGL, and reduced motion use the static fallback.
- Fullscreen background layers in a non-cascading context parent of an opaque background may be obscured by the parent background, see [[webgl-canvas-rendered-but-invisible-negative-zindex-covered]].
leftColor/rightColormust use the--color-prefix token when passing CSS variables, see [[hulian-token-color-var-needs-color-prefix]].
Related
DotPattern · GridPattern · StripedPattern · Spotlight · RetroGrid · Ripple
Playground
<div className="relative h-64 overflow-hidden rounded-xl bg-black">
<Hyperspeed
speed={1}
density={40}
distortion={1}
fade={0.4}
className="absolute inset-0"
/>
</div>