Fluid Magnetic Dial
A highly interactive, fluid-like control dial featuring magnetic Framer Motion physics, gooey SVG filters, and dynamic glitching text. Perfect for premium, futuristic dashboard interfaces.
Component Showcase
Fluid Magnetic Dial
A highly interactive, fluid-like control dial featuring magnetic Framer Motion physics, gooey SVG filters, and dynamic glitching text. Perfect for premium, futuristic dashboard interfaces.
Interactive Playground
Adjust sliders and values to preview changes in real-time
The width and height of the entire dial component in pixels.
The small text label displayed above the value.
The initial starting value of the dial.
The starting color of the circular progress track (at min value).
The ending color of the circular progress track (at max value).
API Reference (Props)
Component properties and type specifications
| Prop | Type | Default | Description |
|---|---|---|---|
| size | number | 240 | The width and height of the entire dial component in pixels. |
| label | string | INTENSITY | The small text label displayed above the value. |
| defaultValue | number | 50 | The initial starting value of the dial. |
| primaryColor | string | #7fff5e | The starting color of the circular progress track (at min value). |
| secondaryColor | string | #ff5c71 | The ending color of the circular progress track (at max value). |