kinetograph.

A climbing line with the camera chasing its head and a large live number above it.

$npx kinetograph add line-ticker
Source

Light or dark.

Props

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

  • headline

    string = "from the demos they ship"

    The claim that opens the shot, over the climbing line.

  • symbol

    string = "KINO"

    Name on the ticker card (a wordmark, short).

  • domain

    string = "kino.dev"

    Small line under the name on the ticker card.

  • from

    number = 12180

    The number the ticker starts on.

  • to

    number = 12540

    The number it has counted to when the shot ends.

  • deltaFrom

    number = 1.82

    Percent change shown under the number at the start.

  • deltaTo

    number = 2.15

    Percent change at the end.

  • deltaNote

    string = "24h"

    Words after the percent, e.g. "24h".

  • person

    string = "Maya"

    Name in the card that lands on the curve (the install).

  • item

    string = "line-ticker"

    What they installed, second row of that card.

  • accent

    colour = "#0bb143"

    Gain colour: line, dot, pill. This is the design here, not a theme token.

  • ground

    colour = "#0f0d1a"

    Background.

  • holdSeconds

    number = 0

    Extra seconds to hold on the last frame.

  • series

    list

    Your own curve for the ticker half: y of the line (pixels in a 960x540 frame, larger is lower) every 4 px of world x. Leave out for the default curve.

Compositions

  • LineTicker