# Design library

Liu ZhuoQi's design library: web UI pieces worth keeping, each a self-contained HTML demo under the MIT license. Append `index.md` to an entry URL for its notes and full source (e.g. /en/design/<slug>/index.md), enough to recreate it.

## Buttons & controls

- [Stamp Button](https://zhuoqidev.com/en/design/stamp-button/index.md) — Pressing feels like stamping: it presses down with a slight twist, then a grainy red imprint is left on the paper and slowly fades.
- [Highlighter Swipe](https://zhuoqidev.com/en/design/highlighter-button/index.md) — Links and buttons get swiped by a highlighter, slanted tip, set low, each wrapped line marked separately, wiped off rightward. Pure CSS.
- [One-Click Copy Button](https://zhuoqidev.com/en/design/copy-button/index.md) — On success, two sheets fold away, a checkmark draws, and the text slides to "已复制"; on failure it turns red and shakes. Screen-reader aware.
- [Magnetic Button](https://zhuoqidev.com/en/design/magnetic-button/index.md) — The button is pulled toward the approaching mouse, its text following more for depth, then springs back. JS writes only two variables.
- [A Shape-Shifting Select: Genie / Tide / Pixel](https://zhuoqidev.com/en/design/pixel-dissolve-select/index.md) (Recreated) — Three ways to open and close a select: genie (a macOS-style minimize into the name), tide (a foamy wave washes it up and away) or pixels.

## Navigation

- [Floating Pill Nav at the Bottom](https://zhuoqidev.com/en/design/pill-dock/index.md) — A pill-shaped nav centered at the page bottom: frosted glass, highlighted current section, bounce on press, twinkling stars.
- [A Sidebar Whose Active Dot Slides](https://zhuoqidev.com/en/design/sidebar-active-dot/index.md) (Recreated) — One dot for the whole list slides to the picked item, bumps its text aside, then the colour sweeps in; speeds measured on the reference.

## Cards & widgets

- [An Agent Card That Falls Asleep](https://zhuoqidev.com/en/design/agent-sleep-toggle/index.md) (Recreated) — Off: the blue hexagon mascot shrinks into a grey ball, eyes shut, z's rising. On: it pops back. Awake, its eyes follow you.
- [Polaroid Avatar](https://zhuoqidev.com/en/design/polaroid-avatar/index.md) — An avatar as a Polaroid: white border, tape, handwriting; on a desk it drags, tilts when fast, and springs back on release.

## Pages & sections

- [Desktop-Style Homepage](https://zhuoqidev.com/en/design/desk-home/index.md) — The homepage as a desk: draggable cards that tilt with speed and remember their position, plus icons that open resizable windows.
- [Sticky-Note Guestbook Wall](https://zhuoqidev.com/en/design/sticky-guestbook/index.md) — A wall of colored sticky notes plus a post form: four colors, slight tilt, tape, straighten on hover; demo notes stay local.
- [Editorial-Style Conclusion Report](https://zhuoqidev.com/en/design/value-ledger-report/index.md) — A conclusion-first magazine-style report: serif headline, one big card plus four small ones, Chart.js with clickable legends.
- [Map + Filter Sidebar](https://zhuoqidev.com/en/design/map-filter-finder/index.md) — Filters on the left, a Leaflet map on the right: list and markers sync, clusters count only matches, list clicks fly to the map.

## Visual styles

- [Handmade Paper Feel](https://zhuoqidev.com/en/design/handmade-paper/index.md) — Cream paper with a dot grid; stamp red, pen blue, highlighter yellow; serif headings, notes, sticky notes, stamps, full dark mode.

## Motion

- [Opening / Sign-off Terminal](https://zhuoqidev.com/en/design/terminal-signoff/index.md) — The footer is a terminal session: see you, contact info, fortune and exit are typed out line by line; plus a first-visit boot animation.
- [Pure CSS Motion](https://zhuoqidev.com/en/design/css-only-motion/index.md) — No animation library: linear() spring easing, View Transitions, scroll-driven animation, @starting-style entrances, height to auto.

## Charts & 3D

- [Hand-Drawn Diagrams + Image Viewer](https://zhuoqidev.com/en/design/hand-drawn-diagrams/index.md) — Article flowcharts as hand-drawn SVG; click to open a viewer with wheel / pinch zoom, drag to pan, and Esc to close.
- [Dot-Matrix Visitor Globe](https://zhuoqidev.com/en/design/dot-globe-visitors/index.md) — A three.js dot globe: visitor counts as red beams, blue arcs with moving sparks to one destination; drag it, click a beam for the number.
- [3D Scroll Storytelling](https://zhuoqidev.com/en/design/scroll-3d-story/index.md) — A pinned 3D scene with text scrolling on the right: camera moves per step, parts pop in, labels follow 3D points. Pure three.js.