Void Orb

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

Installation

npm install @reactbytes/void-orb

Usage

import { VoidOrb } from "@reactbytes/void-orb";

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

Properties

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | primaryColor | color | #ffffff | Primary highlights emission color (Hex). | | secondaryColor | color | #7c7c7c | Secondary swirly accent color (Hex). | | accentColor | color | #000000 | Deep stop void background backdrop color (Hex). | | fractalScale | number | 0.35 | Orb dimension sizing scale factor. | | fractalX | number | 0 | Grid center X coordinate offset. | | fractalY | number | 0 | Grid center Y coordinate offset. | | lightCount | number | 1 | The total active orbiting light sources (1 to 8). | | lightIntensity | number | 1.2 | Luminous brightness multiplier of the lights. | | lightSpeed | number | 0.8 | Angular speed velocity factor of orbit paths. | | grainStrength | number | 0.16 | Film grain noise opacity/strength (0.0 to 0.4). | | grainSize | number | 3.5 | Frequency density scale of film grain pixels. | | animationSpeed | number | 0.015 | Sinusoidal warp morphing speed velocity. | | autoRotate | boolean | true | Whether spatial coordinate rotation is enabled. |

Presets

This component includes the following design presets:

• Monochrome Shadow (default)
• Solar Flare (solar)
• Deep Nebula (nebula)
• Emerald Matrix (emerald)

Credits & Inspiration

Component Source

• ChandruMIT-o - Design & Development

Inspiration

• Filip Zrnzević - Digital Artist

Libraries Used

• Three.js - WebGL Framework

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