Utiliser un template de motion design
Ce que contient un template de motion du catalogue, comment l'intégrer à votre projet ou le faire adapter par l'agent, l'afficher en vidéo avec HyperFrames et respecter prefers-reduced-motion.
Mis à jour le
Un template de motion est un morceau d'animation prêt à reprendre : une animation d'interface à coller dans une page, ou une composition vidéo à faire rendre en MP4. Dans les deux cas, vous récupérez des fichiers. Rien ne s'exécute à l'installation, et votre agent peut ensuite les adapter à votre projet.
Ce que vous téléchargez
Chaque fiche du catalogue motion indique la famille du template, un aperçu, la licence d'origine et le lien vers la source. Les fichiers sont ceux de l'auteur, dans leur version d'origine. Trois familles reviennent :
| Famille | Ce que c'est | Où ça sert |
|---|---|---|
| HyperFrames | Une composition en HTML, CSS et JavaScript, rendue image par image en vidéo | Fichier MP4, WebM transparent pour incrustation |
| Uiverse | Un élément d'interface (bouton, carte, interrupteur) en CSS ou Tailwind, sous licence MIT | Page web |
| Animata, Motion-Primitives | Des composants React animés, construits avec Tailwind CSS (Animata) ou Motion et Tailwind CSS (Motion-Primitives) | Application React |
Installer le template
La méthode est la même que pour les autres ressources : prompt d'installation, commande ou ZIP. Prenez celle qui vous convient depuis la fiche (voir Installer votre première ressource).
Prompt d'installation
Read https://palatekit.com/en/motion/<slug>/install.md and follow the instructions to install it.
Terminal
npx --yes palatekit@latest install <slug>
ZIP ou dossier
Téléchargez le ZIP depuis la fiche et décompressez-le dans le projet où vous voulez l'utiliser.
Remplacez le slug par celui de la fiche choisie.
Intégrer une animation d'interface
Un composant Animata se reprend par copier-coller : la documentation décrit une intégration « par simple copier-coller ». Motion-Primitives propose aussi la copie manuelle depuis la page du composant, ou une commande qui ajoute le composant à votre projet, par exemple pour Text Effect :
npx motion-primitives@latest add text-effect
Ses prérequis, selon sa documentation d'installation : Tailwind CSS, le paquet motion, un utilitaire cn (clsx et tailwind-merge) et Lucide React pour les icônes. Les éléments Uiverse, eux, sont en CSS ou en Tailwind et n'ont pas de dépendance particulière.
Le plus simple est de laisser l'agent faire le travail. Un prompt qui marche bien :
Intègre le composant du dossier motion/ dans ma page d'accueil, derrière le titre.
Reprends mes couleurs et mes polices, vérifie les dépendances manquantes
et dis-moi lesquelles tu ajoutes avant de les installer.
Relisez les dépendances qu'il propose avant de les accepter : c'est la seule étape où quelque chose s'installe vraiment, et c'est vous qui la validez.
Faire un rendu vidéo avec HyperFrames
HyperFrames transforme une composition HTML en vidéo : il avance dans la timeline d'un navigateur sans interface, image par image, puis encode le résultat avec FFmpeg. Il demande Node.js 22 ou plus récent et FFmpeg. Les animations doivent pouvoir être positionnées à un instant précis, ce qui est le cas des composants prévus pour lui.
Depuis le dossier du projet :
npx hyperframes preview
npx hyperframes render --output output.mp4
La première commande ouvre un aperçu dans le navigateur, la seconde produit le fichier. Pour une incrustation sur un autre montage, exportez en WebM transparent :
npx hyperframes render --format webm --output overlay.webm
Une composition peut aussi recevoir des textes différents au rendu, avec l'option --variables suivie d'un objet JSON. Pour comparer HyperFrames à Remotion, voir HyperFrames ou Remotion ?.
Respecter prefers-reduced-motion
Certaines personnes sont gênées, voire malades, devant des éléments qui bougent beaucoup, notamment des grands mouvements de zoom ou de défilement. Leur système a donc un réglage « réduire les animations », que CSS lit avec prefers-reduced-motion. Il a deux valeurs : no-preference et reduce.
Un composant copié n'en tient pas toujours compte. Demandez-le à l'agent :
Pour ce composant, quand prefers-reduced-motion vaut reduce,
supprime les mouvements d'échelle et de déplacement
et garde au plus un fondu discret.
En CSS, le principe est de redéfinir l'animation dans une règle placée après la règle d'origine :
@media (prefers-reduced-motion: reduce) {
.carte {
animation: fondu 4s linear infinite both;
}
}
Cela ne concerne que les pages web. Une vidéo rendue ne peut pas lire ce réglage : si elle est diffusée sur votre site, évitez la lecture automatique avec mouvements rapides, ou proposez une image fixe à la place.
Vérifier le résultat
- Ouvrez la page et regardez l'animation sur mobile.
- Activez la réduction des animations dans le système ou dans les outils de développement du navigateur, puis rechargez.
- Pour une vidéo, regardez le MP4 en entier avant de le publier.
- Vérifiez la licence et la notice jointes : elles s'appliquent aux fichiers d'origine. Voir aussi les bonnes pratiques de sécurité.
Sources
Questions fréquentes
Un template de motion s'exécute-t-il à l'installation ?
Non. L'installation copie des fichiers. Rien ne se lance tant que vous n'ouvrez pas la page ou que vous ne demandez pas un rendu.
Faut-il HyperFrames pour utiliser une animation d'interface ?
Non. Les animations Uiverse, Animata ou Motion-Primitives s'intègrent dans une page web. HyperFrames ne sert que pour produire un fichier vidéo.
Comment respecter prefers-reduced-motion ?
Demandez à l'agent de remplacer ou de couper l'animation quand le réglage est sur reduce, puis testez avec l'option du système ou des outils de développement du navigateur.