CSSScript.com Demo Page

Rolling Number JS Library Demos

Download Back To CSSScript.Com

Explore rolling digits, locale-aware formats, split-flap cards and direct text transitions in one quiet interface.

01 / Live field
Auto pulse

Change the value. Keep the place.

Interrupt the motion with a new target, reverse it, or let the field continue its own short sequence.

$4,821.75 USD
02 / Format

The same motion reads many ways.

Switch symbols, separators, locales and value types while the layout keeps its rhythm.

Currency switch

Symbol and fraction changes share the same field.

A / 04
£1,280.45

Locale grouping

Separators and symbols follow Intl.NumberFormat.

B / 04
5,482,100

Percentage field

Fractional input becomes a readable percent.

C / 04
68.5%

Large integer

BigInt values stay exact while the digits move.

D / 04
978,543,210,987,654,321
03 / Motion

Choose the mechanism.

Gliding reels and hinged cards use the same number target with different physical cues.

Rolling reel

Spring motion with an optional vertical blur.

ROLL
7,804

Fast changes retain their current position and velocity when a new target arrives.

Split-flap board

Hinged cards with a visible crease.

FLAP
2,318

Each face turns through a bounded sequence, then settles back to one clean card.

04 / Text

Words can move through the same machinery.

Use direct glyph replacement for quiet labels or a wheel for a more mechanical board.

Direct transition

Each position goes straight to its next letter.

DIRECT
READY

Wheel + flap

Letter cards advance through a custom wheel.

BOARD
READY
05 / Control

Tune one field in real time.

Change direction, timing, layout pressure and accessibility behavior without leaving the page.

Renderer controls Decimal
2,746.8

Ready for a new target.