Tactile certainty — like flipping a real switch. The knob travels with spring physics that slightly overshoots then settles, while the track morphs from neutral gray to confident green. The 500ms spring curve (with overshoot) makes the binary state change feel physical and irreversible. Eighty percent of toggle satisfaction comes from the last 20% of the animation.
Export Snippets
Switch formats without compressing the preview layout.
AI Prompt
Natural-language design direction for AI coding tools.
Build an Apple-style haptic toggle switch micro-interaction.
Design philosophy — tactile certainty:
1. Track: 51×31px rounded-full pill. Off state: #E2E8F0. On state: #34c759 (Apple system green). The color transition uses 300ms ease — it should feel like dye filling a container, not a binary flip.
2. Knob: 27×27px circle, pure white (#FFFFFF), shadow 0 2px 8px #00000026. The shadow is critical — it creates the illusion of a physical object sitting on a surface.
3. Spring physics: Knob travel uses cubic-bezier(0.68, -0.55, 0.265, 1.55) over 500ms. The -0.55 creates overshoot — the knob travels ~3px past its destination then bounces back. This tiny overshoot is what makes it feel "haptic."
4. Active state: On press (mousedown), the knob stretches horizontally by ~15% (scaleX(1.15)). This mimics the rubber deformation of a real button being pressed.
5. Accessibility: Use a real <button role="switch"> with aria-checked. The visual state must match aria state.
6. Label: 17px medium weight #0F172A, with an optional description line in 13px #64748B below.
The result should make users toggle it repeatedly just for the satisfaction.Tactile certainty — like flipping a real switch. The knob travels with spring physics that slightly overshoots then settles, while the track morphs from neutral gray to confident green. The 500ms spring curve (with overshoot) makes the binary state change feel physical and irreversible. Eighty percent of toggle satisfaction comes from the last 20% of the animation.