WorkCOMPONENT 1.00carddrift

Every prop has a default, so the component renders as it is. Change any of them in Studio or in code.

• headline

  string = "Every frame, written as code"

  The line that holds still in the middle; it wraps into the band the cards leave free.

• figure

  string = "182"

  The big number on the accent cards.

• travel

  number = 288

  Distance the scatter slides, px at 1920 wide.

• loss

  number = 0.07

  Share of the remaining distance lost every frame at 60 fps.

• holdFrames

  integer = 1

  Frames the scatter waits before it sets off.

• font

  string = "Inter"

  Google Fonts family for the type.

• colors.ground

  colour = "#fdfdfd"

  Background.

• colors.ink

  colour = "#111111"

  Headline.

• colors.accent

  colour = "#a08200"

  The accent cards and bars.

• colors.card

  colour = "#ffffff"

  The white cards.

• colors.pill

  colour = "#f3f3f2"

  The pale pills and bars.

• colors.greyDark

  colour = "#736a61"

  Dark corner of the grey cards.

• colors.greyLight

  colour = "#d8d5ce"

  Light corner of the grey cards.

• ShowcaseDrift