### Install Framer Motion Skill

Source: https://github.com/alexsnchz/skills/blob/main/framer-motion/README.md

Install the framer-motion skill using the skills CLI. This is the recommended method for integrating specialized skills.

```bash
npx skills add alexsnchz/skills --skill framer-motion
```

```bash
npx skills add alexsnchz/skills
```

--------------------------------

### Informative Image Example

Source: https://github.com/alexsnchz/skills/blob/main/wcag-design/SKILL.md

Provides an example of an informative image with descriptive alt text.

```html
<img src="chart.png" alt="Sales by region 2024: North 35%, South 28%, East 22%, West 15%">
```

--------------------------------

### Drag and Drop Prompt

Source: https://github.com/alexsnchz/skills/blob/main/framer-motion/README.md

Example prompt for building a drag-and-drop component with constraints and elastic effects.

```markdown
Build a drag-and-drop component with constraints and an elastic effect at the boundaries
```

--------------------------------

### Install WCAG Design Skill

Source: https://github.com/alexsnchz/skills/blob/main/wcag-design/README.md

Install the WCAG Design skill using the skills CLI. This is the recommended method for integrating the skill into your development workflow.

```bash
npx skills add alexsnchz/skills --skill wcag-design
```

```bash
npx skills add alexsnchz/skills
```

--------------------------------

### Bundle Size Optimization Prompt

Source: https://github.com/alexsnchz/skills/blob/main/framer-motion/README.md

Example prompt for reducing the framer-motion bundle size in a Next.js app.

```markdown
How do I reduce the framer-motion bundle size in my Next.js app?
```

--------------------------------

### MotionValue vs State Prompt

Source: https://github.com/alexsnchz/skills/blob/main/framer-motion/README.md

Example prompt discussing when to use useMotionValue + style instead of useState + animate.

```markdown
When should I use useMotionValue + style instead of useState + animate?
```

--------------------------------

### Reduced Motion Prompt

Source: https://github.com/alexsnchz/skills/blob/main/framer-motion/README.md

Example prompt for making animations respect the OS prefers-reduced-motion setting.

```markdown
How do I make my animations respect the OS prefers-reduced-motion setting?
```

--------------------------------

### Sticky Horizontal Scroll Prompt

Source: https://github.com/alexsnchz/skills/blob/main/framer-motion/README.md

Example prompt for building a sticky horizontal scroll effect.

```markdown
Build a sticky horizontal scroll effect where sections slide sideways on vertical scroll
```

--------------------------------

### Reading Progress Bar Prompt

Source: https://github.com/alexsnchz/skills/blob/main/framer-motion/README.md

Example prompt for implementing a reading progress bar that advances with scroll.

```markdown
Implement a reading progress bar that advances as the user scrolls
```

--------------------------------

### Decorative Image Example

Source: https://github.com/alexsnchz/skills/blob/main/wcag-design/SKILL.md

Illustrates how to mark a decorative image with an empty alt attribute.

```html
<img src="divider.png" alt="">
```

--------------------------------

### Animated Counter Prompt

Source: https://github.com/alexsnchz/skills/blob/main/framer-motion/README.md

Example prompt for creating an animated counter that smoothly increments to a target number.

```markdown
Create an animated counter that smoothly increments to a target number
```

--------------------------------

### Variant Orchestration Prompt

Source: https://github.com/alexsnchz/skills/blob/main/framer-motion/README.md

Example prompt for defining variants to orchestrate animations between parent and child components.

```markdown
How do I define variants to orchestrate animations between a parent and its children?
```

--------------------------------

### Real-time Shadow Follow Prompt

Source: https://github.com/alexsnchz/skills/blob/main/framer-motion/README.md

Example prompt for making a card's shadow follow the user's cursor in real time without re-renders.

```markdown
I need a card's shadow to follow the user's cursor in real time without re-renders
```

--------------------------------

### Scroll Progress to Rotation Prompt

Source: https://github.com/alexsnchz/skills/blob/main/framer-motion/README.md

Example prompt for using useTransform to map scroll progress to continuous rotation.

```markdown
Use useTransform to map an element's scroll progress to a continuous rotation (clamp: false)
```

--------------------------------

### Page Transition Prompt

Source: https://github.com/alexsnchz/skills/blob/main/framer-motion/README.md

Example prompt for creating smooth page transitions in Next.js App Router using AnimatePresence.

```markdown
Create a smooth page transition in Next.js App Router using AnimatePresence
```

--------------------------------

### List Reordering Animation Prompt

Source: https://github.com/alexsnchz/skills/blob/main/framer-motion/README.md

Example prompt for animating list reordering when items are added or removed.

```markdown
How do I animate list reordering when items are added or removed?
```

--------------------------------

### Install Framer Motion

Source: https://github.com/alexsnchz/skills/blob/main/framer-motion/README.md

Install Framer Motion using npm. Choose Option A for existing projects or Option B for the updated naming convention. A minimum version of v11+ is recommended for React 18/19 compatibility.

```bash
# Option A (most common in existing projects)
npm install framer-motion

# Option B (updated naming)
npm install motion
```

--------------------------------

### Shared Element Transition Prompt

