← Journal technique

frontend

Un système de mouvement, et les composants construits mais jamais montés

Un système de mouvement, et les composants construits mais jamais montés

Un système de mouvement, ce n'est pas un tas d'animations — ce sont des tokens plus un vocabulaire de composants, reflétés par plateforme. Ma plateforme fait tourner le même système conceptuel sur deux stacks différentes :

Concept Web (framer-motion) Mobile (reanimated)
Fond ambiant Blobs de dégradé qui dérivent + géométrie éparse Idem, plus la géométrie réagit à l'inclinaison de l'appareil via le gyroscope
Accent interactif Un octogramme qui suit le curseur sur une physique de ressort Même forme, pressable avec échelle + rotation de ressort, plus décalage d'inclinaison
Retour de succès Particules géométriques sur des trajectoires polaires Idem, plus haptique
Entrée Primitives de révélation / cascade déclenchées au scroll Entrées FadeInDown plus un hook de stagger
Entrée capteur Position de la souris useAnimatedSensor, un seul contexte partagé pour toute l'application

Ce qui en fait un système plutôt qu'un tas d'effets : une échelle de durée partagée (rapide ~150 ms, base ~200–220 ms, lent ~400 ms), une seule courbe d'ease-out signature, des intervalles de stagger et des distances de parcours nommés dans lesquels chaque composant puise. Le reduced-motion est une branche de première classe, pas une réflexion après coup — chaque composant décoratif vérifie la préférence d'accessibilité et se dégrade en statique. Un mouvement décoratif qui ne peut pas se couper lui-même est un défaut. Et le mouvement s'attache au sens — un changement de statut pulse, un nombre s'incrémente — pas au spectacle du chargement de page.

Le piège que ce projet a réellement rencontré

L'explosion de célébration mobile était finie et réglée en physique, montée sur zéro écran. L'accent de géométrie interactive était utilisé une fois, à 22px. Rien dans un build, un lint ou une revue ne signale un composant qui existe et n'est jamais rendu — dans une base de code solo, ça s'accumule discrètement jusqu'à ce que la capacité du système devance ce que les utilisateurs voient jamais.

La contre-mesure qui marche : en auditant le design, diffe explicitement ce que la bibliothèque de composants peut faire contre ce que chaque écran monte réellement. Ce diff était l'essentiel de mon backlog de refonte.

Quelques notes pratiques : les tokens ne franchissent pas automatiquement la frontière CSS/natif, donc le côté natif reflète à la main le fichier de tokens web — accepte la duplication mais traite le reflet comme un risque de dérive nommé et ré-audite-le (ma dette de mode sombre mobile venait exactement de cette couture). Le mouvement piloté par le gyroscope est le moyen le moins cher de faire qu'une application mobile se sente vivante, et il est ambiant — aucune pédagogie utilisateur nécessaire — mais enveloppe le capteur dans un seul fournisseur de contexte, puisque le sondage par composant gaspille la batterie. Et garde la géométrie signature récurrente à travers les pins, les particules, les motifs et les accents — une forme répétée est une marque, du clipart varié est un template.