Skip to content

Releases: jauderho/sloteffect

v1.1.0

Choose a tag to compare

@jauderho jauderho released this 03 Jul 23:36
1f97b29

Performance and cross-browser polish. No API changes — drop-in upgrade.

Improvements

  • Much faster rendering. Reworked the internal build path so many
    SlotText / SlotNumber / SlotLetter instances updating together share a
    single batched layout pass instead of forcing one per instance. Measured
    85–89% faster across mount, CJK, counter-churn, and 24-instance dashboard
    scenarios.
  • Smoother initial load. Fixes the load-time jank reported when embedding in
    real apps: slot text in metric-stable fonts no longer double-rolls when web
    fonts finish loading; instances that are offscreen at mount don't build or
    animate until scrolled into view; and each roll's composited layer is released
    once it settles, so a page full of slots no longer holds a GPU layer per digit
    forever.

Fixes

  • Firefox: correct vertical alignment for non-Latin text. Ideographs (e.g.
    Japanese/Chinese) rendered via a fallback font sat too high in Firefox; they
    now align identically to Latin text and to Chrome/Safari.

Under the hood

  • Showcase/demo page precompiles its JSX at build time (no more Babel-in-browser),
    cutting warm load from ~150 ms to ~25 ms.
  • Added bun run bench — an A/B performance benchmark (git baseline vs working
    tree) to guard against future regressions.

The 1.0 release

Choose a tag to compare

@jauderho jauderho released this 26 Jun 06:26
efdea0a

SlotEffect animates a hero number into place with a slot-machine roll: each digit spins on its own reel and settles on the final value, giving a key figure (e.g. $4.2B) a moment of mechanical theater before it comes to rest.

Highlights

  • Spring-eased roll — a critically-tuned linear() spring curve gives each reel a natural overshoot-and-settle, with per-digit stagger so they land in sequence rather than in lockstep.
  • Baseline-perfect rest — digits settle on the exact text baseline shared by static glyphs ($, ., B), with no end-of-roll jump or flicker.
  • Accessible & motion-safe — honors prefers-reduced-motion (snaps straight to the value), and exposes the full number via aria-label so assistive tech reads it instantly.
  • Zero dependencies — pure Web Animations API and CSS; drop it onto any element holding a numeric string.

v0.1.1

Choose a tag to compare

@jauderho jauderho released this 26 Jun 04:40
80eb43f

Testing release via Trusted Publisher