Claude Code और Framer Motion: Motion for React की व्यावहारिक गाइड

कई developers अभी भी Framer Motion नाम से search करते हैं, लेकिन current official React docs इसे Motion for React के रूप में present करते हैं। नए code में motion package install करें और React APIs को motion/react से import करें। अगर existing app पहले से framer-motion पर standard है, तो बिना decision दोनों imports mix न करें। नए implementation के लिए official Motion for React documentation को source of truth मानना बेहतर है।

Claude Code animation का काम तेज कर सकता है, लेकिन product judgment अपने आप नहीं देगा। अगर prompt सिर्फ “इसे smooth बना दो” कहता है, तो result में unnecessary bounce, Reduced Motion की कमी, या parent component जल्दी unmount होने की वजह से broken exit animation आ सकता है। Masa ने internal dashboard में यही test किया: पहली version demo में अच्छी दिखी, लेकिन cards बहुत move कर रहे थे, notifications बिना exit animation गायब हो रही थीं, और scroll header low-end laptop पर heavy लग रहा था।

इस guide में Claude Code को constrained collaborator की तरह use किया गया है। पहले intent, scope, accessibility और verification तय करें, फिर code change मांगें। नीचे दिए गए TSX examples npm install motion के बाद React project में copy-paste करके चलाए जा सकते हैं। Next.js या Astro में इन्हें client component के रूप में रखें।

पहले constraints लिखें

Animation decoration नहीं है। इसका काम state change को समझने योग्य बनाना है। Claude Code को prompt देने से पहले ये बातें साफ करें।

निर्णय	Claude Code को क्या बताना है	Review में क्या देखना है
उद्देश्य	कौन सा state change समझाना है	Motion understanding बढ़ा रहा है या नहीं
Scope	कौन से files छूने हैं और कौन से नहीं	Unrelated refactor तो नहीं आया
API	motion/react, Reduced Motion	Imports docs से match करते हैं
Verification	Manual use, keyboard, slow device	Test वास्तविक usage जैसा है

Workflow इस तरह रखें:

Intent और constraints
  -> Claude Code prompt
  -> Motion for React implementation
  -> manual और accessibility verification
  -> focused follow-up prompt

पहला prompt ऐसा हो सकता है:

इस existing React component में Motion for React animation जोड़ें।
Requirements:
- नई Motion APIs `motion/react` से import करें
- data fetching, form submit, routing logic न बदलें
- Reduced Motion support करें
- opacity और transform को प्राथमिकता दें
- layout shift न बनाएं
- change के साथ manual test checklist दें

यह prompt Claude Code को साफ boundary देता है। Web पर पुराने framer-motion examples बहुत हैं, इसलिए import source को explicitly लिखना जरूरी है।

Use case 1: card list animation

Dashboard, article grid और feature cards में हल्का stagger उपयोगी होता है। उद्देश्य cards को dramatic बनाना नहीं, बल्कि reading order बनाना है। Masa के test में 6 cards के लिए 0.06 से 0.09 second ठीक लगा; इससे ज्यादा delay interaction को slow महसूस कराता है।

import { motion, useReducedMotion } from "motion/react";

type Feature = {
  id: string;
  title: string;
  body: string;
  metric: string;
};

const demoFeatures: Feature[] = [
  {
    id: "review",
    title: "Review queue",
    body: "Claude Code के generated changes जिन्हें human review चाहिए।",
    metric: "8 items",
  },
  {
    id: "motion",
    title: "Motion cleanup",
    body: "Short transitions screen changes समझाते हैं, काम slow नहीं करते।",
    metric: "14%",
  },
  {
    id: "a11y",
    title: "Reduced Motion",
    body: "Large movement users के लिए calm fade में बदल जाता है।",
    metric: "Ready",
  },
];

