Gratuit
Solenne · 16:9
Rendu par ce Skill
Product Launch Motion v1.0.0
Un film de lancement digne de Dribbble pour votre app ou votre site : une seule forme d'interface sans aucune coupe, un curseur qui fait chaque clic, des ressorts, des compteurs et un son calé sur le tempo.
Pas encore de note 0 téléchargements
- Format
- Vidéo · 16:9
- Durée
- 0:30
Gratuit Gratuit avec un compte
Collez ceci dans votre agent. Il connecte la CLI si besoin, puis installe le Skill.
Un Skill open source qui réalise un film de lancement comme les meilleurs motion designers. Un seul élément passe de bouton à curseur, interrupteur et graphique sans aucune coupe, un curseur déclenche chaque changement, les chiffres défilent sur des compteurs et chaque clic et chaque souffle tombent sur le temps de la musique. Votre agent écrit l'histoire, construit le film en HTML, le rend à 60 i/s avec un vrai flou de mouvement et vous livre le MP4.
Mis à jour le 2 nov. 2026
Ce que vous obtenez
- Un film de lancement fini en H.264 MP4, 1920×1080 à 60 i/s avec flou de mouvement
- Un seul film en HTML où chaque image dépend du temps, prêt à modifier
- Une planche contact d'une image par temps et un storyboard d'une image par seconde
- Des effets sonores synthétisés, mixés avec votre musique en rythme
Idéal pour
- Lancements d'apps, de SaaS et de sites
- Nouvelles fonctions et mises à jour produit
- Virgules de marque et reels de motion d'interface
Pas pour
- Vidéos face caméra ou tournées en prise de vue réelle
- Vidéos explicatives avec voix off scénarisée
À propos de ce Skill
Vous dites
/product-launch-motion Fais un film de lancement de 30 secondes pour mon app sur localhost:3000. Une seule forme sans coupe : une carte devient un curseur, un interrupteur, une pastille d'état et un tableau de bord. Utilise ce morceau à 120 BPM et fais tomber notre nombre d'inscrits sur le drop.
Confiez votre site ou votre app à votre agent. Il construit l'histoire à partir du problème de votre client, puis réalise un film de lancement : le titre se pose mot à mot, une demande est tapée, et une seule forme porte toute la démo, passant de carte à curseur, interrupteur, pastille d'état et tableau de bord pendant qu'un curseur clique et fait glisser. La caméra s'approche pour que chaque état remplisse le cadre, recule pour montrer l'échelle, et le film se termine sur vos chiffres qui montent et votre logo qui tombe pile sur le drop.
Comment ça marche
- D'abord la réalisation : votre agent lit votre produit et écrit un court plan créatif : l'histoire et le temps fort, le traitement de la marque, la musique et une liste de scènes temps par temps. Il prend lui-même les décisions créatives et les liste une à une pour que vous puissiez en annuler n'importe laquelle en une réponse.
- D'abord la musique : il mesure la grille rythmique du morceau avec numpy et cale chaque scène dessus, pour qu'il se passe quelque chose à chaque temps et que le grand moment tombe sur le drop.
- Un seul film en HTML : chaque image est calculée à partir du temps, avec des ressorts en forme fermée, des interrupteurs et des onglets qui s'étirent parce que chaque bord a son propre ressort, des changements de contenu flous, un curseur qui s'incline, s'enfonce et laisse une onde, et des compteurs pour vos chiffres.
- Le son : les sons d'interface sont synthétisés de zéro et chacun est placé sur le temps par son propre pic.
- Contrôle et rendu : une image par temps sur une planche contact, des corrections, puis Playwright rend quatre sous-images par image et FFmpeg les fond en un vrai flou de mouvement à 60 i/s.
Conseils
- Apportez un morceau libre de droits autour de 120 BPM avec une montée et un drop, ou laissez l'agent en trouver un.
- Listez les 8 à 12 états que la forme doit prendre, ou dites « à toi de voir ».
- Donnez-lui vos vrais chiffres ; il garde les grands chiffres exacts et vous dit quels détails il a inventés.
- Utilisez Claude Opus 5.5 pour le meilleur résultat ; c'est le détail qui donne l'air haut de gamme.
Open source
Product Launch Motion est réalisé par Muhammad Abubakr (AbubakrChan/product-launch-motion) et partagé sous licence MIT. Le téléchargement est le Skill tel que publié sur GitHub, sans les films d'exemple que l'auteur a réalisés pour Cheerful.
Ce qu'il vous faut avant de commencer
- Vous fournissez
- Votre site ou votre app, l'histoire ou les états à montrer, vos vrais chiffres et votre logo et, si vous voulez, un morceau libre de droits autour de 120 BPM.
- Dépendances
- Node.js 20 ou version ultérieure — requis · Playwright Chromium — requis · FFmpeg — requis · Python 3.9 ou version ultérieure — requis
- Coûts externes
- Aucun. Le film est construit et rendu sur votre machine et les effets sonores sont synthétisés ; aucune clé d'API ni aucun service payant n'est utilisé.
- Dernier test
- v1.0.0 —
Avis des utilisateurs
Pas encore d'avis. Installez le Skill et soyez le premier à le noter.
FAQ
Que veut dire « une forme, sans coupe » ?
Toute la démo tient dans un seul élément qui change de taille, d'arrondi et de couleur pendant que son contenu change avec un bref flou. Un bouton devient un indicateur de chargement, un curseur, un interrupteur et un graphique, si bien que l'œil ne se perd jamais.
Faut-il de la musique ?
Le mieux est un morceau libre de droits autour de 120 BPM avec une montée et un drop. Apportez le vôtre ou laissez l'agent en trouver un et construire la montée et le drop autour de votre grand moment.
Peut-on modifier après le rendu ?
Oui. Le film est un seul fichier HTML où chaque image est calculée à partir du temps : vous pouvez changer les textes, les couleurs, le rythme ou une scène entière, puis relancer le rendu.
Pourquoi est-ce gratuit ?
Product Launch Motion est un Skill open source de Muhammad Abubakr. Nous le proposons tel quel, avec un exemple réalisé en le faisant tourner sur notre app maison connectée, Solenne.
