草木本心 · 清风在手 ("the true heart of plants; a clean wind in hand") is a 54-card deck on the theme of integrity: each card is a plant drawn as a character, with a pun title, a one-line motto and a short historical allusion on the back. The deck was designed with AI assistance, and its showcase is a single 84 KB web page with no dependencies.
- 54cards: 4 suits × 13 plants + 2 jokers
- 36 / 54allusions cite a classical source
- 84 KBone page, zero dependencies
Why
Integrity-themed material tends to be didactic. A deck of cards is something people actually pick up, and plants give the theme a light touch: celery for diligence (业精于芹, a pun on 业精于勤, "mastery comes from effort"), lotus for staying clean (一品清莲 for 一品清廉). The rule for every card was that it had to work on four levels at once: a plant, a four-character pun, a motto, and an allusion with its source.
The deck
Each card's back tells a story of 57 to 119 characters, two thirds of them cited to the standard histories, followed by a one-line commentary. Cards keep the 63 × 88 mm proportion of a real deck.
The page
The showcase is one HTML file with the deck as inline data and no framework. The gallery loads thumbnails; opening a card loads the full-size face, AVIF where the browser supports it and JPEG otherwise (216 files in all), with the neighbours prefetched so paging is instant. In the close-up the card sits in 3D: drag to tilt it, double-click or press F to flip. Moving between cards uses a critically damped spring sampled into a CSS linear() easing, with a cubic-bezier fallback for older engines. There is a dark theme (the card faces do not invert, since they are physical objects), a reduced-motion mode that removes the animation, keyboard navigation, and an ARIA live region that announces the current card.
What I did. Designed the deck with AI assistance, built the single-file site, and deployed it (nginx with HTTP/2 and long-lived caching for the image assets).
Live at zhezhang.info/deck. The card texts are in Chinese; the page has no translation.