kinetograph.

Three concentric rings of photos at different depths open from the centre.

$npx kinetograph add grid-radial
Source

The camera swings side to side, then pushes in as focus racks from the inner ring to the outer one.

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

    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.

  • count

    integer = 36

    Cards in all, shared between the rings by circumference.

  • rings

    integer = 3

    How many concentric rings.

  • ringGap

    number = 380

    Radius step between rings, world px.

  • ringDepth

    number = 560

    How far back each ring sits from the one inside it, world px. 0 for a flat dial.

  • cardWidth

    number = 230

    Card width, world px.

  • cardHeight

    number = 290

    Card height, world px.

  • swing

    number = 20

    Degrees the camera swings either side of the ring axis.

  • stagger

    number = 9

    Frames between one ring starting and the next.

  • pullBack

    number = 5200

    Eye distance of the wide shot.

  • pushIn

    number = 2150

    Eye distance at the end of the push in.

  • steps

    integer = 1

    How many cards each ring advances in its step (0 keeps the rings still).

  • heldRing

    integer = 1

    The ring that keeps its size through the dolly zoom (0 is the middle one).

  • motionBlur

    number = 0

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

Compositions

  • GridRadial