Modèles Claude Motion : 24 styles d'animation

La spécification de chaque style

Paper Editorial

Idéal pour : Essais, explications, articles de fond. Papier chaleureux, titre à empattements et un seul accent rouille. Sans hâte, comme un reportage de magazine.

Mise en page : Grande marge à gauche, titre en haut à gauche, un filet fin au-dessus des intitulés de section. Les barres sont des aplats.

Animation : Montées lentes de 28px avec fondu, 0.8s, power2.out. Un seul élément bouge à la fois. Aucun rebond.

Blueprint

Idéal pour : Architecture, systèmes, présentations techniques. Grille bleu marine profond avec traits cyan. Tout est dessiné en contour et apparaît par balayage, comme sur une table traçante.

Mise en page : Grille discrète de 60px en arrière-plan. Les boîtes et les barres sont des contours, jamais des aplats. Les libellés sont en petites majuscules, en police mono.

Animation : Balayages de gauche à droite (clip-path), 0.9s, power1.inOut. Les libellés suivent leur forme. Aucun fondu, aucun rebond.

Kinetic Poster

Idéal pour : Lancements, promos, formats courts pour les réseaux sociaux. Scène noire, typographie condensée à l'échelle d'une affiche et une couleur acide. Les mots frappent fort et vite.

Mise en page : Titres condensés en majuscules qui remplissent le cadre, interlignage serré. Une idée par scène.

Animation : Coupes franches : les éléments apparaissent d'un coup depuis une échelle de 118% en 0.32s, expo.out, avec 0.07s d'écart. Rien ne dérive.

Quiet Keynote

Idéal pour : Récits produit, points d'étape pour investisseurs. Scène claire, beaucoup d'espace et des chiffres sereins sur des cartes blanches. Un seul chiffre par image.

Mise en page : Centrée. Cartes blanches à ombre douce. Douze mots maximum par scène.

Animation : Mise à l'échelle douce de 92% à 100% avec fondu, 0.7s, power3.out. Les chiffres s'incrémentent sur 1.2s.

Chalk Lesson

Idéal pour : Enseignement, tutoriels, modules de cours. Tableau vert, titres manuscrits et surlignage jaune. Les étapes s'écrivent une à une.

Mise en page : Titres manuscrits, étapes numérotées le long de la gauche. Le terme clé est souligné en jaune.

Animation : Balayages de gauche à droite comme si le texte s'écrivait, 0.7s, power1.out, avec 0.22s entre les lignes.

Ledger

Idéal pour : Rapports, revues de métriques, finance. Page blanche, chiffres en mono et un seul vert pour la croissance. Conçu pour que les graphiques restent lisibles.

Mise en page : Un filet fin sous chaque titre. Chiffres en mono. Pas de dégradés, pas d'ombres, pas de 3D.

Animation : Montées rapides de 16px, 0.45s, power2.out, avec 0.08s d'écart. Les barres partent de la ligne de base ; les libellés suivent.

Terminal

Idéal pour : Outils pour développeurs, changelogs, démos CLI. Fenêtre de terminal anthracite en mono avec une invite verte. Les lignes s'impriment par étapes, comme une vraie sortie.

Mise en page : Tout se trouve dans une seule fenêtre avec barre de titre. Les titres commencent par une invite. L'accent marque la ligne modifiée.

Animation : Balayages par paliers qui évoquent la frappe au clavier : 16 paliers en 0.6s, 0.2s entre les lignes. Aucune courbe d'accélération.

Sunrise

Idéal pour : Reels de marque, annonces, ouvertures d'événements. Dégradé corail-violet avec typographie blanche arrondie. Chaleureux et lumineux, avec une entrée élastique.

Mise en page : Dégradé sur un élément enfant en plein cadre. Les libellés sont des pastilles. Les barres et les étapes sont en blanc translucide, aux grands rayons d'angle.

