dd-morphing-surfaces

What problem does it solve?

It prevents jarring, unreliable UI morph animations by teaching a consistent React + Framer Motion component structure and motion rules for “morphing surfaces.”

Core Features & Use Cases

• Shell-first morphing architecture: animate a dedicated “shell” container (dimensions + clipping) while inner content crossfades and hands off attention.
• Reliability-focused motion rules: anchor transitions, avoid re-centering jitter, and replace brittle translate/scale patterns with dimension animation and clipping.
• Shared-layout with guardrails: use layoutId sparingly for a single continuity mark (e.g., dot/icon) to preserve visual continuity without flicker.
• Common failure mode fixes: avoid transform: scale() on the morphing shell, manage layout animation scale side effects, and protect text/input from distortion.

Quick Start

Ask the AI to generate a React + Framer Motion “morphing surface” component that uses a relative overflow-hidden shell, keyed AnimatePresence children with crossfades, and animates width/height (not scale), with at most one layoutId continuity element.