Source: https://github.com/alexsnchz/skills/blob/main/framer-motion/README.md

Example prompt for creating a shared element transition where an image expands to fill the screen.

```markdown
I want a gallery where clicking an image smoothly expands it to fill the screen (shared element transition)
```

--------------------------------

### LayoutId Tab Indicator Prompt

Source: https://github.com/alexsnchz/skills/blob/main/framer-motion/README.md

Example prompt for implementing a sliding tab indicator using layoutId.

```markdown
Implement a selected tab indicator that slides between tabs using layoutId
```

--------------------------------

### Basic Animation Prompt

Source: https://github.com/alexsnchz/skills/blob/main/framer-motion/README.md

Example prompt for animating a card entry with fade and slide effects using framer-motion.

```markdown
Animate a card entry with fade + slide using framer-motion
```

--------------------------------

### Spring Animation Prompt

Source: https://github.com/alexsnchz/skills/blob/main/framer-motion/README.md

Example prompt for creating a spring animation when a div changes position in the DOM.

```markdown
How do I make a div appear with a spring animation when it changes position in the DOM?
```

--------------------------------

### whileInView First Render Debugging Prompt

Source: https://github.com/alexsnchz/skills/blob/main/framer-motion/README.md

Example prompt for debugging why whileInView fires on every render instead of just the first time.

```markdown
whileInView fires on every render, not just the first time
```

--------------------------------

### Fade-in on Scroll Prompt

Source: https://github.com/alexsnchz/skills/blob/main/framer-motion/README.md

Example prompt for fading in sections on scroll, but only the first time.

```markdown
I want sections to fade in on scroll, but only the first time (once: true)
```

--------------------------------

### Delayed Navigation Animation Prompt

Source: https://github.com/alexsnchz/skills/blob/main/framer-motion/README.md

Example prompt for designing a navigation menu that animates its items with a delay.

```markdown
Design a navigation menu that animates its items with a delay between each when it opens
```

--------------------------------

### Swipeable Bottom Sheet Prompt

Source: https://github.com/alexsnchz/skills/blob/main/framer-motion/README.md

Example prompt for implementing a swipeable bottom sheet that closes on drag.

```markdown
Implement a swipeable bottom sheet that closes when the user drags it down fast enough
```

--------------------------------

### Layout Animation Jump Debugging Prompt

Source: https://github.com/alexsnchz/skills/blob/main/framer-motion/README.md

Example prompt for debugging why a layout animation jumps instead of animating smoothly.

```markdown
The layout animation jumps instead of animating smoothly — why?
```

--------------------------------

### Import Paths

Source: https://github.com/alexsnchz/skills/blob/main/framer-motion/SKILL.md

Shows different ways to import motion components depending on your project setup and React version.

```APIDOC
## Import Paths

```tsx
// Standard React projects (framer-motion package)
import { motion, AnimatePresence, MotionConfig } from "framer-motion"

// motion package (newer naming, same API)
import { motion, AnimatePresence } from "motion/react"

// Next.js Server Components — use client-side import
import * as motion from "motion/react-client"

// Bundle optimization (replaces `motion` component)
import * as m from "motion/react-m"
```

> Always check whether the project uses `framer-motion` or `motion`. They share an identical API. The `framer-motion` package is more common in existing codebases.
```

--------------------------------

### Staggered List Animation Prompt

Source: https://github.com/alexsnchz/skills/blob/main/framer-motion/README.md

Example prompt for animating a list of items to appear one by one with a cascade effect.

```markdown
I want a list of items to appear one by one with a cascade (stagger) effect
```

--------------------------------

### Magnetic Cursor Prompt

Source: https://github.com/alexsnchz/skills/blob/main/framer-motion/README.md

Example prompt for adding a magnetic cursor effect to a CTA button.

```markdown
Add a magnetic cursor effect to a CTA button
```

--------------------------------

### Exit Animation Debugging Prompt

Source: https://github.com/alexsnchz/skills/blob/main/framer-motion/README.md

Example prompt for debugging why an exit animation isn't playing despite using AnimatePresence.

```markdown
My exit animation isn't playing even though I have AnimatePresence
```

--------------------------------

### Accordion with layout animation

Source: https://github.com/alexsnchz/skills/blob/main/framer-motion/references/layout-animations.md

This example demonstrates how to use the `layout` prop to animate an accordion component. The `motion.div` container animates its size and position, while the `motion.h3` animates its position.

```tsx
function Accordion({
  content
}) {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <motion.div
      layout
      onClick={() => setIsOpen(!isOpen)}
      style={{ borderRadius: 8, overflow: "hidden" }}
    >
      <motion.h3 layout="position">Title</motion.h3>
      {isOpen && <p>{content}</p>}
    </motion.div>
  )
}
```

--------------------------------

### Import Paths for Motion in React

Source: https://github.com/alexsnchz/skills/blob/main/framer-motion/SKILL.md

Demonstrates different import paths for Motion (formerly Framer Motion) depending on the project setup and React version. Always check if the project uses `framer-motion` or `motion` as they share an identical API.