Animation : Apparitions élastiques depuis une échelle de 86%, 0.55s, back.out(1.6), avec 0.09s d'écart. L'arrière-plan ne bouge jamais.

Glass

Idéal pour : Récits produit, lancements haut de gamme. Scène claire avec de la couleur douce dans l'air et des panneaux blancs givrés. Calme, aspect luxueux, beaucoup d'espace.

Mise en page : Deux champs de couleur flous en arrière-plan. Les panneaux sont en blanc translucide, avec un bord lumineux et une ombre profonde et douce.

Animation : Mise à l'échelle lente et douce à partir de 92 % avec fondu, 0,8 s, power3.out. Les panneaux arrivent les uns après les autres, jamais ensemble.

Midnight

Idéal pour : produits pour développeurs, roadmaps, changelogs. Fond presque noir, bordures filaires, typographie serrée et une seule lueur lavande. Précis et discret.

Mise en page : Une lueur douce derrière le contenu. Chaque panneau a une bordure fine de 2px. Les titres sont serrés et de taille modérée.

Animation : Courtes montées de 14px, 0,5 s, power3.out, avec un décalage serré de 0,07 s. Rapide et précis, sans dépassement.

Pixel

Idéal pour : explications techniques, data stories ludiques. Crème chaud avec des blocs du orange au jaune et des angles droits. Tout arrive par étapes, comme des pixels qui s'allument.

Mise en page : Angles droits partout. Les barres sont des blocs chauds empilés. Une rangée de petits carrés se place sous chaque titre.

Animation : Balayages par paliers en 8 étapes sur 0,5 s, espacés de 0,14 s. Aucune courbe d'accélération fluide : les éléments s'allument d'un coup.

Aubergine

Idéal pour : actualités d'équipe, communication interne, onboarding. Violet profond avec jaune chaud et panneaux en bulles de discussion. Chaleureux et conversationnel, comme un message d'un collègue.

Mise en page : Les étapes sont des bulles de discussion avec un angle droit. Les libellés sont des pastilles. Gardez des phrases courtes, à l'oral.

Animation : Les bulles apparaissent à partir de 86 % avec un léger dépassement, 0,5 s, back.out(1.4), espacées de 0,16 s, comme des messages qui arrivent.

Graph Paper

Idéal pour : documentation technique, points d'avancement d'ingénierie, benchmarks. Une grille technique claire, une typographie mono et un seul vert pour le résultat qui compte. Se lit comme un carnet de laboratoire soigné.

Mise en page : Grille fine de 48px en arrière-plan. Panneaux blancs avec bordure de 2px. Les titres sont sobres ; les données sont au premier plan.

Animation : Balayages de gauche à droite, 0,55 s, power2.out, espacés de 0,1 s. Les lignes se tracent, elles n'apparaissent pas en fondu.

Pastel Shapes

Idéal pour : ateliers, briefs créatifs, publications communautaires. Papier crème, formes géométriques pastel ludiques, mélange de formes rondes et carrées. Collaboratif et légèrement décalé.

Mise en page : Chaque barre et chaque étape prend tour à tour la couleur pastel suivante. Les angles alternent entre arrondis et droits.

Animation : Apparitions rebondissantes à partir de 86 %, 0,5 s, back.out(1.8), espacées de 0,1 s. Les formes semblent posées à la main.

Signal

Idéal pour : annonces, revues d'incident, déclarations fortes. Noir profond avec une bande rouge en diagonale et une typographie blanche épaisse. Urgent et impossible à survoler.

Mise en page : Une bande rouge diagonale traverse l'arrière-plan. Les titres sont très serrés. Un seul élément rouge par scène, pas plus.

Animation : Coupes franches depuis une échelle de 118 % en 0,3 s, expo.out, espacées de 0,06 s. Chaque scène démarre sur le temps fort.

Harbor

