Woolwork

Turn any website into wool. Every surface is dyed felt, every border is a running stitch, and every control is a real sewn object: buttons settle into the board when pressed, checkboxes get cross-stitched shut, and cards arrive by being placed, then stitched on. This page is wearing it right now.

Feel it

Check the box slowly and watch the thread sew across, one stroke per press phase. Slide the button through its buttonhole. Every card on this page settled onto the board and had its stitch drawn around it, once, as it came into view.


Install

One stylesheet, one script, two fonts. No build step, no framework requirement. The visuals are plain CSS and the behavior attaches once at the document level, so it works the same in static HTML, server-rendered pages, and single-page apps, on elements that exist now or get added later.

<link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/woolwork/woolwork.css">
<script>document.documentElement.classList.add('ww-js')</script>
<script src="/woolwork/woolwork.js" defer onerror="document.documentElement.classList.remove('ww-js')"></script>
<body class="board"> ... </body>

Building new

Every common UI element has a craft counterpart ready to use: inputs are pockets, accordions are zippers, modals are notes pinned up with safety pins, dividers are seams. Start from the component page and compose.

Restyling existing sites

Woolwork changes how your site looks, feels, and moves without touching its structure, copy, or flows. Your layout stays; the material changes.

Made for AI agents

Woolwork ships as an agent skill: the kit plus references that teach an agent how to apply it, dye it to your brand, and keep older projects current as the system evolves.