kinetograph.

A headline, a line of body text and a button sit beside a phone that lands with a settle.

$npx kinetograph add phone-pitch
Source

Props

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

  • headline

    list = ['Let Orbit', 'handle it']

    The two headline lines, set a word at a time.

  • contact

    string = "Orbit"

    The name under the avatar in the thread header.

  • thread

    me | them

    The conversation, in order.

  • typing.from

    integer = 368

    From. The frames the typing dots show for, before the last message.

  • typing.to

    integer = 402

    To. The frames the typing dots show for, before the last message.

  • headlineFont

    string = "Geist"

    Google Fonts family of the headline.

  • uiFont

    string = "Inter"

    Google Fonts family of the thread.

  • ground

    colour = "#effafe"

    The ground behind the phone.

  • ink

    colour = "#0f1a24"

    Headline colour.

  • bubble

    colour = "#3f8cf7"

    The blue of your own bubbles.

  • frame

    colour = "#1d1e22"

    Phone frame colour.

  • flip

    boolean = false

    Mirror the layout: phone on the left, headline on the right.

  • speed

    number = 1

    Playback speed of the move.

  • grain

    number = 0

    Film grain over the whole frame.

Compositions

  • PhonePitch