An inbox demonstrating enter, update, and exit animations with Framer Motion.

Animated Email Client

A draggable control that uses rubber banding for out-of-bounds feedback.

Elastic Slider

A site header that smoothly grows and shrinks on scroll.

A global alert built with Radix UI and Framer Motion.

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

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

Use Framer Motion to animate a number in React.

Apply a temporary visual treatment whenever a React prop changes.

Use Suspense without creating a new component.

Add a minimum delay to a mutation's pending UI.

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.

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.