Recettes et techniques de motion pour tous les agents IA

Connectez votre agent

Le serveur s’appelle motion-fab-library. Ajoutez-le une fois et votre agent choisit lui-même les outils.

claude mcp add --transport http motion-fab-library https://motionfab.app/api/library/mcp

codex mcp add motion-fab-library --url https://motionfab.app/api/library/mcp

{
  "mcpServers": {
    "motion-fab-library": {
      "url": "https://motionfab.app/api/library/mcp"
    }
  }
}

{
  "servers": {
    "motion-fab-library": {
      "type": "http",
      "url": "https://motionfab.app/api/library/mcp"
    }
  }
}

Ce que votre agent peut faire

Quatre outils en lecture seule. L’agent les choisit d’après votre question.

search_recipes

Trouve des prompts de la communauté par des mots du titre ou du texte, par modèle ou par tag, dans les 8 langues du site. Donne le titre, le résumé, la vidéo et la page de chacun.

get_recipe

Un prompt en entier : le texte à donner à Motion Fab, ce qu’il faut préparer et les techniques de sa vidéo.

search_techniques

Trouve des techniques selon l’aspect de l’effet ou son usage, par type ou par bibliothèque. Donne les descriptions, un aperçu et le prompt d’où vient chacune.

get_technique

Une technique avec son code : une composition autonome en HTML, CSS et JavaScript avec GSAP qui tourne dans un navigateur.

Derniers prompts de la bibliothèque

Simple Motion

Vidéo de lancement d'app cinétique avec maquette d'interface animée

