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
289
289 MIT licensed
Verified prompts
62
re-run on 3.9 models each
Avg prompt fidelity
88%
457 recorded runs
Copies logged
159.3k
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
289
original assets
every one shipped with an a11y + quality audit
288/289
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
156 new · 2026-09-12

Ripple Button · Number Ticker on Scroll · Long-Press Confirm · Field Shake on Invalid · Copy Icon Button · Segmented Progress Dots · Hover-Reveal Corner · Double-Tap Like · Reorder List (announced) · Snap Carousel · Multi-Stop Gradient Picker · Avatar Zoom Stack · Countdown Pill · Success Check (stroke-draw) · Attention Dot · Elastic Toggle · Skeleton-to-Content Fade · Key Cap · Smart Flip Tooltip · Chip Paste Input · File Type Icons · Status Ping Dot · Read-More Expander · Scroll-Top Cue · Skeleton Table · Sparkline Row · Stacked Bar List · Heatmap Calendar · Alternating Timeline · Sticky Comparison Matrix · KPI Card Set · Tree Table · Ranked List with Movement · Meter with Thresholds · Donut with Center Label · Gantt Lite · Avatar Overflow · Data Dictionary Table · Inline Edit Cell · Column Visibility Chips · Empty Table State · Sticky First Column · Total Row · Two-Column Diff View · Lifecycle Badge Set · Sortable Table (aria-sort) · Pagination with Page Size · Row Expansion Drawer · Calendar Heat Strip · Locale Number Format · Mega Menu · Scoped Command Palette · Collapsible Sidebar · Breadcrumbs with Overflow · Step Wizard with Review · Tab Row with Overflow Fade · Footer from Data · Resizable Split · Sticky Section Stack · FAB Speed Dial · Master-Detail Two-Pane · Scrollspy Rail · Off-Canvas Filter Drawer · Shortcut Overlay · Dismissible Banner · CSS Masonry · Aspect-Ratio Frame · Full-Bleed Section · Page Header with Actions · Labelled Divider · TOC Progress Rail · Prose with Side Notes · Equal-Height Grid · Dialog with Return Focus · Bottom Sheet Drawer · Scramble on View · Marquee with Pause · Typewriter with Cursor · Tab-Aware Counter · Aurora Dawn · Grid Parallax Drift · Particle Drift Field · Gradient Mesh · Topographic Contours · Film Grain · Light Sweep · Constellation Lines · Scene Accordion · Glass Refraction Card · Flip Counter Clock · Orbit Progress Ring · Cursor Spotlight · Pointer Image Trail · Card Dealer Shuffle · Elastic Divider · Magnetic Button · Letter-by-Letter Rise · Scroll Year Rail · Before/After Clip Slider · Floating Label Inputs · Duotone Waves · Checker Drift · Dot Matrix Scroll · Radial Fade Vignette · Keycap Field · Ticker Static Snapshot · Progress Ring Trio · Wind Chime List · Holographic Card · Pull to Refresh · Scroll Progress Spine · Stacked Cards on Scroll · Word Cloud Settle · Pulse Map Pin · Gauge Needle · Binary Rain (restrained) · Paper Fold · Aurora Ribbons · Tilt Card with Glare · Skeleton Swap · Tab Underline Spring · Expanding Search Field · Toast with Timer Bar · Vertical Carousel · Hero Headline Swap · Logo Cloud with Fade Edges · Testimonial with Metric Headline · Three-Step How-It-Works Band · FAQ with Category Filter · CTA Band with Inline Email · Integration Logo Grid · Pricing with Usage Slider · Testimonial Masonry · Us-vs-Them Comparison · Stats Count-Up Band · Press Quotes Band · Careers Band with Roles · Security Band · Screenshot Browser Frame · Two-Column Feature Split · Use-Case Tabs Section · Roadmap Section · Team Values Grid · Newsletter Opt-In Section · Changelog Teaser · Integrations Code Tabs · Calculator Section · Gallery with Lightbox · Pricing FAQ Mini-Bundle · Footer with Sitemap Columns · Error Summary · Time Zone Picker · Colour Picker · Cron Editor · Signature Pad · Chat Composer

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.