@cube-drone/marquee-css 0.1.1 → 0.3.0

package/marquee.css

@@ -77,6 +77,35 @@
   font-size: 0.75em;
 }
 
+/* ---- :::center / :::right / :::left - the <center> tag back from the
+   dead, with siblings. Inline content aligns via text-align; block
+   children that size themselves (tables) follow via margins. Physical
+   directions on purpose. ---- */
+
+.mq-center {
+  text-align: center;
+}
+
+.mq-right {
+  text-align: right;
+}
+
+.mq-left {
+  text-align: left;
+}
+
+.mq-center .mq-table {
+  margin-inline: auto;
+}
+
+.mq-right .mq-table {
+  margin-left: auto;
+}
+
+.mq-left .mq-table {
+  margin-right: auto;
+}
+
 /* ---- tables: paragraph-rows and [c] cells (SPEC.md, "Tables") ---- */
 
 .mq-table {
@@ -292,7 +321,8 @@ big {
 
 .mq-bounce,
 .mq-jitter,
-.mq-wave {
+.mq-wave,
+.mq-rubber {
   display: inline-block;
 }
 
@@ -310,7 +340,10 @@ big {
   .mq-rainbow.mq-split,
   .mq-bounce.mq-split,
   .mq-jitter.mq-split,
-  .mq-wave.mq-split {
+  .mq-wave.mq-split,
+  .mq-rubber.mq-split,
+  .mq-blink.mq-split,
+  .mq-fadein.mq-split {
     animation: none;
   }
 
@@ -334,6 +367,43 @@ big {
     animation-delay: calc(var(--mq-o, 0) * -1.4s);
   }
 
+  .mq-rubber.mq-split .mq-l {
+    animation: mq-rubber 0.7s ease-in-out infinite alternate;
+    animation-delay: calc(var(--mq-o, 0) * -1.4s);
+  }
+
+  /* The reveals (typewriter, fadein): each unit enters at ordinal x step
+     (--mq-o is the sequential integer here, not the loopers' 0..1
+     fraction). The hiding lives ONLY in these animations - fill-mode holds
+     the from-frame through the delay - so wherever animations don't run
+     (reduced motion, print, old browsers) the text is simply visible.
+     Never a hostage situation. */
+  /* steps(1, start): the value jumps to the end-state at the START of the
+     active interval, so the pop lands exactly at the delay and the duration
+     only needs to be long enough for the compositor to sample it. (A 1ms
+     duration is a trap: its active window falls between frames, and
+     never-sampled micro-animations froze mid-word in Chromium.) */
+  .mq-typewriter.mq-split .mq-l {
+    animation: mq-tw-in 0.4s steps(1, start) both;
+    animation-delay: calc(var(--mq-o, 0) * var(--mq-tw-step, 0.07s));
+  }
+
+  .mq-fadein {
+    animation: mq-fade-in 1.2s ease-out both;
+  }
+
+  .mq-fadein.mq-split .mq-l {
+    animation: mq-fade-in 0.9s ease-out both;
+    animation-delay: calc(var(--mq-o, 0) * var(--mq-fi-step, 0.06s));
+  }
+
+  /* Split blink inherits the container's rate; ramp order reads as
+     theater-marquee chase lights, scatter as twinkle. */
+  .mq-blink.mq-split .mq-l {
+    animation: mq-blink calc(1.2s / max(var(--mq-rate, 1), 1)) step-end infinite;
+    animation-delay: calc(var(--mq-o, 0) * (-1.2s / max(var(--mq-rate, 1), 1)));
+  }
+
   .mq-marquee-inner {
     animation: mq-marquee calc(16s / max(var(--mq-speed, 1), 1)) linear infinite;
   }
@@ -361,6 +431,10 @@ big {
   .mq-wave {
     animation: mq-wave 1.4s ease-in-out infinite;
   }
+
+  .mq-rubber {
+    animation: mq-rubber 0.7s ease-in-out infinite alternate;
+  }
 }
 
 @keyframes mq-marquee {
@@ -405,8 +479,38 @@ big {
   }
 }
 
-/* .mq-typewriter ships no motion: letter-by-letter reveal needs JS (the
- * interactive renderer); here it is its full static text, per contract. */
+@keyframes mq-rubber {
+  from {
+    transform: scale(0.82);
+  }
+  to {
+    transform: scale(1.18);
+  }
+}
+
+@keyframes mq-tw-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes mq-fade-in {
+  from {
+    opacity: 0;
+    filter: blur(0.12em);
+  }
+  to {
+    opacity: 1;
+    filter: blur(0);
+  }
+}
+
+/* (The typewriter's JS halves - start-on-visibility, tap-to-skip - still
+ * belong to the interactive renderer; this is the best-effort CSS reveal,
+ * same tier as every other effect.) */
 
 /* ---- layouts: picked, not authored ---- */
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-drone/marquee-css",
-  "version": "0.1.1",
+  "version": "0.3.0",
   "description": "The Marquee reference stylesheet: the mq-* class contract every renderer targets",
   "license": "MPL-2.0",
   "repository": {