export function AnimatedFeatureCards({
  items = demoFeatures,
}: {
  items?: Feature[];
}) {
  const shouldReduceMotion = useReducedMotion();

  const container = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: shouldReduceMotion ? 0 : 0.08,
      },
    },
  };

  const card = {
    hidden: {
      opacity: 0,
      y: shouldReduceMotion ? 0 : 16,
    },
    visible: {
      opacity: 1,
      y: 0,
      transition: {
        duration: 0.32,
        ease: "easeOut",
      },
    },
  };

  return (
    <motion.section
      aria-label="Feature cards"
      variants={container}
      initial="hidden"
      animate="visible"
      style={{
        display: "grid",
        gap: 16,
        gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
      }}
    >
      {items.map((item) => (
        <motion.article
          key={item.id}
          variants={card}
          whileHover={shouldReduceMotion ? undefined : { y: -4 }}
          style={{
            border: "1px solid #d9e2ec",
            borderRadius: 12,
            padding: 20,
            background: "#ffffff",
            boxShadow: "0 8px 24px rgba(15, 23, 42, 0.08)",
          }}
        >
          <p style={{ margin: 0, color: "#2563eb", fontWeight: 700 }}>
            {item.metric}
          </p>
          <h3 style={{ margin: "8px 0", fontSize: 18 }}>{item.title}</h3>
          <p style={{ margin: 0, lineHeight: 1.7, color: "#475569" }}>
            {item.body}
          </p>
        </motion.article>
      ))}
    </motion.section>
  );
}

Review में stable key, transform based movement और Reduced Motion behavior देखें। Follow-up prompt में कहें: “12 cards होने पर भी list तुरंत usable रहे, stagger उसी हिसाब से adjust करें।“

Use case 2: notifications with exit

AnimatePresence React tree से हटते हुए elements को exit animation देता है। Official AnimatePresence docs बताते हैं कि direct children के पास stable key होना चाहिए। Common failure यह है कि पूरा notification container conditional render होता है और child exit चलने से पहले parent unmount हो जाता है।

import { useState } from "react";
import { AnimatePresence, motion } from "motion/react";

type Toast = {
  id: number;
  message: string;
};

let nextToastId = 1;

export function AnimatedNotifications() {
  const [toasts, setToasts] = useState<Toast[]>([
    { id: 0, message: "Saved successfully" },
  ]);

  function addToast() {
    const id = nextToastId++;
    setToasts((current) => [
      ...current,
      { id, message: `Background job ${id} finished` },
    ]);
  }

  function dismissToast(id: number) {
    setToasts((current) => current.filter((toast) => toast.id !== id));
  }

  return (
    <div>
      <button type="button" onClick={addToast}>
        Add notification
      </button>

      <div
        aria-live="polite"
        style={{
          position: "fixed",
          right: 24,
          top: 24,
          display: "grid",
          gap: 12,
          width: "min(360px, calc(100vw - 48px))",
        }}
      >
        <AnimatePresence initial={false} mode="popLayout">
          {toasts.map((toast) => (
            <motion.div
              layout
              key={toast.id}
              initial={{ opacity: 0, x: 40, scale: 0.96 }}
              animate={{ opacity: 1, x: 0, scale: 1 }}
              exit={{ opacity: 0, x: 40, scale: 0.96 }}
              transition={{ duration: 0.2, ease: "easeOut" }}
              style={{
                borderRadius: 10,
                border: "1px solid #cbd5e1",
                background: "#ffffff",
                padding: 16,
                boxShadow: "0 12px 30px rgba(15, 23, 42, 0.16)",
              }}
            >
              <p style={{ margin: "0 0 12px", color: "#0f172a" }}>
                {toast.message}
              </p>
              <button type="button" onClick={() => dismissToast(toast.id)}>
                Dismiss
              </button>
            </motion.div>
          ))}
        </AnimatePresence>
      </div>
    </div>
  );
}

Claude Code से यह भी check करवाएं कि zero notifications पर container mounted रहता है, keyboard से dismiss हो सकता है, और aria-live ज्यादा noise नहीं करता। Notification बार-बार दिखता है, इसलिए शांत behavior ज्यादा महत्वपूर्ण है।

Use case 3: scroll progress

Long guides, onboarding और landing pages में progress indicator reader को orientation देता है। useScroll page या element का scroll progress MotionValue के रूप में देता है। useSpring से progress bar smoother लगता है। हर section को parallax scene न बनाएं; Reduced Motion enabled हो तो बड़े movement हटाएं।

import { useRef } from "react";
import {
  motion,
  useReducedMotion,
  useScroll,
  useSpring,
  useTransform,
} from "motion/react";

const sections = [
  {
    title: "Requirement freeze करें",
    body: "Edit से पहले Claude Code को goal, target files और boundaries दें।",
  },
  {
    title: "कम move करें",
    body: "पहले opacity और transform से understanding support करें।",
  },
  {
    title: "Real path verify करें",
    body: "Publish से पहले slow device, keyboard और Reduced Motion test करें।",
  },
];

