MOTION EFFECT
复古透视网格Retro Grid
向地平线汇聚并持续向前滚动的网格，80 年代合成器浪潮风格。Magic UI 有同名组件，配合霓虹色最出效果。
效果预览
RETRO GRID
适合用在哪
开发者工具、音乐/游戏相关产品、需要「复古未来感」的深色区块。
容易踩的坑
- perspective 过小加 rotateX(76deg)，近处网格线会严重锯齿闪烁。
- 霓虹 text-shadow 叠多层后小字号模糊，正文不宜套用同样效果。
- 网格滚动无限运行，长页面停留时持续占用合成层与电量。
设计提示词 · Prompt
复古透视网格（Retro Grid）：容器用 linear-gradient(#0b0b14,#170f2e) 做上暗下紫的底，perspective:180px、overflow:hidden。网格层用 top:36%、left/right:-50%、bottom:-40% 铺满下方，背景为两层 1px 的紫色 linear-gradient 网格线（background-size 26px 22px），transform:rotateX(76deg) 压成透视。动画只滚动 background-position 的 Y 值 0→22px，线性 2.6s 无限循环，视觉上就是网格不断向观者滚来。标题用大写字重 740 加紫色 text-shadow。
Retro Grid: the container uses linear-gradient(#0b0b14,#170f2e) for a dark-top, purple-bottom background, with perspective:180px and overflow:hidden. The grid layer fills the lower area with top:36%, left/right:-50%, bottom:-40%; its background is two layers of 1px purple linear-gradient grid lines (background-size 26px 22px), with transform:rotateX(76deg) to flatten it into perspective. The animation only scrolls the Y value of background-position 0→22px, linear 2.6s, infinite, so the grid appears to keep rolling toward the viewer. The title is uppercase, font weight 740, with a purple text-shadow.
常见搭配
同一页面里经常和「复古透视网格」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="m-retro"> <div class="m-retro__g"></div> <div class="m-retro__t">RETRO GRID</div> </div>