<direction> Réalise une vidéo cinétique de lancement de produit horizontale de 42 secondes en 1920x1080 pour [your app]. Elle montre comment un fondateur crée une vidéo de lancement pour sa startup simplement en discutant dans l'app. Reconstruis l'interface de mon app à partir de mes captures d'écran sous forme de maquette animée propre, faite de formes et de texte, proche de la réalité. Dans cette vidéo, c'est une app sombre bleu marine-violet avec une Live preview à gauche, des onglets Chat / Files / Panels à droite et des boutons d'accent roses. Ne montre jamais les captures comme des images fixes : chaque élément doit bouger. Garde une interface continue sans coupes franches. La caméra avance, panote et recule entre les panneaux pendant qu'un curseur se déplace et clique. Reste sur une grille rythmique de 120 BPM (un temps = 0,5 s) et fais qu'il se passe quelque chose à chaque temps. D'énormes mots cinétiques claquent sur l'interface entre les étapes. La startup du fondateur est une app inventée, par exemple "Pulse — standups your team actually reads" (remplace par la tienne). Évite les coupes franches, les captures statiques, tout ce qui est coupé aux bords du cadre, et le texte ou les barres de surlignage qui débordent sur les colonnes voisines. </direction> <structure> 1) Accroche, 0–3 s : "YOUR LAUNCH VIDEO." puis "IN ONE CHAT." en énorme typographie, coupés mot par mot sur le rythme. "CHAT." se transforme en onglet Chat et la caméra recule sur toute la fenêtre de l'app. 2) Références, 3–8 s : un lien "pulse-demo.app" est collé dans le chat. Un pitch deck PDF et un logo arrivent en volant comme cartes de pièces jointes et se calent en place. Gros mot "DROP". 3) Prompt, 8–13 s : le fondateur tape "Make a 30-second launch video for Pulse, kinetic style, our colours" lettre par lettre, puis le curseur appuie sur envoyer. Gros mot "ASK". 4) Plan, 13–18 s : l'agent répond par un plan en cinq étapes sous forme de liste de contrôle. Les étapes apparaissent et se cochent une à une, et la caméra recule un peu à chaque nouvelle ligne pour que le cadre ne paraisse jamais vide. Gros mot "PLAN". 5) Esquisse et Go, environ 18–21 s : une esquisse grise filaire du promo remplit rapidement la Live preview, avec l'étiquette "Live preview" et la barre de lecture visibles. Le fondateur clique sur Go, et un fond rose grandit depuis le bouton pressé et inonde l'écran derrière un énorme "GO!". 6) Live, environ 21–31 s : des lignes d'état s'affichent dans le chat ("Picking fonts", "Animating the title", "Writing a soundtrack") pendant que l'esquisse devient le promo terminé. La caméra avance jusqu'à ce que le promo remplisse le cadre. Vers 27 s, le titre du promo "Standups your team actually reads." glisse en place, et une barre de surlignage vert citron se dessine sous "actually reads.". Une colonne de statistiques se tient à côté avec "92%" et "updates read". Gros mot "LIVE". 7) Export, environ 31–37 s : la caméra recule vers l'app. Le bouton Export et les onglets sont entièrement visibles pendant que l'export s'exécute et se termine. Gros mot "DONE". 8) Carte de fin, environ 37–42 s : le logo de [your app] et "Live on [launch site] today" (remplace par le tien), qui se posent sur le dernier temps et tiennent jusqu'à la fin. </structure> <composition> Palette : interface sombre bleu marine-violet, boutons d'accent rose magenta et l'inondation rose, un dégradé rose-orange sur le logo et le vert citron comme couleur de surlignage dans le promo de démonstration. Les mots cinétiques sont énormes, gras, en majuscules, sans empattement avec les polices de la marque et occupent la majeure partie de la largeur du cadre. Réduis légèrement un mot long plutôt que de le laisser se faire couper. Garde des marges de sécurité partout. Dans les plans larges, toute la fenêtre de l'app est dans le cadre. Dans le chat, le champ de saisie est entièrement visible. Dans la scène d'export, le bouton Export et les onglets sont dans le cadre. Dans le promo, le titre et la barre citron restent dans leur propre colonne avec de la marge. La barre correspond exactement à la largeur de ses mots et ne chevauche jamais la colonne "92%". </composition> <techniques> Une caméra virtuelle continue avec des avancées, panoramiques et reculs fluides en ease-in-out entre les panneaux, et sans coupes. Le curseur glisse vers ses cibles et clique avec une petite réduction d'échelle à l'appui. Les mots d'accroche entrent un par temps. Les cartes de pièces jointes arrivent en volant et se calent avec un léger dépassement. Le texte du chat se tape lettre par lettre. Les éléments de la liste apparaissent et se cochent sur des temps successifs. L'esquisse grise se remplit vite puis se transforme élément par élément en promo terminé. L'inondation rose sous "GO!" grandit radialement depuis le bouton cliqué. Les gros mots claquent avec un rapide impact de réduction d'échelle sur l'interface et repartent vite au temps suivant. Chaque temps a un événement visible : un mot, un clic, une carte, une coche, une ligne d'état ou un mouvement de caméra. </techniques> <music> Un morceau électronique énergique à 120 BPM, où chaque coupe, chaque claquement de mot et chaque événement de l'interface sont calés sur le rythme. Il monte pendant les étapes de préparation, s'élève vers "GO!", porte la construction en direct et se résout par un dernier coup sur la carte de fin. </music> <sound> Des clics de clavier qui tombent exactement sur chaque lettre tapée. Des clics de souris à chaque appui du curseur. Des whooshes sur les mouvements de caméra et l'arrivée des cartes de pièces jointes, et des claquements quand les cartes se posent. De doux tics pour les étapes de la liste et les lignes d'état. Un impact percutant sous chaque gros mot, un riser vers "GO!" et un dernier coup sur la carte de fin. Garde la musique sous les effets pour que les clics et les impacts se détachent clairement. </sound> <references> Bandes-annonces cinétiques de lancement d'apps qui reconstruisent une interface SaaS en maquette animée nette avec un seul mouvement de caméra continu, dans le style des promos de jour de lancement de produit. </references>

Utilisé 2 fois

Simple Motion

Promo avec billet, valise et formats, et révélation du logo