export function ScrollReadingProgress() {
  const articleRef = useRef<HTMLElement | null>(null);
  const shouldReduceMotion = useReducedMotion();
  const { scrollYProgress } = useScroll({
    target: articleRef,
    offset: ["start start", "end end"],
  });

  const scaleX = useSpring(scrollYProgress, {
    stiffness: 120,
    damping: 28,
    mass: 0.2,
  });
  const y = useTransform(scrollYProgress, [0, 1], [0, -48]);

  return (
    <article ref={articleRef} style={{ position: "relative", padding: 24 }}>
      <motion.div
        aria-hidden="true"
        style={{
          position: "sticky",
          top: 0,
          zIndex: 10,
          height: 4,
          scaleX: shouldReduceMotion ? 1 : scaleX,
          transformOrigin: "0% 50%",
          background: "#2563eb",
        }}
      />

      <motion.header
        style={{
          y: shouldReduceMotion ? 0 : y,
          padding: "56px 0 32px",
        }}
      >
        <p style={{ color: "#2563eb", fontWeight: 700 }}>
          Claude Code x Motion
        </p>
        <h2 style={{ fontSize: 36, margin: 0 }}>
          पढ़ते समय context दिखाने वाला page
        </h2>
      </motion.header>

      <div style={{ display: "grid", gap: 24 }}>
        {sections.map((section) => (
          <section
            key={section.title}
            style={{
              border: "1px solid #dbe4ee",
              borderRadius: 12,
              padding: 24,
              background: "#ffffff",
            }}
          >
            <h3>{section.title}</h3>
            <p style={{ lineHeight: 1.8 }}>{section.body}</p>
          </section>
        ))}
      </div>
    </article>
  );
}

इस pattern को orientation के लिए use करें, filler के लिए नहीं। एक clear progress bar कई flashy scroll reveal effects से बेहतर है।

Claude Code से review करवाएं

Implementation के बाद Claude Code को failure modes के साथ review prompt दें।

Current diff को Motion for React implementation की तरह review करें।
इन points पर strict रहें:
- `motion/react` और पुराने `framer-motion` imports mix न हों
- `AnimatePresence` के direct children के पास stable key हो
- Reduced Motion large movement, parallax और autoplay-like effects बंद करे
- code frequent width, height, top, left animation न करे
- manual tests real user actions जैसे हों

इससे Claude Code generator के साथ first reviewer भी बनता है। आसपास की files देखकर यह CSS conflict, unwanted state change और missing tests भी पकड़ सकता है।

Pitfalls और checklist

पहला pitfall stale imports है। Legacy project में framer-motion ठीक हो सकता है, लेकिन new code को motion और motion/react follow करना चाहिए। दूसरा pitfall broken exit को easing problem समझना है। अधिकतर कारण React tree होता है: parent जल्दी unmount हो गया, key index था, या item AnimatePresence के अंदर से निकला ही नहीं।

तीसरा pitfall layout पर जरूरत से ज्यादा भरोसा है। यह reorder और size changes में मदद करता है, लेकिन बिना dimension वाली images, late fonts और अचानक Grid changes अभी भी jump बना सकते हैं। चौथा pitfall accessibility को अंत में रखना है। Official accessibility guide Reduced Motion बताती है; large movement, parallax या autoplay जैसे effects हों तो alternative first version में ही जोड़ें।

Publish से पहले confirm करें: official docs और imports match करते हैं, हर animation का product purpose है, Reduced Motion large movement हटाता है, AnimatePresence children के पास stable key है, keyboard और focus काम करते हैं, scroll effects readability खराब नहीं करते। Related topics के लिए Radix UI with Claude Code, shadcn/ui with Claude Code और Claude Code animation guide पढ़ें। Claude Code के लिए Anthropic की Claude Code documentation देखें।

निष्कर्ष

Claude Code और Framer Motion को साथ use करने का value सिर्फ तेजी नहीं है। असली value यह है कि implementation, accessibility और review criteria एक ही workflow में आ जाते हैं।

Masa के practical test में सबसे बड़ा सुधार first prompt में motion/react, Reduced Motion और manual verification लिखने से आया। बाद में polish करने से बेहतर है कि initial diff में ही constraints हों। Repeatable prompt template के लिए free cheat sheet रखें। अगर team के साथ multiple screens review करने हैं, तो training और consultation practical next step है।