Copy less.
Ship more.
One open platform for the front of your web: original animated components, AI website prompts with real test scores, living backgrounds and interactive motion labs.
Everything in one place
Four libraries that used to live on four different tabs
Component library
Elements, animated components, sections and whole templates — every one original, themeable and scored for quality, a11y and size.
Browse the library →AI prompts, actually tested
Every prompt is run through three frontier models before it ships. You see the fidelity score, the screenshots and the failure modes — not just a pretty mock.
See the run logs →Background & texture lab
Aurora fields, star motes, grain, glass — CSS-first implementations with performance tiers and low-end fallbacks.
Explore backgrounds →Learn by feeling it
Interactive labs for easing, springs and scroll choreography. Tune the physics, watch it move, export the code.
Open the Lab →Receipts, not rhetoric
Every claim above is a counted number
“Every prompt has test scores” only means something when you can open the run logs. These counts come straight from the library data — the same numbers the detail pages show.
No marketing roundings: components and prompts are counted from src/lib/data.ts at build time.
Most copied — playing live
The leaderboard, still running
Not screenshots — the actual demos, interactive in place. Hover, drag, click; then open the asset when you want the code.
Move your cursor — the trail listens
The feed
This week at Motif
Orbit Stickers · Streaming Text · Chat Bubble Stack · Thinking Dots · Prompt Input · Model Picker · Generation Progress · Code Diff Highlight · Citation Chip · Suggestion Chips · Response Actions · Retry Guard · Stream Markdown Skeleton · Token Meter · Context Window · Tool Call Card · Hallucination Note · Model Compare Tabs · Agent Steps · Prompt History Item · Persona Picker · Temperature Slider · Follow-up Bar · Local-first Note · AI Answer Skeleton · Code Actions Bar · Executive Dashboard Shell · Annual Report Section · Brand Guideline Spread · Museum Exhibit Card · Heritage Timeline · Patron Testimonial · Private Club Hero · Design System Showcase · Boutique Product Page · Jewelry Showcase · Lookbook Card · Concierge Request · Membership Card · Magazine Cover Hero · Editorial Pull-quote · Board Report Card · Investor Deck Section · Procurement Spec Card · Private Client Steps · Atelier Service Menu · Agency Site Template · E-commerce Storefront Template · Event Landing Template · Portfolio Showcase Template · Product Launch Template · Membership Site Template · Editorial Magazine Template · Enterprise Portal Template · Cart Drawer · Checkout Summary · Commerce Quantity Stepper · Doc Sidebar · Help Center Search · Keyboard Shortcut Card · Comment Thread · Reaction Bar · Community Share Sheet · Community Leaderboard
The newest batch in the component catalog. This line updates once the page can read your last visit from this browser.
A light edge travels the headline once — then it’s just typography.
Wipe Reveal Headline
A giant headline that wipes in with a travelling light edge, then sits still as clean typography. Nothing to babysit after the first paint.
“Why it's the pick: the reveal costs one background-paint pass and zero JavaScript after first paint.” — Motif Studio
Open in playground →Most copied
▲ by copies- Tilt Cardanimated · card · React+HTML/CSS10.2kzero deps · 2.9 KB
- Aurora Veilanimated · background · HTML/CSS+React8.9kzero deps · 2.6 KB
- Star Motesanimated · stars · React+HTML/CSS7.2kzero deps · 3.4 KB
- Halo Trailanimated · cursor · React6.3kzero deps · 5.8 KB
- Scramble Textanimated · text · React+HTML/CSS5.6kzero deps · 3.1 KB
Fresh drops
New in the library
Community Leaderboard
1.4 KB · a11y 98 · Q 93
Community Share Sheet
1.2 KB · a11y 99 · Q 93
Reaction Bar
1.2 KB · a11y 98 · Q 92
Comment Thread
1.5 KB · a11y 98 · Q 93
Keyboard Shortcut Card
1.3 KB · a11y 99 · Q 93
Help Center Search
1.5 KB · a11y 99 · Q 94
Get inspired
Stuck on a blank canvas?
Let the library pick six assets at random and shuffle until something sparks — a moodboard that opens into real, copyable code.
Open the shuffleRaise the bar
Most resource sites end at “copy the code”. We keep going.
Everything is original, everything is audited, and nothing ships on a screenshot alone. This is what “the copy-paste library” should have been.
- The old wayScreenshot-only prompt galleriesOpen the proof →Motif UIEvery prompt has a live preview plus multi-model test scores and a public run log.
- The old wayCopy-paste component graveyardsOpen the proof →Motif UIEvery asset passes automated a11y, size and dependency audits before it earns a card.
- The old wayStyles welded to the componentOpen the proof →Motif UI100% design-token driven — restyle the whole library from Theme Studio in seconds.
- The old wayOne stack or nothingOpen the proof →Motif UIReact, HTML/CSS and Vue views with per-stack dependency notes for most assets.
- The old wayLinks to docs, no hand-holdingOpen the proof →Motif UIInteractive labs teach the motion math behind the code you're copying.
Living canvases
Backgrounds with a performance tier
Week note · 2026-09-14
From the editor's desk
This week the studio logged “Bank 6 opens: new territories” — and the rest of the week was the unglamorous half of shipping: audits run, failing runs kept in the log instead of deleted, copy rewritten twice because the first draft over-claimed.
That is the whole editorial stance in one sentence: we would rather show you the run that scored 71 than a screenshot we posed. If a component ships, its test report ships with it.
— the Motif editors
Bank 6 opens: new territories
The completeness pass closes the thinnest categories
Bank 5 wave 2: the high-life & brand shelf
Ship log
The library grows every week
This isn't a static dump — components land with test reports, prompts get re-run when models update, and labs ship new physics. Follow the trail below.
- 2026-09-14Components
Bank 6 opens: new territories
Three component families the catalog had barely touched (docs/enrichment-bank5.md extension): ten commerce, docs-help and community components in scenes/set-20.tsx (345 → 355) — cart drawer, checkout summary, quantity stepper, doc sidebar, help center search, keyboard shortcut card, comment thread, reaction bar, share sheet and community leaderboard. The bank also adds eight new-industry prompts (166 → 174), the three-part Interface Ledger series (118 essays), four backgrounds (65), two ledger lab tools (45) and two shelves (22 collections).
no measurement - 2026-09-14Platform
The completeness pass closes the thinnest categories
Every column gained content where its categories were thinnest: eight full-page templates lift the template kind (5 → 13) in scenes/set-19.tsx; six backgrounds fill the particles and gradient categories (43 → 49); the Advanced learn level grows by four essays (111 → 115); three prompt collections join the shelf (17 → 20); and six prompts cover the thinnest industries — gaming, photography, sports, music, fitness and real estate (160 → 166). All house rules held, all harnesses green.
no measurement - 2026-09-14Components
Bank 5 wave 2: the high-life & brand shelf
Twelve premium components land in scenes/set-18.tsx (316 → 328): a boutique product page, jewellery showcase, lookbook card, concierge request, membership card, magazine cover hero, editorial pull-quote, board report card, investor deck section, procurement spec card, private-client steps and an atelier service menu. Every scene keeps the house rules — honest local state, CSS-only motion, 'illustrative' labels in the chrome.
no measurement - 2026-09-14Content
Bank 5 opens: the premium pass
Thirty-six items across five batches raise the site's register (docs/enrichment-bank5.md): five curatorial collections (enterprise-ready, quiet-luxury, award-calibre, editorial-premium, AI-interface suite), ten quiet-luxury backgrounds in set-17 (silk, marble, brushed gold, velvet, pearl, linen, obsidian, platinum, porcelain, midnight satin), the five-part Premium Craft masterclass, eight premium-industry prompts (luxury hotel, fine dining, auction house, private bank, first-class cabin, architecture atelier, wine estate, fashion house), and eight boardroom components (executive dashboard, annual report, brand guideline, museum card, heritage timeline, patron testimonial, private-club hero, design-system showcase). Every figure stays honest — 'illustrative' labels ride in the chrome.
no measurement - 2026-09-14Lab
Bank 4 batch 4: the AI craft shelf opens on /lab
Ten AI-interface tools land (33 → 43): a token estimator, a streaming-pace lab, a prompt cost calculator, a temperature explainer, a model latency compare, a context planner, a retry timing calculator, a citation format checker, a token budget planner and a motion preference compare. Every tool is local arithmetic, every figure is labelled an estimate or demo value, and the craft shelf renders them all interactive on /lab (docs/enrichment-bank4.md).
no measurement
Entries carry a measured size change where one was taken, read from docs/build-report.json; entries without one say “no measurement” instead of borrowing a number.
Made with Motif
Real pages, assembled from the library
Sample builds show the pattern: pick a scene, drop in your copy, re-theme with tokens. Tap any chip to open the asset it used.
Launchpad — SaaS waitlist
Wipe headline over a tilt signup card; the loader doubles as the 'saving' state. Five assets, one coherent dark product.
Nightfolio — 3D portfolio
Orbit ring of case cards above a starfield; scramble reveals on scroll. Flip cards tuck the case notes out of sight.
Wavelength — dev-tool landing
Morph backdrop behind a tab-morph product tour; the momentum chart does the convincing where copy would oversell.
Builder notes
Three people, three real builds
Each of these pages is a full case study with the challenge, the assets used and the measured result. The quotes below are their numbers, verbatim.
A single-screen build — a wipe-revealed headline, a tilt signup card, a logo strip for the 'trusted by' row and a loader that doubles as the saving state — lifted waitlist signups from 2.1% to 6.4% in the first month.
The rebuild turned the work into a night-sky scene: an orbit ring of case cards, scramble-text reveals, and flip cards that hide the details until you want them. Time-on-page tripled.
A data-first build — morphing backdrop, a tab-morph product tour and a live-feeling momentum chart — replaced the adjectives with evidence. Trial starts rose 31%.
The honest timeline
Built in an afternoon, minute by minute
A 90-minute build story of nightfolio — 3d portfolio. No “effortless” marketing — the library removes the boilerplate third of the work, never the thinking. Scroll the timeline.
Open the full case studyBuilt in an afternoon
mikef.builds's 90-minute build story
- T+0:00Empty frame, honest plan
A content map first — one idea per section, the copy written before a single class. No blank-canvas anxiety, no fake urgency.
Drop in the visual foundation first so every later decision has a canvas to sit on.
The first thing a visitor reads should be the thing that moves. Scramble effect, tuned down, meaning preserved.
Each project becomes a card; hover states come from the library, not from re-inventing hover.
- T+1:04Motion pass with restraint
Now the choreography: stagger entrances, cap durations, honour reduced-motion. Motion that earns its bytes.
- T+1:26Audit, then ship
A11y + size pass on every section, page weight measured, then a real deploy with a real URL.
Honest numbers: this is a sample-build story, not a sales promise. Copy, layout and theme decisions took most of the time — the library removed the “boilerplate” third, never the thinking.
The Lab
Stop guessing the easing. Feel it.
Easing curves, spring physics, scroll choreography — the interactive labs turn motion theory into muscle memory, then hand you production-ready exports.
Easing Lab
Feel every easing curve on a real spring; drag the handles of a cubic-bezier and watch a dot race between two targets. Export CSS / JS / Tailwind.
Spring Lab
Tune stiffness, damping and mass against real physics — then export the config for your favourite motion lib.
Scroll Lab
Sketch scroll choreography: trigger points, sync progress, staggers. Copy the recipe into your project.
Gradient Forge
Bend multi-stop gradients on an editable path with colour-harmony guardrails so you never ship an ugly one.
Your next site is already half-built
Free forever for the core library. Pro adds test reports, template packs and the API.