Skip to content
Now testing prompts on Claude · Codex · GLM-4.6

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.

Original assets
292
292 MIT licensed
Verified prompts
62
re-run on 3.9 models each
Avg prompt fidelity
88%
457 recorded runs
Copies logged
159.5k
catalog counter, all time — not a 30-day measurement

Everything in one place

Four libraries that used to live on four different tabs

View everything →

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.

Open the run logs
292
original assets
every one shipped with an a11y + quality audit
291/292
dependency-free
zero packages to install — paste and run
116
run-tested prompts
each re-run on 3.9 models before shipping
88%
average fidelity
457 recorded runs, failures kept on the log

No marketing roundings: components and prompts are counted from src/lib/data.ts at build time.

The feed

This week at Motif

Browse everything
1 new · 2026-09-14

Orbit Stickers

The newest batch in the component catalog. This line updates once the page can read your last visit from this browser.

Browse the library →

Fresh drops

New in the library

all original · MIT · audited

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 shuffle

Living canvases

Backgrounds with a performance tier

All backgrounds →
Aurora Veil
CSS · low tier
8.9k
Star Motes
CSS / WebGL · mid tier
7.2k
Liquid Glass
CSS / SVG · low tier
5.2k
Paper Noise
CSS / SVG · low tier
6.6k

Week note · 2026-09-12

From the editor's desk

This week the studio logged Bank 3 closes at 500/500 — 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

Platform· 2026-09-12

Bank 3 closes at 500/500

Platform· 2026-09-12

Bank 3 batch 20: the community and sharing pass

Platform· 2026-09-12

Bank 3 batch 19: /admin/ops — the content-operations 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.

Next content push: Thu · +31 assets + 12 prompts
Read this week's full digest
  1. 2026-09-12Platform

    Bank 3 closes at 500/500

    Items 486–500 finish the third bank: zh-CN glossary terms, the one locale date helper, the hreflang plan page, structured data for components and prompts (SoftwareApplication and CreativeWork joining the existing Article and breadcrumb markup), the offline fallback page, and the dismissible what's-new teaser on the home page. The register, the progress table and the numbering gate close the programme: 500 items shipped across 21 batches, every one of them verified by the harness.

    no measurement yet — this entry should carry one
  2. 2026-09-12Platform

    Bank 3 batch 20: the community and sharing pass

    Items 466–485 of docs/enrichment-500-2.md: a computed hall of fame, submission guidelines, share cards for prompts and collections, an embeddable collection shelf, a copy attribution line, a JSON feed variant, the code of conduct, a reproduction-builder report page, changelog subscription guidance, a digest month picker and the community honesty line. Three infra items (moderation backend, built-with gallery, comment threads) stay labelled as slices rather than simulated.

    no measurement yet — this entry should carry one
  3. 2026-09-12Platform

    Bank 3 batch 19: /admin/ops — the content-operations shelf

    Items 446–465 of docs/enrichment-500-2.md land as one ops page: module freshness, the review queue, in-admin data-integrity orphans, translation coverage, publish checklists, the a11y triage board with a session audit log, the redirect register, export-all with a family registry, and the honest empty registers (raster images, deprecations). The admin layout states its fixture-based scope, gains a main landmark, and the print stylesheet covers the console. Four gates hold the lot.

    no measurement yet — this entry should carry one
  4. 2026-09-12Platform

    Bank 3 batch 18: the harness polices the harness

    Items 421–445 of docs/enrichment-500-2.md: /quality/gates-2 lists every automated check from the blame-verified index; the check scripts gain runtime reporting, PASS/FAIL colours, a warn tier, an environment-missing exit code and a self-test; new gates hold the check names unique, the sitemap families walked, the idea banks' word counts, the ledger shape, zero explicit anys and zero dead exports (nine real ones removed); scripts/README.md documents the cost, the flake policy, the exit codes and the CSP profile.

    no measurement yet — this entry should carry one
  5. 2026-09-12Platform

    Bank 3 batch 17: the prompt catalog leaves the shared chunk

    Item #410 — the structural fix the shell-budget notes kept pointing at — ships: 116 prompt bodies move to src/lib/prompts-data.ts and the twelve client importers rewire to it, so pages that never render a prompt stop carrying them. The shell ratchet history is published on /perf/build, alongside the page-weight explainer, the asset inventory, the perf runbook and the env-labelled plans. Delivery gates assert zero third-party origins, zero resource hints and zero raster images.

    no measurement yet — this entry should carry one

Since 2026-09-10 every entry carries the size change it measured, taken from docs/build-report.json. Earlier entries say “not recorded”, because no measurement was taken at the time and inventing one after the fact would be a guess.

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.

linnea.dev · sample #15 assets · ~41 KB

Launchpad — SaaS waitlist

Wipe headline over a tilt signup card; the loader doubles as the 'saving' state. Five assets, one coherent dark product.

mikef.builds · sample #24 assets · ~34 KB

Nightfolio — 3D portfolio

Orbit ring of case cards above a starfield; scramble reveals on scroll. Flip cards tuck the case notes out of sight.

studio.noir · sample #34 assets · ~27 KB

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.

All case studies

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 study

Built in an afternoon

mikef.builds's 90-minute build story

90 min
one sitting · real deploy
  1. 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.

  2. T+0:18Set the sceneStar Motes

    Drop in the visual foundation first so every later decision has a canvas to sit on.

  3. T+0:31Write the headline in motionScramble Text

    The first thing a visitor reads should be the thing that moves. Scramble effect, tuned down, meaning preserved.

  4. T+0:47Show the workOrbit Deck

    Each project becomes a card; hover states come from the library, not from re-inventing hover.

  5. T+1:04Motion pass with restraint

    Now the choreography: stagger entrances, cap durations, honour reduced-motion. Motion that earns its bytes.

  6. 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.

Motif UI — copy less, ship more

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.

CSS/JS/Tailwind

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.

JS config/CSS

Spring Lab

Tune stiffness, damping and mass against real physics — then export the config for your favourite motion lib.

Recipe/TS

Scroll Lab

Sketch scroll choreography: trigger points, sync progress, staggers. Copy the recipe into your project.

planned · not in this build
CSS/SVG

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.