Warp Speed

A premium, modular React component from the React Bytes collection. Built with React and TypeScript.

Installation

npm install @reactbytes/warp-speed

Usage

import { WarpSpeed } from "@reactbytes/warp-speed";

export default function Example() {
  return (
    <WarpSpeed />
  );
}

Properties

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | starCount | number | 400 | The total number of stars in the field. | | sensitivity | number | 0.8 | Scroll velocity multiplier. | | friction | number | 0.95 | Inertia decay factor. Lower values slow down the ship faster. | | hueShift | number | 216 | HSL base color hue (0-360 range) for star trails and ship color. | | trailLength | number | 1 | Length of the motion blur trailing effect. Higher is longer trails. | | minSize | number | 0.5 | Minimum size of a star in pixels. | | maxSize | number | 3 | Maximum size of a star in pixels. | | showShip | boolean | false | Whether to render the centered spaceship. | | preventPageScroll | boolean | false | If true, wheel actions will call preventDefault on parent containers (useful for fullscreen mode). |

Presets

This component includes the following design presets:

• Classic Warp (default)
• Hyperdrive (hyperdrive)
• Solar Nebula (solar)
• Deep Space (deepspace)

Credits & Inspiration

Component Source

• ChandruMIT-o - Design & Development

For interactive playgrounds, customizable controls, and code copy-pasting, visit the full showcase page at React Bytes - Warp Speed.