~/design/ ls
✦ Design library
Small web UI pieces I found good-looking and built, mostly together with an agent. Each one is a page that runs on its own: try it here, copy the source in one click, or paste the agent prompt into your coding agent and let it rebuild the effect. MIT licensed.
$ For agents: index.md (the whole library as one index)
Stamp ButtonPressing feels like stamping: it presses down with a slight twist, then a grainy red imprint is left on the paper and slowly fades.html · css · js
Highlighter SwipeLinks and buttons get swiped by a highlighter, slanted tip, set low, each wrapped line marked separately, wiped off rightward. Pure CSS.html · css
One-Click Copy ButtonOn success, two sheets fold away, a checkmark draws, and the text slides to "已复制"; on failure it turns red and shakes. Screen-reader aware.html · css · svg · js
Magnetic ButtonThe button is pulled toward the approaching mouse, its text following more for depth, then springs back. JS writes only two variables.html · css · js
A Shape-Shifting Select: Genie / Tide / PixelThree 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.html · css · svg · canvas · js
An Agent Card That Falls AsleepOff: the blue hexagon mascot shrinks into a grey ball, eyes shut, z's rising. On: it pops back. Awake, its eyes follow you.html · css · svg · js
Floating Pill Nav at the BottomA pill-shaped nav centered at the page bottom: frosted glass, highlighted current section, bounce on press, twinkling stars.html · css
A Sidebar Whose Active Dot SlidesOne dot for the whole list slides to the picked item, bumps its text aside, then the colour sweeps in; speeds measured on the reference.html · css · js
Polaroid AvatarAn avatar as a Polaroid: white border, tape, handwriting; on a desk it drags, tilts when fast, and springs back on release.html · css · svg · js
Opening / Sign-off TerminalThe footer is a terminal session: see you, contact info, fortune and exit are typed out line by line; plus a first-visit boot animation.html · css · js
Hand-Drawn Diagrams + Image ViewerArticle flowcharts as hand-drawn SVG; click to open a viewer with wheel / pinch zoom, drag to pan, and Esc to close.html · css · javascript · svg
Desktop-Style HomepageThe homepage as a desk: draggable cards that tilt with speed and remember their position, plus icons that open resizable windows.html · css · javascript
Sticky-Note Guestbook WallA wall of colored sticky notes plus a post form: four colors, slight tilt, tape, straighten on hover; demo notes stay local.html · css · javascript
Dot-Matrix Visitor GlobeA 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.html · css · three.js
3D Scroll StorytellingA pinned 3D scene with text scrolling on the right: camera moves per step, parts pop in, labels follow 3D points. Pure three.js.html · css · three.js
Editorial-Style Conclusion ReportA conclusion-first magazine-style report: serif headline, one big card plus four small ones, Chart.js with clickable legends.html · css · chart.js
Map + Filter SidebarFilters on the left, a Leaflet map on the right: list and markers sync, clusters count only matches, list clicks fly to the map.html · css · javascript · leaflet
Handmade Paper FeelCream paper with a dot grid; stamp red, pen blue, highlighter yellow; serif headings, notes, sticky notes, stamps, full dark mode.html · css
Pure CSS MotionNo animation library: linear() spring easing, View Transitions, scroll-driven animation, @starting-style entrances, height to auto.html · css
Nothing matches that combination yet. Try another filter?
Good design elsewhere
Links only; check each one's license before you use it.
Components you can use
- shadcn/ui BlocksMITOfficial whole-section layouts (dashboards, sidebars, sign-in), installed with one command.
- Magic UIMIT150+ animated components for shadcn; calmer than Aceternity, good for product sites.
- Aceternity UIAnimated components and page templates heavy on shaders, parallax and micro-interactions.
- 21st.devCommunity component market, mostly marketing sections, each with a prompt for your AI.
- awesome-design-mdMITDesign systems of Stripe, Linear, Vercel and more as DESIGN.md files for your agent.
Galleries to browse
- GodlyDaily picks, experimental and polished.
- AwwwardsAward winners, filterable by tech, type and colour; lots of 3D and big type.
- Land-bookLanding pages filterable by style: Apple-like, Stripe-like, brutalist.
- SiteInspireA long-running, restrained gallery of editorial sites.
- MobbinScreens and full flows of shipped products; the most useful for dashboards.
- SaaS Landing PageSaaS landing pages only, by page type.
- recent.designScreen recordings of micro-interactions; the pixel-dissolve select came from here.