OrbitCOMPONENT 1.00gallery

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

  How many photographs land on the ring.

• title

  string = "Orbit"

  The title in the middle.

• subtitle

  string = "Nine photographs, one ring"

  A small line under the title. Empty for none.

• radiusX

  number = 770

  Half the width of the ring they settle on, in px.

• radiusY

  number = 385

  Half the height of the ring they settle on, in px.

• photoWidth

  number = 210

  Width of a photograph, in px.

• photoHeight

  number = 250

  Height of a photograph, in px.

• swirl

  number = 300

  How many degrees each photograph winds round the title on its way in.

• startDistance

  number = 2.7

  How far out they start, as a multiple of the ring.

• firstFrame

  integer = 8

  Frame the first photograph starts moving.

• stagger

  number = 7

  Frames between one photograph setting off and the next.

• travelFrames

  integer = 78

  Frames each photograph takes to arrive.

• tilt

  number = 6

  How far each photograph lies from square once settled, in degrees.

• seed

  integer = 3

  Seed for the tilt and the order. Same seed, same ring.

• motionBlur

  number = 0

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

• openZoom

  number = 1.5

  Zoom of the opening shot on the title.

• push

  number = 0.06

  How far the camera pushes in once the ring has settled (0.06 is 6 percent).

• font

  string = "Geist"

  Google Fonts family for the subtitle.

• serif

  string = "Instrument Serif"

  Google Fonts family for the title.

• colors.ground

  colour = "#f1eee7"

  Background.

• colors.ink

  colour = "#17150f"

  Title.

• colors.muted

  colour = "#8a8574"

  Subtitle.

• OrbitGallery