kinetograph.

A finger presses a button and the next screen opens outward from the touch point.

$npx kinetograph add screen-touch
Source

Props

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

  • tabs

    list = ['Global', 'Friends']

    The two tabs at the top of the feed.

  • posts

    list

    The two posts on the feed.

  • actions

    list = ['Docs', 'Install']

    The two buttons: the plain one, then the one that is tapped.

  • line1

    string = "the code is yours"

    The first closing line.

  • line2

    list = ['and so is', 'the credit']

    The second closing line: a bright part, then a dimmer part.

  • tapAt

    integer = 55

    The frame the press lands on.

  • font

    string = "Geist"

    Google Fonts family of the screen and the closing lines.

  • buttonFont

    string = "Inter"

    Google Fonts family (with italics) of the button labels.

  • ground

    colour = "#05060f"

    The dark ground.

  • glass

    colour = "#070918"

    The phone glass.

  • rim

    colour = "#41425e"

    The phone edge.

  • action

    colour = "#0bb644"

    The colour of the tapped button.

  • speed

    number = 1

    Playback speed of the move.

  • grain

    number = 0

    Film grain over the whole frame.

Compositions

  • ScreenTouch