```tsx
import { motion, AnimatePresence, MotionConfig } from "framer-motion"

// motion package (newer naming, same API)
import { motion, AnimatePresence } from "motion/react"

// Next.js Server Components — use client-side import
import * as motion from "motion/react-client"

// Bundle optimization (replaces `motion` component)
import * as m from "motion/react-m"
```

--------------------------------

### Accessible Form Field Example

Source: https://github.com/alexsnchz/skills/blob/main/wcag-design/SKILL.md

Demonstrates a complete accessible form field with proper labeling, ARIA attributes, and error handling.

```html
<div class="field">
  <label for="email">
    Email address
    <span aria-hidden="true" class="required">*</span>
    <span class="sr-only">(required)</span>
  </label>
  <input
    type="email"
    id="email"
    name="email"
    autocomplete="email"
    aria-required="true"
    aria-describedby="email-hint email-error"
    aria-invalid="false"
  />
  <p id="email-hint" class="hint">We'll never share your email.</p>
  <p id="email-error" class="error" role="alert" hidden>
    Please enter a valid email address.
  </p>
</div>
```

--------------------------------

### Expanding card pattern with layoutId

Source: https://github.com/alexsnchz/skills/blob/main/framer-motion/references/layout-animations.md

Implement the expanding card pattern using `layoutId` for shared element transitions. This example shows how a card in a grid can expand to a larger view while maintaining its identity and animating smoothly.

```tsx
function CardGrid({
  cards
}) {
  const [selectedId, setSelectedId] = useState(null)

  return (
    <>
      {cards.map(card => (
        <motion.div
          key={card.id}
          layoutId={`card-${card.id}`}
          onClick={() => setSelectedId(card.id)}
          style={{ borderRadius: 12 }}
        >
          <motion.h2 layoutId={`card-title-${card.id}`}>{card.title}</motion.h2>
        </motion.div>
      ))}

      <AnimatePresence>
        {selectedId && (
          <motion.div
            layoutId={`card-${selectedId}`}
            className="expanded-card"
            style={{ borderRadius: 24 }}
          >
            <motion.h2 layoutId={`card-title-${selectedId}`}>
              {cards.find(c => c.id === selectedId).title}
            </motion.h2>
            <button onClick={() => setSelectedId(null)}>Close</button>
          </motion.div>
        )}
      </AnimatePresence>
    </>
  )
}
```

--------------------------------

### Standalone useSpring Animated Value

Source: https://github.com/alexsnchz/skills/blob/main/framer-motion/references/motion-values.md

Use `useSpring` as a standalone animated value, initializing it with a starting value. You can later update it with `.set()` to animate to a new value or `.jump()` to instantly snap to a value without spring physics.

```tsx
const y = useSpring(0)  // starts at 0

// Later:
y.set(100)    // springs to 100
y.jump(50)    // instantly snaps to 50 without spring
```

--------------------------------

### Motion Value API Methods

Source: https://github.com/alexsnchz/skills/blob/main/framer-motion/references/motion-values.md

Provides methods to get, set, jump, and subscribe to changes in a motion value. Use `.on()` to listen for value changes, animation start, or animation completion events.

```tsx
const x = useMotionValue(0)

x.get()           // read current value
x.set(100)
x.jump(100)
x.on("change", (latest) => console.log(latest))
x.on("animationStart", () => {})
x.on("animationComplete", () => {})
```

--------------------------------

### Transitions Configuration

Source: https://github.com/alexsnchz/skills/blob/main/framer-motion/SKILL.md

Explains how to configure different types of transitions, including springs, tweens, and keyframes, along with easing functions and delays.

```APIDOC
## 3. Transitions

Transitions define *how* values move between states.

```tsx
// Spring (default for physical/interactive feel)
transition={{ type: "spring", stiffness: 300, damping: 30 }}

// Tween (duration-based, predictable)
transition={{ type: "tween", duration: 0.5, ease: "easeInOut" }}

// Spring with visual duration (easier to reason about)
transition={{ type: "spring", visualDuration: 0.4, bounce: 0.25 }}

// Keyframe-specific timing
animate={{ x: [0, 100, 50, 150] }}
transition={{ times: [0, 0.3, 0.6, 1], duration: 1.5 }}

// Delay
transition={{ delay: 0.2, duration: 0.4 }}

// Per-property overrides
transition={{ duration: 1, x: { duration: 2, ease: "linear" } }}
```

### Easing values
Standard: `"linear"`, `"easeIn"`, `"easeOut"`, `"easeInOut"`, `"circIn"`, `"circOut"`, `"backIn"`, `"backOut"`, `"anticipate"`
Custom cubic bezier: `[0.17, 0.67, 0.83, 0.67]`
```

--------------------------------

### Spring Presets and Transition Configuration

Source: https://github.com/alexsnchz/skills/blob/main/framer-motion/references/motion-values.md

Provides a reference for spring physics parameters like stiffness and damping, and introduces `visualDuration` and `bounce` as an alternative, more intuitive way to configure spring transitions.

```tsx
transition={{ type: "spring", visualDuration: 0.3, bounce: 0.2 }}
// visualDuration: seconds to "visually" reach target
// bounce: 0 = no bounce, 0.5 = moderate, 1 = extreme
```

--------------------------------

### Transition with Delay

