kinetograph.

Cards sit tangent to a sphere.

$npx kinetograph add grid-spherical
Source

It assembles from its centre and turns a full orbit, then settles on one hero card and pushes in.

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

    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 = 34

    Cards on the sphere, spread evenly (a Fibonacci spiral).

  • radius3d

    number = 640

    Radius of the sphere, world px.

  • cardWidth

    number = 250

    Card width, world px.

  • cardHeight

    number = 310

    Card height, world px.

  • turns

    number = 0

    Extra full orbits the camera makes while it pulls out, on top of the half turn from the inside view to the hero's outside face.

  • insideFocal

    number = 1000

    Focal length while the eye sits inside the sphere (smaller is wider). It widens to the outside focal as the camera pulls through the shell.

  • motionBlur

    number = 0

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

  • hero

    integer = 17

    Index of the card the move ends on (a card near the equator reads best).

  • wideDistance

    number = 3300

    Eye distance of the opening shot.

  • closeDistance

    number = 1410

    Eye distance at the end of the push in.

  • backDim

    number = 0.35

    How much the far side of the sphere is darkened.

Compositions

  • GridSpherical