递归点阵动画

用 component=recursive-icon 在 Web Device layout 中放置点阵动画。单符号和多符号共用同一个入口；图片放在你的站点 content/media/ 中。透明背景的 SVG、PNG 或 WebP 最适合做轮廓。

组件来自 ARC 默认主题 themes/default/components/recursive-icon/。运行时必须包含该组件；旧版 CLI 找不到它时，先升级到包含该组件的版本。本页示例素材属于本站，复制配置到其他站点时一并复制图片或替换路径。

单符号循环

小图标不断复制，构成同一个大图标，再成为下一轮种子。

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

→ 独立打开单符号示例

多符号串行循环

传入有序的 icons 数组。加号的点阵先拼成星形，星形的点阵再拼成 ArcBlock，ArcBlock 的点阵再拼成加号。正在复制的小单元保留前一图案，整体轮廓属于后一图案。

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
  }
}

→ 独立打开多符号示例

参数

参数	类型	默认	行为
`icon`	string	内置加号	单符号的同源根路径
`icons`	string[]	未设置	1–8 个同源根路径；优先于 icon
`color` / `background`	string	站点 accent / bg	CSS 颜色
`speed`	number	`1`	`0.25–3`
`grid`	number	`19`	13–31，向上取奇数
`contrast`	number	`0.58`	`0.2–1`
`maxDotSize`	number	`22`	12–32 CSS px；窄屏上限 18
`seed`	number	每次随机	`0–4294967295`
`controls`	boolean	`false`	显示本地调节控件
`title` / `subtitle` / `eyebrow`	string	空	可选 hero 文案
`locale`	string	渲染语言	`en` / `zh`

颜色独立于原图：只采样 alpha 轮廓，再用 color 绘制点阵。grid 控制轮廓采样密度，maxDotSize 限制屏幕上的点尺寸。固定 seed 可重现扩散路径；不设置时，每个实例会生成不同的路径和节奏。

运行与失败边界

图片路径必须以单个 / 开头；外站 URL、协议相对地址和反斜线不被接受。无效配置使用有效的 icon，否则退回内置加号。
不透明背景会被当成完整方形轮廓。完全透明或加载失败的图片会显示错误，保留首图作为 fallback。
图片只在初始化或调节采样密度时采样，循环不会重复请求图片。
控件只调整当前浏览器里的动画，不修改图片和站点配置。
系统开启减少动态效果时显示静态点阵；离屏和后台标签页暂停动画。
这是 Web Device layout component。Markdown 中的 ::recursive-icon 不是挂载入口；本页通过 embed 展示真实 layout 页面。

使用与覆盖组件