Source: https://github.com/alexsnchz/skills/blob/main/framer-motion/SKILL.md

Applies a delay before the animation starts. This is useful for sequencing animations or creating staggered effects.

```tsx
transition={{ delay: 0.2, duration: 0.4 }}
```

--------------------------------

### Parallax Effect Prompt

Source: https://github.com/alexsnchz/skills/blob/main/framer-motion/README.md

Example prompt for creating a parallax effect on a page hero using useScroll and useTransform.

```markdown
Create a parallax effect on the page hero using useScroll and useTransform
```

--------------------------------

### Drag Events

Source: https://github.com/alexsnchz/skills/blob/main/framer-motion/references/gestures-and-scroll.md

Handle drag start, drag, and drag end events to respond to user interactions during dragging.

```APIDOC
### Drag events

```tsx
<motion.div
  drag
  onDragStart={(event, info) => {
    console.log("Started at", info.point.x, info.point.y)
  }}
  onDrag={(event, info) => {
    // info.delta — distance since last event
    // info.offset — distance from origin
    // info.velocity — current velocity
    // info.point — position relative to page
  }}
  onDragEnd={(event, info) => {
    console.log("Velocity:", info.velocity.x, info.velocity.y)
    // Common pattern: dismiss if dragged far enough or fast enough
    if (Math.abs(info.velocity.x) > 500 || Math.abs(info.offset.x) > 150) {
      dismiss()
    }
  }}
/>
```
```

--------------------------------

### useAnimate Selectors and Control

Source: https://github.com/alexsnchz/skills/blob/main/framer-motion/references/motion-values.md

Demonstrates how `animate` function from `useAnimate` accepts CSS selectors scoped to a ref and how to control animations using the returned animation object.

```tsx
animate("li", ...)          // all <li> children of scope
animate(".card", ...)       // all .card children of scope
animate(specificRef, ...)   // a specific element ref
```

```tsx
const animation = animate(element, { x: 100 }, { duration: 1 })

await animation                   // wait for completion
animation.cancel()                // stop immediately
animation.complete()              // jump to end
animation.pause() / .play()       // control playback
animation.time = 0.5              // scrub to specific time
animation.speed = 2               // playback rate multiplier
```

--------------------------------

### The `motion` Component

Source: https://github.com/alexsnchz/skills/blob/main/framer-motion/SKILL.md

Demonstrates how to use the `motion` component to animate standard HTML or SVG elements by prefixing them.

```APIDOC
## The `motion` component — foundation of everything

Any HTML or SVG element can be animated by prefixing with `motion.`: 

```tsx
<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  exit={{ opacity: 0, y: -20 }}
  transition={{ duration: 0.4, ease: "easeOut" }}
/>
```

### Key animation props

| Prop | Purpose |
|------|---------|
| `initial` | Starting state (before mount or animation) |
| `animate` | Target animated state |
| `exit` | State when component is removed (requires `AnimatePresence`) |
| `transition` | Controls timing, easing, type (tween/spring) |
| `style` | Supports MotionValues as live style bindings |
| `variants` | Named animation states defined externally |
| `whileHover` | Animate while hovered |
| `whileTap` | Animate while pressed |
| `whileFocus` | Animate while focused |
| `whileDrag` | Animate while dragging |
| `whileInView` | Animate while in viewport |
| `layout` | Auto-animate layout changes |
| `layoutId` | Shared element transition between components |

### Custom components

```tsx
// React 19 — pass ref via props
const MyDiv = (props) => <div ref={props.ref} {...props} />
const MotionMyDiv = motion.create(MyDiv)

// React 18 — forwardRef pattern
const MyDiv = React.forwardRef((props, ref) => <div ref={ref} />)
const MotionMyDiv = motion.create(MyDiv)
```
```

--------------------------------

### Tap/Press Animations and Events

Source: https://github.com/alexsnchz/skills/blob/main/framer-motion/references/gestures-and-scroll.md

Animate elements when tapped or pressed and handle tap start, end, and cancel events.

```APIDOC
## Tap / Press

```tsx
<motion.button
  whileTap={{ scale: 0.95, backgroundColor: "#1d4ed8" }}
/>

// Event handlers
<motion.div
  onTap={(event, info) => console.log("tapped at", info.point)}
  onTapStart={(event, info) => {}}
  onTapCancel={(event, info) => {}}   // pointer released outside element
/>
```
```

--------------------------------

### Semantic HTML vs. Div Soup

Source: https://github.com/alexsnchz/skills/blob/main/wcag-design/SKILL.md

Demonstrates the correct use of semantic HTML elements for structure and accessibility, contrasting it with the less accessible 'div soup' approach.

```html
<!-- ✅ CORRECT: Semantic HTML -->
<header>…</header>
<nav aria-label="Main navigation">…</nav>
<main>
  <article>…</article>
  <aside>…</aside>
</main>
<footer>…</footer>

<!-- ❌ WRONG: div soup -->
<div class="header">…</div>
<div class="nav">…</div>
```

--------------------------------

### List with Exit Animations using popLayout

Source: https://github.com/alexsnchz/skills/blob/main/framer-motion/SKILL.md

