U-shapedCOMPONENT 1.00carousel

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

  How many covers are in the pile.

• width

  number = 640

  Width of the U, centre to centre of its arms, in px.

• armHeight

  number = 250

  Length of each straight arm above the curve, in px.

• minSize

  number = 70

  Side of the cover at the top of the left arm, in px.

• maxSize

  number = 270

  Side of the cover at the top of the right arm, in px.

• scatter

  number = 26

  How far covers sit off the path, in px, so they pile.

• lean

  number = 9

  How far covers are turned from square, in degrees.

• travel

  number = 0.3

  How far the covers move along the U over the shot, as a fraction of its length.

• travelStart

  integer = 118

  Frame the covers start moving.

• travelFrames

  integer = 100

  Frames the move takes, eased in and out.

• seed

  integer = 7

  Seed for the scatter and lean. Same seed, same pile.

• stagger

  number = 3

  Frames between one cover appearing and the next.

• rideZoom

  number = 2.2

  Zoom of the opening shot on the smallest covers.

• push

  number = 0

  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 3"

  Small title at the top left. Empty for none.

• caption

  string = "Piled into a U"

  Smaller line under the title. Empty for none.

• font

  string = "Geist"

  Google Fonts family for the label.

• colors.ground

  colour = "#f1eee8"

  Background.

• colors.ink

  colour = "#1a1815"

  Title.

• colors.muted

  colour = "#8a847a"

  Caption.

• CircleCarousel3