kinetograph.

Upright photo cards follow a curve: a wave, a triangle, a square or an infinity sign.

$npx kinetograph add grid-path
Source

The line draws on, the leading card sets off, and the camera trucks along the line.

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 = "Path"

    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.

  • shape

    wave | triangle | square | infinity = "wave"

    The curve: wave (open, swings in depth), triangle, square or infinity (closed).

  • count

    integer = 11

    Cards on the path.

  • size

    number = 1100

    Half width of the curve, world px.

  • depth

    number = 520

    How far the curve swings toward and away from the camera, world px.

  • cardWidth

    number = 310

    Card width, world px.

  • cardHeight

    number = 390

    Card height, world px.

  • travel

    number = 0.62

    How far the train moves, as a fraction of the curve.

  • lag

    number = 3

    Frames each card sets off after the one ahead.

  • showLine

    boolean = false

    Draw the path as a hairline under the cards. Off by default.

  • truck

    number = 520

    Unused; kept for older settings.

  • swing

    number = 14

    Unused; kept for older settings.

  • distance

    number = 3300

    Eye distance of the wide shot at the end of the crane.

  • rideSide

    number = 520

    How far to the side of the line the camera rides, world px.

  • rideBehind

    number = 0.1

    How far behind the lead card the camera is, as a fraction of the curve.

  • craneHeight

    number = 800

    How far the camera lifts for the wide shot, world px.

  • motionBlur

    number = 0

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

Compositions

  • GridPath