Hyperspeed: Free React + Tailwind Component

A hyperspace warp-travel tunnel animation, with star streaks jetting out from the vanishing point and leaving afterimage trails.

An interstellar jump simulated on canvas 2D: hundreds of star streaks accelerate outward from the vanishing point, paired with afterimage trails and lighter compositing to recreate the tunnel feel of hyperspace warp travel.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add hyperspeed.en

New project or installation trouble? Start here →

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Star countstarCount

320

Warp strengthspeed

Trail lengthtrailLength

Background colorbackground

Vanishing point, horizontaloriginX

0.5

Vanishing point, verticaloriginY

0.5

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<Hyperspeed/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add https://webberui.com/r/hyperspeed.en.json

Or, once registries are configured in components.json, install it as @webberui/hyperspeed.

Usage

import { Hyperspeed } from "@/components/ui/hyperspeed";

<Hyperspeed speed={1.2} starCount={340} className="h-[360px] w-full rounded-xl" />

The component does not give itself a height, so set explicit dimensions through className or a wrapping container (for example h-[360px]). Foreground content can be layered on top with absolute positioning.

Props

Prop	Type	Default	Description
`starCount`	`number`	`320`	Number of stars — higher density is more spectacular and more expensive
`speed`	`number`	`1`	Warp intensity, roughly `0.2` for a slow cruise up to `3` for a full-speed jump
`trailLength`	`number`	`1`	Trail length multiplier — higher makes the streaks longer
`colors`	`string[]`	Cool-toned jump light	Star streak palette, distributed at random across the stars
`background`	`string`	`"#05060f"`	Tunnel base color
`originX`	`number`	`0.5`	Horizontal position of the vanishing point (`0`~`1`)
`originY`	`number`	`0.5`	Vertical position of the vanishing point (`0`~`1`)
`className`	`string`	—	Forwarded to the outermost container

Accessibility

When the user has "reduce motion" enabled at the system level, one frozen frame of the warp is drawn and the animation then stops
The canvas is marked aria-hidden as a purely decorative layer, so it does not interfere with assistive technology announcing the foreground content

Hyperspeed