# 设计灵感库

刘卓琪的设计灵感库：做过、觉得好看的网页 UI，每条都是一个能单独打开的 HTML 演示，按 MIT 开源。在条目地址后加 `index.md` 拿到说明和完整源码（例如 /design/<slug>/index.md），照着就能复现。

## 按钮与控件

- [印章按钮](https://zhuoqidev.com/design/stamp-button/index.md) — 按下去像盖章：往下一压、轻轻一拧，松手后纸上留下一枚带颗粒感、慢慢淡掉的红印。
- [荧光笔划过](https://zhuoqidev.com/design/highlighter-button/index.md) — 链接和按钮被荧光笔从左往右涂一道：笔头是斜的、位置偏低、跨行每行单独划，离开时往右擦掉。纯 CSS。
- [一键复制按钮](https://zhuoqidev.com/design/copy-button/index.md) — 复制成功：两张纸收起、画出对勾、文字往上换成「已复制」；失败：变红抖一下。还会念给读屏软件听。
- [磁吸按钮](https://zhuoqidev.com/design/magnetic-button/index.md) — 鼠标靠近，按钮被「吸」过去，里面的字跟得更多，像有厚度；移开时用弹簧弹回原位。JS 只写两个变量。
- [会变形的下拉框：神灯 / 退潮 / 像素](https://zhuoqidev.com/design/pixel-dissolve-select/index.md) (复现) — 下拉框的展开 / 收起三选一：神灯（像 Mac 最小化，菜单弯成漏斗被吸进名字）、退潮（带浪花的波浪线向上把菜单冲走）、像素溶解。

## 导航

- [底部悬浮药丸导航](https://zhuoqidev.com/design/pill-dock/index.md) — 页面底部居中的药丸形导航：毛玻璃底、当前栏目高亮、按下回弹，旁边点缀会闪的小星星。
- [会滑动的激活圆点侧边栏](https://zhuoqidev.com/design/sidebar-active-dot/index.md) (复现) — 整个目录只有一个圆点：点哪项它就竖着滑过去、换成分组色，落地把文字顶开，颜色再从左往右刷过去；每段速度都照原片逐帧量。

## 卡片与小部件

- [会睡觉的 Agent 卡片](https://zhuoqidev.com/design/agent-sleep-toggle/index.md) (复现) — 关掉 Agent，蓝色六边形吉祥物缩成灰色圆球、眼睛眯成两道线、头顶冒 z；打开又弹回来。醒着时眼睛跟着鼠标转。
- [拍立得头像](https://zhuoqidev.com/design/polaroid-avatar/index.md) — 头像做成一张拍立得：白边、一条胶带、一行手写字；放在桌面上可以拖，拖得快会歪，松手弹回。

## 整页与区块

- [桌面式首页](https://zhuoqidev.com/design/desk-home/index.md) — 首页做成一张桌子：卡片能拖、拖动时跟着速度倾斜、位置记在本机，双击图标开出能拖能缩放的小窗口。
- [便利贴留言墙](https://zhuoqidev.com/design/sticky-guestbook/index.md) — 彩色便利贴墙加发帖框：四种纸色、每张微微歪着、贴胶带，悬停摆正；示例里新便签只存在本机。
- [编辑风结论报告页](https://zhuoqidev.com/design/value-ledger-report/index.md) — 结论先行的杂志式报告：衬线大标题、一张大结论卡加四张小卡、Chart.js 图表配可点图例，表格各自横向滚动。
- [地图 + 筛选侧栏](https://zhuoqidev.com/design/map-filter-finder/index.md) — 左侧多段筛选、右侧 Leaflet 地图：结果列表和标记实时同步，点聚合只数符合条件的点，点列表飞到地图并弹详情。

## 整体风格

- [手作纸感](https://zhuoqidev.com/design/handmade-paper/index.md) — 奶油纸色 + 点阵底，印章红 / 钢笔蓝 / 荧光黄；宋体标题、手写批注、便利贴、印章、虚线卡片，深色模式齐全。

## 动画效果

- [开场 / 告别终端](https://zhuoqidev.com/design/terminal-signoff/index.md) — 页脚是一段终端会话：see you、联系方式、fortune、exit 逐行打出来；另附一段首访开机动画。
- [纯 CSS 动效](https://zhuoqidev.com/design/css-only-motion/index.md) — 不引动画库：linear() 弹簧缓动、View Transitions 页面过渡、滚动驱动、@starting-style 入场、高度到 auto。

## 图表与 3D

- [手绘风图表 + 大图查看器](https://zhuoqidev.com/design/hand-drawn-diagrams/index.md) — 文章里的流程图画成手绘风 SVG，点开是能滚轮 / 双指缩放、拖动平移、Esc 关闭的大图查看器。
- [点阵地球访客地图](https://zhuoqidev.com/design/dot-globe-visitors/index.md) — three.js 点阵地球：各国访客数立成红色光柱，蓝色弧线带着光点飞向同一个目的地，可拖动、可点光柱看数字。
- [3D 滚动叙事](https://zhuoqidev.com/design/scroll-3d-story/index.md) — 左边 3D 小场景钉住不动，右边文字一步步滚过去：镜头推到当前这一步，零件弹出来，标签跟着 3D 点走。纯 three.js 代码建模。