The Complete Production SOP: How to Deploy and Run Framer Motion layoutId Shared Morphs in Autonomous AI Agents

---
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
---

import { motion } from 'framer-motion';
import { useState } from 'react';

const TABS = ['Overview', 'Analytics', 'Settings'] as const;

export function SegmentedNav() {
  const [activeTab, setActiveTab] = useState<string>(TABS[0]);

  return (
    <nav className="flex space-x-1 rounded-xl bg-slate-900 p-1.5">
      {TABS.map((tab) => {
        const isActive = activeTab === tab;
        return (
          <button
            key={tab}
            onClick={() => setActiveTab(tab)}
            className="relative rounded-lg px-4 py-2 text-sm font-medium text-white outline-none transition-colors"
          >
            {isActive && (
              <motion.span
                layoutId="activeTabPill"
                className="absolute inset-0 z-10 rounded-lg bg-indigo-600 shadow-md"
                transition={{ type: 'spring', bounce: 0.2, duration: 0.6 }}
              />
            )}
            <span className="relative z-20">{tab}</span>
          </button>
        );
      })}
    </nav>
  );
}