Fluid Control 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
Interactive Playground
Adjust sliders and values to preview changes in real-time
size
The width and height of the entire dial component in pixels.
label
The small text label displayed above the value.
defaultValue
The initial starting value of the dial.
primaryColor
The starting color of the circular progress track (at min value).
secondaryColor
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). |