GSAP

La créatrice malaktv_ montre comment elle habille ses vidéos face caméra avec Claude Code : elle demande des effets (commande « effects » dans l'app), Claude monte la séquence sur une timeline et ajoute graphiques animés, textures et titres, comme le classement de ses reels en barres. Le post ne détaille pas l'outil de rendu utilisé (probablement une bibliothèque type Remotion ou HyperFrames, à vérifier). Piste pour du motion design social produit très vite.

Cyrille Houessou partage la charte de BŸON, marque à six pôles (solaire, électricité, confort, électronique, sanitaire, solutions pro) réunis sous un seul symbole, le Ÿ. Plutôt qu'un PDF, il la présente en vidéo animée : construction du logo, zone de protection, palette et proportions, typographie, trame, supergraphique, pictogrammes puis marque en situation. Format à reprendre pour présenter une identité à un client de façon vivante.

Arminas Valunas liste 20 dépôts GitHub gratuits à brancher comme skills dans Claude pour couvrir animation, physique, 3D, son et sous-titres. Parmi eux : Remotion (vidéo en React), HyperFrames (rendu HTML vers vidéo), Anime.js (timelines), React Spring, PixiJS, p5.js, Paper.js, Matter.js (physique 2D), Three.js, Rapier, OGL (shaders), tsParticles, glTF Transform, GL Transitions et OBS Studio. Une boîte à outils de référence pour produire présentations et films animés par le code.

Identité et animation de logo pour Ductile, plateforme qui unifie opérations, données financières et workflows dans l'hôtellerie. Le système repose sur trois idées : adaptabilité, connexion et contrôle. Le logo en verre 3D, le bleu électrique et les applications (badges, écrans, papeterie) montrent comment donner de la matière à une marque SaaS.

Rexan Wong décortique comment sont vraiment produites les vidéos de motion design générées par Claude Opus, loin du mythe du prompt unique : partir de vidéos de référence (whatships.com) pour imposer un style, installer HyperFrames ou Remotion pour que l'IA code chaque scène et rende directement un MP4, ajouter des composants 21st.dev pour une UI crédible, puis fournir marque, captures produit et intention, et demander trois storyboards avant de produire.

Partage d'un tutoriel vidéo de 18 minutes qui montre pas à pas comment construire des sites web animés avec l'IA, à l'image de la page d'accueil « Play beyond ordinary » visible dans l'aperçu (décor illustré, typographie en surimpression, transitions au scroll).

Workflow en deux temps : créer une planche de brand kit (logo, palette, typographie, écrans d'appli, mascotte) avec un prompt partagé par le créateur Miyama à partir d'une simple bannière X, puis l'animer en motion graphics avec MiniMax H3. Le prompt est donné dans le fil d'origine.

Le créateur japonais appletea reprend un prompt partagé pour générer une séquence de motion design à la gloire de MiniMax H3 : lettrage monumental en 3D, personnage dans un studio industriel, mouvements de caméra fluides. Exemple du niveau des vidéos de titrage générées par IA.

Charlie Hills a classé en 42 types les animations que Claude peut désormais produire (typographie cinétique, compteurs, graphiques, transitions, logos animés...). Méthode en trois étapes : choisir le mouvement dans le catalogue, l'installer dans Claude Code en une ligne, puis demander le bloc à Claude qui écrit le HTML. Le rendu sort en vraie vidéo avec scènes, transitions et synchronisation audio.

Le lettreur Jeremy Friend présente une série de lettres très fluides et énergiques, comme en train de danser : traits courbes et effilés qui donnent mouvement et profondeur, dessinés d'abord au crayon puis vectorisés dans Illustrator. Noir et blanc sur fond jaune, une belle référence de lettrage expressif.

Méthode / workflow IA — génération de sites à expérience de défilement

Avec Claude Fable 5, on génère une landing page complète à expérience on-scroll (sections pinnées, typo XXL, cartes 3D flottantes, galeries qui s'étendent, mockups produit, on-load animation) depuis un seul prompt. Le workflow : choisir un site d'inspi → enregistrer le scroll → faire analyser la vidéo (Codex) → écrire un prompt détaillé → laisser Fable 5 construire la page. Utile pour prototyper vite des sites « whaou » au studio.

Démo motion design / animation graphique générée par IA

Démonstration d'animation graphique générée par IA au rendu surprenant (« mais c'est quoi ça encore ? »). Référence utile pour suivre l'évolution des outils d'animation IA appliqués au design graphique.

Méthode / stack technique — Claude + Three.js + GSAP ScrollTrigger

Recette technique commentée pour un hero produit 3D immersif : Three.js pour l'objet en orbite 360°, grille CSS pour l'esthétique « blueprint », GSAP ScrollTrigger pour la rotation au scroll, police monospace pour le côté tech/blockchain, requestAnimationFrame pour l'animation flottante.

Exemple de motion design généré par IA appliqué à un contenu Pepsi — technique à noter.

Film/motion design publicitaire Schweppes sur la maturation du goût dans le temps.

Outil / ressource de prompts

Site motionsites.ai : bibliothèque de prompts à copier-coller dans Lovable (ou autre IA) pour générer des sites en motion design — complète la stack GSAP/Claude du même auteur.

Recette technique / stack créatif

Stack détaillée pour construire avec Claude : Three.js (produit 360° rotable), WebGL PointLight (glow réactif au scroll), CSS scroll-snap, GSAP ScrollTrigger (pin produit + copy qui scroll), Lottie (animations After Effects dans le navigateur). Même auteur que le tuto immobilier de luxe cité en citation.

Fil structuré en 6 prompts pensés pour être exécutés dans l'ordre sur un même sujet de présentation, chacun endossant un rôle différent : (1) consultant en présentation pour cadrer objectif/public/message ; (2) architecte pour détailler titre et objectif diapositive par diapositive ; (3) rédacteur de récit pour transformer le sujet en structure narrative (amorce/problème/insight/solution/conclusion) ; (4) directeur artistique pour recommander styles de mise en page, graphiques et icônes par diapositive ; (5) générateur de contenu pour rédiger les points clés complets de chaque diapositive ; (6) éditeur final pour réduire le texte et clarifier chaque diapositive. Bon exemple de « prompt chaining » (enchaînement de rôles IA successifs) applicable à toute pige sur les usages avancés d'assistants conversationnels en contexte professionnel, au-delà du seul cas des présentations.

Méthode condensée en 6 étapes pour produire des sites web animés avec Claude : (1) rédiger une invite détaillée avec mise en page, animations et style ; (2) demander l'expansion d'image basée sur le défilement et des effets de zoom ; (3) générer des couches parallaxe pour un rendu de profondeur 3D ; (4) créer des sections fluides, des transitions et des interactions ; (5) affiner les visuels et le timing pour un rendu cinématographique ; (6) exporter, ajuster et lancer rapidement. Fil orienté production plutôt que théorie, complémentaire aux guides pas-à-pas Claude déjà suivis lors des lots précédents (ex. FHILY avait déjà été repéré sur un thème proche).

Référence de présentation produit pour fonderie typographique, à conserver comme benchmark de mise en page pour la vente de polices premium. La planche combine plusieurs formats dans une grille bento cohérente : titre hero en très gros corps (« NOW BREAKS ») avec compteur de fonctionnalités (08 ligatures, 13 alternates) ; mockups d'usage réel en contexte (pochette d'album vinyle « Vol 05 », post promo mode « Bold Looks Only », panneau de signalétique urbaine « Open 8am 5pm ») ; planches techniques (jeu de chiffres avec variante numérale alternative, glyphes spéciaux et ligatures, alphabet complet en majuscules). Bonne référence de direction artistique pour la présentation de tout produit typographique ou de branding modulaire, au-delà du secteur des fonderies : la logique de grille bento mixant hero shot, mockups contextuels et fiche technique est transposable à la présentation de n'importe quel système de marque.

Reel démonstration d'animations web avec la librairie GSAP.

Carrousel de prompts qui transpose le cours culte « How to Speak » du professeur Patrick Winston (MIT) en instructions structurées pour Claude/ChatGPT, avec 5 usages : bien démarrer une présentation (promesse d'empowerment dès les 60 premières secondes), éliminer les « crimes de slides » (trop de mots, police < 40pt, pointeur laser…), rendre une idée mémorable via le framework « Star » (Symbole, Slogan, Surprise, Idée saillante, Histoire), structurer un discours qui persuade (vision → preuve par les actes → contributions) et utiliser accessoires/histoires pour enseigner un concept complexe. Chaque prompt suit la même architecture rôle/tâche/étapes/règles/output, avec un « STOP, pose-moi des questions avant d'écrire » systématique — un pattern de prompt engineering solide, au-delà du sujet présentations.

Tutoriel vidéo -- animations de site web avec Claude Code + Nano Banana 2.

Suite du tutoriel : réorganisation des Skills (taste-skill, soft-skill, video-scroll-driven, redesign-skill, output-skill) dans un seul dossier .claude/skills/ avec mise à jour du CLAUDE.md, puis rédaction d'un brief détaillé pour générer une landing page immersive inspirée de l'esthétique Evian (React/Vite/Tailwind/GSAP ScrollTrigger/Lenis), avec extraction de frames vidéo via ffmpeg intégrées dans une animation canvas liée au scroll. Le créateur compresse ensuite une image « bébé_4k.png » via iloveimg.com avant intégration au site.

Le prompt du brief immersif a été reconstitué en fusionnant 3 captures qui montrent le même encadré de saisie à des positions de défilement différentes — chaque portion retranscrite verbatim. Le lien entre ce groupe et la référence Evian / la démo kie.ai est une hypothèse plausible (même créateur/session probable) mais non confirmée visuellement dans chaque capture individuelle.

Vidéo tutoriel où le créateur utilise Claude Code (extension VS Code, projet « Evian-project ») dans l'IDE Antigravity pour générer un site statique où une vidéo se joue au défilement (scroll-driven, rendu par canvas/frames). Il montre le fichier CLAUDE.md définissant la méthodologie complète (stack HTML/CSS/JS vanilla, GSAP 3, Lenis, FFmpeg/FFprobe, règles de design non-négociables, anti-patterns interdits, phases du process), puis installe le repo GitHub « Leonxlnx/taste-skill » (3.5k stars) qui regroupe 4 skills (taste-skill, redesign-skill, soft-skill, output-skill) donnant du « goût » esthétique à l'agent.

Le texte du fichier CLAUDE.md contient de petites valeurs numériques (ex. « 0.88–0.92 », « 550vh ») lues avec un niveau de confiance raisonnable mais non garanti à 100%. « Antigravity » identifié comme IDE via la barre de statut.

Classement UFC Pound-for-Pound présenté via des illustrations générées par IA animées en motion graphic dynamique — référence de style pour l'illustration sportive assistée par IA.

« Animate your mockups with Kittl Video. » Carrousel demonstratif de l'outil Kittl Video applique a des scenes tres variees (personnages de jeux video/series type The Last of Us, joueurs de foot Real Madrid, Spider-Man) — l'outil transforme une image statique en mini-animation/mockup anime, bonne veille sur les outils d'animation de visuels produits/personnages accessibles sans motion designer.

Astuce Canva pour garder une charte cohérente après l'import de slides NotebookLM : la fonctionnalité de style hiérarchique (modifier un H1 met à jour tous les H1).

Rendu 3D/motion design pour packshot cosmétique — mélange de textures liquides « nutriment » très abouti.

Image fixe générée dans Nano Banana → mise en mouvement via Higgsfield → speed ramps et finition dans After Effects pour un rendu cinématique.

L'app Canva branchée dans ChatGPT permet de générer une présentation complète depuis le chat, gratuitement. Signal fort : les suites créatives deviennent des plugins de LLM plutôt que des destinations.

Une journée de travail ramenée à moins d'une heure : l'agent Manus 1.6 construit un playbook complet (structure, slides, images générées une à une) à partir d'une lecture de 15 min dictée à un outil vocal. Zéro édition manuelle.

This used to take me at least a day. Now it's less than an hour with Manus. Zero manual editing, 100% generative editing.

Best-of motion design du studio Fluid pour 2025 : Disney Lorcana, Thrustmaster, Quadrant × Lando Norris, Godbreakers (Thunderful). Bonne référence de studio pour du motion licence/gaming/sport auto.

Sharing some of my favourite work from the Motion team at Fluid in 2025. Featuring projects for Disney Lorcana, Thrustmaster, Quadrant and Lando Norris, and Godbreakers for Thunderful.

Remplacer les keyframes After Effects par du code généré : Gemini 3 (déjà fort en JS/Three.js) produit des B-rolls abstraits (particules, glitch) directement dans Canvas. Idéal pour les habillages d'explainer video.

Capture d'un échange d'itération réel (Motion Graphic Particle Wave Animation) — le prompt initial qui a créé l'animation de base n'est pas visible sur cette capture, seule cette itération de raffinement l'est.

Go into the Gemini App, select « Canvas », and paste this prompt: « Create a 'Chaos' motion scene. Black background with red text saying 'ERROR 404'. I want the text to jitter and shake randomly… »

Déconstruction pas-à-pas d'une animation de scroll fluide et minimale créée en moins de 50 lignes de code — tutoriel vidéo complet sur la logique GSAP/ScrollTrigger derrière un site.

I created the entire scroll animation in under 50 lines of code! I broke down the website step-by-step and fully deconstructed the animation flow so you can understand exactly how everything works behind the scenes.

Illustrateur en recherche de DA pour du lettering fait main énergique et du motion graphics — bon vivier de style pour des campagnes qui veulent sortir du tout-digital générique.

Looking to expand my connections and meet with art directors who need hand drawn lettering and energetic graphics/motion for upcoming campaigns and projects.

Démonstration d'intégration de Nano Banana dans un pipeline After Effects — pont entre génération IA et post-prod traditionnelle.

Gamma 3.0 permet de créer des présentations soignées par IA sans compétence design particulière — outil à tester pour des decks rapides.

Présentation de « Tether », un outil/plugin d'animation IA orientable directement dans Adobe After Effects. Bon repère outil pour intégrer de l'animation générative dans un pipeline After Effects existant.

Idée de format de présentation/atelier interne autour de l'IA (« IA Café »), contenu exact non détaillé au-delà du lien raccourci. Repère de format d'animation interne sur le thème IA.

Recommandation de Slides.com comme outil de présentation alternatif apprécié. Bon repère d'outil de présentation à tester en complément de Gamma/Canva.

Portfolio motion design mettant en avant animation et direction artistique. Bon repère de studio/freelance à suivre pour des références motion soignées.

Portfolio d'un studio motion design travaillant sur des assets de marque animés. Bon repère de studio à suivre pour l'animation de systèmes de marque.

Concept d'animation de chargement amusant réalisé avec Rive. Bon repère de micro-interaction ludique pour une interface.

Animation motion design pour une communication Coca-Cola x Star Wars. Bon repère d'exécution motion pour une collaboration licence pop culture.

Tutoriel d'animation façon Starbucks réalisée sous Figma. Bon repère technique d'animation d'interface à garder sous la main.

Vidéo de présentation motion design de l'agence 1600. Bon repère de référence agence pour le style et le rythme d'une vidéo de marque.

Guide pour créer des présentations professionnelles avec ChatGPT directement dans PowerPoint et Google Slides. Bon repère méthodologique pour accélérer la production de decks.

Analyse de la rupture qu'apporte Gamma dans la création de présentations après 40 ans de slides classiques. Bon repère de veille produit sur cet outil de deck IA.

Exemple soigné de motion design UI appliqué à une page Linktree. Bon repère d'inspiration interaction design.

Template InDesign prêt à l'emploi pour présenter des brand guidelines. Ressource pratique pour accélérer la mise en page de chartes graphiques.

Repérage d'un format d'animation vectorielle (Lottie/After Effects) peu connu mais très utilisé pour des micro-interactions légères (UI, réseaux sociaux) — alternative au GIF/MP4 pour des animations fluides et ultra-légères en poids fichier.

SanDisk (cartes SD et SSD) dévoile sa nouvelle identité : rebranding accompagné d'un motion design remarqué.

Présentation Google Slides sur l'utilisation de Sora (OpenAI) en contexte marketing — support de formation/veille, contenu non accessible en session cloud (nécessite authentification Google), à vérifier.

Gamma AI : outil pour créer rapidement des présentations générées par IA, présenté comme un gain de temps important.

Workflow en trois étapes pour un contenu social : 1) dans Adobe Firefly, décrire le style (ex. lettres en pierre 3D couvertes de fougères) et donner le logo en référence de composition (JPEG, texte noir sur fond blanc) ; 2) choisir la meilleure image ; 3) l'animer avec un outil image-to-video pour obtenir la transition. Démo faite avec le logo ZenRobot. Méthode simple pour décliner un logo client en matière (végétal, pierre, verre) sans 3D.

