Claude Code und Framer Motion: Praxisleitfaden für Motion for React

Viele Entwickler suchen weiterhin nach Framer Motion, aber die aktuelle offizielle React-Dokumentation beschreibt die Bibliothek als Motion for React. Für neuen Code installierst du motion und importierst React-APIs aus motion/react. Wenn ein bestehendes Projekt konsequent framer-motion nutzt, sollte man nicht ohne Absprache mischen. Für neue Komponenten und aktualisierte Artikel ist die offizielle Motion for React Dokumentation der richtige Ausgangspunkt.

Claude Code kann Animationen schnell ergänzen, ersetzt aber kein Produkturteil. Ein Prompt wie “mach das flüssiger” führt oft zu übertriebenen Bewegungen, fehlender Reduced-Motion-Unterstützung oder kaputten Exit-Animationen, weil der falsche Elternknoten zuerst unmountet. Masa hat diesen Ablauf in einem internen Dashboard getestet: Die erste Version sah in der Demo gut aus, aber Karten sprangen zu stark, Benachrichtigungen verschwanden ohne exit, und ein Scroll-Header fühlte sich auf einem schwächeren Laptop träge an.

Der produktive Weg ist, Claude Code als Mitarbeiter mit klaren Grenzen zu behandeln. Zuerst werden Ziel, Umfang, Barrierefreiheit und Prüfpfad definiert, danach wird implementiert. Die folgenden TSX-Beispiele laufen in einem React-Projekt nach npm install motion. In Next.js oder Astro gehören solche Komponenten in den Client-Teil.

Mit Einschränkungen starten

Animation ist kein Schmuck. Sie soll erklären, welcher Zustand sich gerade ändert. Vor dem Prompt sollten diese Entscheidungen feststehen.

Entscheidung	An Claude Code übergeben	Beim Review prüfen
Zweck	Welcher Zustandswechsel Hilfe braucht	Bewegung verbessert das Verständnis
Umfang	Erlaubte und gesperrte Dateien	Kein fremdes Refactoring
API	motion/react, Reduced Motion	Imports und Verhalten passen zur Doku
Prüfung	Manuelle Bedienung, Tastatur, langsames Gerät	Test entspricht echter Nutzung

Das Arbeitsmodell bleibt einfach:

Ziel und Einschränkungen
  -> Claude Code Prompt
  -> Motion for React Implementierung
  -> manuelle und barrierefreie Prüfung
  -> gezielter Folgeprompt

Ein guter erster Prompt:

Füge diesem bestehenden React-Component Motion for React Animation hinzu.
Anforderungen:
- Neue Motion APIs aus `motion/react` importieren
- Datenabruf, Formular-Submit und Routing nicht ändern
- Reduced Motion respektieren
- Bevorzugt opacity und transform animieren
- Layout Shift vermeiden
- Eine kurze manuelle Test-Checkliste ausgeben

Damit erzeugt Claude Code eher einen prüfbaren Diff. Der Import ist wichtig, weil viele alte Beispiele noch framer-motion verwenden.

Use Case 1: animierte Kartenlisten

Dashboards, Artikellisten und Feature-Karten profitieren von einem dezenten Stagger. Es geht nicht darum, jede Karte vorzuführen, sondern die Leserichtung zu unterstützen. In Masas Test waren 0,06 bis 0,09 Sekunden für sechs Karten sinnvoll; längere Verzögerungen machten die Oberfläche gefühlt langsam.

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

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

const demoFeatures: Feature[] = [
  {
    id: "review",
    title: "Review-Warteschlange",
    body: "Änderungen von Claude Code, die ein Mensch prüft.",
    metric: "8 Einträge",
  },
  {
    id: "motion",
    title: "Motion-Aufräumen",
    body: "Kurze Übergänge erklären Änderungen ohne Arbeit zu bremsen.",
    metric: "14%",
  },
  {
    id: "a11y",
    title: "Reduced Motion",
    body: "Große Bewegungen werden zu ruhigeren Fades.",
    metric: "Bereit",
  },
];

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-Karten"
      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>
  );
}

Im Review zählen stabile Keys, Bewegung über transform und sinnvolles Verhalten bei Reduced Motion. Ein Folgeprompt kann lauten: “Behalte den Stagger, aber die Liste muss mit 12 Karten sofort bedienbar sein.”

Use Case 2: Benachrichtigungen mit Exit

AnimatePresence animiert Elemente, wenn sie den React-Baum verlassen. Die offizielle AnimatePresence Dokumentation betont stabile key-Werte für direkte Kinder. Der häufige Fehler: Der ganze Container wird bedingt gerendert und verschwindet, bevor Kind-Exits laufen können.

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: "Erfolgreich gespeichert" },
  ]);

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

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

  return (
    <div>
      <button type="button" onClick={addToast}>
        Benachrichtigung hinzufügen
      </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)}>
                Schließen
              </button>
            </motion.div>
          ))}
        </AnimatePresence>
      </div>
    </div>
  );
}

