Product Design GSAP Canvas UI

前端必装的审美三件套

模型再强，页面仍可能一眼 AI。先把设计立住，用 GSAP 把节奏编好，再用 Canvas 把冲击力叠上去——流体、玻璃、粒子，还压在可点的界面上。

进入三座舞台源书签

舞台 01 · GSAP 编排

设计

先把页面设计好。给它一个想法、一张截图或参考站，围绕需求探索方案，再做成可交互原型。

舞台 02 · Canvas 流体玻璃

流体在底层游走，玻璃透镜跟着指针放大。特效叠在真实按钮上，仍可点击。

真实 HTML 控件

舞台 03 · Canvas 粒子揭幕

字是灰尘，指针靠近时颗粒归位。点「换词」在设计 / 节奏 / 冲击之间重组。

颗粒是画布，按钮是 DOM · 设计

灵感来自 @BTCqzy1 的审美工作流：Product Design + GSAP + Canvas UI。本页用 CDN GSAP 与自写 Canvas 演示节奏和冲击，不是插件源码，也不需要 Workers。