MOTION EFFECT
交互网格Interactive Grid Pattern
由小方格组成的网格，格子依次点亮形成对角波浪。Magic UI / Uiverse 均有同族组件，鼠标跟随版也常见。
效果预览
适合用在哪
开发者工具首屏、数据/AI 主题区块、需要「数字矩阵」气质时的背景。
容易踩的坑
- 格子数超过数百个时逐格独立动画，DOM 与重绘开销会拖慢首屏。
- 鼠标跟随版在触屏设备上没有 hover，需降级为自动波浪。
- 点亮色饱和度过高且铺在文字后方，正文对比度不足。
设计提示词 · Prompt
交互网格（Interactive Grid Pattern）：CSS Grid 画 9 列 × 4 行、gap 3px 的小方格，每格 aspect-ratio:1、圆角 2.5px、底色深灰紫（#23233a），外层容器深色圆角并给 9px 内边距。每格动画 2.8s ease-in-out 无限循环，在中段把 background 变成主色 #6366f1；关键是用 animation-delay: calc(var(--i) * 70ms) 给每格按索引错开，形成从左上到右下的波浪。鼠标跟随版则改用 --mx/--my 计算每格到指针的距离来淡入。
Interactive Grid Pattern: use CSS Grid to draw small cells in 9 columns × 4 rows with a 3px gap; each cell has aspect-ratio:1, border-radius 2.5px, and a dark gray-purple base (#23233a); the outer container is dark and rounded with 9px padding. Each cell animates 2.8s ease-in-out, infinite, switching background to the primary color #6366f1 mid-cycle; the key is animation-delay: calc(var(--i) * 70ms) to stagger cells by index, forming a wave from top-left to bottom-right. For the cursor-following variant, use --mx/--my to compute each cell's distance to the pointer and fade it in.
常见搭配
同一页面里经常和「交互网格」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-center">
<div class="m-igrid">
<i style="--i:0"></i><i style="--i:1"></i><i style="--i:2"></i><i style="--i:3"></i><i style="--i:4"></i><i style="--i:5"></i><i style="--i:6"></i><i style="--i:7"></i><i style="--i:8"></i>
<i style="--i:1"></i><i style="--i:2"></i><i style="--i:3"></i><i style="--i:4"></i><i style="--i:5"></i><i style="--i:6"></i><i style="--i:7"></i><i style="--i:8"></i><i style="--i:9"></i>
<i style="--i:2"></i><i style="--i:3"></i><i style="--i:4"></i><i style="--i:5"></i><i style="--i:6"></i><i style="--i:7"></i><i style="--i:8"></i><i style="--i:9"></i><i style="--i:10"></i>
<i style="--i:3"></i><i style="--i:4"></i><i style="--i:5"></i><i style="--i:6"></i><i style="--i:7"></i><i style="--i:8"></i><i style="--i:9"></i><i style="--i:10"></i><i style="--i:11"></i>
</div>
</div>