Diff Review

Install

Props

What It Demonstrates

Morph

One shape smoothly turns into another shape, e.g. Dynamic Island.

Shared element transition

An element travels and transforms from one position into another, like a thumbnail expanding into a card.

Layout animation

When an element's size or position changes, it animates to the new spot instead of snapping.

Crossfade

One element fades out as another fades in, in the same spot.

Stagger

Animate several items one after another with a small delay between each, creating a cascade.

Accordion / Collapse

A section smoothly expands and collapses its height to show or hide content.

Spatial consistency

Animating so an element keeps its identity and position across states, so users never lose track of where things went.

Related Components

• Approval Flow

  A step-by-step approval checklist for agent permissions. Radio and checkbox groups, an "Other…" escape hatch that grows a field in place, and per-step validation that blocks the commit. Answering a step sends the chosen option flying into a running record of what you have already decided, so the screen accumulates a decision trail instead of replacing itself.

• MasonryPro

  A Pinterest-style grid where every item drops into the shortest column, packed by measurement rather than by a shared row baseline.

• Swarm

  Up to a quarter of a million particles integrated entirely on the GPU, morphing between words and solids, with a drag-orbit camera. Position and velocity live in floating-point textures and never come back to the CPU. Text targets are sampled once out of an offscreen canvas, so the shape can be any string with no font atlas.

• Rotunda

  Real HTML panels on a drag-spun 3D cylinder. A hand-rolled perspective projection written onto DOM elements rather than a canvas, so the text stays selectable, the links stay clickable, and a screen reader still reads every panel while the ring turns.

• Rewind

  An undo history you can scrub, and that refuses to throw the future away. Drag the head and the interface reverts live under your finger rather than on release. Act from a past point and the abandoned future stays drawn on the rail as a branch you can walk back onto, instead of being silently destroyed the way every real undo stack destroys it. Controlled in the same shape as Ledger: it owns the rail, the gesture and the branch graph, and your reducer owns the states.

• Stream

  An AI response surface that streams the way live chat UIs stream. A shimmer while the model thinks, tokens arriving on an irregular clock and blurring into place, a generation caret riding the last word, and stop and regenerate controls that actually interrupt. The cadence rides the animation clock rather than timer chains, so pausing the bench freezes generation mid-word. Only the trailing window of tokens are live animated elements, and everything older folds into one static text node, so a long answer never accumulates a thousand springs. An invisible ghost of the full answer holds the final height, so neither the thinking-to-streaming swap nor the stream itself ever moves layout.

Appears In

• React Power-User Components
• React Stagger Animation
• React Layout Animation
• Framer Motion Components for React