Présentation

Cube est une bibliothèque JavaScript qui propose uniquement quatre types d’animation : rise, leave, morph et reveal. Chaque type possède une durée, une courbe de bézier et une distance fixes, ce qui élimine la configuration de paramètres (« dials ») au profit d’une utilisation immédiate. La couche d’exécution repose sur le Web Animations API (WAAPI) et, pour les animations déclenchées au défilement, sur IntersectionObserver. Aucun polyfill n’est requis, ce qui réduit la charge JavaScript au strict nécessaire.

Mécanique des quatre motions

Les durées sont codées en millisecondes : rise = 640 ms avec un décalage de 70 ms entre les éléments enfants, leave = 320 ms (40 ms de décalage), morph = 220 ms (130 ms de lead) et reveal utilise la même logique que rise mais s’active lorsqu’un élément entre dans le viewport. Toutes les animations utilisent la même courbe cubique‑bezier, ce qui garantit une consistance visuelle mais empêche l’usage de ressorts ou de courbes personnalisées. Le déplacement vertical est limité à 12 px, tandis que l’opacité passe de 0 à 1. Le stagger (décalage) et le delay permettent de contrôler le moment de lancement, mais aucune interpolation de trajectoire complexe n’est disponible.

Intégration framework et dépendances

Le cœur de Cube ne dépend d’aucune bibliothèque tierce. Des adaptateurs optionnels existent pour React, Vue, Solid et Svelte, exposés sous cube-motion/react, cube-motion/vue, etc. L’importation typique se résume à :

import { rise, leave, morph, reveal } from "cube-motion";

En React, les composants Rise, Morph et Reveal encapsulent les appels WAAPI, ce qui simplifie le JSX :

<Rise as="section" targets="children" className="hero">
  <h1>Four motions.</h1>
  <button onClick={save}><Morph active={saved} off="Save" on="Saved" /></button>
</Rise>

Les adaptateurs sont déclarés comme peer dependencies, ce qui évite d’alourdir le bundle principal lorsqu’ils ne sont pas utilisés.

Limites et cas d’usage

Cube ne fournit pas de système de timelines, de gestes ou d’animation de mise en page. Les développeurs qui ont besoin de séquences complexes ou de contrôles dynamiques (par exemple, des animations basées sur la physique) devront recourir à des bibliothèques comme GSAP ou Motion. De plus, l’absence de paramètres de ressort signifie que les transitions ne peuvent pas reproduire les effets d’accélération/décélération typiques des interfaces modernes. En mode « reduced motion », les transformations de translation, d’échelle et de flou sont désactivées ; seules les variations d’opacité subsistent, ce qui garantit la conformité aux préférences d’accessibilité sans altérer la logique de déclenchement.