https://cantrip.cn 每日精选的交互、动效与 UI 灵感。卡片里的每个交互都是活的，点开就能上手试。 zh-cn https://cantrip.cn/i/invite-code https://cantrip.cn/i/invite-code 微交互 Sun, 27 Sep 2026 00:00:00 GMT 一枚柔和的胶囊按钮：点一下，标签向上淡出，邀请码逐字模糊浮现，右侧的箭头变成复制按钮。宽度跟着内容走，永远贴合。 https://cantrip.cn/i/price-ticker https://cantrip.cn/i/price-ticker 动效 Fri, 25 Sep 2026 00:00:00 GMT 在月付和年付之间切换，价格的每一位都是一条 0–9 的数字带，各自滚到新值：有的向上、有的向下，彼此错开几十毫秒，"省 20%"徽标随后弹出。 https://cantrip.cn/i/scroll-story https://cantrip.cn/i/scroll-story 网页 Fri, 25 Sep 2026 00:00:00 GMT 一个真的可以滚动的迷你落地页：标题逐行从基线揭开，图片随滚动从圆角小框展开到满幅，数字在吸顶区块里一路数上去，右侧细线记录阅读进度。 https://cantrip.cn/i/dynamic-island https://cantrip.cn/i/dynamic-island 移动端 Thu, 24 Sep 2026 00:00:00 GMT 锁屏顶部一颗会呼吸的黑色药丸：计时器让它长出紧凑态，轻点展开成音乐播放器，再点收回，放着不管又会自己缩回原形。 https://cantrip.cn/i/stacked-toasts https://cantrip.cn/i/stacked-toasts 组件 Thu, 24 Sep 2026 00:00:00 GMT Sonner 风格的通知堆栈：新通知从底部升起，旧的缩小后退只露一条边；指针一放上去整叠展开成列表，计时暂停，往下一甩就能关掉。 https://cantrip.cn/i/hold-to-delete https://cantrip.cn/i/hold-to-delete 微交互 Mon, 21 Sep 2026 00:00:00 GMT 危险操作不弹确认框，而是让你按住 1.6 秒。红色从左向右漫过按钮，松手即回弹取消；填满后按钮收窄成"已删除"，片刻后自动复原。 https://cantrip.cn/i/text-scramble https://cantrip.cn/i/text-scramble 网页 Mon, 21 Sep 2026 00:00:00 GMT 深色落地页首屏：标题逐字从一串等宽符号里"解码"出来，从左到右错峰落定；指针扫过哪个词，哪个词就重新洗一遍牌。 https://cantrip.cn/i/command-palette https://cantrip.cn/i/command-palette 组件 Sat, 19 Sep 2026 00:00:00 GMT 毛玻璃的 ⌘K 面板：输入即时模糊过滤并高亮命中的字，鼠标移动时高亮块轻轻滑过去，键盘上下则直接跳到位；回车后当前项闪一下，底栏报出执行结果。 https://cantrip.cn/i/color-system https://cantrip.cn/i/color-system 界面 Fri, 18 Sep 2026 00:00:00 GMT 一套以 11 级暖灰为骨架的色彩系统：中性色阶、品牌色与语义色、深色模式令牌映射，三张规范板讲清楚。 https://cantrip.cn/i/folder-fan https://cantrip.cn/i/folder-fan 界面 Fri, 18 Sep 2026 00:00:00 GMT 一只 macOS 风格的文件夹：悬停时毛玻璃前盖向前翻下，四张卡片像手里的牌一样扇形升起；指到哪张，哪张就抬高摆正。 https://cantrip.cn/i/drag-reorder https://cantrip.cn/i/drag-reorder 组件 Tue, 15 Sep 2026 00:00:00 GMT 按住一首歌，卡片微微抬起、倾斜半度，跟着手指上下移动；其他卡片用弹簧让出位置，拖过头会被橡皮筋拉住，松手后带着速度落回空位。 https://cantrip.cn/i/like-burst https://cantrip.cn/i/like-burst 微交互 Mon, 14 Sep 2026 00:00:00 GMT 一次点赞，四个节拍：心形先被压扁，再弹簧般鼓起并填满红粉渐变，一圈冲击波和十粒彩色碎屑同时飞出，计数只滚动变化的那一位。 https://cantrip.cn/i/spotlight-grid https://cantrip.cn/i/spotlight-grid 网页 Mon, 14 Sep 2026 00:00:00 GMT 落地页的特性区块，指针像一盏提着走的灯：所在卡片的 1px 描边和内部被照亮，相邻卡片朝向指针的那条边也跟着发光。 https://cantrip.cn/i/tab-clip https://cantrip.cn/i/tab-clip 组件 Sat, 12 Sep 2026 00:00:00 GMT 把整排标签复制一份做成"激活态"叠在上面，用 clip-path 只露出当前那一格。切换时移动的只是裁切框，深色胶囊和白字永远严丝合缝。 https://cantrip.cn/i/magnetic-button https://cantrip.cn/i/magnetic-button 动效 Fri, 11 Sep 2026 00:00:00 GMT 指针一靠近，按钮就被轻轻"吸"过去，文字比按钮走得更远，背后一束暖光扫过点阵；离开后弹簧把它送回原位。 https://cantrip.cn/i/form-shake https://cantrip.cn/i/form-shake 微交互 Wed, 09 Sep 2026 00:00:00 GMT 邮箱填错时，输入框像摇头一样晃几下、边框变红、提示从上方滑入；填对后按钮收缩成加载圆环，再展开成绿色的"订阅成功"。 https://cantrip.cn/i/sparkline-scrub https://cantrip.cn/i/sparkline-scrub 数据可视化 Wed, 09 Sep 2026 00:00:00 GMT 资产走势卡片：指针在图上移动时，参考线和圆点吸附到最近的一天，顶部金额、涨跌幅和日期实时跟着变，参考线右侧的曲线褪成灰色；移开就回到最新值。 https://cantrip.cn/i/type-specimen https://cantrip.cn/i/type-specimen 排版 Wed, 09 Sep 2026 00:00:00 GMT 中文 PingFang SC 搭配西文 Inter 的字号阶梯与混排规则：行长、行高、中英间距与等宽数字。 https://cantrip.cn/i/swipe-stack https://cantrip.cn/i/swipe-stack 移动端 Mon, 07 Sep 2026 00:00:00 GMT Tinder 式的卡片堆：拖着顶卡左右甩，卡片随位移倾斜、盖上"喜欢/跳过"印章；甩得够快或够远就飞走，下一张顺势顶上来。 https://cantrip.cn/i/origin-menu https://cantrip.cn/i/origin-menu 组件 Sat, 05 Sep 2026 00:00:00 GMT 左上角的头像和右下角的"更多"各自弹出一个菜单，每个都从自己触发器所在的角长出来；高亮块跟着指针在菜单项间滑动，危险操作染成红色。 https://cantrip.cn/i/copy-command https://cantrip.cn/i/copy-command 微交互 Thu, 03 Sep 2026 00:00:00 GMT 终端风格的安装代码块。切换 pnpm / npm / bun 时指示条滑过去、命令模糊交叉切换；点复制，图标和文字一起变成"已复制"，按钮宽度用弹簧贴合新文案。 https://cantrip.cn/i/logo-marquee https://cantrip.cn/i/logo-marquee 网页 Thu, 03 Sep 2026 00:00:00 GMT 「受到这些团队信赖」区块：两行虚构品牌字标反向无限滚动，边缘渐隐；指针停在哪一行，那一行就慢慢刹到 0.2 倍速，被指着的标志恢复品牌色。 https://cantrip.cn/i/tilt-card https://cantrip.cn/i/tilt-card 动效 Thu, 03 Sep 2026 00:00:00 GMT 一张纯 CSS 绘制的会员卡，跟着指针在三维里倾斜：高光追着指针走，全息纹理随角度流动，投影朝反方向滑开。 https://cantrip.cn/i/activity-rings https://cantrip.cn/i/activity-rings 数据可视化 Sat, 29 Aug 2026 00:00:00 GMT 三个同心圆环用弹簧长到目标值，超过 100% 就继续绕第二圈，末端圆头投下一小片阴影压住起点；在"今天 / 本周"间切换，圆环、中心卡路里和图例一起滚到新数字。 https://cantrip.cn/i/faq-accordion https://cantrip.cn/i/faq-accordion 组件 Sat, 29 Aug 2026 00:00:00 GMT 同时只展开一项的 FAQ：高度用零回弹弹簧展开，加号转 45° 变成叉号，答案晚一拍浮现，展开的那张卡片换成白底并浮起一层柔和阴影。 https://cantrip.cn/i/pull-refresh https://cantrip.cn/i/pull-refresh 移动端 Sat, 29 Aug 2026 00:00:00 GMT 向下拉动态列表，越拉越沉；圆环随距离长满，过了阈值箭头翻转、"咔哒"一下，松手后转圈回弹，新动态从顶部长出来。 https://cantrip.cn/i/toggle-trio https://cantrip.cn/i/toggle-trio 微交互 Sat, 29 Aug 2026 00:00:00 GMT 三种开关，三种手感：iOS 开关按住时滑块被"挤"长，日夜切换里太阳滚成月牙、星星亮起，复选框的对勾一笔画出来。 https://cantrip.cn/i/before-after https://cantrip.cn/i/before-after 界面 Wed, 26 Aug 2026 00:00:00 GMT 同一个记账 App 的线框稿和完成稿叠在一起，拖动中间的把手，或在任意位置按下拖动，来回对照；两边的每个方块都严丝合缝地对齐。