A wallet balance counts up beside a stack of payment cards.

$npx kinetograph add vault-count
Source

Props

Every prop has a default, so the template renders as it is. Change any of them in Studio or in code.

  • label

    string = "Northline Vault"

    Small line above the balance.

  • chip

    string = "Vault"

    Text of the pill at the top left of the screen.

  • clock

    string = "3:14"

    The status bar time.

  • footer

    string = "Transactions"

    The line at the foot of the screen.

  • opening

    integer = 500

    The opening balance. The count adds one per tick.

  • currency

    string = "$"

    Currency symbol before the balance and the amounts.

  • entries

    left | right

    The payments that drift past, in order.

  • font

    string = "Geist"

    Google Fonts family.

  • background

    colour = "#eef6fb"

    Ground colour (a pale wash).

  • card

    colour = "#fbfaf6"

    Card colour.

  • deviceBody

    colour = "#151314"

    Phone frame colour.

  • screenTop

    colour = "#6d8cd6"

    Screen colour at the top right.

  • screenBottom

    colour = "#1c2a4b"

    Screen colour at the bottom.

  • speed

    number = 1

    Speed of the count.

  • grain

    number = 0.02

    Film grain over the frame.

Compositions

  • VaultCount