kinetograph.

A phone checkout where the amount lands and the camera pushes in.

$npx kinetograph add checkout-push
Source

Props

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

  • payee

    string = "Northline Studio"

    Who is being paid, shown on the dim checkout card.

  • amount

    string = "$48.00"

    The amount on the checkout card.

  • note

    string = "Annual plan"

    The line under the amount.

  • screen

    string = "photos/nasa-earth-1.jpg"

    Image under public/ shown on the phone screen.

  • font

    string = "Geist"

    Google Fonts family for the checkout card.

  • background

    colour = "#0a0a0b"

    The dark ground.

  • card

    colour = "#131416"

    The checkout card colour.

  • deviceBody

    colour = "#17181b"

    Phone frame colour.

  • speed

    number = 1

    Playback speed of the move.

  • grain

    number = 0.03

    Film grain over the frame.

  • motionBlur

    number = 0.7

    Shutter in frames on the camera move; 0 for none.

Compositions

  • CheckoutPush