Lass Claude Code danach prüfen, ob der Container bei null Benachrichtigungen gemountet bleibt, ob Tastaturbedienung funktioniert und ob aria-live nicht zu viel ansagt. Benachrichtigungen sind ein häufiger Kontaktpunkt; Ruhe ist wichtiger als Effekt.

Use Case 3: Scroll-Fortschritt

Lange Dokumentationen, Onboarding-Seiten und Landing Pages brauchen oft Orientierung. useScroll liefert Scroll-Fortschritt für Seite oder Element als MotionValue. Mit useSpring wirkt die Fortschrittsleiste weniger nervös. Nicht jede Section muss Parallax bekommen. Bei Reduced Motion sollten große Bewegungen verschwinden.

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

const sections = [
  {
    title: "Anforderung fixieren",
    body: "Vor Änderungen kennt Claude Code Ziel, Dateien und Grenzen.",
  },
  {
    title: "Weniger bewegen",
    body: "Beginne mit opacity und transform, damit Bewegung Verständnis unterstützt.",
  },
  {
    title: "Echte Wege prüfen",
    body: "Teste langsames Gerät, Tastatur und Reduced Motion vor dem Release.",
  },
];

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 }}>
          Eine Seite, die Kontext beim Lesen zeigt
        </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>
  );
}

Diese Komponente soll Orientierung geben, nicht Raum füllen. Eine klare Fortschrittsleiste ist in der Regel besser als mehrere Scroll-Reveals, die das Lesen verlangsamen.

Claude Code als Reviewer nutzen

Nach der Implementierung sollte Claude Code den Diff kritisch prüfen.

Reviewe den aktuellen Diff als Motion for React Implementierung.
Prüfe streng:
- Kein Mix aus `motion/react` und alten `framer-motion` Imports
- Direkte Kinder von `AnimatePresence` haben stabile keys
- Reduced Motion deaktiviert große Bewegung, Parallax und autoplay-artige Effekte
- Es werden nicht häufig width, height, top oder left animiert
- Manuelle Tests entsprechen echten Nutzeraktionen

Damit wird Claude Code nicht nur Generator, sondern erste Review-Schicht. Da es die Umgebung lesen kann, findet es oft auch CSS-Konflikte, ungewollte State-Änderungen oder fehlende Tests.

Typische Fehler und Checkliste

Der erste Fehler sind veraltete Imports. In Legacy-Code kann framer-motion richtig sein, aber neuer Code sollte motion und motion/react folgen, sofern das Repository nichts anderes vorgibt. Der zweite Fehler ist, defekte exit-Animationen als Easing-Problem zu behandeln. Meist geht es um den React-Baum: Der Parent unmountet zu früh, der Key ist ein Index oder das Element verlässt AnimatePresence gar nicht.

Der dritte Fehler ist zu viel Vertrauen in layout. Es hilft bei Reorder und Größenänderungen, aber Bilder ohne Maße, spät geladene Fonts und abrupte Grid-Wechsel können weiterhin springen. Der vierte Fehler ist späte Barrierefreiheit. Der offizielle Accessibility Guide erklärt Reduced Motion. Große Bewegung, Parallax oder autoplay-artige Effekte brauchen schon in der ersten Version eine Alternative.

Vor Veröffentlichung prüfst du: offizielle Dokumentation und Imports stimmen überein, jede Animation hat einen Zweck, Reduced Motion entfernt große Bewegung, AnimatePresence-Kinder haben stabile key-Werte, Tastatur und Fokus funktionieren, Scroll-Effekte stören die Lesbarkeit nicht.

Für UI-Grundlagen lies Radix UI mit Claude Code, shadcn/ui mit Claude Code und den Claude Code Animationsleitfaden. Für Claude Code selbst hilft die Claude Code Dokumentation von Anthropic.

Fazit

Claude Code und Framer Motion zusammen zu nutzen bedeutet nicht nur, Animationen schneller zu schreiben. Der eigentliche Wert liegt darin, Implementierung, Barrierefreiheit und Review-Kriterien in denselben Ablauf zu bringen.

Masas praktisches Ergebnis war eindeutig: motion/react, Reduced Motion und manuelle Prüfungen direkt im ersten Prompt zu nennen, reduzierte Nacharbeit stärker als spätere Feinkorrekturen. Für wiederverwendbare Prompt-Muster nutze den kostenlosen Spickzettel. Wenn ein Team mehrere Screens gemeinsam verbessern will, ist Training und Beratung der pragmatische nächste Schritt.