@zevra/ui 0.11.0 → 0.12.0

package/src/motion.css

@@ -14,9 +14,24 @@
  *
  * ─── Comment c'est construit ────────────────────────────────────────────
  * L'état AU REPOS de chaque élément est son état FINAL : sans animation, la
- * page est complète et lisible. Les animations d'entrée ne vivent que dans
- * le bloc @supports, si bien qu'un navigateur sans `animation-timeline`
- * affiche simplement le contenu en place plutôt qu'un écran vide.
+ * page est complète et lisible.
+ *
+ * Les ENTRÉES se jouent UNE FOIS (arbitrage du 26/08/2026, DECISIONS.md) :
+ * l'ancien pilotage par `animation-timeline: view()` rejouait chaque entrée
+ * à l'envers dès qu'on remontait — le contenu disparaissait sous le lecteur,
+ * et une grille haute n'était jamais « contenue », donc jamais posée. Le
+ * paquet arme désormais les entrées par `html.zv-motion` (posé par
+ * motion.js, importable en `@zevra/ui/motion.js`), et chaque élément se
+ * révèle quand il entre au viewport, puis N'EN BOUGE PLUS. Sans JavaScript,
+ * rien n'est armé : la page s'affiche complète — même dégradation douce
+ * qu'avant.
+ *
+ * Un échafaudage de scènes (l'expérience épinglée d'une home) peut vouloir
+ * garder le pilotage au défilement : poser `data-zv-motion-skip` sur la
+ * scène — motion.js n'y touche pas — et re-brancher les @keyframes du
+ * paquet sur ses timelines nommées. Seuls la barre de progression
+ * (zv-anim-progress) et le point d'étape (zv-anim-dot-active) restent
+ * scroll-pilotés ici : suivre la lecture est leur raison d'être.
  *
  * Les deux boucles (drift, breathe) animent les propriétés `translate` et
  * `scale` INDÉPENDANTES, jamais `transform` : les éléments concernés — halo
@@ -69,146 +84,210 @@
   animation: zv-breathe 9s ease-in-out infinite;
 }
 
-/* ─── Entrées pilotées par le défilement ────────────────────────────────
- * Hors de ce bloc, aucune de ces classes ne produit d'effet : l'élément
- * reste dans son état final. C'est voulu. */
+/* ─── Entrées : une révélation par visite ───────────────────────────────
+ * Les @keyframes vivent au niveau racine : un échafaudage de scènes peut
+ * les re-brancher sur ses propres timelines nommées (voir l'en-tête). */
 
