A5-count-up-reveal

A5 — count-up reveal

Composes

count-up (the primary effect)
Optional pop-in on a small label above ("Save up to") or below ("annually") the number

Layout

canvas: 1080x1920 (or pack-specified)

number_zone:
  anchor: center
  origin: { x: canvas_w/2, y: canvas_h/2 }
  align: center
  font_variant_numeric: tabular-nums    # prevents width jitter during ticker

label_zone: # optional anchor: above-number origin: { x: canvas_w/2, y: number_y - 120 } align: center font_size: from pack.type.h2

suffix_zone: # optional anchor: below-number origin: { x: canvas_w/2, y: number_y + 120 } align: center


## Choreography

```yaml
phase_1_label_pop:
  start_frame: 0
  effect: pop-in
  delay_frames: 0

phase_2_count_up:
  start_frame: 6                         # let label settle first (two-tier rhythm)
  effect: count-up
  ticker_duration_frames: scene_duration * 0.6
  easing: bezier(0.16, 1, 0.3, 1)

phase_3_hold:
  start_frame: count_up_end + 4
  duration_frames: ≥ 30                  # generous hold to read the number

Style pack compatibility

supported: [SP-A, SP-E]
preferred_in: [SP-A]
incompatible: [SP-D, SP-F]

Pack-specific overrides

SP-A (marshmallow)

Number: Inter Black at display size (168px+).
Color: ink on bg.
Bg: alternating pink/cream.
Currency: prefix as a separate smaller-size span attached.

SP-E (chaos-card)

Number: same heavy weight on a saturated card.
Music-beat anchor at count-up start.
Sticker-chip-pop labels on either side of the number.

Duration

duration_seconds: [2.5, 4.0]
default: 3.0

Need enough time for ticker (60% of duration) + a substantial hold (40%) so viewer can read the final value.

Quality Checks

count-up target value reached BEFORE scene ends (with ≥ 1s hold remaining).
Number element uses font-variant-numeric: tabular-nums to prevent width jitter.
For currency prefixes ($, £, €), the prefix is a separate smaller-size span attached to the number.
Decimals are consistent — no 0.5 morphing to 0.45 to 0.50.

Failure Modes

Number width jitters during ticker. Missing tabular-nums. Apply via inline style.
Ticker animates the whole scene with no hold. Reduce ticker duration to 60% of scene.
Currency prefix scales with the number. Wrap prefix in its own span at a smaller fontSize.