Spacetime Grid

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

Installation

npm install @reactbytes/spacetime

Usage

import { SpaceTime } from "@reactbytes/spacetime";

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

Properties

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | loopDuration | number | 1200 | Speed of the infinite loop in milliseconds. | | strokeColor | color | #00e5ff | Hex color for the neon topographic grid lines. | | bgColor | color | #020205 | Background color of the space canvas. | | strokeWidth | number | 4 | Thickness of grid lines in pixels. | | parallaxAmount | number | 0.04 | Intensity of 3D parallax hover effect (movement scale). | | warpStrength | number | -8 | Intensity and direction of the time-reverse click warp force. | | distortionScale | number | 7 | Wobble distortion scale applied to the topographic lines. | | glowIntensity | number | 0.4 | Intensity scale (0 to 1) of drop shadows and ambient glows. | | noiseEnabled | boolean | true | Enables a static cyberpunk analog noise overlay pattern. |

Presets

This component includes the following design presets:

• Spacetime Grid (default)
• Event Horizon (event-horizon)
• Neon Matrix (neon-matrix)
• Hyperdrive (hyperdrive)
• Amber Terminal (amber-terminal)

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 - Spacetime Grid.