QiuYe UI
特效

Matrix Effect

通用 Canvas 矩阵视觉效果组件：将图片、外部 Canvas 或程序化信号场按响应式网格采样，通过可组合的 Mapper、Transform 与 Renderer 管线生成圆点矩阵、ASCII 艺术和自定义效果，并内置自适应帧率、DPR 限制、离屏暂停与 Reduced Motion 支持。

canvasmatrixgridvisual-effectanimationdotsasciiimageproceduralsamplinggenerativeresponsive

快速预览

查看 Matrix Effect 组件的基本效果

基本用法

使用 Matrix Effect 组件的基础示例

导入组件

1import { DotMatrixEffect } from "@/components/qiuye-ui/matrix-effect";

使用组件

1<DotMatrixEffect
2  className="aspect-video w-full overflow-hidden rounded-md"
3  color="#9C9C9C"
4  backgroundColor="#F6F6F6"
5  grid={{ mode: "auto", cellSize: 10, maxCells: 7_000 }}
6  radiusRange={[0, 3]}
7  blobOptions={{
8    count: 4,
9    minRadius: 0.18,
10    maxRadius: 0.48,
11    speed: 0.4,
12    baseValue: 0.025,
13    seed: 17,
14  }}
15  levels={{ contrast: 1.25 }}
16  frameRate="auto"
17  maxDpr={2}
18  pauseWhenOffscreen
19  decorative={false}
20  ariaLabel="流动的柔和光团圆点矩阵"
21/>

组件演示

查看组件的各种使用方式和效果

Matrix Effect

#F4F4F5
#09090B
10px
3.0px
0.40
1.25