A send button zooms out to show the whole app around it.

$npx kinetograph add build-out
Source

Props

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

  • prompt

    string

    The prompt typed into the box, and shown again in the app's chat.

  • reply

    string

    The assistant line under the prompt in the app's chat.

  • notes

    list

    Two paragraphs of the assistant's working notes in the chat column.

  • wordmark

    string = "OAKLINE"

    The shop name in the app header. Shown in spaced capitals, then re-set in an italic serif.

  • tiles

    list

    The three grid cards: title, small line, and tag.

  • presence

    list = ['Design', 'QA / UX']

    The two collaborator labels that pop on the page, in order.

  • uiFont

    string = "Figtree"

    Google Fonts family for the interface.

  • serifFont

    string = "Instrument Serif"

    Google Fonts family the wordmark is re-set in (used italic).

  • accent

    colour = "#3074dd"

    The send button, the app's buttons and the field.

  • accentB

    colour = "#8a58c8"

    The far corner of the field behind the app.

  • cream

    colour = "#faf8f5"

    The ground behind the app and the opening.

  • speed

    number = 1

    Playback speed of the move.

Compositions

  • BuildOut