Chaque animation est une expérience de 5 secondes. Cliquez sur une vignette pour la prévisualiser.
L'élégance de deux voiles qui s'ouvrent sur votre marque. L'intro préférée du luxe et de la haute couture.
Les détails qui séparent un site ordinaire d'un site premium. Survolez, cliquez, jouez.
Cette page n'utilise aucune bibliothèque d'animation. Les 56 séquences que vous venez de faire tourner sont écrites à la main, en CSS et en React, et tiennent dans la feuille de style de la page. Voici les trois règles qui les gouvernent.
Pas de GSAP, pas de Lottie, pas de moteur d'animation tiers. Le composant de cette page n'importe que React et sa propre feuille de style. Rien à mettre à jour, rien qui casse à la version suivante d'une bibliothèque, et aucun kilo-octet de JavaScript ajouté au bundle pour faire bouger un élément.
Une animation qui touche à la largeur, à la hauteur ou à la position en pixels force le navigateur à recalculer la mise en page à chaque image. Celles-ci ne modifient que transform et opacity : le compositeur les traite sur le GPU, sans repasser par le calcul de mise en page, ce qui laisse le fil principal libre pour le reste de la page.
Le site respecte prefers-reduced-motion : quand le système du visiteur signale qu'il préfère limiter les animations, les durées tombent à zéro et le contenu s'affiche directement. Une animation ne doit jamais être la condition pour lire une page.
Les 18 intros cinématiques et les 38 micro-animations ne servent pas la même chose. Une intro se joue une fois, à l'ouverture, et pose un ton : elle a le droit de durer deux secondes. Une micro-animation accompagne un geste, un survol, un clic, et doit être finie avant que l'utilisateur ne se demande ce qui se passe. Les mélanger est la faute la plus courante : un site où chaque bouton se comporte comme un générique de film devient épuisant au bout de trois clics.
L'essentiel du mouvement est décrit en @keyframes CSS et le navigateur s'occupe de l'interpolation. React ne fait que déclencher : il monte le composant, change une classe, incrémente une clé pour rejouer la séquence. Résultat, une animation ne s'interrompt pas parce que le fil principal est occupé ailleurs, et le code qui la décrit reste lisible sans dérouler une machine à états.
Chaque démonstration a son bouton de relecture, et les micro-animations sont filtrables par catégorie. Ce n'est pas un détail d'ergonomie : une animation ne se juge pas au premier visionnage, mais à la cinquième, quand on commence à voir si le timing tient ou si un rebond agace. C'est aussi comme ça que je les valide avant de les intégrer à un projet client.
Chaque animation est codée sur mesure. Zéro bibliothèque. 100% performance. Compatible tous navigateurs et mobiles.
📞 Discutons de votre projet