Interaction experiments with React and Motion. Every piece respects reduced motion, works with the keyboard, and is copy-paste ready.
The new theme grows from where you click. With reduced motion, it just switches. Uses next-themes with attribute="class", the shadcn/ui default.
Light/dark switch where the new theme grows in a circle from the click, with a sun/moon morph.
Toasts appear bottom-right. Hover to expand · swipe right or press Esc to dismiss.
Stacked toasts that fan out on hover, swipe to dismiss, pause while you read, and morph from loading to done.
With icons. Try dragging the thumb.
Async, optimistic: moves now, saves in the background.
Async, pessimistic — and the server always fails.
Custom --switch-on color.
Disabled on this plan.
Springy, draggable thumb that stretches while pressed. Async (optimistic or pessimistic) with shake-on-error, icons, custom color and native form support.
The spring keeps its velocity when interrupted; the CSS transition restarts from a standstill each time.
The same switch with zero JS animation. Mash it next to the Motion version to feel spring vs bezier.
Icon morphs from copy to check with a blur-scale crossfade, then the check draws itself.
Segmented tabs with a pill that slides between items using a shared layout animation.