A 21 second launch film for an app, in six beats: a typed question, a chat bar drawn on by guide lines, a wall of screens, and a closing mark.

$npx kinetograph add app-launch
Source

Props

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

  • product

    string = "Recap AI"

    The product name, typed in the pill and under the app icon.

  • mark

    string = "R"

    The product mark: one or two letters, on the button, the app icon and the end mark.

  • problem

    string = "Who said what in that call?"

    Beat 1: the problem, typed then deleted.

  • answer

    string = "Stop taking notes by hand."

    Beat 1: the answer.

  • request

    string = "Summarise my call with the team"

    Beat 2: what the user types in the chat bar.

  • chips

    list

    Beat 2: the four chips above the bar: what the product can make.

  • chipIcons

    hex | tri | diamond | dots | lines | check | flag | mail

    Beat 2: each chip's icon.

  • actions

    list

    Beat 3, third screen: action items as [owner initial, task, due].

  • summary.keyLines

    value = [1, 3, 6]

    Which transcript lines (index, 1 = first after the comment) the scan picks out.

  • summary.bullets

    value

    What those lines become on the summary card.

  • summary.owners

    value = ['Jon', 'Leo', 'Priya']

    The owners' names under their avatars.

  • summary.title

    string = "Summary"

    The summary card's title.

  • summary.sent

    string = "Recap sent to 6 people"

    The message the recap folds into.

  • screens

    value

    Beat 3: the three screens.

  • transcript

    list

    Beat 3, first screen: the lines that type on (up to 15; the first is a comment).

  • cards

    value

    Beat 3, second screen: card label, big figure, small figure, chip figure.

  • closing

    string = "From call to notes. In seconds."

    Beat 6: the closing line.

  • palette

    value = "liquid"

    The glow under every beat: a RiseGlow palette.

  • accent

    string = "#dc3a21"

    The mark on the app icon.

Compositions

  • AppLaunch