kinetograph.

A twenty-second product launch film, from a typed headline to the final mark.

$npx kinetograph add launch-film
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 = "Lumen"

    The product name: in the headline, the closing line and the wordmark.

  • version

    string = "5"

    The version, set in the accent colour in the headline.

  • headline

    string = "Meet {product} {version}"

    The typed headline. {product} and {version} are replaced; the version is set in the accent colour.

  • dock

    list

    The five app icons in the dock, left to right. The product icon joins between the third and fourth.

  • prompt

    string

    The text typed into the prompt box. It wraps at the box width; a newline starts a new line.

  • tags

    list = ['Web', 'Page', 'UI']

    The three chips that pop above the prompt box.

  • connecting

    string = "Connecting with {product}"

    The line scrambled over the dots. {product} is replaced.

  • glyphs

    string = "qCFbN</>"

    Loose characters that fly across the dashboard.

  • dashWord

    string = "Code"

    The word the loose letters settle into on the dashboard.

  • dashTitle

    string = "Services"

    The dashboard page title.

  • dashNav

    list

    The nine sidebar entries; the seventh is the selected one.

  • dashPill

    string = "Money infos...."

    The label in the pill beside the logo.

  • dashPanel

    list = ['MANAGE YOUR', 'MONEY STATS']

    The two lines of the panel at the lower left (the first in small grey capitals).

  • dashSearch

    string = "Search for the best result"

    The placeholder in the panel search field.

  • dashTiles

    list = ['%30', '%70']

    The two stat tiles.

  • dashCta

    string = "Manage my business"

    The coral button at the lower left.

  • dashStats

    list

    The two cards at the top of the dashboard.

  • dashRows

    list

    The six table rows.

  • dashCols

    list

    The two lines repeated in each table column.

  • dashAction

    string = "View Details"

    The outlined button at the end of each row.

  • filmTitle

    string = "{product} {version}"

    The title over the footage box and on the grid. {product} and {version} are replaced.

  • tryLine

    list

    The closing line on the grid, in three words or phrases. {product} and {version} are replaced.

  • markLetter

    string = ""

    The letter that strikes, extrudes, spins and lands as the closing mark. Empty uses the first letter of the product.

  • accent

    colour = "#d4553f"

    The product tile, the version in the headline, the prompt button flash, the mark on black and the call to action.

  • ground

    colour = "#ecebec"

    The light ground.

  • ink

    colour = "#111111"

    The text colour on the light ground.

  • markA

    colour = "#ff58f4"

    Closing mark gradient, light end.

  • markB

    colour = "#b72fdc"

    Closing mark gradient, deep end.

  • uiFont

    string = "Inter"

    Google Fonts family for interface text and the closing letter.

  • headlineFont

    string = "Source Sans 3"

    Google Fonts family for the typed headline.

  • serifFont

    string = "Fraunces"

    Google Fonts family for the wordmark.

  • photos

    list

    Pictures for the poster burst: names of files under public/photos, without ".jpg". The defaults are public-domain artworks and posters from Wikimedia Commons.

  • footage

    list

    The footage shots, in order: names of files under public/photos, without ".jpg". The first two are shown in black and white. The defaults are public-domain photos of runners from Wikimedia Commons.

Compositions

  • LaunchFilm