Hyperspeed

Cinematic 3D highway light-streak perspective warp with dynamic road curvature, velocity blur, and interactive camera steering.

Interactive Playground

Move cursor over canvas to interact

Color Mode

Velocity2.5x

Streak Count200

Road Curvature1.2

Field of View120px

Streak Tail600px

Camera Steering

Anatomy

import { Hyperspeed } from "@shavin/fx";

<div className="relative w-full h-80 rounded-[var(--radius-panel)] overflow-hidden bg-canvas">
  <Hyperspeed
    colorMode="theme"
    speed={2.5}
    streakCount={200}
    curvature={1.2}
    fov={120}
    streakLength={600}
    interactive={true}
    className="w-full h-full"
  />
</div>

Examples

Theme-Adaptive Warp Tunnel

Dynamic theme accent taillights on the left with crisp xenon white headlights on the right.

<div className="relative w-full h-64 rounded-[var(--radius-panel)] overflow-hidden border border-hairline bg-canvas">
  <Hyperspeed
    colorMode="theme"
    speed={2.5}
    streakCount={200}
    curvature={1.2}
    fov={120}
    streakLength={600}
    interactive={true}
    className="w-full h-full"
  />
</div>

Custom Dual-Lane Warp

User-defined hot-rose left taillights and cyan right headlights.

<div className="relative w-full h-64 rounded-[var(--radius-panel)] overflow-hidden border border-hairline bg-canvas">
  <Hyperspeed
    colorMode="custom"
    leftColor="#f43f5e"
    rightColor="#06b6d4"
    speed={2.8}
    streakCount={220}
    curvature={1.4}
    fov={120}
    streakLength={650}
    interactive={true}
    className="w-full h-full"
  />
</div>

Props Reference

Prop	Type	Default	Description
colorMode	"theme" \| "custom"	"theme"	Color mode: "theme" derives left taillights from theme accent and right headlights from xenon white; "custom" uses leftColor and rightColor.
leftColor	string	"#f43f5e"	Custom base color for left-side streaks (taillights).
rightColor	string	"#ffffff"	Custom base color for right-side streaks (headlights).
speed	number	2.5	Travel velocity multiplier.
streakCount	number	200	Total count of active light streak particles.
curvature	number	1.2	Highway curvature and horizon bend amplitude (0 for straight road).
fov	number	120	Field of view perspective projection depth.
streakLength	number	600	Motion tail length of each light streak in pixels.
interactive	boolean	true	Enables cursor camera tilt and steering.