这是什么
Cantrip 是一个收集好交互的地方。和大多数灵感站不同，这里的卡片不是截图或录屏：26 个交互全部是可以运行的 Demo。在列表里，它们会带着一个模拟光标自动演示；点开之后，动一下鼠标或用手指轻触就能亲手试，感受弹簧的回弹、按压的反馈、拖拽的阻尼。
每个条目都附有「设计要点」，写清楚这个交互为什么顺手：用了什么缓动、多长时间、为什么不从 scale(0) 出现。
快捷键
- ⌘K 或 /
- 搜索
- ←→
- 详情页切换上一个 / 下一个
- Esc
- 关闭详情或搜索
- R
- 全屏试玩页重播演示
收录一个新灵感
每个条目是 src/content/items/ 下的一个 Markdown 文件：frontmatter 是元数据，正文写设计要点。媒体支持三种：
- 图片：把图片放在 .md 旁边，
src: ./shot.png，构建时自动生成多尺寸 WebP。 - 视频：录屏放进
public/media/，写上src、poster和原始宽高。 - Demo：在
src/demos/写一个defineDemo()模块，填demo: 文件名。
用下面的表单生成 frontmatter，复制到新文件里即可。
技术
Astro 静态生成，Tailwind CSS 4，动画用 Motion。瀑布流按列高度实时排布，筛选时卡片用 FLIP 平滑换位；详情页从卡片本身飞出；Demo 离开视口自动暂停，标签页隐藏时全部冻结。尊重系统的「减弱动态效果」设置，也支持深色模式。
界面参考 recent.design 的信息架构与版式，内容与实现均为原创。