-@supports (animation-timeline: view()) {
-  /* 3 · Entrée standard de tout contenu texte et panneau.
-   *     Stagger de 120 ms entre les éléments d'un même groupe. */
-  @keyframes zv-rise {
-    from {
-      opacity: 0;
-      transform: translateY(32px);
-    }
+@keyframes zv-rise {
+  from {
+    opacity: 0;
+    transform: translateY(32px);
   }
+}
 
-  .zv-anim-rise {
-    animation: zv-rise var(--zv-easing) both;
-    animation-timeline: view();
-    animation-range: contain 10% contain 45%;
+/* Le même mouvement, DOSÉ pour les blocs des pages intérieures : douze
+ * pixels au lieu de trente-deux — le bloc est posé avant que l'œil ait fini
+ * d'arriver, et une visite répétée ne le remarque plus. */
+@keyframes zv-rise-doux {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
   }
+}
 
-  /* 3 bis · Le même mouvement, DOSÉ pour les blocs des pages intérieures :
-   *     douze pixels au lieu de trente-deux, une plage plus courte — le
-   *     bloc est posé avant que l'œil ait fini d'arriver, et une visite
-   *     répétée ne le remarque plus. Se pose AVEC zv-anim-rise, dont il ne
-   *     change que l'amplitude et la plage. La home garde l'entrée
-   *     pleine : c'est elle la signature, le doux est le quotidien. */
-  @keyframes zv-rise-doux {
-    from {
-      opacity: 0;
-      transform: translateY(12px);
-    }
+@keyframes zv-glyph-in {
+  from {
+    opacity: 0;
+    transform: translateY(40px) scale(0.7);
   }
+}
 
-  .zv-anim-rise--doux {
-    animation-name: zv-rise-doux;
-    animation-range: contain 5% contain 30%;
+/* La signature de la page d'accueil : les glyphes convergent vers le Z
+ * depuis les quatre coins — la seule entrée latérale du système, latérale
+ * parce qu'elle converge, pas parce qu'elle glisse. */
+@keyframes zv-converge-tl {
+  from {
+    opacity: 0;
+    transform: translate(-420px, -420px) scale(1.5);
   }
+}
 
-  /* 4 · Entrée des glyphes produit dans leur scène : montée et grossissement. */
-  @keyframes zv-glyph-in {
-    from {
-      opacity: 0;
-      transform: translateY(40px) scale(0.7);
-    }
+@keyframes zv-converge-tr {
+  from {
+    opacity: 0;
+    transform: translate(420px, -420px) scale(1.5);
   }
+}
 
-  .zv-anim-glyph-in {
-    animation: zv-glyph-in var(--zv-easing) both;
-    animation-timeline: view();
-    animation-range: contain 0% contain 45%;
+@keyframes zv-converge-bl {
+  from {
+    opacity: 0;
+    transform: translate(-420px, 420px) scale(1.5);
   }
+}
 
-  /* 5 · La signature de la page d'accueil : les glyphes convergent vers le
-   *     Z depuis les quatre coins. La direction se choisit par modificateur —
-   *     c'est la seule entrée latérale du système, et elle est latérale
-   *     parce qu'elle converge, pas parce qu'elle glisse. */
-  @keyframes zv-converge-tl {
-    from {
-      opacity: 0;
-      transform: translate(-420px, -420px) scale(1.5);
-    }
+@keyframes zv-converge-br {
+  from {
+    opacity: 0;
+    transform: translate(420px, 420px) scale(1.5);
   }
+}
 
-  @keyframes zv-converge-tr {
-    from {
-      opacity: 0;
-      transform: translate(420px, -420px) scale(1.5);
-    }
+@keyframes zv-pop {
+  from {
+    opacity: 0;
+    transform: scale(0.6);
   }
+}
 
-  @keyframes zv-converge-bl {
-    from {
-      opacity: 0;
-      transform: translate(-420px, 420px) scale(1.5);
-    }
+/* Le filet de spectre se dessine : on anime bien la largeur, et non une
+ * mise à l'échelle — le dégradé doit se révéler, pas s'étirer. */
+@keyframes zv-filet {
+  from {
+    width: 0;
   }
+}
 
-  @keyframes zv-converge-br {
-    from {
-      opacity: 0;
-      transform: translate(420px, 420px) scale(1.5);
-    }
+/* ─── Le contrat au repos : des définitions inertes ─────────────────────
+ * Chaque classe d'entrée possède ici sa définition PROPRE, volontairement
+ * inerte tant que rien n'est armé : sans motion.js, aucune animation n'est
+ * attachée et ces propriétés n'ont pas d'effet — la page s'affiche
+ * complète. C'est aussi le point d'ancrage du dosage : le décalage d'un
+ * groupe se règle en posant --zv-delay par élément (120 ms). */
+
+.zv-anim-rise {
+  animation-delay: var(--zv-delay);
+}
+
+.zv-anim-rise--doux {
+  animation-duration: 0.45s;
+}
+
+.zv-anim-glyph-in {
+  animation-delay: var(--zv-delay);
+}
+
+.zv-anim-converge {
+  animation-delay: var(--zv-delay);
+}
+
+.zv-anim-converge--tr {
+  animation-name: zv-converge-tr;
+}
+
+.zv-anim-converge--bl {
+  animation-name: zv-converge-bl;
+}
+
+.zv-anim-converge--br {
+  animation-name: zv-converge-br;
+}
+
+.zv-anim-pop {
+  animation-delay: var(--zv-delay);
+}
+
+/* Les six vagues : 70 ms d'écart — un délai en secondes retrouve son sens
+ * maintenant que l'entrée est temporelle. */
+.zv-anim-pop--2 { animation-delay: calc(var(--zv-delay) + 0.07s); }
+.zv-anim-pop--3 { animation-delay: calc(var(--zv-delay) + 0.14s); }
+.zv-anim-pop--4 { animation-delay: calc(var(--zv-delay) + 0.21s); }
+.zv-anim-pop--5 { animation-delay: calc(var(--zv-delay) + 0.28s); }
+.zv-anim-pop--6 { animation-delay: calc(var(--zv-delay) + 0.35s); }
+
+.zv-anim-filet {
+  animation-delay: var(--zv-delay);
+}
+
+/* ─── L'armement, puis la libération ────────────────────────────────────
+ * `:where(html.zv-motion)` garde la spécificité d'une classe simple : les
+ * définitions inertes ci-dessus (délais, noms, durées) restent lisibles à
+ * travers l'armement, et `.zv-in` — plus bas dans le fichier — gagne à la
+ * cascade sans surenchère. Armé, l'élément attend en PAUSE sur la première
+ * image de son animation (fill both) ; libéré, elle se joue une fois et
+ * s'arrête sur l'état final. Le défilement n'y reviendra jamais. */
+
+@media (prefers-reduced-motion: no-preference) {
+  /* 3 · Entrée standard de tout contenu texte et panneau. */
+  :where(html.zv-motion) .zv-anim-rise {
+    animation: zv-rise 0.6s var(--zv-easing) both paused;
+    animation-delay: var(--zv-delay);
   }
 
-  .zv-anim-converge {
-    animation: zv-converge-tl var(--zv-easing) both;
-    animation-timeline: view();
-    animation-range: contain 0% contain 55%;
+  /* 3 bis · Le dosage des pages intérieures : se pose AVEC zv-anim-rise,
+   *     dont il ne change que l'amplitude et la durée. La home garde
+   *     l'entrée pleine : c'est elle la signature, le doux est le
+   *     quotidien. */
+  :where(html.zv-motion) .zv-anim-rise--doux {
+    animation-name: zv-rise-doux;
+    animation-duration: 0.45s;
   }
 
-  .zv-anim-converge--tr {
+  /* 4 · Entrée des glyphes produit : montée et grossissement. */
+  :where(html.zv-motion) .zv-anim-glyph-in {
+    animation: zv-glyph-in 0.6s var(--zv-easing) both paused;
+    animation-delay: var(--zv-delay);
+  }
+
+  /* 5 · La convergence. Direction par modificateur. */
+  :where(html.zv-motion) .zv-anim-converge {
+    animation: zv-converge-tl 0.7s var(--zv-easing) both paused;
+    animation-delay: var(--zv-delay);
+  }
+
+  :where(html.zv-motion) .zv-anim-converge--tr {
     animation-name: zv-converge-tr;
   }
 
-  .zv-anim-converge--bl {
+  :where(html.zv-motion) .zv-anim-converge--bl {
     animation-name: zv-converge-bl;
   }
 
-  .zv-anim-converge--br {
+  :where(html.zv-motion) .zv-anim-converge--br {
     animation-name: zv-converge-br;
   }
 
-  /* 6 · Badges, jetons d'entités, éléments de preuve.
-   *     En cascade : six vagues espacées de 6 % de défilement. */
-  @keyframes zv-pop {
-    from {
-      opacity: 0;
-      transform: scale(0.6);
-    }
+  /* 6 · Badges, jetons d'entités, éléments de preuve — en cascade. */
+  :where(html.zv-motion) .zv-anim-pop {
+    animation: zv-pop 0.4s var(--zv-easing) both paused;
+    animation-delay: var(--zv-delay);
   }
 
-  .zv-anim-pop {
-    animation: zv-pop var(--zv-easing) both;
-    animation-timeline: view();
-    animation-range: contain 30% contain 70%;
-  }
+  :where(html.zv-motion) .zv-anim-pop--2 { animation-delay: calc(var(--zv-delay) + 0.07s); }
+  :where(html.zv-motion) .zv-anim-pop--3 { animation-delay: calc(var(--zv-delay) + 0.14s); }
+  :where(html.zv-motion) .zv-anim-pop--4 { animation-delay: calc(var(--zv-delay) + 0.21s); }
+  :where(html.zv-motion) .zv-anim-pop--5 { animation-delay: calc(var(--zv-delay) + 0.28s); }
+  :where(html.zv-motion) .zv-anim-pop--6 { animation-delay: calc(var(--zv-delay) + 0.35s); }
 
-  /* Les six vagues. Décaler la plage, et non le délai : un délai en secondes
-   * n'a aucun sens sur une timeline de défilement. */
-  .zv-anim-pop--2 { animation-range: contain 36% contain 76%; }
-  .zv-anim-pop--3 { animation-range: contain 42% contain 82%; }
-  .zv-anim-pop--4 { animation-range: contain 48% contain 88%; }
-  .zv-anim-pop--5 { animation-range: contain 54% contain 94%; }
-  .zv-anim-pop--6 { animation-range: contain 60% contain 100%; }
-
-  /* 7 · Le filet de spectre se dessine à l'entrée de chaque en-tête de
-   *     section. On anime bien la largeur, et non une mise à l'échelle :
-   *     le dégradé doit se révéler, pas s'étirer. */
-  @keyframes zv-filet {
-    from {
-      width: 0;
-    }
+  /* 7 · Le filet de spectre, à l'entrée de chaque en-tête de section. */
+  :where(html.zv-motion) .zv-anim-filet {
+    animation: zv-filet 0.5s var(--zv-easing) both paused;
+    animation-delay: var(--zv-delay);
   }
+}
 
-  .zv-anim-filet {
-    animation: zv-filet var(--zv-easing) both;
-    animation-timeline: view();
-    animation-range: contain 5% contain 25%;
-  }
+/* La libération, commune : posée par motion.js à l'entrée au viewport, une
+ * seule fois. Sa place APRÈS l'armement fait tout : à spécificité égale,
+ * c'est elle qui a le dernier mot. */
+.zv-in {
+  animation-play-state: running;
+}
 
+/* ─── Les deux lectures du défilement, conservées ───────────────────────
+ * Suivre la position de lecture est leur raison d'être : elles doivent
+ * avancer ET reculer avec le lecteur. */
+
+@supports (animation-timeline: view()) {
   /* 8 · Le point d'étape s'allume à l'entrée de sa scène et s'éteint à la
    *     sortie. Un seul actif à la fois. */
   @keyframes zv-dot-active {

package/src/motion.js

@@ -0,0 +1,53 @@
+/* Zevra UI — motion.js : la révélation unique des entrées.
+ *
+ * Rôle exact, et rien d'autre :
+ *   1. poser `zv-motion` sur <html> — c'est cette classe qui ARME les
+ *      entrées de motion.css (sans elle, la page s'affiche complète) ;
+ *   2. poser `zv-in`, UNE fois, sur chaque élément d'entrée quand il
+ *      touche le viewport — l'animation se joue, s'arrête sur l'état
+ *      final, et on n'observe plus l'élément : remonter ne défait rien.
+ *
+ * Un échafaudage de scènes scroll-pilotées (l'expérience épinglée d'une
+ * home) pose `data-zv-motion-skip` sur ses scènes : rien n'y est observé,
+ * ses timelines nommées gardent la main.
+ *
+ * S'importe une fois par page : `import '@zevra/ui/motion.js'`. Pour un
+ * armement avant première peinture (aucun éclair du contenu), l'app peut
+ * AUSSI poser la classe en inline dans <head> :
+ *   <script>document.documentElement.classList.add('zv-motion')</script>
+ * motion.js est idempotent par-dessus.
+ */
+(() => {
+  if (typeof document === 'undefined' || typeof IntersectionObserver === 'undefined') return;
+  if (matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+
+  document.documentElement.classList.add('zv-motion');
+
+  const ENTREES = '.zv-anim-rise, .zv-anim-glyph-in, .zv-anim-converge, .zv-anim-pop, .zv-anim-filet';
+
+  const armer = () => {
+    const io = new IntersectionObserver(
+      (entries) => {
+        for (const e of entries) {
+          if (!e.isIntersecting) continue;
+          e.target.classList.add('zv-in');
+          io.unobserve(e.target);
+        }
+      },
+      /* Déclenche un peu AVANT que l'élément soit franchement visible :
+       * l'entrée accompagne l'arrivée au lieu de la suivre. */
+      { rootMargin: '0px 0px -8% 0px', threshold: 0.01 }
+    );
+
+    for (const el of document.querySelectorAll(ENTREES)) {
+      if (el.closest('[data-zv-motion-skip]')) continue;
+      io.observe(el);
+    }
+  };
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', armer, { once: true });
+  } else {
+    armer();
+  }
+})();

package/src/surfaces.css

@@ -138,6 +138,15 @@
   z-index: 1;
 }
 
+/* L'emphase de base.css pose --ink sur les strong de zv-body/zv-lead — sur
+ * le navy du manifeste, cette encre disparaît dans le fond. Dans la bande,
+ * l'emphase hérite de la couleur ambiante (blanc), et seule la graisse la
+ * distingue. */
+.zv-band .zv-body strong,
+.zv-band .zv-lead strong {
+  color: inherit;
+}
+
 /* Filigrane : le glyphe, blanchi et presque effacé, débordant du cadre. */
 .zv-band__watermark {
   position: absolute;