How to use Motif

Motif is a field guide to modern interface craft. It isn't a video course or a wall of docs — it's a set of small, self-contained lessons you can read, run, copy, change, and rebuild with an LLM. This guide is the map.

Every lesson has the same shape

Once you know the rhythm, you can skim any lesson and find exactly what you need:

• In one line — the whole idea, up top, so you can decide if you need the rest.
• What it is / Why it matters — the plain-language explanation and the stakes.
• See it — a live, interactive demo. Drive the controls beside it; there's nothing to install.
• How it works — the real mechanics, honestly, including the trade-offs.
• Build it — copy-paste-ready code. The Copy button gives you the exact source.
• Make it yours — prompts to tweak the example and a jump into the playground.
• Reproduce it with an LLM — a ready prompt and a reusable pattern, so you can regenerate the idea for your own product.
• Pitfalls & accessibility — the mistakes to avoid, with accessibility treated as a requirement, not a footnote.

Find your way around

• Tracks are ordered paths through one area — foundations, motion, design systems, accessibility, and more. Read a track top to bottom, or dip in anywhere.
• Library is every concept in one filterable grid. Filter by track, difficulty, or topic, search the lot, and (see below) narrow to what you've read or saved.
• Prompts collects every "reproduce it with an LLM" prompt in one place — each with a ready-to-paste version and a reusable pattern.
• Playground is an editable sandbox. Open one snippet from any code block, or send a whole lesson's worth of examples at once and remix them side by side.
• Glossary defines the vocabulary, searchable and grouped.

Make it yours — privately

Reading is better when the site remembers where you are. On any lesson you can Mark as read or Save for later, and the tracks map shows your progress per track.

This is deliberately private. Everything you mark is stored only in your own browser — it is never sent to a server, never logged, and never used as a data source. You can wipe all of it in one click from Settings. No account, no tracking, no catch.

The fastest path

1. Skim a lesson's In one line and See it to feel the idea.
2. Hit Build it → Copy, or open the example in the playground and start changing values.
3. When you want it in your own stack, use the lesson's prompt with your favorite model to regenerate it for your exact case — then read Pitfalls & accessibility before you ship.

That loop — understand → run → copy → remix → rebuild with an LLM — is the whole point. Start anywhere on the tracks page, or browse the library.