FEEDBACK & OVERLAY
彩带庆祝Confetti Burst
完成的瞬间彩纸从上落下或从中心炸开——给用户一个值得截图的仪式感。
效果预览
✓
支付成功！
收据已发送到你的邮箱
适合用在哪
注册成功、支付完成、目标达成、年度报告揭晓。
容易踩的坑
- 每次保存这种高频小操作都撒花，仪式感迅速贬值，还会让用户厌烦。
- 粒子数超过 150 且用 DOM 元素实现，低端手机上掉帧严重，应改用 canvas。
- 未检测 prefers-reduced-motion，前庭敏感用户被满屏飞舞的彩纸刺激。
设计提示词 · Prompt
彩带庆祝（Confetti Burst）：两种形态——顶部落下（彩纸从视口顶部随机散落 2-3s，rotate 360-540deg 自旋）或中心炸开（40-80 片从爆点以随机角度和初速度飞出，受"重力"减速下坠）。彩纸尺寸 6-12px、方形+圆形+长条混搭、取品牌色系 4-6 色。用 canvas-confetti 库最省事；CSS 版用固定数量的元素 + 随机化的 left/delay/duration。触发时机在状态切换的同一帧，且只放一次。音效可选但默认静音。
Confetti Burst: two forms — falling from the top (confetti scatters randomly from the top of the viewport for 2-3s, spinning with rotate 360-540deg) or bursting from the center (40-80 pieces fly out from the burst point at random angles and initial velocities, decelerating and falling under "gravity"). Confetti size 6-12px, mixing squares + circles + strips, using 4-6 colors from the brand palette. The canvas-confetti library is easiest; the CSS version uses a fixed number of elements + randomized left/delay/duration. Trigger it in the same frame as the state change, and play it only once. Sound effects are optional but muted by default.
常见搭配
同一页面里经常和「彩带庆祝」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s s--abs d-confettistage"> <i class="d-confetti" style="left:8%;background:#4f46e5;animation-delay:0s"></i> <i class="d-confetti" style="left:22%;background:#ec4899;animation-delay:.3s"></i> <i class="d-confetti" style="left:38%;background:#f59e0b;animation-delay:.15s"></i> <i class="d-confetti" style="left:55%;background:#10b981;animation-delay:.45s"></i> <i class="d-confetti" style="left:70%;background:#4f46e5;animation-delay:.6s"></i> <i class="d-confetti" style="left:86%;background:#ec4899;animation-delay:.2s"></i> <span class="d-confettistage__ic">✓</span> <b>支付成功！</b> <span class="d-tiny">收据已发送到你的邮箱</span> </div>