kinetograph.

A wall of photo columns unrolls from the middle while the camera pushes in.

$npx kinetograph add gallery-push
Source

Props

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

  • images

    list

    Pictures, as paths under public/ (or full URLs). They repeat when there are fewer than the count.

  • columns

    integer = 9

    How many columns are in the wall.

  • tilesPerColumn

    integer = 5

    How many photographs stack in each column.

  • columnWidth

    number = 260

    Width of a column, in px.

  • gap

    number = 16

    Space between tiles, in px.

  • depth

    number = 90

    How far alternate columns stand off the plane, in px.

  • perspective

    number = 1500

    Camera perspective distance, in px.

  • openStart

    integer = 6

    Frame the middle column starts to open.

  • openStagger

    number = 6

    Frames between one column starting to open and the next, outward from the middle.

  • openFrames

    integer = 34

    Frames a column takes to open.

  • pushStart

    integer = 22

    Frame the camera push starts.

  • pushFrames

    integer = 170

    Frames the push takes, eased in and out.

  • pushTo

    number = 900

    How far the camera starts back from the wall, in px; it ends about a third of that distance in front of it.

  • motionBlur

    number = 0

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

  • turn

    number = 18

    How far the wall is turned at the start, in degrees; it comes square as the camera pushes in.

  • drift

    number = 70

    How far alternate columns slide, in px, over the shot.

  • seed

    integer = 11

    Seed for the tile heights. Same seed, same wall.

  • title

    string = "Gallery Push"

    Title at the bottom left, over the wall. Empty for none.

  • caption

    string = "Opened column by column"

    Smaller line under the title. Empty for none.

  • font

    string = "Geist"

    Google Fonts family for the label.

  • serif

    string = "Instrument Serif"

    Google Fonts family for the title (italic).

  • colors.ground

    colour = "#12110f"

    Background.

  • colors.ink

    colour = "#f3f0e8"

    Title.

  • colors.muted

    colour = "#8d897d"

    Caption.

Compositions

  • GalleryPush