slot-text 0.1.0 → 0.1.1

package/README.md

@@ -147,6 +147,35 @@ Defaults are tuned for a soft, springy roll:
 </script>
 ```
 
+## Font support
+
+Each character animates inside its own measured cell, sized with the exact
+font you give the element — so widths are always correct.
+
+Works great with:
+
+- **Monospace fonts** — perfect fit, every cell is identical.
+- **Proportional Latin / Cyrillic / Greek fonts** (Geist, Inter, SF, …) —
+  including italics and glyphs with overhang.
+
+Known tradeoffs (inherent to any per-character slot animation):
+
+- **Kerning is lost.** Each glyph is its own box, so pairs like `AV` or `To`
+  sit slightly looser than in plain text. Invisible at UI label sizes,
+  noticeable at large display sizes with kerning-heavy fonts.
+- **Ligatures won't form** — `fi`, `fl`, or coding ligatures stay separate.
+- **Joined scripts are unsupported.** Arabic, Devanagari and other shaping
+  scripts need contextual letterforms across the string and will render as
+  isolated forms.
+- **Complex emoji split.** Single emoji are fine (surrogate pairs are
+  handled), but ZWJ sequences (👨‍👩‍👧) and combining marks break into
+  multiple cells.
+- **Very tall display/script fonts** may clip at the vertical roll mask,
+  which is sized to `line-height: 1.3`.
+
+In short: ideal for short Latin labels, numbers, statuses and commands — in
+essentially any font you'd use for those.
+
 ## Notes
 
 - Browser-only DOM utility.

package/dist/slotText.js

@@ -92,11 +92,13 @@ export function animateSlotText(container, toText, options = {}) {
     // so the text still rolls instead of swapping in place.
     const sample = slots.find((s) => (s.dataset.char ?? "") !== "") ?? slots[0];
     const cs = getComputedStyle(container);
-    const H = Math.round(sample?.getBoundingClientRect().height ||
+    // Ceil, not round: if the slide distance is even half a pixel short of the
+    // cell height, a sliver of the outgoing glyph stays visible at the clip edge.
+    const H = Math.ceil(sample?.getBoundingClientRect().height ||
         sample?.offsetHeight ||
         container.getBoundingClientRect().height ||
         parseFloat(cs.lineHeight) ||
-        0) || Math.round(parseFloat(cs.fontSize) * 1.3) || 18;
+        0) || Math.ceil(parseFloat(cs.fontSize) * 1.3) || 18;
     // Resting color to settle the chromatic flash back to.
     const restColor = color ? cs.color : "";
     // Pre-create any extra cells up front so the row never reflows mid-roll.
@@ -129,13 +131,34 @@ export function animateSlotText(container, toText, options = {}) {
         const slot = slots[i];
         const sizer = slot.querySelector(".char-sizer");
         const oldFace = slot.querySelector(".char-face");
-        sizer.textContent = glyph(toChar); // resize the cell to the new glyph
+        // Resize the cell to the new glyph — but ease the width instead of
+        // snapping it, so a wide outgoing glyph (W → i) is never cropped by a
+        // suddenly-narrow cell and neighbouring letters glide rather than jump.
+        const oldW = slot.getBoundingClientRect().width;
+        sizer.textContent = glyph(toChar);
+        const newW = sizer.getBoundingClientRect().width;
+        const widthChanges = Math.abs(newW - oldW) > 0.5;
+        if (widthChanges)
+            slot.style.width = `${oldW}px`;
+        // A cell growing from or collapsing to empty changes width drastically —
+        // clip it horizontally while it resizes so its glyph wipes in/out with the
+        // cell instead of spilling over and stacking onto the neighbours.
+        if (fromChar === "" || toChar === "")
+            slot.classList.add("is-resizing");
         const tint = typeof color === "function" ? color(i, maxLen) : color;
         // Per-letter personality: vary the speed, the stagger and a starting tilt
-        // that springs back to upright as the glyph settles.
-        const d = Math.round(duration * (1 + bounce * 0.45 * wobble(i, 1)));
-        const base = Math.round(i * stagger * (1 + bounce * 0.25 * wobble(i, 2)));
-        const tilt = (bounce * 9 * wobble(i, 3)).toFixed(2);
+        // that springs back to upright as the glyph settles. Tilt is kept small so
+        // rotated corners never swing into the neighbouring cells.
+        // Tail cells (rolling out to nothing) join the same wave instead of
+        // queuing behind it: they start mid-wave, roll a little faster, and are
+        // gone before the new word finishes landing — so nothing trails.
+        const isTail = toChar === "";
+        const d = Math.round(duration * (isTail ? 0.75 : 1) * (1 + bounce * 0.45 * wobble(i, 1)));
+        const staggerIndex = isTail
+            ? toText.length * 0.5 + (i - toText.length) * 0.25
+            : i;
+        const base = Math.round(staggerIndex * stagger * (1 + bounce * 0.25 * wobble(i, 2)));
+        const tilt = (bounce * 5 * wobble(i, 3)).toFixed(2);
         const rollTrans = `transform ${d}ms ${easing}`;
         const trans = color ? `${rollTrans}, color ${colorFade}ms linear ${d}ms` : rollTrans;
         const newFace = makeFace(toChar);
@@ -145,6 +168,34 @@ export function animateSlotText(container, toText, options = {}) {
             newFace.style.color = tint;
         slot.appendChild(newFace);
         void slot.offsetWidth; // commit start transforms
+        // Glide the cell to its new width with a clean ease-out (no overshoot) so
+        // it never pinches narrower than either glyph. Timing depends on the kind
+        // of change:
+        //  - glyph → glyph: resize alongside the roll.
+        //  - glyph → empty: let the glyph roll out vertically at full width FIRST,
+        //    then snap the empty cell closed quickly — so the exit reads as a roll,
+        //    not a horizontal crush.
+        //  - empty → glyph: open the cell quickly BEFORE the glyph rolls in, so it
+        //    arrives into a full-width cell.
+        if (widthChanges) {
+            let wDelay = base;
+            let wDur = d;
+            if (isTail) {
+                // Keep full width while the glyph is visibly rolling (first ~55%),
+                // then close just behind it — the exit reads as a roll, and the line
+                // has fully contracted by the time the new word lands.
+                wDelay = base + Math.round(d * 0.55);
+                wDur = Math.max(140, Math.round(d * 0.6));
+            }
+            else if (fromChar === "") {
+                wDur = Math.max(140, Math.round(d * 0.45));
+            }
+            timers.push(window.setTimeout(() => {
+                slot.style.transition = `width ${wDur}ms cubic-bezier(0.2, 0, 0, 1)`;
+                slot.style.width = `${newW}px`;
+            }, wDelay));
+            maxEnd = Math.max(maxEnd, wDelay + wDur);
+        }
         maxEnd = Math.max(maxEnd, base + exitOffset + d + (color ? colorFade : 0));
         // Outgoing glyph slides away first (with its own little counter-tilt).
         if (oldFace) {
@@ -164,6 +215,10 @@ export function animateSlotText(container, toText, options = {}) {
                     return; // ignore the colour fade
                 newFace.removeEventListener("transitionend", done);
                 slot.dataset.char = toChar;
+                // Hand sizing back to the sizer (same px, so nothing visibly moves).
+                slot.style.removeProperty("transition");
+                slot.style.removeProperty("width");
+                slot.classList.remove("is-resizing");
                 slot.querySelectorAll(".char-face").forEach((f) => {
                     if (f !== newFace)
                         f.remove();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slot-text",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Dependency-free text roll animation for tiny, tactile UI labels.",
   "type": "module",
   "license": "MIT",

package/style.css

@@ -7,11 +7,23 @@
   position: relative;
   display: inline-flex;
   justify-content: center;
+  /* Clip only vertically: the roll needs a top/bottom mask, but glyph side
+     bearings, kerning overhang and the settle tilt must stay visible so
+     letters never look cropped. (overflow: hidden is the legacy fallback.) */
   overflow: hidden;
+  overflow-x: visible;
+  overflow-y: clip;
   line-height: 1.3;
   vertical-align: bottom;
 }
 
+/* Cells appearing from or collapsing to empty change width drastically, so
+   clip them on both axes while they resize — otherwise their glyphs spill
+   out of the shrinking cell and stack up over the neighbours. */
+.char-slot.is-resizing {
+  overflow-x: clip;
+}
+
 .char-sizer {
   visibility: hidden;
   white-space: pre;