CapDrive
User guide

RepeatedLayout

Periodically duplicates a pattern in the cropping window, suitable for continuously moving scales and compasses. period sets the repeat interval, value and anchor determine where the current value is aligned.

Example

function main() {
  return (
    <RepeatedLayout axis="horizontal" period={120} value={76} anchor={0.5}>
      <Text width={120}>N</Text>
    </RepeatedLayout>
  );
}

Usage

  • children define one tile and period defines repetition spacing. value aligns with anchor: increasing value moves tiles the opposite way; offset adds a point displacement. both repeats in two directions, independently configurable with {x,y}. The viewport always clips.
  • Layout reserves space before x/y and transform are applied. Moving a child right by 20 points does not push its siblings away; use spacing or Spacer to change gaps. Rotation and scaling affect the completed View.

Properties

children?ViewContent

Child drawing content.

axis?"horizontal" | "vertical" | "both"

Repeat horizontally, vertically or on both axes. both produces a grid of copies.

Example"horizontal"
period?RepeatAxisValue

Distance between repeated copies in points; use x/y values for independent axis spacing.

Example360
value?RepeatAxisValue

Content coordinate placed at the anchor. Increasing it moves copies in the opposite direction; it is not a speed.

Example$data.current.heading?.direction ?? 0
anchor?RepeatAxisValue

Position within the viewport: 0 is the start, 0.5 the middle, 1 the end.

Example0.5
offset?RepeatAxisValue

Additional offset in points after aligning the value to the anchor.

Example0
alignment?"topLeading" | "top" | "topTrailing" | "leading" | "center" | "trailing" | "bottomLeading" | "bottom" | "bottomTrailing"

Alignment of overlaid children within the container, using nine edge/center positions.

Example"topLeading"
Common properties
width?number | "auto" | "fill"

Width in points, auto sizing or parent fill.

Example100
height?number | "auto" | "fill"

Height in points, auto sizing or parent fill.

Example80
padding?number

Content padding in points.

Example0
x?number

Visual offset in points: x moves right, y moves down. Does not change layout space.

Example0
y?number

Visual offset in points: x moves right, y moves down. Does not change layout space.

Example0
transform?ViewTransform

Transform the whole View without changing layout. Translation uses points; rotation/skew use degrees; scale 1 is unchanged; anchors use 0–1.

Example{rotation: 0}
background?Paint

Background paint; accepts a color or gradient. Use clear for transparency.

Example"clear"
opacity?number

Opacity of the whole View: 0 is transparent, 1 is opaque.

Example1
cornerRadius?number

Corner radius in points.

Example0
clip?"rectangle" | "ellipse"

Clipping shape: rectangle or ellipse. Material also accepts false to disable clipping.

Example"rectangle"
mask?View | null

Alpha mask View. Centered without affecting layout; null disables masking.

Example<Circle width="fill" height="fill" background="white"/>
zIndex?number

Drawing order among siblings; larger values appear in front.

Example0
blur?number

Blur radius in points; 0 disables blur.

Example4
innerShadow?DrawingEffect

Effect color, opacity, blur radius and x/y offset. Distances are in points.

Example{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}
glow?DrawingEffect

Effect color, opacity, blur radius and x/y offset. Distances are in points.

Example{color: HDR("cyan"), radius: 8, opacity: 0.8}
shadowColor?Color

Color of the outer shadow.

ExampleHDR("black")
shadowOpacity?number

Outer shadow opacity from 0 to 1; 0 hides it.

Example0
shadowRadius?number

Outer shadow blur radius in points.

Example4
shadowX?number

Outer shadow offset in points: x right, y down.

Example0
shadowY?number

Outer shadow offset in points: x right, y down.

Example2
animations?Animation[]

Animate a supported property when it changes. duration/delay use seconds; from/to set endpoints; repeat and autoreverse control repetition; wrap sets a periodic range.

Example[{property: "opacity", duration: 0.25, curve: "easeInOut"}]
key?string | number

Stable identity among siblings.

Practical example

function main() {
  return (
    <RepeatedLayout
      width={240}
      height={140}
      axis="both"
      period={{ x: 80, y: 50 }}
      value={{ x: 40, y: 25 }}
      anchor={{ x: 0.5, y: 0.5 }}
      alignment="center"
    >
      <Symbol name="plus" fontSize={20} color={$env.accent} />
    </RepeatedLayout>
  );
}

Animation

Animation

widthheightpaddingxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYperiodvalueanchoroffsettransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorYperiod.xperiod.yvalue.xvalue.yanchor.xanchor.yoffset.xoffset.y

When omitted

The table lists omission behavior verified against implementation. Property examples are copyable syntax, not defaults. Pass explicit values for a fixed result; contextual dimensions and theme colors are not fixed constants.

PropertiesWhen omitted
axis"horizontal"
period360
value0
anchor0.5
offset0
alignment"topLeading"

HStack

Animation

Symbol

Previous

RadialLayout

Next step

On this page

ExampleUsagePropertiesPractical exampleAnimationWhen omittedRelated APIs