HTML + CSSToggles
Airplane mode toggle
The plane takes off across the track between drifting clouds and turns as it lands.
Settings
16px
1x
Code
<label class="uv-tap"><input type="checkbox" role="switch"><span class="tr"><i class="cl a"></i><i class="cl b"></i><span class="kn"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M21 15.5v-1.8l-7.6-4.6V4a1.4 1.4 0 0 0-2.8 0v5.1L3 13.7v1.8l7.6-2.4v4.5L8.6 19v1.4l3.4-1 3.4 1V19l-2-1.4v-4.5z"/></svg></span></span>Airplane 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
A familiar phone setting with a bit of story: the knob carries a plane icon that points up while off, then flies to the other end, banks into a diagonal and travels past two small clouds that keep drifting through the orange track. It is a fun fit for travel apps, booking sites and any offline or focus mode switch.
Orange matches the system convention, but any color works for a brand. The clouds only move while the switch is on and stop with reduced motion, so the control never distracts when idle.