@kolkrabbi/kol-theme 0.88.0 → 0.89.0

package/kol-animation.css

@@ -353,3 +353,82 @@
 @media (prefers-reduced-motion: reduce) {
   .kol-rail-grab::before { transition: none; }
 }
+
+/* ═════════════════════════════════════════════════════════════════════
+ * SCROLL ENTRANCE — the reveal family (promoted from kol-website's
+ * apps/web/src/styles/animations.css, 2026-08-28, on the user's "it's good to
+ * localise it"; that file's own header had marked it a DS candidate since
+ * 2026-07-28, and it was itself vendored from the elder @kol/ui).
+ *
+ * A consumer's IntersectionObserver adds `.is-visible`; the class is the whole
+ * API. `--kol-reveal-delay` staggers a group without a rule per child.
+ *
+ * The bare `.reveal*` names are kept as ALIASES beside the `kol-*` ones: they
+ * are live in dozens of kol-website call sites and renaming them would be a
+ * migration the promotion does not need. New code takes the prefixed name —
+ * `.reveal` is exactly the sort of word a consumer's own stylesheet also owns.
+ * ═════════════════════════════════════════════════════════════════════ */
+.kol-reveal, .reveal {
+  opacity: 0;
+  transform: translateY(24px);
+  transition: opacity 600ms var(--kol-ease-house), transform 600ms var(--kol-ease-house);
+  transition-delay: var(--kol-reveal-delay, var(--reveal-delay, 0s));
+}
+/* the group rung: a shorter travel and a default 1s beat, so a set of children
+ * arrives after the block that introduces them */
+.kol-reveal-group, .reveal-group {
+  opacity: 0;
+  transform: translateY(16px);
+  transition: opacity 600ms var(--kol-ease-house), transform 600ms var(--kol-ease-house);
+  transition-delay: var(--kol-reveal-delay, var(--reveal-delay, 1s));
+}
+/* the diagonal assembly: 40px in from the side AND 32 up, so a row of blocks
+ * converges rather than sliding in parallel */
+.kol-reveal-from-left, .reveal-from-left {
+  opacity: 0;
+  transform: translate(-40px, 32px);
+  transition: opacity 700ms var(--kol-ease-house), transform 700ms var(--kol-ease-house);
+  transition-delay: var(--kol-reveal-delay, var(--reveal-delay, 0s));
+}
+.kol-reveal-from-right, .reveal-from-right {
+  opacity: 0;
+  transform: translate(40px, 32px);
+  transition: opacity 700ms var(--kol-ease-house), transform 700ms var(--kol-ease-house);
+  transition-delay: var(--kol-reveal-delay, var(--reveal-delay, 0s));
+}
+.kol-reveal.is-visible, .reveal.is-visible,
+.kol-reveal-group.is-visible, .reveal-group.is-visible,
+.kol-reveal-from-left.is-visible, .reveal-from-left.is-visible,
+.kol-reveal-from-right.is-visible, .reveal-from-right.is-visible {
+  opacity: 1;
+  transform: translate(0, 0);
+}
+@media (prefers-reduced-motion: reduce) {
+  .kol-reveal, .reveal,
+  .kol-reveal-group, .reveal-group,
+  .kol-reveal-from-left, .reveal-from-left,
+  .kol-reveal-from-right, .reveal-from-right {
+    opacity: 1;
+    transform: none;
+    transition: none;
+  }
+}
+
+/* ═════════════════════════════════════════════════════════════════════
+ * AnimatedTitle — the word's rest state (promoted 2026-08-28, same pass).
+ *
+ * The DS has shipped `atoms/AnimatedTitle.jsx` for months while the CSS its
+ * words start from lived in kol-website: the component queried `.animatedWord`
+ * and set `opacity: 0` on nothing, so outside that one app the title rendered
+ * static and visible with no error. A component whose motion is in a consumer
+ * is not shipped. GSAP animates FROM this state; reduced motion skips the
+ * tween entirely (the hook), which is why the fallback below is not optional.
+ * ═════════════════════════════════════════════════════════════════════ */
+.kol-animated-word, .animatedWord {
+  opacity: 0;
+  transform: translate3d(150vw, 3.125rem, 0) rotateY(-45deg) rotateX(15deg);
+  color: inherit;
+}
+@media (prefers-reduced-motion: reduce) {
+  .kol-animated-word, .animatedWord { opacity: 1; transform: none; }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-theme",
-  "version": "0.88.0",
+  "version": "0.89.0",
   "description": "KOL (Kolkrabbi) design-system tokens + base CSS — brand-neutral. The canonical token/cascade layer every other KOL package and consumer builds on.",
   "license": "MIT",
   "type": "module",