Learn · original editorial
Copying is fast. Knowing why is faster.
Short, opinionated guides that teach the craft behind the library — written by the same people who audit every component. No fluff, no "level up your career" filler; just the decisions that make UI feel expensive.
Spotlight interview · one maker a month
The craft behind the queue — told by the people doing the work
A monthly interview about the decisions, not the launch, drawing on each maker's submissions and gate results. Interviewees are the sample roster personas, and the page says so.
Build a hero that breathes — in 20 minutes
Most hero sections die on the fold because nothing in them moves with intent. This walkthrough stacks three zero-dependency Motif pieces into a hero that earns the scroll.
Easing is a language — a field guide to curves
The single highest-leverage skill in web animation is choosing the right curve. This guide maps the six curves we use at Motif to the feelings they produce — with the exact CSS.
Write AI prompts that reproduce — not ones that 'inspire'
Most AI website prompts get you 60% fidelity because they describe vibes ('make it sleek') instead of constraints. This is the exact structure we use to get 90+ fidelity across Claude, Codex and GLM-4.6.
Before you copy that component: the a11y checklist
Every asset in the library passes these checks before it earns a card. Run the same five on anything you paste from anywhere else — most copy-paste libraries skip all of them.
Glass is a material — not a trend
Backdrop-blur is 2026's drop-shadow: everywhere, mostly wrong. This guide explains the four surfaces that make glass read as expensive instead of dirty frosted plastic.
3D that costs nothing: CSS depth in five moves
Flip cards, tilting hero cards and orbiting logos — all of it is five CSS properties you already half-know. A cheat sheet with the exact recipes, zero WebGL.
Scroll choreography that respects the reader
Scroll-jacking is a sin; scroll choreography is a craft. The difference is intent: does the scroll reveal the story, or does it fight the reader for control?
Gradients that don't look cheap
Gradient is the most abused CSS property on the web. The difference between 'brand system' and 'Windows 98 wallpaper' is discipline: hue count, direction, and knowing when to stop.
The 60fps handshake: what devtools is really telling you
A frame budget is a contract between the compositor and your paint calls. Learn to read the performance trace the way a negotiator reads a room — and stop guessing which property broke it.
Design the empty state first
The empty state is the first thing a new user ever sees — and the first thing designers delete from the spec. A field guide to turning 'nothing here' into the most convincing screen in your product.
Easing cheatsheet, deep dive
Eight named curves, one screen. Which ease belongs to an entrance, which to an exit, and which one you should stop using today — with the exact cubic-beziers Motif's own components ship with.
Springs are not easings
A spring is physics pretending to be a curve: mass, stiffness and damping describe a system, not a path. Here is when to reach for one, how to read the three knobs, and why your button hover should probably stay a bezier.
The choreography question: story or decoration?
Before you animate anything, ask whether the motion tells the story of what changed — or just decorates the fact that something moved. A question that saves more design reviews than any style guide.
Micro-interactions that pay rent
Twenty tiny motions, each with a measurable UX job: confirm, guide, correct, or reward. If a micro-interaction cannot name its job, it is just wiggle.
Will-change is a promise — keep it or break it
The will-change property tells the browser to prepare a compositor layer before it is needed. Useful, yes. But every promise has a cost: layer memory, and the jank you create when you break the promise by never using the layer.
Why 60fps feels like 24fps
Smoothness is not frame rate — it is frame pacing. A steady 24 feels calm; a stuttery 60 feels broken. What jank actually is, why the eye forgives slow but not uneven, and how to measure the difference.
Animating on the GPU without asking
transform and opacity are the only properties that animate on the compositor without touching layout or paint. Here is the pipeline, plain: what the browser does each frame, why those two properties skip the expensive steps, and the traps that sneak layout back in.
Scroll speed is a type choice
Reveal timing is typography in time: the same paragraph reads differently revealed fast or slow, and the right speed changes with the length of the line, the density of the page and the patience of the reader.
The 200ms click window
Between the finger landing and the interface answering sits a 200-millisecond window where the user decides whether the product is fast or slow. What fills that window decides how the whole app feels.
Reduced motion beyond the switch
prefers-reduced-motion is a switch, but accessibility is a second design: a calmer experience with the same information, not a stripped one. Designing the reduced experience deliberately, not by deletion.
Glass, part two: when glass belongs
Frosted glass is the most overused effect in modern UI. Part two of the glass series: the three situations where blur-and-translucency genuinely earns its place, and the two where it is camouflage for a weak layout.
Shadow discipline
Shadows are an elevation system, not an ornament budget. Layer counts, elevation scales, and the one shadow rule that separates systems that feel physical from pages that look smudged.
Grid systems that don't shout
Twelve columns is a default, not a law. Layout rhythm without grid anxiety: the three questions that actually decide column count, and how to make a grid disappear into the design instead of announcing itself.
Fluid type without magic numbers
clamp() is everywhere and understood nowhere. The math that makes fluid type explainable — minimum, maximum, and a slope you can defend in a code review instead of a number you found in a tweet.
CSS nesting, now
Native CSS nesting shipped in every evergreen browser. Flatter files, real cascade semantics — and a syntax trap that will cost you a debugging afternoon if nobody warns you.
Container queries cookbook
Component-first responsive means the card does not care what page it lives on. Four recipes that replace viewport-width hacks with container queries that actually survive production.
:has() is finally useful
The parent selector that CSS refused us for twenty years shipped, and then the internet used it to write card hacks. Three :has() patterns that survive production, plus the performance reflex that keeps them cheap.
scroll-timeline, honestly
Scroll-driven animations in pure CSS — progress bars that fill with the scroll, sections that animate as they pass. What scroll-timeline can do today, where it still breaks, and the fallback that keeps your content honest.
In defence of the button
Every framework ships a Button component, and every designer has opinions about it. States, semantics, and the disabled attribute everyone gets wrong — a field guide to the most important 24 pixels in your product.
Colour contrast you can compute
Relative luminance is a formula, not a vibe. The maths that turns 'does this pass AA?' into a number you can compute on a napkin — and the three contrast facts that explain most design-review arguments.
Writing a brief the model can't ignore
The anatomy of Motif's own prompt format, dissected: why the structure exists, which lines do the actual work, and the three sentences that separate a brief that reproduces from a wish.
The retry loop: from fidelity 84 to 92
A run at fidelity 84 is not a failure — it is a diagnosis. The discipline of changing one thing at a time between run 1 and run 2, and the five most common fixes in Motif's own iteration log.
One palette, three moods
The same layout, the same palette, three different prompts — and three pages that feel like different products. How colour-direction phrasing steers model output, with the exact phrases that work.
When to say 'no gradients' in a prompt
'No gradients' is the most common constraint in Motif's briefs and the most misunderstood. When the rule produces cleaner work, when it backfires into flatness, and the gradient vocabulary that lets you use the effect without being used by it.
Model personality drift
The same brief on three models produces three different personalities — one verbose, one literal, one allergic to your constraints. What actually differs between models, and how to write briefs that survive the drift.
Design tokens inside prompts
A generated page you cannot restyle is a generated page you will rebuild. Putting tokens in the brief — named colours, radii, spacing scale — makes output restyleable after generation. The difference between a one-off and a component.
Prompting for reduced motion
Accessibility constraints belong in the brief, not the audit. How to bake prefers-reduced-motion into a prompt so the generated page ships with its calmer experience designed, not deleted.
From prompt to component
A great generated page is raw material, not a deliverable. The pipeline that turns a one-off generation into a library asset: extraction, tokenization, theming, and the tests that decide whether it earns a place in the catalog.
The 5-line prompt myth
'Short prompts are better prompts' is the most expensive folk wisdom in AI design. What the run logs actually show about brief length, and where the long brief's value really lives.
Fidelity is a claim
A fidelity score without a rubric is a vibe. How Motif scores runs, why screenshots are not proof, and the scoring discipline that turns 'this looks good' into numbers you can iterate against.
The keyboard walk
The cheapest full accessibility audit in existence: put the mouse away and walk the page with Tab. A field guide to the traps you will hit, in the order you will hit them, and what each one means.
Screen-reader poetry
Alt text and labels are read aloud to someone who cannot see the page — they are the audio track of your design. Writing alt text that respects attention: what to say, what to skip, and the one question that decides both.
Focus order is layout
Keyboard users read the page in DOM order, not visual order. When the two disagree, the layout lies to half your users. Why DOM order beats visual order — and the two reordering tools you should almost never use.
Contrast on brand colours
Your logo colour fails AA on white — almost everyone's does. Keeping personality inside contrast: brand colours for surfaces and large elements, tuned ink variants for text, and the token pattern that makes it automatic.
Touch targets beyond 44px
44×44 CSS pixels is a floor, not a finish. Thumbs, gloves, tremor, and the person using the phone one-handed on a moving train — the real minimum is a target your user can hit when they are not at their best.
Autoplay is a decision
Motion and sound that start without permission exclude the people who need control most: vestibular-sensitive users, screen-reader users, low-bandwidth users, and anyone in a room where sound is a problem. The decision framework for what may autoplay and what must ask.
Designing for cognitive load
Chunking, defaults and forgiving forms: the interface techniques that help everyone and are non-negotiable for users with executive-function differences, anxiety, or a browser with eleven tabs open.
Forms that fail kindly
Everyone makes mistakes; good forms make mistakes cheap. Inline errors that explain, retries that keep your data, and undo where it matters — the patterns that turn validation from a punishment into a conversation.
The invisible header
Landmarks, headings and structure are the header of a page that has no visual header — the outline screen-reader users navigate by. Why structure is design, and the ten-second outline audit that finds missing landmarks.
Testing with one hand
Mobile accessibility without a device lab: one-handed phone testing, pinch-and-zoom checks, landscape rotation, and the five-minute physical audit that finds what automated tools cannot.
Building a personal UI library
Everything Motif ships is a lesson in the same craft: a personal library is how a designer compounds taste. What to collect, how to document it, and why your own library beats every framework's.
Copy-paste guilt is a feature
Every craft begins in imitation. The guilt that says 'I should build it from scratch' is the ego protecting itself from learning — stealing good patterns, deliberately and with credit, is how craft actually spreads.
Designing in the open
A changelog people actually read is not a list of fixes — it is a public design diary that turns users into collaborators and turns your process into your marketing. What to write, what to leave out, and the cadence that works.
The first 90 days of a content site
Motif's own early playbook, told honestly: what a content-and-library site should do in its first quarter — the 90-day plan of shipping, listening and pruning that turns a library into a destination.
Performance budgets for solo builders
The 200ms / 60fps contract is achievable without a team — if the budget is a rule you set once instead of a fight you have every sprint. A solo builder's performance system: targets, tools, and the audit that takes ten minutes.
Portfolio pieces that get you hired
Hiring designers and developers do not want to see everything you made — they want to see you make one decision well. The motion-spec case study that interviews better than any other format, and how to build one.
Freemium that isn't a lie
Most freemium products are free trials with extra steps: the free tier exists to be frustrating. The honest free/pro line is a decision about what the free user genuinely gets — and it is the only line that builds the trust a paid tier needs.
Animated storytelling for non-profits
Emotion is a non-profit's most honest asset and its most dangerous one. The ethics of animated storytelling: when motion serves a cause and when it manipulates, with patterns that respect the audience's agency.
Dark mode is a design system
Dark mode is not a filter you flip — it is a second system with its own luminance logic, elevation language and colour roles. The differences that break naive implementations, and the token architecture that makes dark a first-class citizen.
Naming is design
Component names are the API of your design system — and most names are lies. The discipline of naming by job: names that make the right usage feel inevitable and the wrong usage feel wrong.
Reading a diff as a reviewer
A diff is not a changelog. It is the author's argument, written in the only language that cannot lie: what actually changed. Review it like one.
Why your hero LCP is a font problem
The site measured its own glyph coverage and found the arrows were missing from both shipped fonts. That is what an LCP regression looks like from the inside.
The three questions a changelog must answer
What changed, who noticed, how to roll back. If an entry cannot answer all three, it is a tweet, not a changelog.
Colour tokens are an API
Rename a colour and every page that assumed it breaks quietly. Tokens deserve the same discipline as a public function: versioning, deprecation, and aliases.
Empty states are onboarding
The first thing a new user sees is nothing. The three-variant empty state — never used, cleared, and error — turns that nothing into a first lesson.
A form is a conversation
Field order is question order. Error tone is voice. The save bar is the part where you let the person finish before you judge them.
Tables that survive 10,000 rows
You will not render 10,000 rows, and you should not. The craft is in what you do instead, and being honest about it.
When animation is documentation
Some motion explains. The rest is set dressing. The motion contract draws the line: a state change animated is a state change taught.
The cost of one dependency
A 4 KB library is never 4 KB. Here is the arithmetic this site does before npm install, with its own chunks as the evidence.
Version numbers people trust
Semver is a promise about what a bump means. Changelogs are the receipt. Deprecation windows are the grace. You need all three.
Writing error messages that name the fix
An inventory of this site's own error copy, graded by one rule: does the sentence tell the reader what to do next?
A11y is a spec, not a vibe
'Accessible' is not a feeling about your interface. It is a list of testable statements. Read three success criteria against real components and the vibe evaporates.
Lighthouse is a smoke test
A 100 means the lab conditions passed. It says nothing about your reader's bus ride. Field data is the truth; the lab is the alarm.
The layout shift that wasn't
A debugging story from this site's own build: a CLS the metrics swore was there, a page that visibly never moved, and the fallback document in between.
Design review for engineers
A checklist distilled from the catalog's qualityScore rubric — the five things an editor looks for before a component earns its number.
Search is a product
Zero-result pages, synonyms, aliases. The search box on this site earns its place by what it does for 'dropdown' — not by existing.
Dark mode is a theme, not an inversion
filter: invert(1) dark mode is a screenshot with the lights off. Real dark themes remap roles — and the shadows go first.
Progressive disclosure on long pages
A TOC spine, an accordion, and a details element walk into a spec. Each hides information — the craft is choosing which reader burden each one lifts.
The economics of a copy button
Every code block on this site copies. Here is why that one affordance out-earns everything else on the page combined.
Feature flags are communication
A flag is a promise to two audiences at once: users see a coherent product, teammates see incomplete work safely. Mess up either and the flag becomes a liability.
Charts without a chart library
The quality pages draw their distributions with two spans and a width percentage. That is a chart. Here is when the CSS version wins, and when it honestly doesn't.
Naming a component
How combo-box got its name, why the aliases field exists, and the rule that the name is what the reader types when they don't know your name.
The retriable request
One retry, on a fresh connection, for transport errors only. The harness's fetch rule, explained — and why 'only' is doing the heavy lifting.
Licensing for frontend snippets
Every catalog entry carries MIT or CC BY 4.0, and the difference is the difference between code and the collection it sits in.
Ship the boring version first
The roadmap's four columns — today, slice, cost, refuse — are a machine for killing the exciting version of a feature until the boring one has proven the need.
Anatomy of a false claim
One sentence on the aria page claimed a motion audit that had never run at scale. This is the full anatomy: the sentence, the audit it summoned, and the 63 scenes behind it.
What a build cannot see
Static rules ran green over hundreds of documents while six truths stayed invisible, because no regex can walk a page with a keyboard. Naming the blind spots was the fix.
The rule that had to be first
A cache config listed its catch-all last, one comment claimed 'a later rule wins', and the build shipped zero immutable chunk files. One curl found it.
Recorded numbers need labels
One change, three different 'after' figures in three places — each one true in its own frame and misleading without it. The fix is labels, not consistency.
Auditing the crawl surface
A hundred unlisted pages, five surfaces that said noindex in one place and not another, and the two rules that ended the ambiguity for good.
Five passes over a finished site
The method behind the audit batches: point the checks at the site's claims about itself, not only at its pages. The pages were fine; the claims were drifting.
Prefer to feel it instead of read it?
The Easing Lab and Spring Lab turn this page's theory into something you can push on. Tune, watch, export.
Open the Lab