Introducing v3 — a new editor, faster engine, and more.

See what's new

Documentation

Documentation Components

Repeater

Repeat the child content in grid, radial or linear layouts with per-instance variation

Props

mode"grid" | "radial" | "linear"
Default:grid
Layout used to place the repeated instances
cropLeftnumber
Default:0
Crop inset from the left edge of the source element (fraction of its width)
cropRightnumber
Default:0
Crop inset from the right edge of the source element (fraction of its width)
cropTopnumber
Default:0
Crop inset from the top edge of the source element (fraction of its height)
cropBottomnumber
Default:0
Crop inset from the bottom edge of the source element (fraction of its height)
columnsnumber
Default:3
Number of grid columns
rowsnumber
Default:3
Number of grid rows
gapXnumber
Default:0.05
Horizontal gap between grid cells
gapYnumber
Default:0.05
Vertical gap between grid cells
staggernumber
Default:0
Horizontal offset applied to every other row (brick layout)
flip"none" | "alternate-flip-x" | "alternate-flip-y" | "both"
Default:none
Mirror alternating columns/rows for seamless tiling patterns
countnumber
Default:8
Number of repeated instances
radiusnumber
Default:0.3
Orbit radius of the radial layout
startAnglenumber
Default:0
Angle of the first instance on the orbit
sweepnumber
Default:360
Angular span the instances are distributed across
faceCenterboolean
Default:false
Rotate each instance to face the orbit center
directionnumber
Default:0
Direction of the linear layout in degrees (0 = rightward)
spacingnumber
Default:0.2
Distance between consecutive instances
instanceScalenumber
Default:1
Progressive scale multiplier applied per instance (compounds with each copy)
instanceRotationnumber
Default:0
Additional rotation in degrees applied per instance (accumulates with each copy)
instanceOpacitynumber
Default:1
Progressive opacity falloff applied per instance (compounds with each copy)
hueShiftnumber
Default:0
Hue rotation in degrees added per instance
phasenumber
Default:0
Seamless layout animation phase (0-1 wraps to the identical layout)
zOrder"forward" | "backward"
Default:forward
Stacking order of overlapping instances
jitterPositionnumber
Default:0
Random per-instance position offset
jitterRotationnumber
Default:0
Random per-instance rotation
jitterScalenumber
Default:0
Random per-instance scale variation
jitterOpacitynumber
Default:0
Random per-instance opacity variation
seednumber
Default:0
Random seed for the jitter values

Usage

<Shader>
  <Repeater
    radius={0.3}
  >
    <Circle />
  </Repeater>
</Shader>
Previous
ReflectivePlane
Next
Ring