Smoothly animate frequently–updating text, like text from a chatbot.

useAnimatedText

Render a filesystem tree of arbitrary depth using a single recursive component.

Recursive Filetree

A container that automatically animates its height when its content changes.

A smoothly sliding image carousel with an iOS-inspired filmstrip navigation.

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

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

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 magnification effect from the Dock on the Mac.

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.