<direction> Réalise un promo de motion design horizontal de 15 secondes (1920x1080, 60 i/s) pour [your brand], un produit qui transforme une description en vidéo terminée (adapte les mots aux tiens). L'idée : une demande devient un billet, le billet s'ouvre sur une promesse, une valise livre les étapes une par une, trois formats défilent et tout atterrit sur mon logo. Il n'y a pas de voix off : les mots sont à l'écran et la musique porte le tout. Tout est dessiné : graphismes 2D à plat avec une carte inclinée en 3D, sans images filmées. Le style est clair, net et énergique : un seul accent rose sur une page claire, avec un champ sombre encre profonde. Évite les images filmées, la voix, le flou dans les masques de texte, ainsi que toute dérive ou déformation du logo. Le logo se forme entier, exactement tel qu'il est dessiné, et reste parfaitement immobile d'environ 13,3 s jusqu'à la fin. </direction> <structure> 1. 0–1,9 s, la demande. À gauche, une petite accroche rose à espacement large « YOUR AI MOTION DESIGNER » se place au-dessus d'un titre de trois lignes d'environ 180 px, « Describe » / « the » / « video. » (remplace-le par le tien ; la dernière ligne est rose). Les lignes montent de leurs lignes de base l'une après l'autre. La première bouge déjà à l'image 0 et les autres suivent à 0,13 s d'écart, linéaire, 0,17 s chacune. À droite, une carte-billet blanche est inclinée en perspective, son côté gauche plus proche. Elle porte un bandeau rose « FROM IDEA TO VIDEO » et mon petit logo avec « [your brand] » à côté. Deux champs, « FROM IDEA · Your idea » et « TO MP4 · Video », sont reliés par une ligne pointillée avec un triangle play rose. Elle porte aussi de petites étiquettes « EDIT WORDS », « STEP 03 », « EFFECTS 3D » et « PREVIEW LIVE », un code-barres et « 03 » sur le talon. La carte arrive en volant de la droite à 0,23 s (power3.out, 0,35 s), dépasse d'environ 125 px vers la gauche et revient se poser (sine.inOut, 0,37 s). Pendant ce temps, le code « MP4 » fait défiler des lettres aléatoires 15 fois par seconde et se verrouille lettre par lettre à 0,67, 0,8 et 0,93 s. À 1,17 s, un tampon rose en contour « MP4 EXPORT », incliné de -14°, s'abat depuis 2,4x en 8 images avec un minuscule rebond. À 1,67 s, le triangle play rétrécit en un point rose qui grandit en un rideau circulaire centré sur lui, avec deux anneaux rose pâle juste à l'extérieur de son bord. Le rayon passe par 15, 36, 66, 120, 210, 330, 540, 900 et 1500 px, un pas toutes les deux images. Les lignes du titre sortent vers le haut dans l'ordre à mesure que le cercle grandit. 2. 1,9–4,0 s, la promesse, sur un champ entièrement rose (radial, plus clair au centre). Un triangle play blanc, un peu plus long que large pour pointer là où il va, naît à l'intérieur du cercle. Il vole en une boucle autour des mots, tourné le long de sa trajectoire : vers le haut, vers la gauche en haut, vers le bas sur la gauche, le long du bas, vers le haut sur le côté droit et hors du haut à droite. Derrière lui, il trace une orbite pointillée blanche dont les points les plus anciens s'estompent en une ligne fine et pâle. Deux grands cercles pâles sont en arrière-plan. « No keyframes. » (environ 220 px, blanc) entre en tournoyant lettre par lettre, à 0,03 s d'écart, sur un arc venant d'en bas à droite, en partant de 38° et en se redressant. À 2,8 s, il s'envole vers le haut lettre par lettre. En même temps, « The agent animates it. » (environ 157 px) monte de sa ligne de base lettre par lettre, à 16 ms d'écart. À 3,03 s, une pastille blanche arrondie balaie depuis la gauche derrière « animates it. » en 0,18 s, et ces mots deviennent roses à l'intérieur. À 3,77 s, les mots se floutent et disparaissent. Une valise encre profonde avec une sangle rose et une étiquette « MP4 » tombe du haut et atterrit à 4,02 s avec un petit écrasement. 3. 4,0–8,95 s, les étapes. Un cercle clair s'ouvre depuis la valise avec deux anneaux rose pâle, et deux ellipses d'ondulation roses s'étendent depuis sa base. En haut, « Edit in words. » (atténué, environ 56 px) monte. Puis « Your idea is ready to move. » (environ 93 px) monte mot par mot, avec « move. » en rose et un soulignement rose dessiné à la main qui se trace dessous. Au-dessus de la valise, six cartes d'étape blanches arrivent, une toutes les 0,58 s. Chaque carte fait 900x165 px et est arrondie, avec une tuile d'icône à gauche et une puce d'état à droite. Chacune monte de derrière la valise (de 100 px plus bas et à 72 % de la taille, 0,3 s, power2.inOut) avec une puce lavande « Animating » et un indicateur de chargement. Elle s'allume ensuite en deux temps : d'abord une bordure rose et un halo extérieur doux, puis 0,07 s plus tard la tuile d'icône devient rose et la puce devient un « ✓ Ready » rose. Quand la carte suivante arrive, l'ancienne monte de 40 px et disparaît en 0,15 s. Les cartes affichent : « Kinetic type », « Shapes », « 3D effects », « Sound », « Your own footage », « Fonts for every script » (remplace-les par les tiennes). Sous la valise, six points et un compteur avancent à chaque carte, de « 1 / 6 in motion » à « 6 / 6 in motion ». À 7,9 s, la dernière carte change sur place pour « Ready to move. » avec une tuile coche et une puce rose « 6 / 6 ». Le compteur est remplacé par « ✓ Live preview. MP4 export. » À 8,4 s, tout sauf la valise s'envole et se floute. À 8,7 s, la caméra plonge dans la valise jusqu'à ce que son corps encre profonde remplisse le cadre. 4. 8,95–11,4 s, les formats. Un groupe de trois bandes obliques balaie de droite à gauche en 0,2 s et ouvre un panneau plein cadre derrière son bord de fuite. Les bandes sont inclinées d'environ 18° : une fine bande rose foncé, une large bande rose et une fine bande rose clair. Le même balayage revient à 9,76 s et 10,5 s. Les trois panneaux sont des blocs en dégradé doux avec un horizon : - de lavande à violet, avec une lumière chaude dans la moitié basse ; - un ciel violet au-dessus d'une « mer » encre profonde ; - un ciel orange au-dessus d'une encre profonde, avec une bande de brume turquoise. Chaque panneau avance lentement de 1,07 à 1 et a un dégradé encre profonde en bas. Son nom monte lettre par lettre en bas à gauche, environ 226 px, en blanc : « Vertical », « Horizontal », « Square ». En haut à gauche se trouve un petit HUD à espacement large : « 01 / 03 » en rose clair, puis « 9:16 », puis « MP4 EXPORT » qui se tape, avec un soulignement rose qui grandit dessous. Il passe à « 02 / 03 · 16:9 · LIVE PREVIEW » puis à « 03 / 03 · 1:1 · NO KEYFRAMES ». 5. 11,4–12,5 s, la grille. Le dernier panneau rétrécit dans la carte de droite tandis que les deux autres glissent depuis la gauche. Ensemble, ils forment trois cartes portrait (580x780 px, espacées de 30 px) sur un champ encre profonde. La grille avance doucement à 1,05 et se rétablit en une demi-seconde. « Vertical, horizontal or square. » monte au-dessus en blanc. Une fois la grille posée, de petits noms apparaissent en fondu sur les cartes (« Vertical », « Horizontal », « Square »), bien à l'intérieur du cadre. 6. 12,2–15 s, le logo. Un point rose sort de la carte du milieu, avec des anneaux de halo pâles, tandis que la grille rétrécit à 0,9 sur une page blanche. Son rayon est animé toutes les deux images de 12 à 1150 px. Puis le point rétrécit vite et ralentit (260, 125, 90, 75 px) en se déplaçant à gauche du centre. Là, il s'ouvre directement en la forme de fond de mon logo, sans jamais chevaucher le logo, et les parties intérieures du logo se développent d'un seul bloc, exactement comme le logo est dessiné. À 13,03 s, « [your brand] » glisse de derrière le logo vers la droite (power3.out, 0,32 s), tandis qu'un fin anneau rose s'étend autour du logo et s'estompe. Le nom fait environ 150 px, encre profonde, ses lettres centrées sur la ligne médiane du logo et l'ensemble centré dans le cadre. Puis « Describe the video. The agent animates it. » monte mot par mot en dessous, avec la seconde phrase en rose. Trois puces lavande apparaissent : « • Vertical », « • Horizontal », « • Square ». « [your website] » monte en gris atténué. Le logo reste parfaitement immobile à partir d'environ 13,3 s, et tout tient jusqu'à la fin. </structure> <composition> La base est une page claire #FAF9FF avec une discrète grille de points de 40 px #E9E4F2 et de doux halos radiaux roses. L'encre profonde #1C0B5D sert au texte sombre, aux objets sombres et au champ sombre. Il y a un seul accent, le rose #FB2D89, pour les mises en valeur, le champ d'accent et la progression. L'atténué #6B6385 sert aux lignes secondaires et la lavande #F0EDFF aux puces douces. L'orange #FE9117, le violet #7C6CF2 et le turquoise #2DD4B0 n'apparaissent que dans les trois panneaux de format (et dans mon logo s'il les utilise). Les titres sont en sans géométrique épaisse, Manrope ExtraBold, avec un crénage serré d'environ -0,05em. Les petits libellés, le texte du HUD et le site web sont en sans nette, Inter SemiBold. Mise en page par plan : - Plan 1 : titre à gauche, billet incliné à droite. - Plan 2 : mots centrés sur le champ rose. - Plan 3 : cartes d'étape empilées au-dessus de la valise, points et compteur en dessous, titre en haut. - Plan 4 : noms de format en bas à gauche, HUD en haut à gauche. - Plan 6 : bloc logo final centré, avec la signature, les puces et le site web empilés dessous. </composition> <techniques> Les apparitions sont nettes. Le texte monte de sa propre ligne de base dans un cadre qui bouge avec lui, jamais un flou dans un masque. Les sorties accélèrent et disparaissent en environ 0,1 s. - Les rideaux circulaires grandissent par rayons échelonnés animés toutes les deux images, avec des anneaux rose pâle juste à l'extérieur du bord. - Le code du billet défile et se verrouille lettre par lettre. - Le tampon s'abat depuis 2,4x avec un minuscule rebond. - Les lettres entrent sur un arc rotatif, et la pastille de mise en valeur balaie derrière des mots qui changent de couleur à l'intérieur. - Les cartes d'étape s'allument en deux temps : bordure et halo d'abord, puis la tuile et la puce. - La caméra plonge dans la valise à l'échelle 1,5, 3,1, 6,2 et 7 en un quart de seconde. - Des balayages obliques à trois bandes portent les transitions entre les panneaux de format, et chaque panneau avance lentement. - Le panneau unique s'effondre en une grille de trois cartes. - Un point voyage et s'ouvre en logo, qui se construit d'un seul bloc et ne bouge ni ne se déforme jamais une fois formé. </techniques> <music> Utilise un morceau original de house électronique entraînant et optimiste à 120 BPM, d'exactement 15 s. Le groove complet joue dès la première image, avec une grosse caisse sur chaque temps à environ x,05 et x,55 s. Il reste régulier sous les cartes et les formats. La batterie disparaît à 12,55 s quand le point avale la grille, laissant un pad chaleureux et un arpège ascendant qui s'estompent vers 15 s. Les coupes et les coups clés tombent sur la grille des temps. </music> <sound> Le sound design se place par-dessus le morceau, sans batterie supplémentaire : - un whoosh quand le billet arrive en volant ; - de doux tics quand le code se verrouille ; - un impact doux sur le tampon ; - des whooshes sur chaque rideau circulaire et sur la pastille de mise en valeur ; - un bruit sourd quand la valise atterrit ; - un blip qui monte en hauteur quand chaque carte devient rose ; - un carillon quand la dernière carte atterrit ; - un riser vers la plongée et un impact quand le premier panneau s'ouvre ; - des whooshes à chaque balayage de bandes et quand les cartes se rejoignent ; - un riser vers le drop ; - une cloche quand le logo se forme ; - de doux clics sur les puces. Mixe à environ -14 LUFS avec un pic réel inférieur à -1 dBTP. </sound> <references> Une publicité moderne de lancement d'application en style vectoriel à plat, construite sur la typographie cinétique et une métaphore de voyage : une carte d'embarquement, une valise et des panneaux d'horizon. Elle se termine sur un bloc logo net et centré. </references>

