Preview image. Unlock full-res
A set of interactive CSS dial components featuring a 3D brain inside a glass dome that shifts in size, color, and glow based on the knob position from low to max effort.
More like this
See all
Summary
A set of interactive CSS dial components featuring a 3D brain inside a glass dome that shifts in size, color, and glow based on the knob position from low to max effort.
Visual description
A circular dial centered on a dark charcoal grid background has an outer ring of fine radial tick marks and a small orange indicator near the lower left. Inside a glossy black glass dome sits a small glowing blue 3D brain. A bold uppercase LOW label in grey sits at the bottom of the ring, and a white hand-grab cursor icon hovers near the indicator.
Key takeaway
Put a living illustrated object inside a physical-feeling knob so the control's state is expressed by the object itself, not only a label. Fine tick marks and a tiny accent-colored marker keep the hardware feel precise.
Reuse notes
Reach for this as a ui screen reference. Pairs with experimental, glassmorphism directions. Original by jhey.
