MOTION EFFECT
3D 图标云Icon Cloud
技术栈图标分布在一个虚拟球面上缓慢自转，Magic UI 的 Icon Cloud 是这一族最出名的实现（多为 Canvas）。
效果预览
⚛
▲
◈
⬢
◐
Stack
适合用在哪
技术栈展示、集成能力说明、开发者产品的「我们支持什么」区块。
容易踩的坑
- 图标只靠位置表达，没有文字名称，读屏和不认识图标的用户无从理解。
- Canvas 版每帧重算投影，图标超过 40 个时移动端明显掉帧。
- 自转速度快于 9s 一圈，图标还没看清就转到背面去了。
设计提示词 · Prompt
3D 图标云（Icon Cloud）：容器相对定位。用 3-4 条不同旋转轴与半径的虚线椭圆轨道（border-dashed 主色 30% 透明），各自 rotate 后以 9-12s 线性无限循环自转，并用 reverse 让方向交错。轨道上散布 6-8 个 22×22px 的白底圆角小卡片（图标位），用 absolute + translate 定位到轨道的不同相位。中心放一个 38×38px 渐变主色圆角核心块，带外发光阴影。真实实现在 Canvas 上用斐波那契球面分布点 + 透视投影。
Icon Cloud: the container is position:relative. Use 3-4 dashed elliptical orbits with different rotation axes and radii (border-dashed in the primary color at 30% opacity), each rotated and then spinning linearly over 9-12s, infinite, with reverse used to alternate directions. Scatter 6-8 white rounded 22×22px cards (icon slots) on the orbits, positioned at different phases with absolute + translate. In the center place a 38×38px gradient primary-color rounded core block with an outer glow shadow. A real implementation uses Fibonacci sphere point distribution + perspective projection on Canvas.
常见搭配
同一页面里经常和「3D 图标云」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-center">
<div class="m-cloud">
<div class="m-cloud__r m-cloud__r--a"></div>
<div class="m-cloud__r m-cloud__r--b"></div>
<div class="m-cloud__c" style="transform:translate(-52px,-14px)">⚛</div>
<div class="m-cloud__c" style="transform:translate(50px,-20px)">▲</div>
<div class="m-cloud__c" style="transform:translate(-30px,42px)">◈</div>
<div class="m-cloud__c" style="transform:translate(38px,40px)">⬢</div>
<div class="m-cloud__c" style="transform:translate(0,-50px)">◐</div>
<div class="m-cloud__core">Stack</div>
</div>
</div>