MOTIONSTASH
All components

Dot Field Count

PremiumData

A figure that holds the frame alone over a field of dots, then shrinks to make room for the rest of its number and the noun it counts

Download preview1920×1080 preview render. Rendered at full size, like the rest of this component
2.3 seconds
Format

This is the format it was composed for. Switch above to see it lay itself out for another: same animation, re-arranged for the frame.

counterbig numberdot fieldcustomersmilestonelight groundclaimgridstatistic
What you can change · 7 settings

Everything below can be changed without touching the animation. Hand the list to an agent, or edit the values at the bottom of the component file.

  • Lead *
    lead · string

    The words in front of the figure at the start, which are dropped when the figure takes the frame. Keep it to two or three: they exist to be taken away.

    now: With over

  • Head *
    head · string

    The part of the figure that stands alone. In the reference it is the first two digits, which is what makes the reveal work: it is a number you cannot place yet.

    now: 17

  • Tail *
    tail · string

    The rest of the figure, arriving after the hold. Written exactly as it should read, separator included.

    now: ,000

  • Label *
    label · string

    The noun the figure counts, arriving last and set lighter than the number. One word.

    now: customers

  • Cols *
    cols · number

    Dot columns across the frame. Eight matches the reference; more than ten and the field starts reading as texture rather than as counting.

    now: 8

  • Rows *
    rows · number

    Dot rows. Five matches the reference, with the middle row running behind the line.

    now: 5

  • Brand *
    brand · string

    Brand token id. The field takes the accent at the edges and the accentAlt toward the middle, so a brand with two distinct accents reads best.

    now: frost

For developers · source, dependencies and provenance

Dependencies

remotion@remotion/shapeszod

No Tailwind, no CSS, no asset files. Inline styles only.

Source

Filesrc/registry/items/dot-field-count.tsx
Frame1920×1080
Duration70f · 2.3s @ 30fps

Provenance

ToolClaude Code
ModelOpus 5
Authormotionstash
LicenseMIT

Prompt

A near-white lavender frame filling with a regular grid of round dots, violet at the edges and blue toward the middle, each swelling in from nothing. A line of dark type across the middle reads as a sentence, then drops everything but its figure, which holds the frame large and alone. The rest of the number arrives beside it, then the noun it counts, and the whole line shrinks to make room for them while the field drifts slowly behind.