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
size240
The width and height of the entire dial component in pixels.
labelINTENSITY
The small text label displayed above the value.
defaultValue50
The initial starting value of the dial.
primaryColor#7fff5e
The starting color of the circular progress track (at min value).
secondaryColor#ff5c71
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). |