PROMPTACADEMY
REJOINDRE
CRÉATION

Tous vos sites se ressemblent

Des animations propres dans React sans te battre avec des keyframes CSS, et le composant généré à ta place. Avec Motion (l'ex framer-motion) et le MCP 21st.dev Magic branché dans Claude Code, ça prend 5 minutes.

Par Mario, Fondateur Prompt Academy · 5 min de lecture · Gratuit, sans compte

Tu veux des animations propres dans React sans te battre avec des keyframes CSS — ces règles d'animation à écrire à la main, étape par étape — et générer le composant sans taper une ligne. Spoiler : avec Motion (l'ex framer-motion) et le MCP 21st.dev Magic branché dans Claude Code, ça prend 5 minutes.

À la fin de ce guide, tu as un bento grid animé au scroll qui tourne dans ton projet. Un bento grid, c'est cette grille à la mode inspirée des boîtes bento japonaises : des cards de tailles différentes qui s'emboîtent proprement.

Les prérequis

Un projet Next.js avec Tailwind déjà en place

N'importe quel projet React fait l'affaire, mais le guide part d'un setup Next.js + Tailwind — c'est ce que le composant généré utilisera.

Claude Code installé et fonctionnel

Tu tapes claude dans un terminal et ça démarre. C'est bon.

Les bases React/JSX

Tu sais ce qu'est un composant. Pas besoin de plus.

Installer Motion

Avant de plonger : framer-motion s'appelle Motion depuis fin 2024. Le package npm a été renommé motion, l'import devient motion/react. Même lib, même API, juste un rebrand. Le vieux package framer-motion marche encore mais on installe la version propre.

Dans ton projet :

bash
npm install motion

Voilà. Une commande, c'est plié. Tu peux maintenant importer motion depuis motion/react partout dans ton code.

tsx
import { motion } from "motion/react"
 
export function Card() {
  return <motion.div animate={{ opacity: 1 }} />
}
Si tu tombes sur du code qui importe framer-motion

Ça marche aussi. Mais pour rester propre, remplace par motion/react. Même comportement, juste le nouveau nom.

Brancher le MCP 21st.dev Magic

21st.dev Magic, c'est un MCP qui génère des composants React à la volée. Un MCP (Model Context Protocol), c'est le protocole qui laisse Claude parler à des outils externes. Tu prompt, il pond du code, il l'écrit dans ton projet. C'est v0 mais directement dans ton terminal.

Trois étapes.

Récupère ta clé API

Va sur 21st.dev/magic/console, connecte-toi, génère une nouvelle clé. Garde-la sous la main, on s'en sert dans 30 secondes.

Installe le MCP avec la CLI officielle

Dans ton terminal :

bash
npx @21st-dev/cli@latest install claude --api-key TA_CLE_API

Le script ajoute le MCP à la config de Claude Code (~/.claude/mcp_config.json). Pas besoin de toucher au JSON à la main, la CLI fait le boulot.

Vérifie que ça marche

Relance Claude Code, puis tape /mcp dans le chat. Tu dois voir @21st-dev/magic listé en connected. Si oui, c'est bon, le MCP est branché.

Si le MCP n'apparaît pas

Quitte complètement Claude Code (ferme le terminal, pas juste la fenêtre) et relance. Les MCPs se chargent au boot, pas en hot-reload. C'est un piège classique.

Générer le bento grid animé

À ce stade, Motion est installé et le MCP est branché. La suite c'est juste un prompt.

Ouvre ton projet dans Claude Code et tape :

text
/ui crée un bento grid responsive avec 6 cards de tailles différentes
qui s'animent au scroll avec framer-motion. Chaque card fait un fade-in
et slide légèrement vers le haut quand elle entre dans le viewport.
Style moderne, dark mode, Tailwind.

Le MCP 21st.dev Magic prend la main. Il propose un design, génère le composant et l'écrit directement dans components/.

Tu obtiens un fichier type BentoGrid.tsx avec :

  • La grille Tailwind responsive (grid-cols-*, md:col-span-2, etc.)
  • Des motion.div pour chaque card avec whileInView et viewport={{ once: true }} pour déclencher l'animation au scroll — le viewport, c'est simplement la partie de la page visible à l'écran
  • Les props initial, animate, transition configurées

Tu importes le composant dans ta page :

tsx
import BentoGrid from "@/components/BentoGrid"
 
export default function Page() {
  return <BentoGrid />
}

Sauvegarde, scroll. Les cards s'animent une par une. Premier shot, ça tourne.

Plus ton prompt est précis, plus le résultat est propre

Nombre de cards, contenu de chacune, type d'animation, palette de couleurs. Vague tu obtiens du générique, précis tu obtiens du sur-mesure. Itère sur le prompt avant d'itérer sur le code.

Pas d'idée d'animation ?

Va sur motion.dev piocher dans les 330+ exemples avec code copy-paste. Tu repères l'effet qui te plaît (spring, scroll-linked, layout transitions, gestures), tu le décris à Claude Code dans ton prompt, le MCP l'applique à tes cards. C'est le meilleur shortcut pour passer du générique au sur-mesure.

Pour aller plus loin

Tu viens d'installer Motion, brancher un MCP qui génère des composants à la volée, et sortir un bento grid animé sans écrire une ligne. C'est ça la vraie force du combo Claude Code + MCP : tu décris, l'outil pond, tu valides. Et tu peux pousser ce pattern bien plus loin que les composants UI.