Recursive dot art

Mount component=recursive-icon in a Web Device layout. Single-symbol and sequence modes share one entry point. Put your images under your site’s content/media/. Use transparent SVG, PNG, or WebP silhouettes.

The component comes from the ARC default theme at themes/default/components/recursive-icon/. Your runtime must include it; upgrade if an older CLI cannot resolve it. The images in these examples belong to this site. Copy the images or replace their paths when using the configuration elsewhere.

Repeat one symbol

Small copies form a larger version of the same icon, which becomes the next seed.

page single {
  web-page root layout=page-sections {
    component art slot=art component=recursive-icon icon="/media/recursive-icon/arcblock.svg" controls=true
  }
}

→ Open the single-symbol example

Cycle through several symbols

Pass an ordered icons array. Cross-shaped dotted tiles form a star; star-shaped tiles form ArcBlock; ArcBlock-shaped tiles form a cross. Travelling copies retain the previous symbol while the overall silhouette belongs to the next symbol.

page sequence {
  web-page root layout=page-sections {
    component art slot=art component=recursive-icon icons=["/media/recursive-icon/cross.svg", "/media/recursive-icon/star.svg", "/media/recursive-icon/arcblock.svg"] controls=true
  }
}

→ Open the sequence example

Props

Prop	Type	Default	Behavior
`icon`	string	Built-in cross	Same-origin root path for one symbol
`icons`	string[]	Unset	1–8 same-origin root paths; takes precedence over icon
`color` / `background`	string	Site accent / bg	CSS colors
`speed`	number	`1`	`0.25–3`
`grid`	number	`19`	13–31, rounded up to an odd integer
`contrast`	number	`0.58`	`0.2–1`
`maxDotSize`	number	`22`	12–32 CSS px; capped at 18 on narrow screens
`seed`	number	Random per instance	`0–4294967295`
`controls`	boolean	`false`	Show local animation controls
`title` / `subtitle` / `eyebrow`	string	Empty	Optional hero copy
`locale`	string	Render locale	`en` / `zh`

Color is independent of the original image: only its alpha silhouette is sampled, then painted using color. grid controls silhouette sampling density; maxDotSize bounds screen-space dots. Set seed to reproduce growth paths. Omit it for a different path and rhythm per instance.

Runtime and failure boundaries

Image paths must start with a single /. External URLs, protocol-relative URLs, and backslashes are rejected. Invalid configuration uses a valid icon, or falls back to the built-in cross.
An opaque background becomes a filled square silhouette. Fully transparent or failed images show an error and retain the first image as a fallback.
Images are sampled at initialization or when sampling density changes. Cycles do not request the images again.
Controls change only the animation in the current browser. They do not edit images or site configuration.
Reduced motion displays static dots. Offscreen instances and background tabs pause animation.
This is a Web Device layout component. Markdown ::recursive-icon does not mount it. This page embeds real layout pages.

Use and override components