Idéal pour : finance, tarification, revues d'activité. Texte bleu marine profond sur surfaces claires avec un indigo affirmé. Rassurant et soigné, avec un léger dégradé en haut.

Mise en page : Une bande de couleur inclinée sur le bord supérieur. Panneaux blancs avec ombre douce. Les chiffres sont grands et en bleu marine.

Animation : Montées régulières de 22px, 0,6 s, power2.out, espacées de 0,1 s. Stable et prévisible, rien de ludique.

Newsprint

Idéal pour : annonces, rapports publics, récits. Papier blanc cassé, titres noirs à empattements et un filet rouge. On dirait une une de journal.

Mise en page : Un filet noir épais au-dessus de chaque titre et un filet fin en dessous. Des angles droits partout.

Animation : Un rapide ajustement depuis une taille un peu trop grande, 0,45 s, comme une page qu'on claque sur la table. Sans rebond.

Botanical

Idéal pour : bien-être, développement durable, éducation. Papier crème, vert sauge et une police à empattements qui prend son temps. Un style calme, avec des images à l'aquarelle.

Mise en page : Grandes marges et blocs arrondis. Un petit filet vert feuille surmonte chaque libellé.

Animation : Montées lentes de 20 px avec un long fondu, 0,9 s, espacées de 0,16 s. Rien n'arrive vite.

Neon Night

Idéal pour : événements, musique, jeux vidéo, vie nocturne. Bleu nuit et lumière magenta. Titres percutants, bords lumineux, conçu pour une salle sombre.

Mise en page : Les blocs ont une fine bordure lumineuse. La barre mise en avant et le chiffre brillent en magenta.

Animation : Apparition à 86 % avec un léger dépassement, 0,5 s, espacée de 0,09 s. Dynamique sans secousses.

Clay

Idéal pour : onboarding, visites de produit, explications conviviales. Beige chaud, terre cuite et formes rondes et douces. Chaleureux sans être enfantin.

Mise en page : Panneaux très arrondis avec une ombre douce en dessous. Les pastilles numérotées sont des cercles.

Animation : Petits rebonds doux avec un léger dépassement, 0,6 s, espacés de 0,12 s, comme un objet qu'on pose.

Riso Print

Idéal pour : Fanzines, culture, revues de design. Papier blanc chaud imprimé en bleu et rose fluo. Grands titres condensés, volontairement un peu bruts.

Mise en page : Titres condensés en capitales, en bleu avec des rehauts roses. Les étiquettes sont des blocs roses.

Animation : Arrêts secs et rapides à partir de 118 %, 0,4 s. Les éléments se posent comme des tampons.

Boardroom

Idéal pour : Stratégie, conseil, dossiers de conseil d'administration. Blanc, bleu marine et un seul bleu roi. Titres qui donnent la réponse d'abord et panneaux soignés, comme un consultant met en page.

Mise en page : Un filet bleu à gauche de chaque titre. Les panneaux sont plats, avec une bordure très fine.

Animation : Courtes montées de 16 px, 0,5 s, espacées de 0,08 s. Vives et régulières, jamais décoratives.

Ink Brush

Idéal pour : Essais, philosophie, histoires de marque. Papier de riz, encre noire et un petit sceau rouge. Beaucoup de vide, volontairement.

Mise en page : Le texte occupe les deux tiers gauches, avec de l'air autour. L'étiquette est un petit sceau carré rouge.

Animation : Balayages lents depuis la gauche, 1 s, espacés de 0,2 s, comme un pinceau qu'on tire.

Sticker

Idéal pour : Enfants, classes, publications sur les réseaux sociaux, actualités ludiques. Jaune soleil, épais contours noirs et rose vif. Chaque panneau ressemble à un autocollant.

Mise en page : Panneaux blancs avec un épais contour noir et une ombre décalée nette, comme des autocollants sur un cahier.

Animation : Rebonds toniques avec un net dépassement, 0,45 s, espacés de 0,1 s. Ludique, volontairement.