Implement exit animations for lists using `AnimatePresence` with `mode="popLayout"`. The `layout` prop on `motion.li` enables smooth reordering.

```tsx
<AnimatePresence mode="popLayout">
  {items.map(item => (
    <motion.li
      key={item.id}
      layout
      initial={{ opacity: 0, x: -20 }}
      animate={{ opacity: 1, x: 0 }}
      exit={{ opacity: 0, x: 20 }}
    />
  ))}
</AnimatePresence>
```

--------------------------------

### Creating Custom Motion Components

Source: https://github.com/alexsnchz/skills/blob/main/framer-motion/SKILL.md

Illustrates how to create custom animated components using `motion.create`. This is necessary when animating custom React components that don't directly render HTML or SVG elements.

```tsx
// React 19 — pass ref via props
const MyDiv = (props) => <div ref={props.ref} {...props} />
const MotionMyDiv = motion.create(MyDiv)

// React 18 — forwardRef pattern
const MyDiv = React.forwardRef((props, ref) => <div ref={ref} />)
const MotionMyDiv = motion.create(MyDiv)
```

--------------------------------

### Magnetic Button with `useMotionValue` and `useSpring`

Source: https://context7.com/alexsnchz/skills/llms.txt

Create a button that follows the cursor with a springy effect. `useMotionValue` tracks cursor position, and `useSpring` smooths the animation.

```tsx
import {
  useMotionValue, useTransform, useSpring, useVelocity,
  useMotionTemplate, useMotionValueEvent, motion
} from "framer-motion"

// Magnetic button — cursor-following with spring smoothing
function MagneticButton({ children }) {
  const ref = useRef(null)
  const x = useMotionValue(0)
  const y = useMotionValue(0)
  const springX = useSpring(x, { stiffness: 200, damping: 20 })
  const springY = useSpring(y, { stiffness: 200, damping: 20 })

  const handleMove = (e: React.MouseEvent) => {
    const rect = ref.current!.getBoundingClientRect()
    x.set((e.clientX - rect.left - rect.width / 2) * 0.3)
    y.set((e.clientY - rect.top - rect.height / 2) * 0.3)
  }

  return (
    <motion.button
      ref={ref}
      style={{ x: springX, y: springY }}
      onMouseMove={handleMove}
      onMouseLeave={() => { x.set(0); y.set(0) }}
    >
      {children}
    </motion.button>
  )
}
```

--------------------------------

### Next.js App Router Page Transition

Source: https://github.com/alexsnchz/skills/blob/main/framer-motion/SKILL.md

Implement page transitions using `AnimatePresence` and `motion.main` with unique `key` props for each route. Define `initial`, `animate`, and `exit` states for smooth transitions.

```tsx
// layout.tsx — wrap children
<AnimatePresence mode="wait">
  <motion.main
    key={pathname}
    initial={{ opacity: 0, x: 20 }}
    animate={{ opacity: 1, x: 0 }}
    exit={{ opacity: 0, x: -20 }}
    transition={{ duration: 0.3 }}
  >
    {children}
  </motion.main>
</AnimatePresence>
```

--------------------------------

### Spring Transition Configuration

Source: https://github.com/alexsnchz/skills/blob/main/framer-motion/SKILL.md

Configures a spring animation, which is the default for a physical and interactive feel. Adjust `stiffness` and `damping` for different behaviors.

```tsx
transition={{ type: "spring", stiffness: 300, damping: 30 }}
```

--------------------------------

### Accessible Modal Dialog HTML Structure

Source: https://github.com/alexsnchz/skills/blob/main/wcag-design/README.md

Example HTML structure for an accessible modal dialog, including ARIA attributes for screen readers and focus management.

```html
<dialog
  role="dialog"
  aria-modal="true"
  aria-labelledby="modal-title"
  aria-describedby="modal-desc"
  id="confirm-modal"
>
  <h2 id="modal-title">Confirm deletion</h2>
  <p id="modal-desc">This action cannot be undone. Are you sure?</p>
  <button type="button" autofocus>Cancel</button>
  <button type="button">Delete</button>
</dialog>
```

--------------------------------

### Informative Image Alt Text

Source: https://context7.com/alexsnchz/skills/llms.txt

Provide a descriptive alt attribute for informative images that convey content or data. This example shows alt text for a sales chart.

```html
<img src="q4-chart.png" alt="Q4 2024 sales by region: North 35%, South 28%, East 22%, West 15%">
```

--------------------------------

### Modal with Animated Backdrop and Content

Source: https://github.com/alexsnchz/skills/blob/main/framer-motion/references/patterns-and-performance.md

Implement a modal component with an animated backdrop and content. Use `AnimatePresence` to manage the mounting and unmounting of modal elements, applying entrance and exit animations.

```tsx
function Modal({ isOpen, onClose, children }) {
  return (
    <AnimatePresence>
      {isOpen && (
        <>
          {/* Backdrop */}
          <motion.div
            key="backdrop"
            className="fixed inset-0 bg-black/50"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            onClick={onClose}
          />

          {/* Modal */}
          <motion.div
            key="modal"
            className="fixed inset-x-4 top-1/2 -translate-y-1/2 bg-white rounded-2xl p-6"
            initial={{ opacity: 0, y: 20, scale: 0.97 }}
            animate={{ opacity: 1, y: 0, scale: 1 }}
            exit={{ opacity: 0, y: 20, scale: 0.97 }}
            transition={{ type: "spring", stiffness: 400, damping: 30 }}
          >
            {children}
          </motion.div>
        </>
      )}
    </AnimatePresence>
  )
}
```

