Composes
numeral-roller(the hero effect — sole element of the scene)- Optional decorative tick-marks (static SVG overlay) implying a physical dial
Layout
canvas: 1080x1920 (or pack-specified)
numeral_zone:
anchor: center
origin: { x: canvas_w/2, y: canvas_h/2 }
align: center
font_size: ~70% of frame height # numerals are HUGE
font_family: from pack (display)
tick_marks: # optional position: top-anchored across canvas count: 12 color: pack.ink (white on black, etc.)
Per-digit layout balancing is required: '12' and '5' have different visual widths, so the digit's x-position rebalances per-glyph to keep visual mass centered. This is NOT pure center-align.
## Choreography
```yaml
phase_per_digit:
beat_duration_frames: 24 # ~0.8s per digit at 30fps
digit_roller_window_frames: 4 # how long the digit takes to "wipe" in
hold_after_wipe_frames: 20 # static digit before next wipe
mechanical_easing: linear # the roller is mechanical, NOT springy
Each digit slides vertically through the frame slot-machine-style. The previous digit's bottom edge is briefly visible at the top, then the new digit is fully shown, then the next digit's top edge starts peeking at the bottom — implying a rotating drum.
Style pack compatibility
supported: [SP-A]
preferred_in: [SP-A]
incompatible: [SP-C, SP-D, SP-F, SP-G]
This archetype is rare; only SP-A has the mechanical-mono feel that fits it. Custom packs might support it.
Pack-specific overrides
SP-A (marshmallow) — adapted for "stopwatch" mode
- Bg: black (#0F0F0F) or pack ink (override of normal pink/cream).
- Numeral: white, Inter Black at ~960px font size on 1080×1920.
- Tick-marks: small white triangles, 12 of them across the top of canvas.
Duration
duration_seconds: [scene depends on digit count]
per_digit_seconds: 0.8 # 12 digits = 9.6s total
Quality Checks
- Per-digit layout balance: '1' is positioned differently than '8' so visual mass stays centered.
- Linear motion only — no spring, no bezier overshoot. The roller is mechanical.
- Partial-digit visibility at top + bottom during the wipe window (3-5 frames).
- Tick-marks are static — they don't reposition with the digit.
Failure Modes
- Roller feels too snappy. Easing is non-linear; switch to
linear. - Digit appears to teleport (no partial visibility). Wipe window too short; bump to 4-5 frames.
- Visual mass shifts as digits change. Per-digit layout balance missing. Compute glyph width per digit and shift x accordingly.