Scroll Warp

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

Installation

npm install @reactbytes/scroll-warp

Usage

import { ScrollWarp } from "@reactbytes/scroll-warp";

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

Properties

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | numStars | number | 1900 | Number of stars in the scene. | | baseTrailLength | number | 2 | Base length of the star trails when not in warp. | | maxTrailLength | number | 30 | Maximum length of the star trails during full warp. | | starColor | color | #d1ffff | Color of the stars in HEX format. | | bgColor | color | #111111 | Background color of the scene in HEX format. | | className | string | `` | Custom styling classes for the container. |

Presets

This component includes the following design presets:

• Classic Clarity (default)
• Hyperdrive Warp (hyperdrive)
• Cosmic Nebula (nebula)
• Silent Void (void)

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 - Scroll Warp.