视觉与动效GridReveal加载态AI 图片进度驱动

网格揭示

给 AI 图片生成用的加载态：网格会随着进度分裂、抖动，图片就绪后无缝变成真实画面。

正在生成画面…

上面的组件正在页面上实时运行，可以直接交互。

安装

在项目根目录执行下面的命令，组件源码会写入 @/components/ui/grid-reveal.tsx。

npx shadcn@latest add swamimalode07/rare-ui/grid-reveal

用法

组件默认导出（或具名导出）即可直接使用，不需要额外的 Provider。

grid-reveal.tsx

1import GridReveal from "@/components/ui/grid-reveal"
2
3export function Demo() {
4  return (
5    <GridReveal
6      src="/assets/demo.png"
7      alt="由 AI 生成的画面"
8      progress={0.6}          // 0–1，跟随你的生成进度
9      aspect={16 / 10}
10      caption="正在生成…"
11    />
12  )
13}

属性

下表列出了该组件公开的主要属性，所有未列出的原生属性都会透传到根元素。

属性	类型	默认值	说明
src	string \| null	—	图片地址；为 null 时一直保持加载态。
alt	string	—	图片替代文本。
progress	number	—	0–1 的生成进度，驱动网格分裂。
aspect	number	—	宽高比，例如 16 / 9。
caption	string	—	加载时显示在网格中央的文案。
estimatedDuration	number	—	预估耗时（秒），用于自走进度。
onRevealComplete	() => void	—	揭示动画结束回调。
onError	() => void	—	图片加载失败回调。