Apply a temporary visual treatment whenever a React prop changes.

Highlight

Use Promise.all to add a minimum delay to pending UI during a mutation.

Artificial Delay

Refresh a React Server Component whenever the window is focused.

A counter that animates in response to React state changes.

A server-rendered responsive line chart built with D3.

Recreation of the Mac OS dock with magnification.

A radial gradient that follows the mouse built with Framer Motion.

A simulated gradient border built with Tailwind CSS and multiple backgrounds.

An animated tab component built with Framer Motion's layoutId prop.

Recreation of iOS's switch control built with React Aria Components and Tailwind.

An animated multistep wizard built with Framer Motion.

Recreation of Trello's staggered checkbox animation.

Use Suspense without creating a new component.

Use Framer Motion to animate a number in React.

Use Framer Motion to add mount and unmount animations to items in a list.

A styled radio group inspired by Apple.com's checkout. Built with Radix.

A global alert built with Radix UI and Framer Motion.

A site header that smoothly grows and shrinks on scroll.