skills.rest
moonwell-fi
moonwell-fiOFFICIAL
Explore all skills by this author →
Website𝕏@MoonwellDeFiGitHub

dd-morphing-surfaces

Implement React and Framer Motion morphing surfaces with dimension animation and clipping.

Updated Aug 23, 2026
Search Tags:#react#crossfade#framer motion#ui animation#morphing transitions#layoutId#overflow hidden
One-click install
npx skills add https://github.com/moonwell-fi/moonwell-ai --skill dd-morphing-surfaces
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dd-morphing-surfaces
Source: https://github.com/moonwell-fi/moonwell-ai/tree/main/.claude/skills/dd-morphing-surfaces
Command: npx skills add https://github.com/moonwell-fi/moonwell-ai --skill dd-morphing-surfaces

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about dd-morphing-surfaces

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build morphing UI transitions in React without layout flicker?▼

To build morphing UI transitions without flicker in React, animate a dedicated overflow-hidden shell container's width and height while crossfading keyed inner content, avoiding scale transforms that cause distortion.

Why does my Framer Motion layout animation jitter during width and height changes?▼

Framer Motion layout animations jitter during width and height changes when content re-centers or uses brittle translate and scale patterns. Apply anchored transitions and animate shell dimensions to prevent distortion.

What is the best way to create a Dynamic Island style morphing surface in Framer Motion?▼

The best way to create a Dynamic Island style morphing surface is animating a relative overflow-hidden shell's dimensions with keyed AnimatePresence children crossfading, using at most one layoutId for visual continuity.

Can I use transform scale for expanding and collapsing dock-to-form components in React?▼

You should not use transform scale for expanding and collapsing dock-to-form components. Scale causes text and input distortion; animate width and height on the shell container with overflow clipping instead.

When should I avoid using layoutId for shared layout transitions in Framer Motion?▼

Avoid using layoutId excessively for shared layout transitions; restrict it to a single continuity mark like a dot or icon to preserve visual handoff without flicker or layout animation scale side effects.

Related Skills

Explore More Design & Creative Skills→
47thtechcorner47thtechcorner
21

framer-motion

Implement Disney's 12 animation principles with Framer Motion in React.

Community
Intermediate
javierhbrjavierhbr

ai-elements

Provide React components for AI chat and workflow interfaces.

Community
Intermediate
TenBeltzTenBeltz

motion-framer

Create React UI animations with motion components, variants, and gestures.

Official
Advanced
PatternsDevPatternsDev
235

view-transitions

Implement DOM transitions with the View Transitions API.

Official
Intermediate