HyperDrive Widget
A highly interactive, futuristic widget featuring a central magnetic core and orbiting rings that react to hover and click.
Component Showcase
Interactive Playground
Adjust sliders and values to preview changes in real-time
titleHYPERDRIVE CORE
The main title displayed inside the widget.
statusTextIDLE
The default status text shown under the title.
size360
The width and height of the widget container.
primaryColor#00f0ff
The primary neon color used for the core and rings during hover.
secondaryColor#ff5c71
The secondary neon color used for the middle ring.
glowColor#7fff5e
The neon glow color used during active (clicked) state.
API Reference (Props)
Component properties and type specifications
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "HYPERDRIVE CORE" | The main title displayed inside the widget. |
| statusText | string | "IDLE" | The default status text shown under the title. |
| size | number | 360 | The width and height of the widget container. |
| primaryColor | string | "#00f0ff" | The primary neon color used for the core and rings during hover. |
| secondaryColor | string | "#ff5c71" | The secondary neon color used for the middle ring. |
| glowColor | string | "#7fff5e" | The neon glow color used during active (clicked) state. |