--------------------------------

### Sequence Animations with useAnimate

Source: https://github.com/alexsnchz/skills/blob/main/framer-motion/references/patterns-and-performance.md

Chain animations in a specific order by using `await` with `useAnimate`. This ensures that each animation completes before the next one begins, allowing for sequential storytelling.

```tsx
const [scope, animate] = useAnimate()

const sequence = async () => {
  // Each await waits for the previous animation to finish
  await animate(".hero", { opacity: 1 }, { duration: 0.5 })
  await animate(".subtitle", { opacity: 1, y: 0 }, { duration: 0.4 })
  animate(".cta", { opacity: 1, scale: 1 }, { duration: 0.3 })  // no await = fire and forget
}
```

--------------------------------

### Animated Tab Indicator with layoutId

Source: https://context7.com/alexsnchz/skills/llms.txt

Implement shared-element transitions between components using layoutId. This example shows an animated tab indicator that smoothly moves between selected tabs.

```tsx
import { motion, AnimatePresence, LayoutGroup } from "framer-motion"

// Animated tab indicator (layoutId shared element)
function Tabs({ tabs, selected, onSelect }) {
  return (
    <LayoutGroup>
      <div style={{ display: "flex", borderBottom: "1px solid #e5e7eb" }}>
        {tabs.map(tab => (
          <button
            key={tab.id}
            onClick={() => onSelect(tab.id)}
            style={{ position: "relative", padding: "8px 16px", background: "none", border: "none", cursor: "pointer" }}
          >
            {tab.label}
            {selected === tab.id && (
              <motion.div
                layoutId="tab-indicator"
                style={{ position: "absolute", bottom: 0, left: 0, right: 0, height: 2, background: "#3b82f6" }}
                transition={{ type: "spring", stiffness: 400, damping: 30 }}
              />
            )}
          </button>
        ))}
      </div>
    </LayoutGroup>
  )
}
```

--------------------------------

### Gesture Props for Interactive Animations

Source: https://github.com/alexsnchz/skills/blob/main/framer-motion/SKILL.md

Utilize `whileHover`, `whileTap`, and `whileFocus` props for quick, interactive animations on elements like buttons.

```tsx
<motion.button
  whileHover={{ scale: 1.05, boxShadow: "0 4px 20px rgba(0,0,0,0.15)" }}
  whileTap={{ scale: 0.97 }}
  whileFocus={{ outline: "2px solid #3b82f6" }}
  transition={{ type: "spring", stiffness: 400, damping: 20 }}
/>
```

--------------------------------

### Reading Motion Value in React State

Source: https://context7.com/alexsnchz/skills/llms.txt

Subscribe to changes in a motion value using `useMotionValueEvent` to update React state. This example displays the current x-position of a draggable element.

```tsx
// Reading a motion value in React state (event listener)
function PositionDisplay() {
  const x = useMotionValue(0)
  const [display, setDisplay] = useState(0)
  useMotionValueEvent(x, "change", (latest) => setDisplay(Math.round(latest)))

  return (
    <>
      <motion.div drag="x" style={{ x }} />
      <p>x: {display}px</p>
    </>
  )
}
```

--------------------------------

### Synchronizing Layout and Exit Animations with `LayoutGroup` and `mode="sync"`

Source: https://github.com/alexsnchz/skills/blob/main/framer-motion/references/layout-animations.md

When layout and exit animations conflict, wrap the relevant components in `LayoutGroup`. Use `mode="sync"` within `AnimatePresence` to ensure exit animations complete before layout changes occur.

```tsx
<LayoutGroup>
  <motion.ul layout>
    <AnimatePresence mode="sync">
      {items.map(item => (
        <motion.li layout key={item.id} exit={{ opacity: 0 }} />
      ))}
    </AnimatePresence>
  </motion.ul>
</LayoutGroup>
```

--------------------------------

### Element-Relative Scroll Animations

Source: https://context7.com/alexsnchz/skills/llms.txt

Animate elements based on their position within the viewport using `useScroll` with target and offset options. This example fades and scales a section as it scrolls into view.

```tsx
function FadeSection({ children }) {
  const ref = useRef(null)
  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ["start end", "end start"]
    // ["element top hits viewport bottom", "element bottom hits viewport top"]
  })
  const opacity = useTransform(scrollYProgress, [0, 0.3, 0.7, 1], [0, 1, 1, 0])
  const scale  = useTransform(scrollYProgress, [0, 0.3], [0.9, 1])
  return <motion.section ref={ref} style={{ opacity, scale }}>{children}</motion.section>
}
```

--------------------------------

### Horizontal Scroll-Linked Animation

Source: https://github.com/alexsnchz/skills/blob/main/framer-motion/references/gestures-and-scroll.md

Animate elements horizontally as the user scrolls vertically. This example uses a sticky container and transforms the `x` property of a child `motion.div` based on `scrollYProgress`.