Glyf, outil vidéo IA pour motion designers, ajoute l'export en séquence PNG : on importe une animation 2D simple, l'outil la restylise par diffusion (ex. un personnage plat devient une scène 3D enneigée), puis on récupère les images pour les composer dans After Effects. Intérêt : garder l'IA comme générateur d'assets dans un pipeline de compositing maîtrisé.

Démonstration humoristique : quand le client demande de faire « popper » un visuel, Howard Pinsky l'anime entièrement dans Adobe Express (entrées, rebonds, textes animés). En commentaire, la question de l'usage pour des bannières web face à Adobe Animate et de l'import de fichiers Photoshop. Outil simple pour décliner rapidement des formats sociaux animés.

Exemple de film produit Microsoft en 3D motion : interfaces en verre dépoli qui flottent, rubans de couleurs dégradées rose, violet et bleu, mouvements fluides. L'auteur cite Cinema 4D, Blender et After Effects pour obtenir ce style. Référence forte pour présenter une application ou un service numérique de façon tangible et premium.

La motion designer Tia Mayer pointe le principal frein des effets IA : la variation d'un rendu à l'autre. Avec Glyf, en gardant la même image de référence et les mêmes réglages de force de référence et de structure sur chaque rendu, elle obtient une animation 2D (un feu de camp et une guimauve) restylisée de façon cohérente sur toute la séquence. C'est ce qui distingue un outil de recherche de style d'un outil de production.

Astuce vidéo PowerPoint : en fusionnant formes et texte puis en remplissant le résultat avec une image d'arrière-plan, on obtient un titre géant qui laisse voir la photo à travers les lettres. Un effet simple pour une slide d'ouverture plus graphique.

Article pratique sur les façons de produire une présentation PowerPoint avec ChatGPT : faire rédiger le plan et le texte des slides, puis les mettre en forme, ou faire générer un script qui crée le fichier automatiquement. Contenu non relu en détail. À comparer avec les outils dédiés comme Gamma ou Canva dans ChatGPT, rangés dans la même section.