把「高级感」直接抄进你的项目

每个效果都有可玩的在线 Demo，点「复制提示词」粘给 AI，一句话把效果写进你的代码里。

卡片动效

2 个

3D 倾斜光影面板卡片动效

卡片跟随触摸位置做 3D 透视倾斜，表面有径向反射流光，松手带弹簧阻尼回正。

详情

动态弥散光晕边框卡片动效

旋转渐变描边绕卡片流转，底部附带动态模糊的呼吸弥散背光。

详情

按钮交互

2 个

流体胶囊形变按钮交互

胶囊按钮点击后以高阻尼流体曲线无缝变形成弹窗面板，关闭时再流回去。

详情

弹性微缩触觉反馈按钮交互

按压时物理弹性压缩到 0.96 并加深内阴影，释放瞬间超调回弹。

详情

页面转场

1 个

共享元素无缝展开页面转场

点击卡片无缝放大成详情页，背景与容器连续平滑缩放，无跳变感。

详情

手势交互

1 个

阻尼弹性抽屉手势交互

底部抽屉跟手拖动，边缘有橡皮筋阻尼，松手按滑动速度自动吸附锚点。

详情

列表动效

1 个

物理弹簧交错流列表动效

列表元素依次入场，每个子项带微弱弹性向上滑入，形成瀑布般的交错节奏。

详情

图表控件

11 个

磁吸游标 + 滚动码表图表控件

折线图横向滑动时数据点带磁吸吸附，顶部数值用滚动计数器平滑联动。

详情

活动圆环 Rings图表控件

同心圆环从零画到当前值，中心数字同步增长，超出部分叠加深色。

详情

打卡热力格 Heatmap图表控件

一整年的记录铺成小方格，深浅分五档，点击某天弹出详情。

详情

仪表盘 Gauge图表控件

半圆仪表盘刻度分三段颜色，指针扫到当前值并带轻微回弹。

详情

柱状图 Bars图表控件

切换周 / 月时柱高平滑过渡，长按某根柱子时其余变暗并显示数值。

详情

专注分段图 Focus图表控件

一条按阶段区分高度和颜色的时间轴，手指滑动时顶部跟随显示时刻和阶段。

详情

范围折线图 Range图表控件

同一条线随范围切换平滑变形，面积渐变同步过渡。

详情

目标线 Goal图表控件

柱状图上一条可拖动的目标线，拖动时过线的柱子高亮，顶部实时统计达标天数。

详情

分段占比条 Stacked图表控件

一整条分段占比条，点击某段时抽出并显示名称和百分比。

详情

环形占比图 Share图表控件

各段依次顺时针画出，点击某段外移高亮，中心显示名称和比例。

详情

气泡图 Bubble图表控件

圆的大小表示数量，点击某个气泡放大居中，其余气泡被推开。

详情

怎么用？三步

在线把玩 Demo，确认这是你要的效果；
点「复制提示词」，拿到该效果的 AI 生成提示词；
粘到 AI 编程工具（Trae / Cursor 等）里，让它写进你的项目。