---
name: "framer-motion-layout-id-morph"
description: "Morph active tabs, selection indicators, and cards using Framer Motion layoutId."
metadata:
  author: "Framer"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "animate active tab pill layoutId"
  - "shared element transition framer"
  - "morph card to modal layoutId"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

# Framer Motion layoutId Shared Morphs

Leverages Framer Motion layoutId prop to automatically animate shared element transitions across different components, active navigation pills, and expanded card overlays.

## When to Invoke
Invoke this skill whenever you need to:
- animate active tab pill layoutId
- shared element transition framer
- morph card to modal layoutId

## Execution SOP & Rules
1. Assign an identical layoutId string to the visual element in both collapsed and expanded states.
2. Wrap components in layoutId transitions with layout property to ensure border-radius scales cleanly.
3. Tune layout transitions with transition={{ type: 'spring', bounce: 0.2, duration: 0.6 }}.
4. Ensure elements with shared layoutId have distinct render conditions to prevent duplicate keys.

## Verification Checklist
- Run local linting, syntax validation, and type-checks before reporting completion.
- Ensure all created or modified files adhere to workspace boundaries and avoid uncommitted secrets.
- Verify tests or build commands exit cleanly with return code 0.