Motion & texture

Shared Element Transition / FLIP

Q: How do I implement a Shared Element Transition / FLIP?

Implement thumbnail-to-detail with the View Transitions API (or matchedGeometryEffect on iOS): shared name/id on both states, spring-ish ease ~300ms, and a no-op fallback when unsupported. Do not block navigation if the animation fails.

The same visual morphs continuously between two screens so the space still feels continuous.

Also known as hero transition · FLIP animation · morph transition

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Shared Element Transition / FLIP".

Implement thumbnail-to-detail with the View Transitions API (or matchedGeometryEffect on iOS): shared name/id on both states, spring-ish ease ~300ms, and a no-op fallback when unsupported. Do not block navigation if the animation fails.

Anatomy:
- First Last Invert Play: Measure old rect → render new → invert with transform → play to identity.
- view-transition-name / matched id: Same name on both states lets the runtime tween them.
- fallback: Unsupported browsers just hard-cut—never break navigation.

Preferred API / pattern: `View Transitions in Next / Framer layoutId`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

○Avoid: Different aspect ratios without object-fit handling
○Avoid: No fallback
○Avoid: Animating layout properties instead of transform
○Avoid: Shared transition on unrelated elements

In plain wordsHow people search for it

“tapping a thumbnail and watching it expand into the detail page”“the photo that seems to fly between two screens as the same object”“App Store cards that open into a full page”

AnatomyOpen for part names

First Last Invert Play: Measure old rect → render new → invert with transform → play to identity.
view-transition-name / matched id: Same name on both states lets the runtime tween them.
fallback: Unsupported browsers just hard-cut—never break navigation.

How to write itOpen for stack patterns

Web (HTML/CSS)View Transitions API / FLIP technique

React + Tailwind + shadcn/uiView Transitions in Next / Framer layoutId

SwiftUImatchedGeometryEffect

Ant Designcustom FLIP; no built-in shared-element helper

Notes

The ceiling of transitions: App Store expand, photo grid to viewer. Users feel “this object changed shape,” not “a new page replaced me.” On the web, View Transitions API is the modern path; FLIP is the manual school. Always progressive—hard cut is fine when unsupported.

Common mistakesHumans and models trip here

Different aspect ratios without object-fit handling: the morph warps faces.
No fallback: broken browsers get stuck mid-route.
Animating layout properties instead of transform: jank.
Shared transition on unrelated elements: motion that lies about identity.

More failure symptoms on AI broke it.

Related patterns

Spring AnimationMotion driven by stiffness and damping instead of a fixed duration curve—naturally overshoots, then settles.Easing / Timing FunctionHow speed is distributed over an animation’s duration—what makes motion feel mechanical or natural.CardA contained surface grouping related content and actions as one unit.Page / Route TransitionEnter/exit choreography on route change—direction carries hierarchy: forward in, back out.Lightbox / Image PreviewOpen a thumbnail into a full-screen stage with paging and pinch-zoom gestures.

Spotted a wrong name or missing pattern?

Message on X