SpinningCOMPONENT 1.00cardring

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

  How many cards stand on the ring.

• radius

  number = 1150

  Radius of the ring, in px.

• cardWidth

  number = 330

  Width of a card, in px.

• cardHeight

  number = 590

  Height of a card, in px.

• perspective

  number = 1700

  Camera perspective distance, in px.

• startPull

  number = 1700

  How far back the camera starts, in px (the ring is that much further away in the opening shot).

• motionBlur

  number = 0

  Camera and ring motion blur shutter in frames, used while the ring is fast. 0 turns it off.

• landOn

  integer = 7

  Index of the card the ring comes to rest on.

• extraTurns

  number = 1

  Whole turns the ring makes before it lands (rounded to a whole number so it lands square).

• spinStart

  integer = 6

  Frame the throw starts.

• spinFrames

  integer = 150

  Frames from the throw to rest.

• step

  number = 150

  How far the chosen card steps toward the camera at rest, in px.

• title

  string = "Reel Wall"

  Small line at the top left. Empty for none.

• font

  string = "Geist"

  Google Fonts family for the small type.

• serif

  string = "Instrument Serif"

  Google Fonts family for the chosen card's name (italic).

• colors.ground

  colour = "#0a0a0c"

  Background, near black.

• colors.light

  colour = "#23232a"

  A soft pool of light behind the ring.

• colors.ink

  colour = "#f2efe8"

  Type.

• colors.muted

  colour = "#8b8a86"

  Small type.

• ReelWall