Component Lab
Interactive component
RADIAL DIAL / 01
A metric, made magnetic.
Radial Dial turns a single signal into an animated focal point—built for dashboards, launch pages, and proof moments that deserve more than a progress bar.
Editable value, label, geometry, and motion controls
GETTING STARTED / 02
Make it yours in three moves.
Place the dial
Add Radial Dial where one important metric needs visual gravity.
Set the signal
Tune the value, suffix, and label to match the story your page needs to tell.
Shape the character
Choose motion, tick density, rings, and a gradient that belong to the surrounding brand.
CONFIGURATION / 03
The controls that change the story.
All controls stay editable
Content signal
Value · Suffix · Label
Use these three controls to define what the dial communicates. Keep labels short enough to read at a glance.
Motion behavior
Animate In · Loop · Speed
Use scan for a clinical rhythm, comet for a focused highlight, or breathe for a calmer repeat.
Visual system
Ticks · Rings · Shell · Gradient
Dial geometry lets you move from a quiet progress marker to a highly technical centerpiece.
Three ways to set the tone.
Growth metric
Reliability signal
Countdown moment
Built for a single metric that matters.
Back to top