Quantum Sphere Loading

https://github.com/user-attachments/assets/903f2483-6fac-4592-be09-5fdc17196a84

DEMO

A parabolic spherical orbital loading component, inspired by quantum superposition of atomic orbitals and the wave function collapse concept. Particles occupy multiple quantum states until interacting (hovering), creating a mesmerizing, high-performance UI element.

Available for both React and Svelte 5.

Features

- ⚛️ Physics-based Animation: Lines rotate in 3D space with parabolic trajectories
- 🎨 Dynamic Color Schemes: 20+ preset color schemes (Neon, Cyberpunk, Galaxy, etc.)
- 🖱️ Interactive: Hover effects simulate wave function collapse (particles react to observation)
- ⚙️ Highly Configurable: Control line count, sphere size, speed, glow, and more
- 🎭 Dual Framework Support: First-class support for both React and Svelte 5

Installation

``bash
npm install quantum-sphere-loading


or

pnpm add quantum-sphere-loading

or

yarn add quantum-sphere-loading
`

Usage

$3

`tsx
import React from 'react';
import QuantumWaveOrbital from 'quantum-sphere-loading';
import 'quantum-sphere-loading/css'; // Import styles

function App() {
return (



);
}
`

$3

`svelte



`

Configuration

You can customize the sphere by passing a config prop/prop.

`tsx
// Example custom config
const myConfig = {
minLines: 8,
maxLines: 16,
minSphereSize: 150,
maxSphereSize: 200,
minRotationSpeed: 5,
maxRotationSpeed: 20,
// ... see types for full list
};


`

$3

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| config | OrbitalSphereConfig | (Default Preset) | detailed configuration object |
| autoRandomize | boolean | true | Periodically changes the sphere's configuration (colors, lines, size) |
| className | string | "" | Additional CSS classes for the container |
| onSphereClick | () => void | null | Callback when the sphere is clicked |

$3

See src/QuantumSphere.d.ts (or your IDE's autocomplete) for the full list of configuration options, including:
- minLines / maxLines
- minSphereSize / maxSphereSize
- minGlowIntensity / maxGlowIntensity
- minSaturation / maxSaturation
- autoRandomizeMin / autoRandomizeMax` (ms)

License

MIT © vtempest