Releases: jauderho/sloteffect
Releases · jauderho/sloteffect
Release list
v1.1.0
Performance and cross-browser polish. No API changes — drop-in upgrade.
Improvements
- Much faster rendering. Reworked the internal build path so many
SlotText/SlotNumber/SlotLetterinstances 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
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 viaaria-labelso assistive tech reads it instantly. - Zero dependencies — pure Web Animations API and CSS; drop it onto any element holding a numeric string.