Drive mode selector toggle
A car cluster switches from ECO to SPORT: the needle climbs, the arc turns red and the panel shakes.
Settings
Code
<label class="uvq03-drv"><input type="checkbox" role="switch"><span class="cl"><svg viewBox="0 12 100 50" aria-hidden="true"><path class="tk" d="M12 56A38 38 0 0 1 88 56" pathLength="1"/><path class="ar" d="M12 56A38 38 0 0 1 88 56" pathLength="1"/><g class="nd"><path d="M50 56L50 24"/><circle cx="50" cy="56" r="4"/></g></svg><span class="md"><b class="e">ECO</b><b class="s">SPORT</b></span></span>Drive mode</label>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Toggles
See all TogglesWhere to use it
Borrowed from modern car dashboards, this switch is a small dark cluster with an arc gauge and a needle. Off, it sits in ECO with a short green arc; on, the needle sweeps up, the arc grows and turns red, SPORT slides in under the gauge, and the panel gives a brief rumble. The gauge is an inline SVG with pathLength, so the arc fill is easy to tune.
The main color is the sport state and the second one the eco state. Rename the two modes in the HTML, for example COMFORT and TRACK, and use it for performance modes, power plans or boost features.