kinetograph.

Covers wind inward on a spiral.

$npx kinetograph add circle-carousel-2
Source

They are born at the rim and swallowed at the centre.

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.

  • count

    integer = 38

    How many covers ride the spiral.

  • outerRadius

    number = 470

    Radius of the rim, where the covers are born, in px.

  • innerRadius

    number = 90

    Radius at the end of the spiral, where the largest cover sits, in px.

  • windings

    number = 1.15

    How many times the spiral winds round on its way in.

  • minSize

    number = 5

    Side of the smallest cover, in px.

  • maxSize

    number = 270

    Side of the largest cover, in px.

  • growth

    number = 2.0

    How late the covers grow; higher keeps them small until near the centre.

  • travel

    number = 0.4

    How far the covers travel along the spiral over the shot, as a fraction of its length.

  • travelStart

    integer = 128

    Frame the covers start moving.

  • travelFrames

    integer = 100

    Frames the travel takes, eased in and out.

  • swirl

    number = 14

    Degrees the whole spiral turns over the shot, on top of the covers travelling along it.

  • tilt

    number = 6

    Degrees each cover leans along the spiral.

  • stagger

    number = 2.6

    Frames between one cover appearing and the next.

  • rideZoom

    number = 2.2

    Zoom of the opening shot on the smallest covers.

  • push

    number = 0.35

    How far the camera pushes into the largest cover at the end.

  • motionBlur

    number = 0

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

  • title

    string = "Circle Carousel 2"

    Small title at the bottom right. Empty for none.

  • caption

    string = "A spiral, wound inward"

    Smaller line under the title. Empty for none.

  • font

    string = "Inter"

    Google Fonts family for the label.

  • colors.ground

    colour = "#e9ecf0"

    Background.

  • colors.ink

    colour = "#14171c"

    Title.

  • colors.muted

    colour = "#7a828d"

    Caption.

Compositions

  • CircleCarousel2