Back to Motion Prompt examples
UI component names · #11
Toggle switch
Flip a setting on or off. The switches on the first two of three setting rows are turned on in turn, then off again.
Choosing & switchingtoggleswitchtoggle-switchon-offbooleansettings
Full motion specification
How the movement works
Use it for settings that take effect immediately and have only two states.
- 014.5 s cycle on a 542×191 card. Three setting rows 60 px apart with dividers. At x 450 a 64×34 track (radius 17) and a white knob (radius 13, shadow).
- 02Clicks: row 1 on at 1.0 s, row 2 on at 1.8 s, row 1 off at 3.0 s, row 2 off at 3.6 s. Row 3 stays off.
- 03Each switch takes 0.2 s with easeOutCubic; the knob slides 30 px (17 → 47).
- 04The track colour blends from grey #d9d7d5 to blue #1f5ae8 with the switch progress.
Prompt
Put a toggle switch on each notification setting: the knob slides in 0.2 s and the track turns blue when on.