Guides
Practical guides to building animated interface components in React with Motion and Tailwind CSS. Each one explains the technique, the easing and spring choices, reduced motion and accessibility, with code you can copy.
AI chat input in React with a thinking state and Stop button
Build an AI chat input in React: an auto-resizing textarea, Enter to send, a Send button that turns into Stop, and an accessible thinking timer.
Animated number counter in React with Motion
Build an animated number counter and a rolling number ticker in React with Motion. Covers springs, Intl formatting, reduced motion and screen readers.
Animated tabs in React and shadcn/ui with Motion layoutId
Build animated tabs with a sliding indicator in React and shadcn/ui using Motion's layoutId. Includes keyboard support, ARIA roles and reduced motion.
Animated toast notifications in React with Motion
Build stacked, animated toast notifications in React with Motion: enter and exit springs, hover to expand, paused timers, live regions and reduced motion.