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
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.
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
Chat Composer
1 KB · a11y 97 · Q 95
Signature Pad
1.3 KB · a11y 97 · Q 95
Cron Editor
1.1 KB · a11y 97 · Q 95
Colour Picker
0.9 KB · a11y 98 · Q 95
Time Zone Picker
1.2 KB · a11y 98 · Q 95
Error Summary
1.1 KB · a11y 99 · Q 96
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-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
Bank 3 closes at 500/500
Bank 3 batch 20: the community and sharing pass
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.
- 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 - 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 - 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 - 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 - 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.
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.