```tsx
function HorizontalScroll() {
  const ref = useRef(null)
  const { scrollYProgress } = useScroll({ target: ref })
  const x = useTransform(scrollYProgress, [0, 1], ["0%", "-75%"])

  return (
    <section ref={ref} style={{ height: "400vh" }}>
      <div style={{ position: "sticky", top: 0, overflow: "hidden" }}>
        <motion.div style={{ x, display: "flex", width: "400%" }}>
          {panels.map(panel => <Panel key={panel.id} {...panel} />)}
        </motion.div>
      </div>
    </section>
  )
}
```

--------------------------------

### Cursor-Tracked Radial Gradient with `useMotionTemplate`

Source: https://context7.com/alexsnchz/skills/llms.txt

Generate a dynamic radial gradient that follows the cursor using `useMotionValue` for position and `useMotionTemplate` to construct the gradient string.

```tsx
// Cursor-tracked radial gradient card (useMotionTemplate)
function GradientCard() {
  const mouseX = useMotionValue(50)
  const mouseY = useMotionValue(50)
  const background = useMotionTemplate`
    radial-gradient(circle at ${mouseX}% ${mouseY}%, #3b82f6 0%, transparent 60%)
  `
  return (
    <motion.div
      style={{ background, padding: 32, borderRadius: 16 }}
      onMouseMove={(e) => {
        const rect = e.currentTarget.getBoundingClientRect()
        mouseX.set(((e.clientX - rect.left) / rect.width) * 100)
        mouseY.set(((e.clientY - rect.top) / rect.height) * 100)
      }}
    >
      Hover me
    </motion.div>
  )
}
```

--------------------------------

### External Control with useAnimationControls

Source: https://context7.com/alexsnchz/skills/llms.txt

Use useAnimationControls to trigger variant animations from external sources like WebSockets or data fetches. The controls object allows starting, stopping, and controlling animations imperatively.

```tsx
import { useAnimate, stagger, useAnimationControls, motion } from "framer-motion"
import { useEffect } from "react"

// External control (useAnimationControls) — triggered by WebSocket
function AlertPanel({ socket }) {
  const controls = useAnimationControls()

  useEffect(() => {
    socket.on("alert", async () => {
      await controls.start("pulse")
      controls.start("idle")
    })
  }, [socket])

  return (
    <motion.div
      animate={controls}
      initial="idle"
      variants={{
        idle: { boxShadow: "0 0 0 rgba(239,68,68,0)" },
        pulse: {
          boxShadow: ["0 0 0 rgba(239,68,68,0)", "0 0 20px rgba(239,68,68,0.8)", "0 0 0 rgba(239,68,68,0)"],
          transition: { duration: 0.8 }
        }
      }}
      style={{ padding: 24, borderRadius: 12, background: "#1a1a1a" }}
    >
      Live Status
    </motion.div>
  )
}
```

--------------------------------

### Spring Transition with Visual Duration

Source: https://github.com/alexsnchz/skills/blob/main/framer-motion/SKILL.md

Configures a spring animation using `visualDuration` for easier reasoning about its perceived length, alongside `bounce` for controlling the overshoot.

```tsx
transition={{ type: "spring", visualDuration: 0.4, bounce: 0.25 }}
```

--------------------------------

### TypeScript Types for Framer Motion

Source: https://github.com/alexsnchz/skills/blob/main/framer-motion/references/patterns-and-performance.md

Import and utilize Framer Motion's TypeScript types for enhanced code autocompletion and type safety. This example shows how to define typed variants and component props.

```typescript
import type {
  Variants,
  MotionProps,
  PanInfo,
  AnimationControls,
  MotionValue,
  Transition,
  TargetAndTransition,
} from "framer-motion"

// Typed variants example
const variants: Variants = {
  hidden: { opacity: 0, y: 20 },
  visible: { opacity: 1, y: 0 }
}

// Component that accepts motion props
interface CardProps extends MotionProps {
  title: string
}
```

--------------------------------

### Complex Diagram with Alt Text and Description

Source: https://github.com/alexsnchz/skills/blob/main/wcag-design/SKILL.md

Shows how to provide accessible alt text for complex diagrams, supplemented by a detailed description in a figcaption.

```html
<figure>
  <img src="architecture.png" alt="System architecture diagram" aria-describedby="arch-desc">
  <figcaption id="arch-desc">
    Three-tier architecture: client tier connects to API gateway,
    which routes to microservices cluster, backed by PostgreSQL and Redis.
  </figcaption>
</figure>
```

--------------------------------

### Reduce Bundle Size with LazyMotion and domAnimation

Source: https://github.com/alexsnchz/skills/blob/main/framer-motion/references/patterns-and-performance.md

Optimize bundle size by using `LazyMotion` with `domAnimation`. This approach defers loading animation features until they are needed, significantly reducing the initial JavaScript payload.

```tsx
import { LazyMotion, domAnimation, m } from "framer-motion"

// domAnimation (+15KB): animations, variants, exit, tap/hover/focus gestures
// domMax (+17KB): domAnimation + drag, layout, pan gestures

function App({ children }) {
  return (
    <LazyMotion features={domAnimation}>
      {children}
    </LazyMotion>
  )
}

// Replace <motion.div> with <m.div>
function MyComponent() {
  return <m.div animate={{ opacity: 1 }} />
}
```

--------------------------------

### Common useTransform Patterns

Source: https://github.com/alexsnchz/skills/blob/main/framer-motion/references/motion-values.md

Illustrates common patterns for `useTransform`, including scroll-linked parallax effects, velocity-based scaling for a rubberbanding feel, and time-based perpetual rotation.

```tsx
// Scroll-linked parallax
const { scrollY } = useScroll()
const y = useTransform(scrollY, [0, 500], [0, -150])    // parallax offset
const opacity = useTransform(scrollY, [0, 300], [1, 0]) // fade on scroll

// Velocity-based scale (rubberbanding feel)
const xVelocity = useVelocity(x)
const scale = useTransform(xVelocity, [-3000, 0, 3000], [1.3, 1, 1.3], { clamp: false })

// Time-based perpetual rotation
const time = useTime()
const rotate = useTransform(time, [0, 3000], [0, 360], { clamp: false })
```

--------------------------------

### Scroll Progress Bar Animation

Source: https://github.com/alexsnchz/skills/blob/main/framer-motion/references/gestures-and-scroll.md

Implement a fixed progress bar that visually represents the user's scroll progress along the page. Use `useScroll` to get `scrollYProgress` and `useSpring` to animate the `scaleX` transform for a smooth effect.

```tsx
function ProgressBar() {
  const { scrollYProgress } = useScroll()
  const scaleX = useSpring(scrollYProgress, { stiffness: 200, damping: 30 })

  return (
    <motion.div
      style={{
        scaleX,
        transformOrigin: "left",
        position: "fixed", top: 0, left: 0, right: 0,
        height: 3,
        background: "#3b82f6"
      }}
    />
  )
}
```

--------------------------------

### Framer Motion Import Statements

Source: https://github.com/alexsnchz/skills/blob/main/framer-motion/README.md

Use the appropriate import statement for Framer Motion depending on your project setup. This ensures compatibility with different environments like standard React projects, Next.js Server Components, and optimized bundles using LazyMotion.

```javascript
import { motion } from "framer-motion"
```

```javascript
import { motion } from "motion/react"
```

```javascript
import * as motion from "motion/react-client"
```

```javascript
import { m } from "framer-motion"
```

--------------------------------

### Scroll Velocity Effect for Natural Scrolling Feel

Source: https://github.com/alexsnchz/skills/blob/main/framer-motion/references/gestures-and-scroll.md

Apply a skew effect to an element based on scroll velocity to simulate a more natural scrolling feel. Use `useScroll` to get scroll data and `useVelocity` to calculate scroll speed, then `useTransform` and `useSpring` for animation.

```tsx
function ScrollSkew() {
  const { scrollY } = useScroll()
  const scrollVelocity = useVelocity(scrollY)

  // Negative clamp: tilt forward when scrolling fast, then spring back
  const skewY = useTransform(scrollVelocity, [-2000, 0, 2000], [5, 0, -5])
  const smoothSkew = useSpring(skewY, { stiffness: 300, damping: 30 })

  return (
    <motion.div style={{ skewY: smoothSkew }}>
      {children}
    </motion.div>
  )
}
```

--------------------------------

### Layout Animations for Smooth Transitions

Source: https://github.com/alexsnchz/skills/blob/main/framer-motion/SKILL.md

Add the `layout` prop to any `motion` element to automatically animate changes in its size or position, enabling smooth UI transitions like accordions.

```tsx
// Accordion that animates open/close
function Accordion({ isOpen, children }) {
  return (
    <motion.div layout className="accordion">
      {isOpen && <motion.div layout>{children}</motion.div>}
    </motion.div>
  )
}

// Shared element transition (magic move between components)
// Both components must have the same layoutId
function List({ items, selectedId, onSelect }) {
  return items.map(item => (
    <motion.li key={item.id} onClick={() => onSelect(item.id)}>
      {selectedId === item.id && (
        <motion.div layoutId="selected-indicator" className="underline" />
      )}
      {item.label}
    </motion.li>
  ))
}
```

--------------------------------

### CSS for Minimum Touch Target Sizes

Source: https://context7.com/alexsnchz/skills/llms.txt

Implements WCAG 2.5.5 / 2.5.8 by ensuring interactive elements meet minimum size requirements for touch targets.

```css
/* WCAG 2.5.5 / 2.5.8: Minimum touch target sizes */
button, a, [role="button"], input, select, textarea {
  min-height: 44px;
  min-width: 44px;
  padding-inline: 1rem;
}
```

--------------------------------

### Respect OS Reduced Motion Preference with MotionConfig

Source: https://github.com/alexsnchz/skills/blob/main/framer-motion/references/patterns-and-performance.md

Use `MotionConfig` with the `reducedMotion` prop set to `"user"` to respect the operating system's reduced motion settings. This enhances accessibility by disabling or reducing animations for users who prefer it.

```tsx
// Respect OS reduced-motion preference
<MotionConfig reducedMotion="user">
  <App />
</MotionConfig>
```