HyperDrive Widget
A highly interactive, futuristic widget featuring a central magnetic core and orbiting rings that react to hover and click.
Component Showcase
HyperDrive Widget
A highly interactive, futuristic widget featuring a central magnetic core and orbiting rings that react to hover and click.
Framer MotionInteractivePremiumCyber
Interactive Playground
Adjust sliders and values to preview changes in real-time
title
The main title displayed inside the widget.
statusText
The default status text shown under the title.
size
The width and height of the widget container.
primaryColor
The primary neon color used for the core and rings during hover.
secondaryColor
The secondary neon color used for the middle ring.
glowColor
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. |