Générez des animations Lottie prêtes pour la production avec Claude Code
Apprenez à utiliser le harnais open-source Text-to-Lottie pour générer des animations Lottie prêtes pour la production avec Claude Code ou Codex.
Qu'est-ce que Text-to-Lottie ?
Text-to-Lottie est un harnais open-source qui vous permet de générer des animations Lottie prêtes pour la production en utilisant Claude Code, Codex ou tout autre agent de codage prenant en charge les compétences. Au lieu de créer manuellement du JSON complexe ou de lutter avec les images clés d'After Effects, vous décrivez l'animation en langage naturel et laissez l'agent la construire.
Le projet est développé par diffusion.studio et est disponible sur GitHub à l'adresse diffusionstudio/lottie. Il a déjà gagné une traction significative avec plus de 1 900 étoiles et 95 forks.
Pourquoi c'est important
Les animations Lottie sont partout — des spinners de chargement dans les applications mobiles aux micro-interactions sur le web. Mais les créer traditionnellement nécessite soit :
- Une expertise approfondie d'After Effects et du plugin Bodymovin
- L'édition manuelle de structures JSON complexes
- L'embauche d'un motion designer
Text-to-Lottie élimine ces barrières. Vous pouvez désormais générer, prévisualiser et itérer sur des animations entièrement via des invites en langage naturel, rendant le motion design accessible à tout développeur.
Démarrage rapide
Commencer ne prend que quelques secondes. Installez la compétence avec une seule commande :
npx skills add diffusionstudio/lottie
Demandez ensuite à votre agent de codage de générer une animation Lottie. Voici un exemple d'invite :
Créez une animation Lottie à partir du chemin SVG dans https://github.com/JaceThings/SF-Hello/blob/main/SVG/hello-en.svg. Révélez le chemin avec une animation qui suit la direction naturelle du chemin. Appliquez un dégradé premium sur le thème Apple au chemin. Utilisez un timing ease-in-out, un fond transparent et préservez la géométrie SVG d'origine.
L'agent mettra en place un harnais et fournira un lecteur intégré pour que vous puissiez inspecter et éditer l'animation générée en temps réel.
Guide des invites
Pour obtenir les meilleurs résultats, suivez ces cinq principes :
1. Ancrez le modèle
Fournissez des SVG, des données réelles ou des captures d'écran chaque fois que possible. Les résultats sont nettement meilleurs lorsque l'animation est basée sur des actifs concrets plutôt que sur des descriptions abstraites.
2. Utilisez la terminologie du motion design
Décrivez le timing et le mouvement en utilisant le langage standard du motion design : ease-in, ease-out, ease-in-out. Ces termes correspondent directement aux courbes d'animation et produisent des résultats prévisibles.
3. Pensez comme un opérateur de caméra
Les graphiques animés professionnels reposent souvent sur le mouvement de la caméra. Incluez des poussées de caméra, des panoramiques, des zooms et des mouvements de type grue dans votre invite. L'agent peut les simuler via des transformations de groupe.
4. Demandez les contrôles dont vous avez besoin
Par défaut, les sorties n'exposent généralement qu'un contrôle de couleur d'arrière-plan. Si vous souhaitez personnaliser d'autres propriétés — comme la largeur du trait, la couleur ou l'opacité — demandez explicitement à l'agent de créer des contrôles pour celles-ci.
5. Spécifiez les FPS et la durée
Si votre animation nécessite une fréquence d'images ou une longueur spécifique, incluez les FPS souhaités et le nombre total d'images dans l'invite. Cela garantit que la sortie correspond aux exigences techniques de votre projet.
Utilisation de l'animation générée
Une fois générées, les animations peuvent être utilisées directement comme fichiers JSON Lottie ou importées dans After Effects pour un raffinement supplémentaire.
Web / HTML Vanilla
<script src="https://unpkg.com/lottie-web/build/player/lottie.min.js"></script>
<div id="anim"></div>
<script>
lottie.loadAnimation({
container: document.getElementById("anim"),
renderer: "svg",
loop: true,
autoplay: true,
path: "/animations/my-animation.json"
});
</script>
React Native
npm install lottie-react-native
import LottieView from "lottie-react-native";
export default function Loader() {
return (
<LottieView
source={require("./animation.json")}
autoPlay
loop
style={{ width: 200, height: 200 }}
/>
);
}
iOS Swift
import Lottie
let animationView = LottieAnimationView(name: "animation")
animationView.frame = view.bounds
animationView.contentMode = .scaleAspectFit
animationView.loopMode = .loop
view.addSubview(animationView)
animationView.play()
Android Kotlin
val view = findViewById<LottieAnimationView>(R.id.animationView)
view.setAnimation(R.raw.animation)
view.loop(true)
view.playAnimation()
Flutter
dependencies:
lottie: ^latest
import 'package:lottie/lottie.dart';
Lottie.asset('assets/animation.json')
Conclusion
Text-to-Lottie est un outil puissant qui intègre le motion design dans le flux de travail du développeur. En combinant l'expressivité du langage naturel avec la précision du code, il permet un prototypage rapide et la production d'animations de haute qualité. Que vous construisiez une application mobile, une interface web ou un jeu, ce harnais peut vous faire gagner des heures de travail manuel.
Consultez le dépôt GitHub pour commencer, et rejoignez la communauté sur Discord pour des mises à jour et du support.