「草木本心 · 清风在手」是一副以廉洁为主题的扑克，共 54 张：每张牌画的是一种植物的拟人形象，配一个四字谐音题名和一句口号，牌背是一段短小的历史典故。这副牌是我在 AI 辅助下设计的，展示站是一个 84 KB 的网页，单文件，不依赖任何外部资源。
- 54张牌，4 种花色 × 13 种植物，另加 2 张王牌
- 36 / 54张牌的典故注明了典籍出处
- 84 KB一个页面，零依赖
植物拟人与四字谐音
为什么要把廉洁主题做成一副扑克？廉洁主题的材料容易流于说教，而扑克是人们平时会拿在手里的东西；用植物来讲，又能把这个主题讲得轻松一些，例如芹菜讲勤勉（业精于芹，谐「业精于勤」），莲花讲清白（一品清莲，谐「一品清廉」）。每一张牌都按同一条规则来做，即它必须同时在四个层面上成立：一种植物，一个四字谐音题名，一句口号，以及一段带出处的典故。以黑桃 A 为例，植物是芹菜，题名是业精于芹，典故是韩愈苦学。
这副牌
每张牌的牌背讲一段 57 到 119 字的故事，其中三分之二注明了正史出处，故事后面跟一句按语。牌的长宽比与真实扑克相同，即 63 × 88 mm。
展示站
展示站是一个 HTML 文件，整副牌的数据内联在文件里，没有用任何框架。画廊页只加载缩略图，点开一张牌时才加载全尺寸的牌面，浏览器支持 AVIF 就用 AVIF，否则用 JPEG（一共 216 个文件）；相邻的牌会预先取好，因此翻到下一张不用等待。特写里的牌放在三维空间中，拖动可以旋转，双击或按 F 键可以翻面。牌与牌之间的切换用的是临界阻尼弹簧的运动曲线，采样之后写成 CSS 的 linear() 缓动函数，较旧的浏览器引擎则退回到 cubic-bezier 缓动。
页面有深色主题，深色下牌面不反色，因为牌是实物；有减弱动态效果（reduced motion）模式，打开后不再有动画；支持键盘导航，并用一个 ARIA 实时区域（live region）报出当前是哪一张牌。
这个项目里，牌是我在 AI 辅助下设计的，单文件的展示站是我写的，部署也是我做的（nginx，开了 HTTP/2，图片资源设了长期缓存）。
线上地址 zhezhang.info/deck，展示站只有中文版。