kinetograph.

Portrait cards sit on a tilted plane and are flicked along it in two throws, each with a label.

$npx kinetograph add card-rail
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.

  • labels

    list = []

    A name for each card, in order. Cards past the end of the list use the picture's own name.

  • count

    integer = 16

    How many cards are on the rail.

  • cardWidth

    number = 300

    Width of a card, in px on the plane.

  • cardHeight

    number = 420

    Height of a card, in px on the plane.

  • gap

    number = 34

    Space between cards, in px.

  • tiltX

    number = 52

    How far the plane leans back, in degrees.

  • roll

    number = -16

    How far the plane is turned in its own plane, in degrees, so the rail runs on a diagonal.

  • perspective

    number = 1500

    Camera perspective distance, in px. Lower is more dramatic.

  • flicks

    list

    Each flick of the rail.

  • startZoom

    number = 2

    Zoom of the opening shot on the first card.

  • endZoom

    number = 1.45

    Zoom of the closing push on the centred card.

  • motionBlur

    number = 0

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

  • lift

    number = 70

    How far the centred card rises off the plane, in px.

  • title

    string = "Card Rail"

    Title at the top left. Empty for none.

  • caption

    string = "Flicked, then let go"

    Smaller line under the title. Empty for none.

  • font

    string = "Geist"

    Google Fonts family for the label and card numbers.

  • serif

    string = "Instrument Serif"

    Google Fonts family for the card names (set in italic).

  • colors.ground

    colour = "#e7e3da"

    Background.

  • colors.ink

    colour = "#16150f"

    Title.

  • colors.muted

    colour = "#85806f"

    Caption.

  • colors.card

    colour = "#f7f5ef"

    Card colour behind the picture.

  • colors.cardText

    colour = "#16150f"

    Card names.

Compositions

  • CardRail