GrowingCOMPONENT 1.00circlecarousel

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

  How many covers sit on the ring.

• radius

  number = 330

  Radius of the ring in px at the start of the shot.

• minSize

  number = 6

  Side of the smallest cover, in px.

• maxSize

  number = 250

  Side of the largest cover, in px.

• growth

  number = 2.2

  How late the covers grow: 1 is even, higher keeps them small longer and piles the big ones up at the end.

• turns

  number = 0.45

  How far the ring turns over the shot, in full turns.

• startAngle

  number = -125

  Where the smallest cover sits, in degrees clockwise from the top.

• turnStart

  integer = 122

  Frame the ring starts turning.

• turnFrames

  integer = 100

  Frames the turn takes, eased in and out.

• stagger

  number = 3

  Frames between one cover appearing and the next, round the ring.

• push

  number = 0

  How far the camera pushes into the biggest cover at the end (0.5 is 50 percent past the ring shot).

• rideZoom

  number = 2.3

  Zoom of the opening shot on the smallest covers.

• motionBlur

  number = 0

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

• title

  string = "Circle Carousel"

  Small title at the bottom left. Empty for none.

• caption

  string = "Public-domain photographs, NASA"

  Smaller line under the title. Empty for none.

• font

  string = "Geist"

  Google Fonts family for the label.

• colors.ground

  colour = "#ececef"

  Background.

• colors.ink

  colour = "#17171a"

  Title.

• colors.muted

  colour = "#7d7d85"

  Caption.

• CircleCarousel1