Utilisé 2 fois

Simple Motion

Jingle d'app en écran partagé à deux fréquences d'images

<direction> Réalise un jingle produit horizontal de 12 secondes en écran partagé pour mon app, en 1920x1080 à 59,94 i/s. Deux panneaux carrés jouent côte à côte la même animation d'interface lumineuse. Le panneau de gauche avance avec une sensation de 29,97 i/s et celui de droite tourne à la fréquence d'images pleine, pour que la différence de fluidité se voie. Sept plans rapides tombent sur le rythme : un curseur clique sur mon logo dans une fenêtre d'app, l'icône éclate en carrés en orbite, un clic dans la barre des menus fait jaillir une zone de prompt en verre où le texte se tape, une page de texte défile avec une carte, deux cartes empilées dérivent vers le haut, mon logo reste seul, et un logotype lumineux claque sur un fond presque noir. Le style est propre et lumineux, avec des ombres douces et du flou de mouvement sur chaque déplacement. Évite les départs figés, les fondus enchaînés, le grain et la voix off. </direction> <structure> 1. 0,00–2,39 s, en-tête et clic. Une brume teintée de violet se dissipe en 0,9 s pour laisser la page blanche et une lueur lavande en bas. Un en-tête d'une ligne monte d'environ y 930 à 537 avec un ease-out exponentiel (environ 1,2 s), très flou au début. Il contient mon logo dans un disque lavande de 132 px, le nom « [votre marque] » en Inter Medium encre profonde et une capsule encre profonde « Ouvrir l'app ». Le nom apparaît au deuxième photogramme, déjà flou. La capsule suit deux photogrammes plus tard, en glissant de 15 px vers la gauche en devenant nette. À partir de 0,45 s, une fenêtre d'app blanche au rayon de coin de 93 px apparaît en fondu autour de l'en-tête (53 %, 70 %, puis 100 % à 0,78 s). À l'intérieur se trouvent une pilule de recherche lavande « Décris la vidéo », une colonne d'icônes atténuées et une carte sur une couverture d'encre profonde à violet. La carte indique « Ton idée est prête à bouger » / « Aperçu en direct · export MP4 » dans le panneau de gauche et « Un chat plutôt qu'une timeline » dans celui de droite. La couverture indique « De l'idée à la vidéo en un chat » ou « Décris ton idée ». À 0,88 s, un curseur flèche noir à contour blanc apparaît en haut à droite et glisse vers la gauche en décélérant. Il tourne de -85 degrés pour regarder vers le bas pendant son piqué, se pose à la verticale sur le logo et grossit de 1,55x tandis qu'un doux anneau rose s'allume autour du disque. La caméra avance à 1,2 autour du centre (ease-in-out, 0,47 s) et tient un photogramme. Puis elle recule à 1,04 sur une courbe accélérée pendant que le curseur appuie (rétrécit de 15 %), droit dans la coupe. 2. 2,39–3,35 s, icône et orbite. Coupe franche sur le drop de la musique : mon logo comme icône d'app arrive à 276 px et rétrécit à 178 px (expo out, 0,47 s). Quatre carrés arrondis, avec flou de mouvement et 32 degrés d'avance, se posent en croix autour sur un rayon de 222 px (expo out, 0,9 s). Ils sont violet, turquoise, rose et jaune à gauche, et rose, orange, turquoise et blanc à droite. Un disque lavande bicolore grandit derrière l'icône en 0,2 s. À partir de 3,12 s, les carrés se replient vers une rangée à droite et rétrécissent, et l'icône rétrécit à environ 70 px sous une rampe de flou. 3. 3,35–5,29 s, barre des menus et prompt. Coupe sur le coin supérieur droit d'un écran d'ordinateur sous une page blanche. On voit une bordure presque noire de 46 px et une barre des menus sombre et translucide avec des icônes wifi, batterie et contrôle, mon logo, trois points d'accent, « [votre marque] » et « Ouvrir l'app ». Le fond d'écran va de l'encre profonde au violet, avec des traînées de lumière diagonales à gauche, une lueur rose, une fine grille et un scintillement à droite. Le curseur monte vers le logo et clique (passe à 0,82 pendant 0,1 s). Une zone de prompt en verre dépoli jaillit de l'icône : 740 x 226 px, rayon de 56 px, lavande translucide avec une fine bordure blanche. Elle passe de 0,18 à 1 avec un dépassement en 0,19 s, son flou tombe de 9 px à 0, pendant que la caméra se décale de 115 px vers la droite. Elle tape à 27 caractères par seconde derrière un curseur blanc : « Modifie avec des mots, sans images clés » à gauche, « Plus grand, plus lent, une autre couleur » à droite. Un bouton d'envoi rond rose et trois petits glyphes sont sur sa rangée du bas. Le plan dérive vers le haut et sort sur une rampe de flou vertical pendant qu'un voile lavande monte à 75 %. 4. 5,29–7,16 s, page de réponse et carte. Sortant du flash lavande, une page de texte gris-violet en Inter 42–45 px défile vers le haut depuis 291 px plus bas. Elle bouge sur une courbe exponentielle (constante de temps 0,2 s), avec un flou vertical lié à sa vitesse. Une expression en encre profonde SemiBold se trouve sous un petit curseur droit : « Motion designer IA » à gauche, « « plus lent », « une autre couleur » » à droite. Lignes d'exemple : « De l'idée à la vidéo en un chat », « 01 Choisis un modèle », « 02 Décris ton idée », « 03 Affine avec des mots, puis exporte », « Dis au chat quoi montrer. L'agent construit l'animation. », « Typographie cinétique, formes, effets 3D et son ». À 6,22 s, une carte surgit près du bas, floue. Elle monte sur un ease-out rapide portée par une dérive constante vers le haut de 158 px/s pendant que la page s'assombrit à 45 % et se floute de 3 px. À gauche, la carte montre un triangle abstrait en encre profonde, violet, orange et jaune, légendé « Des idées en mouvement » / « [votre site web] ». À droite, elle montre une couverture d'encre profonde à violet avec une carte blanche « Décris ton idée », légendée « Un chat plutôt qu'une timeline » / « Aperçu en direct · export MP4 ». À partir de 6,9 s, elle accélère vers le haut, rétrécit à 0,9 et disparaît dans le flou. 5. 7,16–8,16 s, cartes empilées. Un fondu avec flou sur trois photogrammes amène deux cartes empilées (534 x 343 px, rayon de 51 px). Elles arrivent 165 px plus bas, 15 % plus grandes et floues, se posent en 0,3 s et continuent de dériver vers le haut, puis sortent par un mouvement accéléré et une rampe de flou. Chacune porte un titre blanc géant à 60 % d'opacité, coupé par son bord inférieur. À gauche, les titres sont « Polices » et « Musique », sur des visuels de triangles avec une pilule « Ouvrir l'app ». À droite, ce sont « Formes » et « Son », sur des couvertures d'encre profonde à violet avec des pilules « 02 » et « 03 » et des cartes intérieures blanches « Typographie cinétique, formes » et « Musique et effets sonores » ; la deuxième carte a une lueur rose-orange. 6. 8,16–10,03 s, le logo seul. Coupe avec flou sur mon logo dans un disque lavande de 167 px sur fond blanc. Il monte de 115 px à sa place sur une courbe exponentielle (0,17 s), tient, puis rétrécit dans la coupe. 7. 10,03–12,00 s, carte de fin. Coupe franche sur un fond presque noir avec une lueur radiale d'encre profonde. Un logotype blanc à la douce lueur à deux couches claque depuis 3,85x : « [votre marque] » à gauche, « [votre site web] » à droite. Son flou horizontal disparaît en 0,1 s. Il se pose à 1x en environ une seconde sur une courbe de plus en plus lente, puis recule lentement et accélère jusqu'à 0,72x au dernier photogramme. </structure> <composition> Le fond est presque noir #0D0B1E. Deux panneaux carrés de 930 x 930 px chacun sont côte à côte à y 100 (gauche à x 20, droite à x 970). Au-dessus de chacun se trouve une petite étiquette en Inter SemiBold 28 px, lavande clair #E9E4F2 : « Aperçu en direct » au-dessus du panneau de gauche et « [votre marque] · export MP4 » au-dessus de celui de droite. Les deux panneaux jouent en même temps les mêmes sept plans, avec le même minutage et le même mouvement. Le panneau de gauche affiche une nouvelle image un photogramme sur deux et celui de droite à chaque photogramme. Seuls quelques mots diffèrent entre les panneaux, comme indiqué dans les plans. À l'intérieur d'un panneau, dispose tout sur une scène de 1080 x 1080 mise à l'échelle pour s'ajuster. Palette : page claire #FAF9FF ; lavande #F0EDFF pour les panneaux doux et les lueurs ; lignes #E9E4F2 ; gris-violet atténué #6B6385 pour le texte secondaire ; encre profonde #1C0B5D pour le texte sombre et les surfaces sombres ; presque noir #0D0B1E. Les accents sont rose #FB2D89 (le principal) et orange #FE9117, avec violet #7C6CF2, turquoise #2DD4B0 et jaune #FFD23F là où quatre couleurs sont nécessaires. Utilise Inter 400/500/600/700 partout. Mon logo est l'icône de l'app partout où un logo apparaît. Une icône carrée arrondie convient le mieux à la mise en page, par exemple un carré d'encre profonde avec un tourbillon rose, orange et blanc et un triangle de lecture rose. </composition> <techniques> Rien ne démarre depuis une image fixe. Chaque élément entre déjà en mouvement sur un ease-out exponentiel et sort par un mouvement accéléré ou une rampe de flou. Le flou de mouvement suit la vitesse et la direction de chaque déplacement. Il n'y a pas de fondus enchaînés : les plans changent par coupes franches, coupes avec flou et un court fondu avec flou, tous sur le rythme. La caméra avance à 1,2 (ease-in-out, 0,47 s), tient un photogramme et recule à 1,04 sur une courbe accélérée dans le plan 1, et se décale de 115 px vers la droite dans le plan 3. Le curseur est une flèche noire à contour blanc ; ses clics le rétrécissent (15 %, ou à 0,82 pendant 0,1 s). La frappe se fait à 27 caractères par seconde derrière un curseur blanc. Les apparitions dépassent leur cible. Les sorties vers le haut utilisent des rampes de flou vertical, et l'entrée percutante de la carte de fin utilise un flou horizontal. </techniques> <music> Fais un fond de funky house entraînant à 124 BPM, d'exactement 12 secondes. Il s'ouvre sur une intro filtrée sous le premier plan. Le groove complet (grosse caisse à quatre temps, claps, basse slap, accords pincés) tombe à la coupe vers l'icône à 2,39 s. Un breakdown filtré joue sous le logo seul, et une réverbération s'éteint après le coup de la carte de fin. Chaque coupe tombe sur le rythme. Mixe à environ -14 LUFS avec un true peak sous -1 dBTP. </music> <sound> Par-dessus la musique, ajoute ces effets sonores : - un riser vers le drop et un boom dessus - un clic doux quand le curseur appuie sur le logo, et un autre sur l'icône de la barre des menus - un pop quand la zone de prompt jaillit - de légers tics de frappe - un whoosh sur le pli vers la barre des menus et sur le balayage vers la page de texte - des swishes quand la carte monte et quand les cartes empilées se fondent - un léger impact sur le logo seul - un boom à la tonalité descendante sur la carte de fin Pas de voix. </sound> <references> Un jingle de lancement d'app soigné dans le style du motion design d'interfaces produit moderne : maquettes d'interface lumineuses, mouvements de caméra cinétiques, fort flou de mouvement directionnel et coupes synchronisées sur le rythme. Il est conçu comme une comparaison de fréquences d'images. </references>