kinetograph.

A wall of photo cards ripples in from the middle card, then the camera pulls back, trucks across and pushes in on a new card.

$npx kinetograph add grid-rect
Source

Props

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

  • photos

    list

    Photo file names inside public/photos, in order. Items take them in turn and repeat when there are more items than photos.

  • caption

    string = "Rectangular"

    Small line at the bottom left. Empty for none.

  • showHud

    boolean = true

    Show the caption and the counter.

  • aperture

    number = 0

    Depth of field: blur, in px, of a card one focus distance away from the focus plane. 0 keeps everything sharp.

  • drift

    number = 1

    Handheld drift on the camera, as a multiple of the default (about 0.4 degrees and 6 px). 0 for a locked-off camera.

  • radius

    number = 14

    Corner radius of the cards, px.

  • colors.ground

    colour

    Frame edge.

  • colors.ground2

    colour

    Frame centre, slightly lighter.

  • colors.ink

    colour

    Caption type.

  • colors.edge

    colour

    Hairline round every card, or 'none' (the default) for clean edges.

  • cols

    integer = 9

    Cards across.

  • rows

    integer = 5

    Cards down.

  • cardWidth

    number = 320

    Card width, world px (1:1 at the focal distance).

  • cardHeight

    number = 410

    Card height, world px.

  • gap

    number = 44

    Space between cards, world px.

  • stagger

    number = 2.6

    Frames of delay per card of distance from the middle, for the ripple in.

  • startDistance

    number = 800

    Eye distance of the opening shot (a single card fills the frame at about 1000).

  • endDistance

    number = 3800

    Eye distance of the wide shot.

  • orbit

    number = 14

    Degrees the camera turns about the wall for the wide shot and the truck.

  • truck

    number = 720

    World px the camera slides sideways for the last move.

  • tilt

    number = 10

    Degrees the camera looks down on the wall in the wide shot.

  • hold

    integer = 14

    Frames the opening shot holds before the pull back.

  • heroCol

    integer = 3

    Columns from the middle of the second hero.

  • heroRow

    integer = 1

    Rows from the middle of the second hero.

  • motionBlur

    number = 0

    Camera motion blur shutter in frames, used while the camera moves fast. 0 turns it off.

Compositions

  • GridRect