# 500 ways to make Motif richer

_A living idea bank for Motif UI — every item is original, specific and intended to be
actionable against the current site (as of 2026-09: 62 components · 24 prompts ·
10 Learn essays · 8 backgrounds · 8 lab tools · a /search hub · a persistent admin)._

How to read this: pick any section, take the three ideas that make you say "that
would be fun to build", and ship them as a batch. Ideas are deliberately concrete —
names, behaviours and where they plug into the existing pages.

<!-- ledger-extra-rows: 30 (row 27 predates the programme; rows 502-530 are post-programme audit repairs) -->
_One row in the table below is not an idea from the bank: #27 upload progress ring
(`/components/progress-ring`) shipped alongside the Section 1 batch and was never one of
the 500 bullets, so the table runs exactly one row ahead of the shipped-bullet count. The
harness reads the `ledger-extra-rows` marker above and allows that difference, which means
the table ends at #501 on the day the headline reads 500 / 500._

## Progress — 500 / 500 shipped (batches 1–79, in order) · Sections 1–21 complete ✅

| # | Idea | Shipped as |
|---|------|-----------|
| 1 | Combo box | [/components/combo-box](/components/combo-box) |
| 2 | Odometer counter | [/components/odometer-counter](/components/odometer-counter) |
| 3 | Star rating input | [/components/star-rating](/components/star-rating) |
| 4 | Tag input | [/components/tag-input](/components/tag-input) |
| 5 | Slider with live ticks | [/components/slider-ticks](/components/slider-ticks) |
| 6 | Checkbox card | [/components/checkbox-card](/components/checkbox-card) |
| 7 | Quantity stepper | [/components/quantity-stepper](/components/quantity-stepper) |
| 8 | Radio pills with focus ring | [/components/radio-pills](/components/radio-pills) |
| 9 | Textarea auto-grow | [/components/auto-grow-textarea](/components/auto-grow-textarea) |
| 10 | Date presets picker | [/components/date-presets](/components/date-presets) |
| 11 | File drop zone | [/components/file-drop-zone](/components/file-drop-zone) |
| 12 | Toggle with label stack | [/components/toggle-label-stack](/components/toggle-label-stack) |
| 13 | Password strength meter | [/components/password-strength](/components/password-strength) |
| 14 | Button with embedded menu | [/components/split-button-menu](/components/split-button-menu) |
| 15 | Command palette | upgraded: [command-palette](/components/command-palette) now searches the real catalog |
| 16 | Breadcrumb trail | [/components/breadcrumb-trail](/components/breadcrumb-trail) |
| 17 | Pagination with ellipsis | [/components/pagination-ellipsis](/components/pagination-ellipsis) |
| 18 | Table of contents spine | [/components/toc-spine](/components/toc-spine) |
| 19 | Tabs with indicator | [/components/tabs-indicator](/components/tabs-indicator) |
| 20 | Sticky section nav (sub-nav) | [/components/sticky-subnav](/components/sticky-subnav) |
| 21 | Back-to-top comet | [/components/back-to-top](/components/back-to-top) |
| 22 | Disclosure list (accordion rows) | [/components/disclosure-list](/components/disclosure-list) |
| 23 | Fullscreen overlay menu | [/components/fullscreen-overlay-menu](/components/fullscreen-overlay-menu) |
| 24 | Skeleton profile card | [/components/skeleton-card](/components/skeleton-card) |
| 25 | Toast queue with undo | [/components/toast-stack](/components/toast-stack) |
| 26 | Inline status banner | [/components/status-banner](/components/status-banner) |
| 27 | Upload progress ring | [/components/progress-ring](/components/progress-ring) |
| 28 | Spinner + status text | [/components/spinner-status](/components/spinner-status) |
| 29 | Empty-state trio | [/components/empty-state-trio](/components/empty-state-trio) |
| 30 | Offline indicator | [/components/offline-indicator](/components/offline-indicator) |
| 31 | Error-boundary card | [/components/error-boundary-card](/components/error-boundary-card) |
| 32 | Confetti burst | [/components/confetti-burst](/components/confetti-burst) |
| 33 | Dot leader loading | [/components/dot-leader-loading](/components/dot-leader-loading) |
| 34 | Live region lab | [/components/live-region-demo](/components/live-region-demo) |
| 35 | Liquid button hover | [/components/liquid-button-hover](/components/liquid-button-hover) |
| 36 | Magnetic icon row | [/components/magnetic-icon-row](/components/magnetic-icon-row) |
| 37 | Scroll-linked hue hero | [/components/scroll-linked-hue-hero](/components/scroll-linked-hue-hero) |
| 38 | Staggered list entrance | [/components/staggered-list-entrance](/components/staggered-list-entrance) |
| 39 | Ken Burns gallery | [/components/shuffle-kenburns-gallery](/components/shuffle-kenburns-gallery) |
| 40 | Particle trail hero | [/components/particle-trail-hero](/components/particle-trail-hero) |
| 41 | Ink-stamp appear | [/components/ink-stamp-appear](/components/ink-stamp-appear) |
| 42 | Gradient border flow | [/components/gradient-border-flow](/components/gradient-border-flow) |
| 43 | Ripple reveal | [/components/ripple-reveal](/components/ripple-reveal) |
| 44 | Parallax layered scene | [/components/parallax-layered-scene](/components/parallax-layered-scene) |
| 45 | Scroll vignette | [/components/scroll-vignette](/components/scroll-vignette) |
| 46 | Word-by-word highlight | [/components/word-by-word-highlight](/components/word-by-word-highlight) |
| 47 | Shake-on-error field | [/components/shake-on-error-field](/components/shake-on-error-field) |
| 48 | Bento feature grid | [/components/bento-feature-grid](/components/bento-feature-grid) |
| 49 | Logo wall with hover pop | [/components/logo-wall-hover-pop](/components/logo-wall-hover-pop) |
| 50 | Testimonial marquee row | [/components/testimonial-marquee](/components/testimonial-marquee) |
| 51 | Pricing table (three plans) | [/components/pricing-table-three](/components/pricing-table-three) |
| 52 | Stats band | [/components/stats-band](/components/stats-band) |
| 53 | Team grid with roles filter | [/components/team-grid-filter](/components/team-grid-filter) |
| 54 | FAQ two-column | [/components/faq-two-column](/components/faq-two-column) |
| 55 | Comparison slider (before/after) | [/components/comparison-slider](/components/comparison-slider) |
| 56 | Timeline (vertical) | [/components/timeline-vertical](/components/timeline-vertical) |
| 57 | Newsletter band with tiers | [/components/newsletter-band-tiers](/components/newsletter-band-tiers) |
| 58 | Hero with product mock frame | [/components/hero-product-mock](/components/hero-product-mock) |
| 59 | Split feature rows | [/components/split-feature-rows](/components/split-feature-rows) |
| 60 | Case-study header | [/components/case-study-header](/components/case-study-header) |
| 61 | Changelog feed | [/components/changelog-feed](/components/changelog-feed) |
| 62 | Resource/download cards | [/components/resource-download-cards](/components/resource-download-cards) |
| 63 | Event schedule list | [/components/event-schedule-list](/components/event-schedule-list) |
| 64 | Map-free local band | [/components/map-free-local-band](/components/map-free-local-band) |
| 65 | App screenshot tour | [/components/app-screenshot-tour](/components/app-screenshot-tour) |
| 66 | Docs site template | [/components/template-docs-site](/components/template-docs-site) |
| 67 | Landing page template (dark SaaS) | [/components/template-landing-saas](/components/template-landing-saas) |
| 68 | Waitlist template | [/components/template-waitlist](/components/template-waitlist) |
| 69 | Changelog/journal template | [/components/template-changelog](/components/template-changelog) |
| 70 | Template gallery page | [/components/template-gallery](/components/template-gallery) |
| 71 | Topographic contour lines | `topographic-contours` on [/backgrounds](/backgrounds) |
| 72 | Blueprint grid | `blueprint-grid` on [/backgrounds](/backgrounds) |
| 73 | Confetti field | `confetti-field` on [/backgrounds](/backgrounds) |
| 74 | Bokeh depth field | `bokeh-depth-field` on [/backgrounds](/backgrounds) |
| 75 | Glass shards | `glass-shards` on [/backgrounds](/backgrounds) |
| 76 | Lava lamp blobs | `lava-lamp-blobs` on [/backgrounds](/backgrounds) |
| 77 | Paper grain close-up | `paper-grain` on [/backgrounds](/backgrounds) |
| 78 | Silk wave | `silk-wave` on [/backgrounds](/backgrounds) |
| 79 | Star field with parallax | `star-field-parallax` on [/backgrounds](/backgrounds) |
| 80 | Scanline CRT | `scanline-crt` on [/backgrounds](/backgrounds) |
| 81 | Liquid gradient mesh | `liquid-mesh` on [/backgrounds](/backgrounds) |
| 82 | Dot matrix pattern | `dot-matrix` on [/backgrounds](/backgrounds) |
| 83 | Brushed metal sheen | `brushed-metal` on [/backgrounds](/backgrounds) |
| 84 | Carbon fibre weave | `carbon-fibre` on [/backgrounds](/backgrounds) |
| 85 | Water ripple ring | `water-ripple` on [/backgrounds](/backgrounds) |
| 86 | Ink on wet paper | `ink-bloom` on [/backgrounds](/backgrounds) |
| 87 | Aurora band | `aurora-band` on [/backgrounds](/backgrounds) |
| 88 | Noise storm | `noise-storm` on [/backgrounds](/backgrounds) |
| 89 | Glass distortion | `glass-distortion` on [/backgrounds](/backgrounds) |
| 90 | Ember rise | `ember-rise` on [/backgrounds](/backgrounds) |
| 91 | Checkerboard fade | `checkerboard-fade` on [/backgrounds](/backgrounds) |
| 92 | Plaid weave | `plaid-weave` on [/backgrounds](/backgrounds) |
| 93 | Halftone burst | `halftone-burst` on [/backgrounds](/backgrounds) |
| 94 | Cloud layer drift | `cloud-drift` on [/backgrounds](/backgrounds) |
| 95 | Sunset horizon strip | `sunset-horizon` on [/backgrounds](/backgrounds) |
| 96 | SaaS onboarding flow prompt | [/prompts/saas-activation-onboarding](/prompts/saas-activation-onboarding) |
| 97 | Dev-tool API reference prompt | [/prompts/devtool-api-reference](/prompts/devtool-api-reference) |
| 98 | Crypto/fintech dashboard prompt | [/prompts/fintech-portfolio-dashboard](/prompts/fintech-portfolio-dashboard) |
| 99 | Creator newsletter landing prompt | [/prompts/creator-newsletter-landing](/prompts/creator-newsletter-landing) |
| 100 | Web3 marketplace prompt | [/prompts/web3-marketplace-drop](/prompts/web3-marketplace-drop) |
| 101 | Perfume house prompt | [/prompts/perfume-house-editorial](/prompts/perfume-house-editorial) |
| 102 | Watch atelier prompt | [/prompts/watch-atelier-precision](/prompts/watch-atelier-precision) |
| 103 | Flower studio prompt | [/prompts/flower-studio-same-day](/prompts/flower-studio-same-day) |
| 104 | Furniture maker prompt | [/prompts/furniture-maker-joinery](/prompts/furniture-maker-joinery) |
| 105 | Streetwear capsule prompt | [/prompts/streetwear-capsule-drop](/prompts/streetwear-capsule-drop) |
| 106 | Skincare clinic prompt | [/prompts/skincare-clinic-treatments](/prompts/skincare-clinic-treatments) |
| 107 | Coffee roaster prompt | [/prompts/coffee-roaster-origin](/prompts/coffee-roaster-origin) |
| 108 | Boutique hotel prompt | [/prompts/boutique-hotel-amenities](/prompts/boutique-hotel-amenities) |
| 109 | Craft brewery taproom prompt | [/prompts/brewery-taproom-taps](/prompts/brewery-taproom-taps) |
| 110 | Bike shop service prompt | [/prompts/bike-shop-service-tiers](/prompts/bike-shop-service-tiers) |
| 111 | Yoga studio prompt | [/prompts/yoga-studio-first-class](/prompts/yoga-studio-first-class) |
| 112 | Dog-walking service prompt | [/prompts/dog-walking-service-trust](/prompts/dog-walking-service-trust) |
| 113 | Bookshop café prompt | [/prompts/bookshop-cafe-staff-picks](/prompts/bookshop-cafe-staff-picks) |
| 114 | Accounting firm prompt | [/prompts/accounting-firm-plain-language](/prompts/accounting-firm-plain-language) |
| 115 | Recruiting studio prompt | [/prompts/recruiting-studio-culture](/prompts/recruiting-studio-culture) |
| 116 | Industrial design prompt | [/prompts/industrial-design-process](/prompts/industrial-design-process) |
| 117 | Coaching practice prompt | [/prompts/coaching-practice-outcomes](/prompts/coaching-practice-outcomes) |
| 118 | Translation agency prompt | [/prompts/translation-agency-pairs](/prompts/translation-agency-pairs) |
| 119 | Interior design studio prompt | [/prompts/interior-design-studio-before-after](/prompts/interior-design-studio-before-after) |
| 120 | Financial advisor prompt | [/prompts/financial-advisor-fiduciary](/prompts/financial-advisor-fiduciary) |
| 121 | Literary agency prompt | [/prompts/literary-agency-submissions](/prompts/literary-agency-submissions) |
| 122 | Record label prompt | [/prompts/record-label-release-calendar](/prompts/record-label-release-calendar) |
| 123 | Community theatre prompt | [/prompts/community-theatre-season](/prompts/community-theatre-season) |
| 124 | Design conference prompt | [/prompts/design-conference-schedule](/prompts/design-conference-schedule) |
| 125 | Food hall prompt | [/prompts/food-hall-vendor-map](/prompts/food-hall-vendor-map) |
| 126 | Birding club prompt | [/prompts/birding-club-sighting-log](/prompts/birding-club-sighting-log) |
| 127 | Photography workshop prompt | [/prompts/photography-workshop-curriculum](/prompts/photography-workshop-curriculum) |
| 128 | Open-source project prompt | [/prompts/open-source-project-readme-site](/prompts/open-source-project-readme-site) |
| 129 | Game jam team prompt | [/prompts/game-jam-team-weekend](/prompts/game-jam-team-weekend) |
| 130 | AI tool directory prompt | [/prompts/ai-tool-directory-tested](/prompts/ai-tool-directory-tested) |
| 131 | Civic tech project prompt | [/prompts/civic-tech-transparency](/prompts/civic-tech-transparency) |
| 132 | Robotics lab prompt | [/prompts/robotics-lab-research](/prompts/robotics-lab-research) |
| 133 | Counselling directory prompt | [/prompts/counselling-directory-specialisms](/prompts/counselling-directory-specialisms) |
| 134 | Nutrition coaching prompt | [/prompts/nutrition-coaching-sample-week](/prompts/nutrition-coaching-sample-week) |
| 135 | Language school prompt | [/prompts/language-school-level-paths](/prompts/language-school-level-paths) |
| 136 | Kids' coding club prompt | [/prompts/kids-coding-club-term](/prompts/kids-coding-club-term) |
| 137 | Ceramics studio prompt | [/prompts/ceramics-studio-kiln-schedule](/prompts/ceramics-studio-kiln-schedule) |
| 138 | Plant nursery prompt | [/prompts/plant-nursery-care-guides](/prompts/plant-nursery-care-guides) |
| 139 | Slow-travel agency prompt | [/prompts/slow-travel-agency-routes](/prompts/slow-travel-agency-routes) |
| 140 | Dark-mode-first prompt variant | [/prompts/dark-mode-first-page](/prompts/dark-mode-first-page) |
| 141 | Whitespace-maximal prompt variant | [/prompts/whitespace-maximal-page](/prompts/whitespace-maximal-page) |
| 142 | Print-inspired prompt variant | [/prompts/print-inspired-editorial](/prompts/print-inspired-editorial) |
| 143 | A11y-strict prompt variant | [/prompts/accessibility-strict-page](/prompts/accessibility-strict-page) |
| 144 | Multi-language prompt variant | [/prompts/multilanguage-i18n-page](/prompts/multilanguage-i18n-page) |
| 145 | Motion-spec prompt variant | [/prompts/motion-spec-only](/prompts/motion-spec-only) |
| 146 | Easing cheatsheet deep-dive essay | [/learn/easing-cheatsheet-deep-dive](/learn/easing-cheatsheet-deep-dive) |
| 147 | Springs are not easings essay | [/learn/springs-are-not-easings](/learn/springs-are-not-easings) |
| 148 | The choreography question essay | [/learn/choreography-question](/learn/choreography-question) |
| 149 | Micro-interactions that pay rent essay | [/learn/micro-interactions-pay-rent](/learn/micro-interactions-pay-rent) |
| 150 | Will-change is a promise essay | [/learn/will-change-is-a-promise](/learn/will-change-is-a-promise) |
| 151 | Why 60fps feels like 24fps essay | [/learn/why-60fps-feels-like-24fps](/learn/why-60fps-feels-like-24fps) |
| 152 | GPU animation explained plainly essay | [/learn/gpu-animating-without-asking](/learn/gpu-animating-without-asking) |
| 153 | Scroll speed is a type choice essay | [/learn/scroll-speed-is-a-type-choice](/learn/scroll-speed-is-a-type-choice) |
| 154 | The 200ms click window essay | [/learn/the-200ms-click-window](/learn/the-200ms-click-window) |
| 155 | Reduced motion beyond the switch essay | [/learn/reduced-motion-beyond-the-switch](/learn/reduced-motion-beyond-the-switch) |
| 156 | Glass, part two essay | [/learn/glass-part-two-when-glass-belongs](/learn/glass-part-two-when-glass-belongs) |
| 157 | Shadow discipline essay | [/learn/shadow-discipline](/learn/shadow-discipline) |
| 158 | Grid systems that don't shout essay | [/learn/grid-systems-that-dont-shout](/learn/grid-systems-that-dont-shout) |
| 159 | Fluid type without magic numbers essay | [/learn/fluid-type-without-magic-numbers](/learn/fluid-type-without-magic-numbers) |
| 160 | CSS nesting now essay | [/learn/css-nesting-now](/learn/css-nesting-now) |
| 161 | Container queries cookbook essay | [/learn/container-queries-cookbook](/learn/container-queries-cookbook) |
| 162 | :has() finally useful essay | [/learn/has-is-finally-useful](/learn/has-is-finally-useful) |
| 163 | scroll-timeline, honestly essay | [/learn/scroll-timeline-honestly](/learn/scroll-timeline-honestly) |
| 164 | In defence of the button essay | [/learn/in-defence-of-the-button](/learn/in-defence-of-the-button) |
| 165 | Colour contrast you can compute essay | [/learn/colour-contrast-you-can-compute](/learn/colour-contrast-you-can-compute) |
| 166 | Writing a brief the model can't ignore essay | [/learn/brief-the-model-cant-ignore](/learn/brief-the-model-cant-ignore) |
| 167 | The retry loop essay | [/learn/the-retry-loop](/learn/the-retry-loop) |
| 168 | One palette, three moods essay | [/learn/one-palette-three-moods](/learn/one-palette-three-moods) |
| 169 | No-gradients-in-a-prompt essay | [/learn/when-to-say-no-gradients-in-a-prompt](/learn/when-to-say-no-gradients-in-a-prompt) |
| 170 | Model personality drift essay | [/learn/model-personality-drift](/learn/model-personality-drift) |
| 171 | Design tokens inside prompts essay | [/learn/design-tokens-inside-prompts](/learn/design-tokens-inside-prompts) |
| 172 | Prompting for reduced motion essay | [/learn/prompting-for-reduced-motion](/learn/prompting-for-reduced-motion) |
| 173 | From prompt to component essay | [/learn/from-prompt-to-component](/learn/from-prompt-to-component) |
| 174 | The 5-line prompt myth essay | [/learn/the-five-line-prompt-myth](/learn/the-five-line-prompt-myth) |
| 175 | Fidelity is a claim essay | [/learn/fidelity-is-a-claim](/learn/fidelity-is-a-claim) |
| 176 | The keyboard walk essay | [/learn/the-keyboard-walk](/learn/the-keyboard-walk) |
| 177 | Screen-reader poetry essay | [/learn/screen-reader-poetry](/learn/screen-reader-poetry) |
| 178 | Focus order is layout essay | [/learn/focus-order-is-layout](/learn/focus-order-is-layout) |
| 179 | Contrast on brand colours essay | [/learn/contrast-on-brand-colours](/learn/contrast-on-brand-colours) |
| 180 | Touch targets beyond 44px essay | [/learn/touch-targets-beyond-44px](/learn/touch-targets-beyond-44px) |
| 181 | Autoplay is a decision essay | [/learn/autoplay-is-a-decision](/learn/autoplay-is-a-decision) |
| 182 | Designing for cognitive load essay | [/learn/designing-for-cognitive-load](/learn/designing-for-cognitive-load) |
| 183 | Forms that fail kindly essay | [/learn/forms-that-fail-kindly](/learn/forms-that-fail-kindly) |
| 184 | The invisible header essay | [/learn/the-invisible-header](/learn/the-invisible-header) |
| 185 | Testing with one hand essay | [/learn/testing-with-one-hand](/learn/testing-with-one-hand) |
| 186 | Building a personal UI library essay | [/learn/building-a-personal-ui-library](/learn/building-a-personal-ui-library) |
| 187 | Copy-paste guilt is a feature essay | [/learn/copy-paste-guilt-is-a-feature](/learn/copy-paste-guilt-is-a-feature) |
| 188 | Designing in the open essay | [/learn/designing-in-the-open](/learn/designing-in-the-open) |
| 189 | First 90 days of a content site essay | [/learn/first-90-days-of-a-content-site](/learn/first-90-days-of-a-content-site) |
| 190 | Performance budgets for solo builders essay | [/learn/performance-budgets-for-solo-builders](/learn/performance-budgets-for-solo-builders) |
| 191 | Portfolio pieces that get you hired essay | [/learn/portfolio-pieces-that-get-you-hired](/learn/portfolio-pieces-that-get-you-hired) |
| 192 | Freemium that isn't a lie essay | [/learn/freemium-that-isnt-a-lie](/learn/freemium-that-isnt-a-lie) |
| 193 | Animated storytelling for non-profits essay | [/learn/animated-storytelling-for-nonprofits](/learn/animated-storytelling-for-nonprofits) |
| 194 | Dark mode is a design system essay | [/learn/dark-mode-is-a-design-system](/learn/dark-mode-is-a-design-system) |
| 195 | Naming is design essay | [/learn/naming-is-design](/learn/naming-is-design) |
| 196 | Timing-chart composer lab | [/lab#timing-composer](/lab#timing-composer) |
| 197 | Stagger calculator lab | [/lab#stagger-calculator](/lab#stagger-calculator) |
| 198 | Background-position painter lab | [/lab#bg-position-painter](/lab#bg-position-painter) |
| 199 | Text-animation lab | [/lab#text-animation-lab](/lab#text-animation-lab) |
| 200 | Colour-ramp checker lab | [/lab#colour-ramp-checker](/lab#colour-ramp-checker) |
| 201 | Border-radius playground lab | [/lab#radius-playground](/lab#radius-playground) |
| 202 | Shadow stacker lab | [/lab#shadow-stacker](/lab#shadow-stacker) |
| 203 | Filter (blur/brightness) lab | [/lab#filter-lab](/lab#filter-lab) |
| 204 | Hue-shift simulator lab | [/lab#hue-shift-simulator](/lab#hue-shift-simulator) |
| 205 | Breakpoint inspector lab | [/lab#breakpoint-inspector](/lab#breakpoint-inspector) |
| 206 | Motion-preference preview lab | [/lab#motion-preference-preview](/lab#motion-preference-preview) |
| 207 | Export clipboard lab | [/lab#export-clipboard](/lab#export-clipboard) |
| 208 | Perf meter lab | [/lab#perf-meter](/lab#perf-meter) |
| 209 | URL state for labs | [/lab#url-state-labs](/lab#url-state-labs) |
| 210 | Favourite recipes lab | [/lab#favourite-recipes](/lab#favourite-recipes) |
| 211 | Random inspiration button lab | [/lab#random-inspiration](/lab#random-inspiration) |
| 212 | Typing-speed meter lab | [/lab#typing-speed-meter](/lab#typing-speed-meter) |
| 213 | Icon line-weight lab | [/lab#icon-line-weight-lab](/lab#icon-line-weight-lab) |
| 214 | Logo-drift preview lab | [/lab#logo-drift-preview](/lab#logo-drift-preview) |
| 215 | Diff viewer lab | [/lab#diff-viewer](/lab#diff-viewer) |
| 216 | Course rail — variant gallery | [/components/aurora-veil#variant-gallery](/components/aurora-veil#variant-gallery) |
| 217 | Course rail — usage recipe | [/components/aurora-veil#usage-recipe](/components/aurora-veil#usage-recipe) |
| 218 | Course rail — theming example | [/components/aurora-veil#theming-example](/components/aurora-veil#theming-example) |
| 219 | Course rail — performance note | [/components/aurora-veil#perf-note](/components/aurora-veil#perf-note) |
| 220 | Course rail — browser support strip | [/components/aurora-veil#browser-support](/components/aurora-veil#browser-support) |
| 221 | Course rail — reduced-motion fallback note | [/components/aurora-veil#reduced-motion-note](/components/aurora-veil#reduced-motion-note) |
| 222 | Course rail — keyboard walk demo | [/components/aurora-veil#keyboard-walk](/components/aurora-veil#keyboard-walk) |
| 223 | Course rail — composition map + related essays | [/components/aurora-veil#composition-map](/components/aurora-veil#composition-map) |
| 224 | Course rail — inspiration context | [/components/aurora-veil#inspiration-context](/components/aurora-veil#inspiration-context) |
| 225 | Course rail — changelog per asset | [/components/aurora-veil#asset-changelog](/components/aurora-veil#asset-changelog) |
| 226 | Course rail — copy history sparkline | [/components/aurora-veil#copy-history](/components/aurora-veil#copy-history) |
| 227 | Course rail — community remixes queue | [/components/aurora-veil#community-remixes](/components/aurora-veil#community-remixes) |
| 228 | Course rail — save to collection | [/components/aurora-veil#collect-star](/components/aurora-veil#collect-star) |
| 229 | Course rail — pairs well with prompt | [/components/aurora-veil#pairs-with-prompt](/components/aurora-veil#pairs-with-prompt) |
| 230 | Course rail — bundled deps disclosure | [/components/aurora-veil#deps-disclosure](/components/aurora-veil#deps-disclosure) |
| 231 | Course rail — single-file export | [/components/aurora-veil#single-file-export](/components/aurora-veil#single-file-export) |
| 232 | Course rail — copy-format tabs incl. Vue | [/components/aurora-veil](/components/aurora-veil) |
| 233 | Course rail — sizing system (3 densities) | [/components/aurora-veil#sizing-system](/components/aurora-veil#sizing-system) |
| 234 | Course rail — a11y report card | [/components/aurora-veil](/components/aurora-veil) |
| 235 | Course rail — open-in-sandbox | [/components/aurora-veil#sandbox-open](/components/aurora-veil#sandbox-open) |
| 236 | Course rail — tutorial transcript panel | [/components/aurora-veil#tutorial-transcript](/components/aurora-veil#tutorial-transcript) |
| 237 | Course rail — code line walk | [/components/aurora-veil#code-line-walk](/components/aurora-veil#code-line-walk) |
| 238 | Course rail — size vs quality slider | [/components/aurora-veil#size-quality-slider](/components/aurora-veil#size-quality-slider) |
| 239 | Course rail — stack-switch cost note | [/components/aurora-veil#stack-switch-cost](/components/aurora-veil#stack-switch-cost) |
| 240 | Course rail — prop explorer verified | [/components/aurora-veil](/components/aurora-veil) |
| 241 | Course rail — embedded playground verified | [/components/aurora-veil](/components/aurora-veil) |
| 242 | Course rail — design rationale panel verified | [/components/aurora-veil](/components/aurora-veil) |
| 243 | Course rail — tag synonyms | [/components/aurora-veil#tag-synonyms](/components/aurora-veil#tag-synonyms) |
| 244 | Course rail — sibling comparison | [/components/aurora-veil#sibling-comparison](/components/aurora-veil#sibling-comparison) |
| 245 | Template kit — provenance tags | [/components/template-landing-saas#template-provenance](/components/template-landing-saas#template-provenance) |
| 246 | Template kit — time-to-build meter | [/components/template-landing-saas#time-to-build](/components/template-landing-saas#time-to-build) |
| 247 | Template kit — case-study numbers | [/components/template-landing-saas#case-study-numbers](/components/template-landing-saas#case-study-numbers) |
| 248 | Template kit — rebrand playbacks | [/components/template-landing-saas#rebrand-playback](/components/template-landing-saas#rebrand-playback) |
| 249 | Template kit — dark/light twins | [/components/template-landing-saas#dark-light-twins](/components/template-landing-saas#dark-light-twins) |
| 250 | Template kit — section swap explorer | [/components/template-landing-saas#section-swap-explorer](/components/template-landing-saas#section-swap-explorer) |
| 251 | Template kit — blank-canvas pack | [/components/template-landing-saas#blank-canvas-pack](/components/template-landing-saas#blank-canvas-pack) |
| 252 | Template kit — JSON build spec export | [/components/template-landing-saas#build-spec-export](/components/template-landing-saas#build-spec-export) |
| 253 | Made with Motif — case-study pages | [/samples/launchpad](/samples/launchpad) |
| 254 | Template kit — recipe cards | [/components/template-landing-saas#recipe-cards](/components/template-landing-saas#recipe-cards) |
| 255 | Template gallery — full-page preview iframe | [/templates#template-preview-iframe](/templates#template-preview-iframe) |
| 256 | Template kit — one-click stack selector diff | [/components/template-landing-saas#stack-selector-diff](/components/template-landing-saas#stack-selector-diff) |
| 257 | Template gallery — mood & stack filtering | [/templates#template-gallery-filters](/templates#template-gallery-filters) |
| 258 | Template kit — community submissions flow | [/components/template-landing-saas#community-submissions](/components/template-landing-saas#community-submissions) |
| 259 | Template kit — offline bundle zip download | [/components/template-landing-saas#template-bundle-downloads](/components/template-landing-saas#template-bundle-downloads) |
| 260 | Search — saved searches | [/search#saved-searches](/search#saved-searches) |
| 261 | Search — type-scoped tabs | [/search#scope-tabs](/search#scope-tabs) |
| 262 | Search — fuzzy typo tolerance | [/search?q=glss](/search?q=glss) |
| 263 | Search — matched-term highlighting | [/search?q=glass](/search?q=glass) |
| 264 | Search — per-asset aliases | [/search?q=dropdown](/search?q=dropdown) |
| 265 | Search — result meta chips | [/search?q=glass](/search?q=glass) |
| 266 | Search — keyboard-first results | [/search](/search) |
| 267 | Search — URL-synced filters | [/search?type=components&sort=newest](/search?type=components&sort=newest) |
| 268 | Catalog — save a component set | [/components?stack=halo-button,glass-pricing](/components?stack=halo-button,glass-pricing) |
| 269 | Catalog — browse by collection | [/components](/components) |
| 270 | Discovery — live counts on filter chips | [/components](/components) · [/templates](/templates) · [/search#scope-tabs](/search#scope-tabs) |
| 271 | Fresh-within-30d sort | [/components](/components) · [/search?sort=fresh30](/search?sort=fresh30) |
| 272 | View-density toggle (cards ⇄ rows) | [/components](/components) |
| 273 | Colour-first filter | [/components](/components) |
| 274 | Zero-dependency filter | [/components](/components) |
| 275 | Random asset button | [/components](/components) |
| 276 | Shareable asset links (theme + variants) | [/components/prism-switch?hue=330](/components/prism-switch?hue=330) |
| 277 | Next/prev asset trail | [/components/prism-switch](/components/prism-switch) |
| 278 | Discovery via Learn — practice assets | [/learn/hero-that-breathes-in-20-min](/learn/hero-that-breathes-in-20-min) |
| 279 | Weekly digest archive route | [/digest](/digest) |
| 280 | Home — sticky CTA rail | every public page (scroll past hero) |
| 281 | Home — feature math with receipts | [/](/) · homepage data-derived counts |
| 282 | Home — live demo leaderboard | [/](/) · top-copied assets playing inline |
| 283 | Home — editor's week note | [/](/) · human-voice log block |
| 284 | Home — builder testimonials → case pages | [/](/) · quotes link /samples |
| 285 | Home — built-in-an-afternoon timeline | [/](/) · animated 90-min story |
| 286 | Footer — press & media kit downloads | [/](/) · brand.json + palette.css |
| 287 | Mission page | [/mission](/mission) |
| 288 | /components header CTA strip | [/components](/components) |
| 289 | Home hero search empty-state topics | [/](/search?q=glass) |
| 290 | Home stats with truth links | [/](/components) · [/prompts](/prompts) |
| 291 | Interactive changelog (expand/collapse) | [/](/) homepage ship log |
| 292 | Contrast band → clickable proof links | [/](/) differentiators band |
| 293 | Returning-visitor cue | all public pages (localStorage) |
| 294 | Get-inspired shuffle entry | [/shuffle](/shuffle) |
| 295 | Pricing free-forever promise block | [/pricing#free-forever](/pricing#free-forever) |
| 296 | Pricing side-by-side live demo | [/pricing#side-by-side](/pricing#side-by-side) |
| 297 | Newsletter promise in every footer | every public page (cadence honesty) |
| 298 | Designed 404 → search with broken path | any missing route |
| 299 | Localised landing copy test (/es) | [/es](/es) |
| 300 | Theme Studio — real token editor | [/studio](/studio) |
| 301 | Theme Studio — token diff view | [/studio](/studio) |
| 302 | Theme Studio — 10 palette presets | [/studio](/studio) |
| 303 | Theme Studio — accent rotation demo | [/studio](/studio) |
| 304 | Theme Studio — radius system explorer | [/studio](/studio) |
| 305 | Theme Studio — type scale calculator | [/studio](/studio) |
| 306 | Theme Studio — density presets | [/studio](/studio) |
| 307 | Theme Studio — token export formats | [/studio](/studio) |
| 308 | Theme Studio — contrast guardrail | [/studio](/studio) |
| 309 | Theme Studio — theme preview gallery | [/studio](/studio) |
| 310 | Theme Studio — saved themes & share links | [/studio](/studio) |
| 311 | Theme Studio — original default case study | [/studio](/studio) |
| 312 | Theme Studio — real-component theming recipe | [/studio](/studio) |
| 313 | Theme Studio — colour-blind simulation | [/studio](/studio) |
| 314 | Theme Studio — semantic token map | [/studio](/studio) |
| 315 | Theme Studio — motion tokens | [/studio](/studio) |
| 316 | Theme Studio — spacing scale explorer | [/studio](/studio) |
| 317 | Theme Studio — iconography token set | [/studio](/studio) |
| 318 | Theme Studio — theme API preview | [/studio](/studio) |
| 319 | Theme Studio — reset-theme escape hatch | [/studio](/studio) |
| 320 | Quality bar — published audit scores | [/quality](/quality) |
| 321 | Quality bar — contrast CI pairs | [/quality](/quality) |
| 322 | Quality bar — reduced-motion fallback | [/quality](/quality) |
| 323 | Quality bar — per-kind size budgets | [/quality](/quality) |
| 324 | Quality bar — dependency ledger | [/quality](/quality) |
| 325 | Quality bar — keyboard-flow test plans | [/quality](/quality) |
| 326 | Quality bar — screen-reader smoke plans | [/quality](/quality) |
| 327 | Quality bar — copy consistency lint | [/quality](/quality) |
| 328 | Quality bar — numeric truth check | [/quality](/quality) |
| 329 | Quality bar — perf regression baseline | [/quality](/quality) |
| 330 | Quality bar — tone-of-voice lint | [/quality](/quality) |
| 331 | Quality bar — URL inventory test | [/quality](/quality) |
| 332 | Quality bar — share-audit ledger | [/quality](/quality) |
| 333 | Quality bar — freshness job | [/quality](/quality) |
| 334 | Quality bar — spellcheck in CI | [/quality](/quality) |
| 335 | Quality bar — image-free audit | [/quality](/quality) |
| 336 | Quality bar — focus-visible regression suite | [/quality](/quality) |
| 337 | Quality bar — security hygiene | [/quality](/quality) |
| 338 | Quality bar — licence scanner | [/quality](/quality) |
| 339 | Quality bar — annual content review | [/quality](/quality) |
| 340 | Community — favourites / collect | [/saved](/saved) · star button on every component and prompt page |
| 341 | Community — user collections with shareable URLs | [/collections](/collections) · 5 filter-backed collections |
| 342 | Community — remix submit flow into the moderation queue | [/community/submit](/community/submit) · [/admin/moderation](/admin/moderation) |
| 343 | Community — prompt re-run with published-average comparison | [/community/re-run](/community/re-run) (labelled simulation) |
| 344 | Community — copy leaderboard with credits | [/community/leaderboard](/community/leaderboard) |
| 345 | Community — maker profile pages | [/makers](/makers) · 9 sample-roster handles |
| 346 | Community — review threads anchored to code lines | code panel on every component page (browser-local, anchors match the snippet on screen) |
| 347 | Community — weekly picks ("made it" band) | [/community/picks](/community/picks) · rule-ranked, rotates weekly |
| 348 | Community — monthly challenges + winners rail | [/community/challenges](/community/challenges) · one brief open, winner chosen by code |
| 349 | Community — badges awarded by rule | [/community/badges](/community/badges) · chips on maker pages |
| 350 | Community — thank-you button + "community loved" sort | [/community/loved](/community/loved) · button on every asset page |
| 351 | Community — spotlight interviews | [/community/spotlight](/community/spotlight) · linked from the Learn hub |
| 352 | Community — craft-talk panel (no fake Discord) | [/community/craft-talk](/community/craft-talk) |
| 353 | Community — content requests board | [/community/requests](/community/requests) · coverage measured from the catalog |
| 354 | Community — snippet provenance ("blame") | per-asset panel on every component page · [/community/provenance](/community/provenance) |
| 355 | Community — fork a remix into your set | [/community/remixes](/community/remixes) · forks shown on [/saved](/saved) |
| 356 | Community — attribution policy | [/community/attribution](/community/attribution) |
| 357 | Community — moderation outcomes made visible | [/community/outcomes](/community/outcomes) · sample-queue aggregate + your own reviews |
| 358 | Community — contributor onboarding guide | [/community/onboarding](/community/onboarding) |
| 359 | Community — recognition tiers (honest milestones) | [/community/recognition](/community/recognition) |
| 360 | Community — RSS feed of new catalog records | [/community/rss.xml](/community/rss.xml) · alias [/community/feed.xml](/community/feed.xml) |
| 361 | Community — teams & licensing page | [/community/teams](/community/teams) |
| 362 | Community — translation crowd help (CC BY) | [/community/translations](/community/translations) · status table reads zero |
| 363 | Community — event calendar with computed dates | [/community/events](/community/events) |
| 364 | Community — merit sorting in the footer | "Top contributors" block in the site footer, ranked from dated records only |
| 365 | Admin — local-first content CMS | [/admin/content](/admin/content) · validation from the catalog's own rules, exports a patch |
| 366 | Admin — pipeline overview | [/admin/pipeline](/admin/pipeline) · every stage names its source |
| 367 | Admin — scheduled publishing | [/admin/schedule](/admin/schedule) · date validation; publishing is named as a gap |
| 368 | Admin — bulk status transitions | [/admin/moderation](/admin/moderation) · bulk approval only carries all-gates-clean rows |
| 369 | Admin — audit trail | [/admin/audit](/admin/audit) · append-only, actor + timestamp + note |
| 370 | Admin — search across every content type | [/admin/search](/admin/search) · 303 indexed records |
| 371 | Admin — content health score | [/admin/health](/admin/health) · 5 weighted factors over 107 assets, weakest first; every cell prints the number it compares and the line it compares against |
| 372 | Admin — copy inspector | [/admin/inspector](/admin/inspector) · the production card and detail header rendered from edited copy; the card's real behaviour is stated (it prints the first three tags and no description) |
| 373 | Admin — prompt re-run button | [/admin/rerun](/admin/rerun) · labelled simulation: no model is called, and the new score is compared against the *published* score for the same model |
| 374 | Admin — changelog composer | [/admin/changelog](/admin/changelog) · auto-links the catalog items a draft names and exports the `data.ts` snippet; tag list read out of the feed itself |
| 375 | Admin — ⌘K command palette | topbar of every [/admin](/admin) page · commands built from the nav, the queue's failed rows and the staleness window |
| 376 | Admin — notification centre | [/admin/notifications](/admin/notifications) · "queue passed SLA"-style inbox; every card names its source, and the empty state lists the events a static build cannot see |
| 377 | Admin — escalation lane | [/admin/escalation](/admin/escalation) · undecided rows sorted by real waiting time, with the 48-hour line marked and a live timer |
| 378 | Admin — export reports | [/admin/exports](/admin/exports) · asset and publish-month CSVs built in the page; every column is a stored field |
| 379 | Admin — theme control room | [/admin/theme](/admin/theme) · repaints the tab by overriding the nine `@theme` tokens, with WCAG ratios computed per preset |
| 380 | Admin — mobile pass | [/admin/mobile](/admin/mobile) · a phone nav row on every admin page, 44px targets, and a touch index of all 21 sections |
| 381 | Admin — undo/redo for decisions | decision bar above the queue · ⌘Z / ⇧⌘Z over a 40-step stored history, shared with the bulk bar |
| 382 | Admin — duplicate detector | [/admin/duplicates](/admin/duplicates) · queued titles against the whole catalog, with the shared words printed as the evidence |
| 383 | Admin — empty state | queue page when nothing is pending · shows the newest published records instead of a blank panel |
| 384 | Admin — quick stats per content type | [/admin/stats](/admin/stats) · type inventory, publish-volume chart and per-kind means — with the copy-trend chart it cannot draw named in full |
| 385 | Pro feature ledger | [/pro](/pro) · all 11 Pro promises with a state chip (works now / browser demo / needs a server), the evidence for that state and the free path beside it |
| 386 | Licence clarity cards | [/pro/licence](/pro/licence) · MIT vs Pro in cards and a table, with the three rows that are site policy rather than stored catalog data labelled as such |
| 387 | Usage-based honesty | [/pro/unlimited](/pro/unlimited) · "unlimited" written out as 4 things it covers and 4 it does not |
| 388 | Pro trial playbook | [/pro/trial](/pro/trial) · 7 walkable days ordered working → browser demo → server-bound |
| 389 | API tokens demo | [/pro/api](/pro/api) · scope picker minting a deterministic prefixed demo key, plus the request it would make |
| 390 | Pro-only lab gate | [/studio](/studio) · three minutes of the real editor, then an upgrade card with a one-press dismissal |
| 391 | Bundle vs ala-carte | [/pro/bundles](/pro/bundles) · cost meter over real pack prices that argues against its own bundle |
| 392 | Team seats preview | [/pro/teams](/pro/teams) · build a team, pick from 3 roles, and print the seat arithmetic the plan card leaves unsaid |
| 393 | Student & independent discount lane | [/pro/discounts](/pro/discounts) · four lanes priced live, including one that asks for a single line and no documents |
| 394 | Grandfather promise | [/pro/promise](/pro/promise) · the promise in full, the 4 cases it does not cover, and a plain-text copy to quote |
| 395 | Cancel-path demo | [/pro/cancel](/pro/cancel) · a 3-step cancellation you can click through, plus the 5 dark patterns it refuses to contain |
| 396 | Referral credit mock | [/pro/referral](/pro/referral) · one month each, capped at 6 a year, with the impossible states clamped |
| 397 | Enterprise contact card | [/pro/enterprise](/pro/enterprise) · 7 procurement asks with 3 answered "not available" in plain words |
| 398 | Receipts & plans page | [/admin/billing](/admin/billing) · six demo invoices derived from the price table, and what a real one needs |
| 399 | Pro changelog | [/pro/changelog](/pro/changelog) · every Pro claim generated from the ledger, free alternative in the next column |
| 400 | Per-page budget report | [/perf](/perf) · every route's own JS, CSS and HTML read from the committed build report, with an import-derived "why this size" column |
| 401 | Font-loading audit | [/perf/fonts](/perf/fonts) · 9 files / 261.4 KB → 2 latin subsets / 80 KB, both preloaded, on 99 of 101 pages |
| 402 | Zero-JS showcase | [/perf/no-js](/perf/no-js) · 106 of 107 assets need no JavaScript, and the page reads its own built HTML to show what a scriptless client receives |
| 403 | Lazy scene mounting | [/perf/mounting](/perf/mounting) · IntersectionObserver at a 320px margin; /prompts HTML 963.6 → 496.1 KB |
| 404 | Image-free policy | [/perf/no-images](/perf/no-images) · 0 image tags in the source, and what the policy costs (no OG image, no screenshots) |
| 405 | Edge-cache headers | [/perf/caching](/perf/caching) · 3 Cache-Control rules served by next.config.ts, immutable only for hashed assets |
| 406 | Bundle-splitting tour | [/perf/chunks](/perf/chunks) · the layout → cards → demo import that put 485 KB on every route, and the 41-line module that removed it |
| 407 | Backdrop-blur budget | [/perf/blur](/perf/blur) · 71 blurs classified by surface: 8 full-screen, 52 panel, 11 component |
| 408 | Animation layer inspector | [/lab/layers](/lab/layers) · mount any of 107 demos, read what it animates, classify compositor/paint/layout, sample frames on your own device |
| 409 | Prefetch strategy | [/perf/prefetch](/perf/prefetch) · 181 catalog cards opt out of viewport prefetch and fetch after 140 ms of intent; one payload measures 15.8 KB |
| 410 | Memory hygiene guide | [/perf/timers](/perf/timers) · 79 registrations against 47 cleanups counted per file, with the limits of a static count stated |
| 411 | Low-end device test notes | [/perf/devices](/perf/devices) · a 3-class matrix published with no results, because none have been run |
| 412 | Perf badge on changelog | [/#changelog](/#changelog) · every entry from 2026-09-10 carries its measured delta; earlier entries read "size not recorded" |
| 413 | Build-time page | [/perf/build](/perf/build) · 94 routes, 84 prerendered, 42 chunks, 103 HTML files — read from .next, never typed |
| 414 | Service worker plan | [/perf/service-worker](/perf/service-worker) · what would be cached, how it would be versioned, why it ships after the API |
| 415 | Design-token JSON endpoint | [/api/exports/tokens.json](/api/exports/tokens.json) · 14 colours, 5 radii and 3 font stacks in W3C design-token format, parsed from the stylesheet this site compiles |
| 416 | Tailwind preset package | [/api/exports/motif-preset.cjs](/api/exports/motif-preset.cjs) · a real CommonJS preset with the site's tokens, generated from the same parse |
| 417 | Figma variable sync | [/integrations/figma](/integrations/figma) · 19 variables in Figma's import shape, with anything unrepresentable listed instead of coerced |
| 418 | Catalog metadata endpoint | [/api/exports/catalog.json](/api/exports/catalog.json) · 107 components and 74 prompts with their stored scores, so a claim can be diffed rather than screenshotted |
| 419 | VS Code snippet pack | [/api/exports/motif.code-snippets](/api/exports/motif.code-snippets) · 5 snippets using the site's real utility classes, with the components excluded and the reason stated |
| 420 | RSS for the changelog | [/api/exports/changelog.xml](/api/exports/changelog.xml) · all 12 entries as RSS 2.0, each measured size change travelling inside the item description |
| 421 | Storybook decorator | [/api/exports/motif-storybook-decorator.jsx](/api/exports/motif-storybook-decorator.jsx) · real decorator code setting the palette as custom properties, with "not published to npm" said plainly |
| 422 | Open Graph helper | [/integrations/og](/integrations/og) · blocks built from the three most-copied catalog records, containing no image reference and saying why |
| 423 | Print stylesheet for Learn | [/integrations/print](/integrations/print) · an @media print block compiled into the site and printed on the page from the stylesheet itself |
| 424 | React package scaffold | [/integrations/react](/integrations/react) · one component a package could ship honestly — tokens as custom properties — with the npm layout and the publishing gap stated |
| 425 | HTML/CSS single-file copy | [/api/exports/single-file.html](/api/exports/single-file.html) · 3.6 KB with 0 external references and 0 script tags, checked in the output rather than by eye |
| 426 | Export to CodeSandbox | [/integrations/codesandbox](/integrations/codesandbox) · 3 real files for a sandbox, and why the one-click define link is a named gap instead of an unverified URL |
| 427 | Framer-style code embed | [/embed/tilt-card](/embed/tilt-card) · a chrome-free route per asset with frame-ancestors and noindex set, plus the allowlist a static build cannot enforce |
| 428 | Browser bookmarklet | [/integrations/bookmarklet](/integrations/bookmarklet) · a drag-to-the-bar script that lists any page's colour custom properties and copies one per click, with the saving gap named |
| 429 | CLI sketch | [/api/exports/motif-cli.mjs](/api/exports/motif-cli.mjs) · a script that runs — `node motif-cli.mjs list\|tokens\|badge` against any deployment — with no registry entry, so nothing pretends to be installable |
| 430 | CI badge | [/integrations/badge](/integrations/badge) · a real SVG per asset at /api/badge/&lt;slug&gt; carrying the stored score, with "no CI service" written into the file's own description |
| 431 | Drag-to-reorder list | [/components/reorder-list](/components/reorder-list) · rows glide through a FLIP transform while the pointer drags, and a keyboard handle moves a row a slot at a time with every move announced |
| 432 | Swipeable cards (deck) | [/components/swipe-deck](/components/swipe-deck) · drag a card past the threshold or press one of the two buttons; every decision is undoable and the status line counts what is left |
| 433 | Split-pane resizer | [/components/split-pane](/components/split-pane) · a real separator with min/max, arrow-key resizing, shift for larger steps, Enter to reset and a visible focus ring |
| 434 | Zoom-on-hover image map | [/components/zoom-lens](/components/zoom-lens) · a map drawn in SVG rather than loaded as a picture, magnified 1.5×–4× by a lens the arrow keys can pan, with the same features listed as text |
| 435 | Range-linked chart scrubber | [/components/chart-scrubber](/components/chart-scrubber) · all 74 prompts' average fidelity as bars; drag a handle and the band's count, mean and leading model follow, from the catalog's own numbers |
| 436 | Scroll-jack by choice | [/components/scroll-pin](/components/scroll-pin) · the story pins only after the switch is turned on, inside its own scroller; Next and Back work either way and Escape hands the scroll straight back |
| 437 | Springy 3D flip stack | [/components/flip-stack](/components/flip-stack) · three Z-layered cards that flip to their backs on hover or focus, the active one rising to the front, with aria-pressed carrying which face is up |
| 438 | Draw-on-scroll path | [/components/draw-path](/components/draw-path) · a 9-segment curve traced with its own measured length; Draw and Clear work by hand and the shape is described in text inside the SVG |
| 439 | Morphing icon set | [/components/morph-icons](/components/morph-icons) · play/add/collapse glyphs built from matched quads whose corner points interpolate, with the parameter printed so a swap could not pass for a morph |
| 440 | Infinite logo chase | [/components/logo-chase](/components/logo-chase) · two columns of roster wordmarks at different speeds, drawn as type rather than images, stopped for reduced motion until Play |
| 441 | Shimmer text reveal | [/components/shimmer-text](/components/shimmer-text) · one 1400ms gradient pass when the headline enters view, ending on the final frame; the words are in the DOM the whole time |
| 442 | Progress ring with threshold ticks | [/components/ring-ticks](/components/ring-ticks) · the ring draws a real share of the catalog (audit ≥ 95) and pauses at each labelled tick, with the line printed because the site publishes no threshold |
| 443 | Interactive bezier drawer | [/components/bezier-drawer](/components/bezier-drawer) · two draggable handles (arrow keys too), the CSS value printed live, a probe cursor reading y at any t, and a preview dot animated by the exported curve itself |
| 444 | Animated counters band | [/components/counter-band](/components/counter-band) · four figures counting to the catalog's real totals — components, prompts, guides, copies — with the single-value odometer asset linked from the card |
| 445 | Hover-linked cards | [/components/linked-cards](/components/linked-cards) · focus dims siblings exactly as hover does, nothing is disabled, contrast stays readable, and reduced motion drops the saturation shift |
| 446 | Slug input transform | [/components/slug-field](/components/slug-field) · title → kebab-case with a small fold table, dash collapsing, a 60-character trim, reserved-word and empty-value warnings, and a manual lock |
| 447 | Share-sheet overlay | [/components/share-sheet](/components/share-sheet) · a real dialog with focus, Escape and a return path to its trigger; the system-share row reports whether this browser has one instead of pretending |
| 448 | Drag-theme chip onto a card | [/components/theme-drop](/components/theme-drop) · the admin presets dropped onto a preview card, with the same WCAG contrast arithmetic recomputed on every apply and failing pairs named |
| 449 | Inline search highlight walk | [/components/search-walk](/components/search-walk) · substring search across a real guide, every occurrence marked, the active one scrolled into view and drawn in full amber |
| 450 | Reading-time progress dots | [/components/reading-dots](/components/reading-dots) · a rail of labelled 24px dots with three states that also fills from real scrolling; the copy says it counts sections reached, not attention |
| 451 | Pulse network graph | [/components/pulse-graph](/components/pulse-graph) · ten assets and twelve cross-links drawn from the catalog, each edge's reason on record, node size from copy counts, pulse pausable and off under reduced motion |
| 452 | Easing icon families | [/components/easing-icons](/components/easing-icons) · the Lab's four curves racing real balls through the animation API, with each glyph generated from the curve's own 25% and 75% samples |
| 453 | Preloader choreography | [/components/preloader-handoff](/components/preloader-handoff) · three loaders (skeleton shell, dot leader, shimmer sweep) handing off inside one reserved box; the bar is a labelled timer and the counters that land are the library's build-time totals — the stage copy names the catalog asset each loader borrows from |
| 454 | Ripple nav dots | [/components/ripple-dots](/components/ripple-dots) · a five-dot rail whose ring travels from the dot you left to the dot you picked while the section text swaps in the same frame; arrow keys walk it, `aria-current` marks the dot, and reduced motion snaps the ring without travel |
| 455 | Tilted hero CTA | [/components/tilted-cta](/components/tilted-cta) · a real link that tips toward the pointer inside an 8° cap, label counter-rotated so the words stay level; arrow keys tilt it for keyboard readers, Escape/0 resets, locks and reduced motion leave it upright |
| 456 | Success-state celebration | [/components/success-burst](/components/success-burst) · an account-created panel with twelve particles fired once per deliberate submit (never on load); the copy states nothing is posted or stored, and reduced motion drops the particles so the check mark carries it |
| 457 | Returning-visitor strip | [/](/)-fed by `motif:feed-seen` · the feed opens with the newest catalog batch (derived from `published`) and the strip says whether it landed after your last visit to the feed — first visit, same-day return and "nothing newer" are each stated plainly |
| 458 | Learning paths | [/learn/paths](/learn/paths) · three build-time sequences (motion starter, springs, scroll) drawn from the essays and catalog; each step is a real link, progress dots live in `motif:paths`, and there is no certificate or email gate |
| 459 | Saved-stack share prompt | [/saved](/saved) + [/saved/stack](/saved/stack?items=a~halo-button,a~aurora-veil) · at five saved items the panel builds a recipe link with the slugs in the query string; the route renders that stack, names any slug the catalog cannot resolve, and stores nothing |
| 460 | Weekly self-score | [/saved](/saved) · "library fitness" out of 15 from three printed components — breadth, top-quartile taste (against the real copies quartile) and kind range — with the formula and the median copies shown next to it |
| 461 | "Copy of the week" email mock | [/digest/copy-of-the-week](/digest/copy-of-the-week) · the digest as a rendered issue — most-copied component, best-fidelity prompt, newest essay and the runner-up by copies, all sorted from the catalog with no editor in the loop; the footer states there is no list and no tracking pixel |
| 462 | Streak for makers | [/habits](/habits) · day streaks from `motif:copy-log`, written only while the opt-in switch is on (one entry per asset per day, capped at 120); 28-day strip, longest run kept in the same panel, and switching off clears the log |
| 463 | Build-a-thon calendar | [/community/build-a-thon](/community/build-a-thon) · monthly windows computed as arithmetic on the month (open the 1st, close the last day) with the theme rotating by month index, plus a countdown recomputed from the visitor's own clock |
| 464 | Rate-your-build | [/habits](/habits) · one-tap shipped / still-waiting rows for the last four distinct things you copied, tallied in the panel and stored in `motif:shipped`; no star rating, no review box, no follow-up |
| 465 | Quiet reminders | [/habits](/habits) · an off-by-default switch (`motif:reminder`) that can only ever produce one line, on a visit, when two or more saved pieces are still marked waiting — with a week snooze in `motif:reminder-snooze` |
| 466 | Community day | [/community/day](/community/day) · the next Thursday and the weekly brief both computed (Thursday + ISO week number picking the theme); the local sticker in `motif:community-day` says "took part" because participation cannot be verified |
| 467 | Per-asset meta | `src/lib/seo.ts` · every component, prompt, essay and background page now derives title, description, keywords, canonical and OG/Twitter tags from its own record (size, deps, stack, fidelity, run count); `metadataBase` is one constant with a `NEXT_PUBLIC_SITE_URL` override |
| 468 | FAQ schema on detail pages | `/components/<slug>` + `/prompts/<slug>` · `FAQPage` JSON-LD built from the asset record (size, dependencies, licence, audit score, stack) and each prompt's run log — every answer is a fact the page already prints |
| 469 | Crawl rules + site-search indexing | `src/app/robots.ts` + [/quality/crawl](/quality/crawl) · `/search`, `/saved`, `/habits`, `/embed`, `/admin`, `/api/exports` and `/digest` are disallowed and printed with a reason; the harness checks the table and `robots.txt` agree |
| 470 | Prompt glossary hub | [/glossary](/glossary) · ten terms — fidelity score, run log, concept render, audit, tier, size budget and more — each defined by the behaviour it describes with a live example, plus a `DefinedTermSet` node |
| 471 | Honest schema | [/quality/schema](/quality/schema) · the register: four emitted types with where and why, five deliberately absent types (Product, AggregateRating, Offer, HowTo, Event) with the reason, and the origin constant; the export harness fails if a forbidden type appears in the source |
| 472 | Internal-link spine | `/components/<slug>` · a deterministic rail of two essays + one prompt scored by tag overlap (`src/lib/spine.ts`), with the match counts printed under the cards so the choice can be reproduced; every asset resolves to two essays and a prompt |
| 473 | Evergreen refresh dates | `/components/<slug>` + [/quality/refreshed](/quality/refreshed) · "added" and "updated" come from the records, "review due" is a computed 90-day schedule; the register page lists every component with its due date, counts what falls due in 30 days and how many essays have gone 90 days untouched |
| 474 | Changelog as content | [/changelog](/changelog) + per-entry permalinks · all 12 entries get addressable pages (`date-kebab-title`), each carrying its measured size delta or an explicit "no measurement recorded", plus newer/older navigation and Article markup |
| 475 | Multilingual title test | `/es` · the translated title/description now declares its relationship with the English home page both ways (`hreflang` en/es/x-default from each side); slugs stay English because one translated page is not a parallel site |
| 476 | Comparable-free positioning | [/compare](/compare) · five approaches appraised on merit — generic kit, template marketplace, motion library, prompt gallery, playground — with what each is better at before what it costs; no competitor named, and every Motif claim links to the page that proves it |
| 477 | Quality bar — audit scores published | [/quality](/quality) · Section 11's missing row: every asset's accessibility score is banded and published with the catalog distribution (92–100 range) and a per-asset audit sheet; the panel names what the score checks and what it does not — it is an automated audit of the source, not an axe-core run in a browser |
| 478 | Learn as the SEO engine | [/learn/questions](/learn/questions) · 18 curated search-shaped questions, each paired with the guide that answers it and the component that proves it; the pairs are validated at build time and the FAQ markup is generated from the same rows, so a rename cannot leave a dead question |
| 479 | Original-code bait | [/quality/craft](/quality/craft) · three verbatim excerpts from the repo (the global reduced-motion rule and why it uses 0.001ms, the FLIP measure that reads offsetTop instead of getBoundingClientRect, the rAF guard that stops a loop outliving its component) with the habits counted over all 133 assets |
| 480 | Speed as SEO | [/quality/speed](/quality/speed) · the measured story — KB of JS/CSS/fonts read from docs/build-report.json, the split that took a no-demo route from 743.1 to 429.5 KB, the recorded changelog deltas, and an explicit block naming what is not claimed: no Lighthouse run, no field metrics, no comparison |
| 481 | OG images per asset | `/og/<slug>` · 133 cards prerendered at build time with next/og from each asset's own record (kind, size, dependencies, a11y, quality, copies, licence); the route is a static handler rather than the file convention because the convention's URL carries a build hash |
| 482 | Logo system page | [/brand/logo](/brand/logo) · the mark redrawn from chrome.tsx's geometry (frame r9, four 6×6 dots, diagonal pair full / off-pair 55%, three-stop gradient), six sizes, a clear-space rule of one dot (18.75%), five rendered misuse cases and the verbatim SVG; the harness compares the page against the header source |
| 483 | Voice guide | [/brand/voice](/brand/voice) · ten say/never-say pairs, the full 18-term banned list imported from the module the scanner reads, and the live tone-scan figures; the export harness now asserts zero live overclaim hits across 112 prose files (this page's own wording moved to clear it) |
| 484 | Launch checklist page | [/brand/launch](/brand/launch) · 12 real items labelled shipped / left out on purpose / still open — including the three deliberate omissions (no accounts, no analytics, no paid tier) and the two still-open measurements; each shipped row links to the surface that proves it |
| 485 | Social proof shelf | [/brand/proof](/brand/proof) · the three demo-persona build stories from `samples.ts`, presented with their label first (invented handles, sample-file weights, not third-party measurements) and the three-part rule for replacing them with real quotes |
| 486 | Build notes as posts | [/brand/notes](/brand/notes) · each of the 12 changelog entries assembled into a post-sized line carrying its own figure, with a character count and an explicit note when a line needs an edit before it fits |
| 487 | Open metrics page | [/metrics](/metrics) · every counter the repository holds, recomputed at build time (catalog totals, prompt runs and average fidelity, routes, JS/CSS, the 743.1→429.5 KB no-demo delta) plus the four numbers that are missing on purpose — visitors, signups, per-asset downloads, revenue |
| 488 | Mascot concept | `src/components/mascot.tsx` + [/brand/mascot](/brand/mascot) · the logo's dot escaped the frame: three poses (lost / found / idle) in one 64-unit geometry, drawn once and shipped live on the 404 route |
| 489 | Wallpaper downloads | [/brand/wallpapers](/brand/wallpapers) · three hand-written SVG posters (dot field, gradient ribbon, quiet type) generated from `src/lib/brand.ts`, downloadable at 2560×1440 through `/api/brand/<slug>`, with a one-line licence |
| 490 | Thank-you page design | [/brand/thanks](/brand/thanks) · the post-signup page designed before a signup exists: three ordered first steps, plus the four things the page must never do (second ask, unkeepable promise, countdown, looping mascot) |
| 491 | "Made with Motif" badge | [/brand/watermark](/brand/watermark) · a 190×40 optional badge served from `/api/brand/badge`, shown on light and dark grounds, with the rule set including "remove it any time, nothing is gated by it" |
| 492 | Real accounts & favourites backend | [roadmap hub](/roadmap) + spec on [/roadmap#accounts](/roadmap) · localStorage demo named as a demo; slice = one favourites table + email-less session; cost = storage, privacy page, deletion path; refusal = social buttons that do not complete |
| 493 | Prompt re-run service | spec on [/roadmap#prompt-reruns](/roadmap) · 221 recorded runs today; slice = queue + worker streaming one real run over SSE; cost = model spend cap; refusal = a run button that returns canned output |
| 494 | Theme Studio as a product | partial on [/roadmap#theme-studio](/roadmap) · the Studio already edits and exports every token in-browser; slice = named themes with export/import, then accounts; refusal = paywalling the export that works today |
| 495 | Component API (JSON), v1 | [/api/v1/components/<slug>](/api/v1/components/halo-button) · one asset as data — kind, tags, behaviours, stack, deps, size, licence, version, props, scores and its changelog entries — prerendered for all 133 assets from the same record the page renders; no invented `code` field |
| 496 | Public audit API | [/api/v1/audit](/api/v1/audit) · every asset's a11y and editorial scores, size, dependency count and the banded distribution, computed from the catalog at build time so the page and the API cannot disagree |
| 497 | Embed SDK | [/roadmap/embed](/roadmap/embed) + [/embed.js](/embed.js) · ~1 KB script replacing `[data-motif-embed]` placeholders with the existing `/embed/<slug>` iframe; the doc page runs it live, the placeholder degrades to a link with JS off, and the script adds no analytics or backlink |
| 498 | Community moderation marketplace | spec on [/roadmap#moderation-marketplace](/roadmap) · rubric and demo console exist; slice = claimed queue items, two-review agreement, Pro month reward; refusal = paying per approval |
| 499 | Learn certificates | spec on [/roadmap#certificates](/roadmap) · paths and local progress exist; slice = an SVG certificate printed "self-issued, unverifiable" until a signed credential is possible; refusal = a badge that looks verified when it is not |
| 500 | Desktop helper app | spec on [/roadmap#desktop-helper](/roadmap) · CLI and snippets already ship; slice = tray app wrapping the CLI for clipboard URLs; cost = signing on three platforms; refusal = bundling a catalog index that goes stale |
| 501 | Open book | [/metrics](/metrics) + [/quality/craft](/quality/craft) + [/brand/notes](/brand/notes) + [/brand/launch](/brand/launch) · the playbook itself published with its numbers, plus the honest gap: the weekly measurement series is still open |
| 502 | Site audit repair — headings | every page carries exactly one `<h1>`: the demo scene rendered inside component previews was an `<h1>`, which turned a template page into an eleven-heading document; it is a styled `<div>` now, and the harness fails if any sitemap page has 0 or 2+ |
| 503 | Site audit repair — dead links | three links inside guide bodies pointed at routes that do not exist (`/learn/print-inspired-editorial`, `/prompts/easing-cheatsheet-deep-dive`, `/learn/motion-spec-only`); retargeted to the component/prompt pages that do exist, and the harness now fetches all 340 distinct internal links |
| 504 | Site audit repair — metadata window | descriptions were clamped at 300 characters, which a search result truncates anyway: the clamp is 200 with a word-boundary ellipsis, two over-long prompt titles were shortened, and `/community` (no canonical — it inherited the homepage) now declares its own |
| 505 | Share cards for every family | `/og/<slug>` covers prompts, guides and backgrounds in addition to components, each card built from that record's own numbers; a page without a bespoke card inherits the site card at `/og/default`, so no page unfurls as an empty frame |
| 506 | Regression gates for the above | `check:exports` walks the sitemap (279 pages: status, single h1, own canonical, og:image, description length) and fetches every distinct internal link, plus one card check per family — the audit that found these problems is now the check that prevents them |
| 507 | Markup accessibility repair | the automated half of a11y, run over every built document: fixed 134 pages whose logo gradient carried the same id three times per document (header, footer, press kit), every mock heading inside demo scenes and card previews, six panel titles that rendered as h3 directly under a page h1, four unlabeled lab/palette controls, and the badge page's per-card SVG ids |
| 508 | /quality/aria — the audit page | the seven decidable checks (alt text, control names, label association, duplicate ids, heading order, document language) with live counts, the real findings from the first two runs and the repairs they caused, and an explicit list of what markup alone cannot decide (focus order, contrast in context, screen-reader output) |
| 509 | Markup gate in the export harness | the same seven checks run from outside the build over all 291 documents and fail on any finding, so /quality/aria cannot report green while the served HTML is not; the page renders on demand precisely so its count is the finished build rather than a mid-build slice |
| 510 | Invented movement removed from the homepage | the hero stat band printed "+8 this drop", "+2 this week", "+0.6 pt" and "+12.4%" as literals, and the trending list printed `+{((copies * 7) % 13) + 5}%` — a percentage manufactured from the copy count by an arbitrary formula; nothing in the repository records a change over time, so both were invention, not measurement. Each tile now carries a fact derived from the same data as its number (MIT count, models per prompt, recorded runs, dependency count and size), the copies tile says "catalog counter, all time — not a 30-day measurement", and the dead `COMMUNITY_STATS` block (612 assets / 318 prompts, contradicting the 133 / 74 catalog) is deleted |
| 511 | Demo copy separated from catalog data | demo scenes printed numbers about this catalog as string literals — "300 verified prompts" beside a catalog of 74, "62 assets" beside 133, "39 components", and a scene headed "motif by the numbers" whose four figures (128 assets, a 4.2k-star launch week, "300+ teams", a 1.9s demo load) were all invented. Every catalog figure in a scene is now read from the catalog at build time (assets, verified prompts, guides, recorded runs, a11y median, median bundle size), the playground chrome carries a "sample copy" chip and every component FAQ answers "Are the numbers inside the demo real?", and the export harness fails if any scene file hard-codes a catalog count or a social-proof figure |
| 512 | Per-route JavaScript budgets | `src/lib/budgets.ts` sets an own-JS limit per route family with roughly 10% headroom (component detail 730 KB, admin consoles 620, the lab 560, catalogs ~500, content pages 90 by default) and `/quality/speed` publishes the same table; the export harness applies it to all 141 measured routes and fails when one exceeds its limit. Building the table exposed the structural cost: `demos/Demo.tsx` is one 380 KB module holding every scene, so a page rendering one demo pays for all of them — the budgets for `/pricing`, `/shuffle` and `/lab/layers` say so in their `why` field, and the scene-by-scene split is named as the next measured win rather than claimed as done |
| 513 | One rule for what counts as a page | three tools each decided for themselves which files in `.next` are pages, and the three answers disagreed. The trigger was in the export harness: a batch-73 check asked for a changelog slug that had already been retitled, and ORed its assertion with a second slug, so it passed for twenty batches while testing nothing — and because a cold Next server caches the not-found result as an `__next_error__` document under `.next/server/app`, each run wrote a phantom document. The measurement counted it as a page (inflating the HTML total and the font denominator) and `/quality/aria` reported it as a live `no-lang` finding against a URL that is not a route; the harness skipped it silently. The rule now has one home in `src/lib/markup-a11y.ts`, read by the page, `npm run check:a11y` and the report, which publishes the count it skipped; the harness reads a real slug off the changelog page and cleans up the one 404 it probes; and a `prebuild` step clears the prerender output so a build can only mean what that build wrote |
| 514 | `npm run lint` was red and called green | the gate was reported clean while `eslint` exited 1 on five errors: `scripts/check-exports.cjs` and `scripts/check-demos.cjs` were parsed as TypeScript, where `require()` is forbidden. Both are Node scripts with no app code, so they are now `.mjs` with `import` statements, matching `measure-build.mjs`; two dead locals the linter also found (`catalogWords` in the harness, an unused `fs` import on `/quality/aria`) are gone. `eslint` now prints nothing at all, which is the actual definition of the green that was claimed |
| 515 | The demo scenes checked against their own markup | the pass covered names and ids but not the wiring inside a widget, so four rules were added and three real defects fell out: `role="switch"` sat on a `<span>` in the admin settings demo (a switch that cannot be reached by Tab is not a switch, and its `aria-checked` disagreed with its own colour), and the combo-box and disclosure-list scenes both pointed `aria-controls` at a panel that only existed while open — a reference to nothing in the state a screen reader reads first. The listbox and the FAQ panels now stay mounted and are `hidden` when closed, the switches are real buttons (the one flag the demo wires is operable, the rest are disabled and say so), and the rules are: a focusable control inside an `aria-hidden` subtree, an `aria-*` reference to an id that does not exist, an operable role on something that cannot take focus, an ARIA state value the spec does not allow, and a role missing the property it requires. The same rules now also run over HTTP (`npm run check:a11y:served`) across all 283 sitemap URLs, which is the only way the 133 on-demand component pages ever get checked |
| 516 | A manual checklist where the automation stops | the pass is green, and green is exactly when a checklist is worth writing, because the list of what a machine cannot decide is otherwise folklore. `/quality/aria` now carries seven ordered checks — a Tab walk with no mouse, closing an overlay while focus is inside it (the runtime case the static `hidden-focusable` rule cannot see), where focus returns after a dialog, focus rings against the surface they sit on, what a screen reader actually says, reduced motion scene by scene, and touch targets at 200% zoom — each naming the automated half that exists and the pages to run it on. The section says in the same breath that none of the seven has been run in a browser by this project, because the build has no browser in it: a checklist is a plan, not a result. The old sentence calling the demo scenes exempt from the pass is gone, since the rules now run over them |
| 517 | The demo scenes load per page | every one of the 162 scenes lived in a single 380,911-byte module, so a page that rendered one demo paid for all of them: the component detail route measured 1,112.4 KB of JavaScript in the build report, and `/quality/speed` had carried that cost for three batches as "the one structural cost these budgets expose" rather than fixing it. The scenes are ten modules now — the registry in `src/components/demos/Demo.tsx`, the shared kit, seven scene sets under `scenes/` and `scenes-17.tsx` — behind a loader map of 162 static `() => import(...)` entries, each resolved through `dynamic(..., { ssr: true })` so the scene is still in the server-rendered HTML. Measured: a component page 1,112.4 → 696.2 KB, an embed 866.2 → 54.2 KB, the homepage 916.0 → 499.9 KB, with the shared shell unchanged at 446.2 KB; chunk files 48 → 58, because a lazily-loaded module is its own chunk. The guards moved with the code: `check:demos` verifies that every loader names a component its module exports and that no export goes unclaimed instead of counting `case` lines, the demo-copy gate scans all ten of them, the build report's baseline is the file set the most routes share rather than the lightest route (a lazy embed page had made "own JS" on /quality read as 422 KB of shell), and every budget was re-cut from the same measurement |
| 518 | Copy the scene split invalidated | the refactor made five sentences false on pages whose whole argument is that their numbers are checkable: `/brand/voice` used the demo module as its example of a countable fact and printed "13 files and 428 KB of JS", which was neither true after the split nor checked by anything; `/lab/layers` said it "ships the demo module" when it now pulls one scene set; `/perf/no-js` and `/integrations/vscode` still spoke of a single demo module; the split-panel note in `src/components/perf-ui.tsx` listed "the demo module" among the per-route chunks. The voice line is read from the source tree now (`motionAudit()`), like the figure on /lab/layers, and the export harness compares both served pages against the files — "11,437 lines across 10 modules" — so the next refactor fails in the commit that makes it false instead of leaving it to be noticed |
| 519 | The crawl surface now matches the rule it states | the crawl rule lived in three places that had to agree by hand — the sitemap in `src/app/sitemap.ts`, the `Disallow` list in `src/app/robots.ts` and the prose on `/quality/crawl` — and nothing compared them. The audit found the consequence: **103 indexable pages were absent from /sitemap.xml** (the whole studio log and its 13 entry permalinks, `/brand/*`, `/perf/*`, `/pro/*`, `/integrations/*`, `/community/*`, `/lab/layers`, `/studio`) and, on five surfaces the page called "kept out of the index", the only thing keeping them out was a robots.txt rule — which asks a crawler not to *fetch*, not to forget, so a linked URL can still be indexed. Two more pages were indexable and unlisted but invisible to a disk walk because they render on demand: `/quality/aria` and `/roadmap`, plus the two `/community` form pages and `/roadmap/embed`. The rule is one module now (`src/lib/crawl.ts`): robots.ts compiles its exclusion list, the sitemap appends its page list, and the studio log is derived from `CHANGELOG`; the five excluded surfaces carry `robots: { index: false }` (the admin console gets it from its layout); the changelog entry pages got the metadata every other page has — a 200-character description instead of a raw 280-character slice, and their own share card as the fifth `/og` family; `/quality` and `/es` got their descriptions clamped and the site card back. Measured: 278 → **382 sitemap URLs**, the build itself unchanged (141 routes · 291 documents · 58 chunks · 2,791.2 KB), the served markup pass 283 → 384 URLs with no findings, `/quality/aria`'s typed-in "283 URLs" replaced by the count the pass walks. Guarded by five new checks in `check:exports` — the exclusions are readable (8 rules), every built page with a canonical and no noindex is listed, every excluded surface carries noindex, every static route in the build manifest is either listed or noindex (133 routes, both directions, which is what catches on-demand pages), and `/quality/crawl` prints the count the sitemap serves. A deliberate dead link on `/brand/mascot` (the live-404 demo, newly visible to the link walk now that `/brand/*` is listed) is named in the harness and asserted to still return 404 |
| 520 | Titles and descriptions had no owner | the sitemap audit in 519 made every page reachable to the harness, and the next pass compared the pages with each other: **93 of the 382 served titles read "… — Motif UI · Motif UI"** because 103 page metadata blocks wrote the brand suffix that the root layout's title template already appends, **twelve hub pages shared one description** inherited from the layout (`/`, `/components`, `/prompts`, `/backgrounds`, `/learn`, `/lab`, `/pricing`, `/mission`, `/samples`, `/shuffle`, `/studio`, `/templates`), and four changelog entry titles ran past 75 characters once the template was applied. The per-page rule in the harness could not see any of it: it checked that a description existed, never that two pages disagreed, and a page inheriting the layout copies passed every check. The suffix is stripped from the 103 metadata titles (the layout adds it once), the twelve hubs got their own titles and descriptions written from their own content, the changelog entry title dropped its "— studio log" tail, and the shuffle deck is titled "Shuffle the library" rather than "Get inspired — Motif UI shuffle". Guarded four ways, all derived from the served pages: no title carries the brand twice, no title is longer than 75 characters, no two pages share a title, no two pages share a description |
| 521 | The social card was inherited whole | with the sitemap honest, the next pass read each page's preview card against the page itself: **101 of the 382 sitemap pages inherited the root layout's `openGraph` block**, so sharing `/perf/fonts` or `/brand/voice` produced a card titled "Motif UI — Copy less. Ship more.", described with the site's own sentence, and linking to the homepage while the page's canonical pointed at itself. Every per-page rule missed it because every one of those pages had its own title, description and canonical — the wrong values lived one level up, in the file that sets defaults. The layout no longer sets `title`, `description` or `url` in `openGraph` (type, site name and the fallback image are not page-specific and stay), and the framework fills the two textual fields from each page's own metadata: 382 cards now carry the page's title, and a page that emits no `og:url` is read by platforms through its canonical instead of through the homepage. Also verified in the same pass: all 285 URLs referenced by JSON-LD resolve 200, and three new harness checks hold the line — no page advertises another page's URL in its card, no page borrows the site tagline as its card title, and a sample of the 281 distinct card images resolves to an image |
| 522 | The cache rules were not the rules the server sent | `/perf/caching` printed a table of Cache-Control rules and told the reader the harness checked two of them every batch; nothing checked any of them, and the table had drifted from the wire. Measured on the batch-89 build: `/_next/static/chunks/*.js` answered `public, max-age=0, s-maxage=300, stale-while-revalidate=86400` — **0 of the 58 fingerprinted chunk files were immutable** — `/embed.js` answered the same while its route sets `max-age=3600` (a claim printed on `/roadmap/embed`), and `/community/rss.xml` and `/api/brand/<slug>` each lost the header their own handler sets. The cause is order: Next applies every matching rule and the last one wins, and `CACHE_RULES` listed the catch-all last, so it won for every path; the comment above the list asserted the opposite reading of the same precedence. The catch-all is first now and every path with its own policy has a rule after it — `/_next/static` (immutable, verified on the wire), `/embed.js` (3600), `/community/rss.xml`, `/api/brand/*`, `/og/*` (3600 each) — while `/_next/image` documents the optimizer's own `max-age=14400, must-revalidate`, which a config rule does not override. Guarded: the harness reads `CACHE_RULES` out of the module `next.config.ts` imports, asks for every rule over HTTP (7/7 match), and fails if the catch-all stops being first — which is the bug, and no header comparison can see it if the order flips back |
| 523 | Four claims about the harness that the harness did not back | The audit turned on the site's own promises about itself. `/quality/aria`'s manual checklist said "the demo harness checks that each scene declares a reduced-motion branch" — nothing read the scenes for it, and **63 of the 102 scenes that animate name no reduced-motion branch at all**; the same page said "the three scenes that handle `prefers-reduced-motion` are tested by the demo harness in the same sense — markup and state, not a real key press" — the count was stale by an order of magnitude (39, not three) and none of them were tested. That page's whole argument is that its automated half is real, so the fix measures instead of asserting: a new `src/lib/motion-audit.ts` reads the scene modules and counts 162 scenes · 102 that animate · 39 that name the preference, the checklist item reports that count and says the other 63 are hand-only, the runtime sentence reports the same numbers, and `check:demos` reads the module three ways — its scene count against the loader keys, a floor of 39 so the number can only rise, and the served `/quality/aria` printing the string the audit measured, so page and harness cannot disagree. Two more sentences went the other way and were made weaker rather than stronger: "the demo harness asserts the behaviours a scene declares" is a comparison of the declared list with the catalog's list, not an assertion about code, and `/integrations` said the harness "checks that the bytes it returns are the bytes the page printed" — it fetches every endpoint and parses both served scripts, but the page comparisons are five specific ones (token colours present, the print block present, the catalog against /quality's counted total, the feed against the entry list, each badge against its stored score). Both sentences and the harness's own docstring now name what happens. `/perf/caching`'s "the same two checks" became the thing the gate actually does: compare every served header with the documented rules. The demo guard's header also said "nine modules" for the ten the split produced |
| 524 | The recorded numbers on /perf/chunks had lost their labels, and one was a typed-in literal | `SplitPanel` shows a before/after pair measured on real builds, and the panel printed neither build's name — while `/quality/speed` prints the same pair with `batch 55 (commit 1fb5142) → batch 60` beside it, and the changelog entry for the same improvement quotes a third figure (427.6 KB) from its own build. The numbers are all honest measurements; the page just did not say which builds they came from, so a reader could not reconcile them. The literal was worse: the panel said `keyframes.tsx (41 lines)` and the file has been 40 lines since the batch that touched it. Both fixed at the source — `MEASURED.keyframesLines` is the count and the panel prints it, the panel's stat and code block name `${before.build}` and `${after.build}`, and the note now says the 7,416-line single demo file and the 80 routes are records of that build rather than the current layout. `check:exports` gained two checks: the file's real line count must equal the number on the page, and the served panel must print both build labels. Verified by lowering the constant to 39 and watching the gate fail |
| 525 | 32 scenes drove motion from JavaScript and none of them asked about reduced motion | The 100-suggestion bank opened with the 63 animating scenes the batch-91 audit had found without a branch. Measuring them properly changed the number and the rule. `globals.css` already collapses every CSS animation and transition under `prefers-reduced-motion: reduce`, and the built stylesheet carries it — so the 88 scenes whose motion is a class or an inline `animation:` were always covered without naming anything, and demanding a literal from them would have been ceremony. What was not covered is the motion JavaScript writes itself, where a media query has no say: **32 scenes** drive values from `requestAnimationFrame`, `setInterval`, an `IntersectionObserver` or a scroll/pointer listener, and **all 32 ran at full speed for a reader who had asked for less**. Three of them were caught by the stricter rule rather than the old one: `TocSpine`, `StickySubNav` and `BackToTop` (plus `ReadingDots`) call `scrollTo({ behavior: 'smooth' })`, which overrides the stylesheet's `scroll-behavior: auto`, so smooth scrolling was unswitchable. `TextCycle` was worse than unguarded: its own caption read "reduced-motion safe" while a 2.6s interval rotated the headline for everyone. The fix is one shared `useSceneMotion()` in scene-kit.tsx (plus `useReducedMotion()`), each of the 32 scenes deriving a still version of itself rather than writing state from an effect — count-ups print their final numbers, the odometer shows its target, the scramble never reshuffles, the upload jumps to done, the three scroll jumps land instantly, and the two countdowns keep ticking because a stopped clock is wrong information rather than calm information. `motion-audit.ts` was rewritten to classify CSS-covered versus JS-driven and to report the token that made a scene count, `/quality/aria` prints the split (88 through CSS · 32 from JavaScript) and both harnesses read the same module |
| 526 | Two families of dated records had no feed, and one indexable page was linked from nowhere | Three text surfaces on this site publish a feed and two did not: **/learn/feed.xml** (60 dated guides, the largest unsubscribable family) and **/changelog/feed.xml** (13 entries whose only feed was the export copy at `/api/exports/changelog.xml`, which cannot link an entry's permalink because it is generated without the slug helper). Both now exist, both are built from their own data at request time with the origin taken from the request, and both carry the same `public, max-age=0, s-maxage=3600` policy as the catalog feed — including the two cache rules the config needs so the catch-all does not win for them. Separately, **/digest/copy-of-the-week** had a canonical and a title and was referenced from zero pages: `/` and `/digest` both returned nothing for it, so a finished, designed page was unreachable by any route a reader could take. `/digest` now links it in the sentence that explains what it is, and **/sitemap** exists as the same list as the XML for a person, importing `sitemap()` so the two cannot disagree (383 URLs, grouped by the site's own path structure, with the 8 excluded surfaces printed at the end). The batch-92 ratchet caught this batch's own drift while it was being written: editing the `keyframes.tsx` header changed the file from 40 lines to 42, and `check:exports` failed on the number the page prints until `MEASURED.keyframesLines` followed the file — which is the whole point of recording it |
| 527 | Four hundred and seventy-three links and four sentences, none of them checked | Two halves of the same problem: prose that promises automation, and a register nobody could verify. The claim map (`src/lib/claim-map.ts`) lists every sentence on the site that says the harness does something, with the check that backs it, and `check:exports` fails three ways — a mapped sentence that no longer exists, a mapped check no harness announces, and a file that claims automation with no entry at all. The first version of the pattern listed verbs (`checks|fails|reads|…`) and a planted sentence using "the harness verifies" sailed through it, which is the same mistake the map exists to prevent; the pattern is now the noun. The ledger itself had never been checked: 473 route links across the two registers collapse to 336 distinct routes and every one of them answers 200, which is now a gate rather than a hope. Two smaller rules came with it — a rendered file line count may not be a literal (the batch-92 bug, generalised), and `npm run check:all` runs the four suites in one command and records their wall times to `docs/check-report.json` so a suite that quietly triples is noticed. Both new gates were verified failing before landing: a planted `the harness verifies…` sentence fails the map, and restoring `keyframes.tsx (42 lines)` as a literal fails the count rule |
| 528 | The site had nowhere to say what it cannot do | Two pages existed for the audit's successes and none for its absences. **/gaps** gathers both registers: the six infrastructure-blocked bets, derived from `BETS` so a bet that goes live leaves the page in the same commit, and eight environment-blocked numbers — a real Lighthouse score, a second measurement series, field vitals, audience counts, the CodeSandbox deep link, a live domain, absolute-URL round trips from the harness, and a browser-run accessibility session — each with what it needs and what exists instead. **/accessibility** is the statement the site never had, and it is deliberately not `/quality/aria`: that page is the engineer's record of every rule and finding, this one answers the four questions a reader has, including the uncomfortable one — all seven manual checks are named and the page states that none has been run in a browser by this project. Both are in the footer, in the sitemap, and gated against the data they render. Writing them proved the new gates work: the claim map caught `/gaps` for saying "the harness" with no entry (`185 passed, 3 failed`), the broken-link gate caught a link to `/quality/gates`, which is a suggestion here and not a page yet, and the 200-character description rule caught `/gaps` at 201. The bet-title comparison also exposed a gate bug — React writes `&` as `&amp;`, so a title match on raw HTML text fails for the one bet with an ampersand in its name, and the check decodes entities now rather than comparing escaped text |
| 529 | The thumbnail poster was a landing page printed on a postcard | Reported as text that had become noise, and the count agrees: every card on /prompts composed about fourteen text elements into 390 by 244 pixels — a faux navbar with a logo, three links and a call to action, a 30px `font-black` white headline with a drop shadow, an 8px sub-line, two buttons, up to four block chips, a stack list and two badges. The headline is an industry sample, not the prompt, so at card size the loudest thing in the box was also the least useful. `PromptPoster` now renders two compositions from one component. The thumbnail keeps the ambient scene, the fidelity badge and one anchored block — accent rule, kicker, two 14px truncated title lines — and the wide hero on `/prompts/[slug]` keeps the whole faux landing page. Two things turned up on the way. The scaffold was in the markup of all 74 thumbnails, `hidden` behind a class: hidden is not absent, so it is rendered conditionally now, and /prompts went from 506.8 KB of HTML to 279.5 KB. And the poster carried the card link's accessible name: a screen reader got "Poster scene mounts on scroll Verified 89 avg fidelity · concept render FINTECH / TRUST Security you can actually read Open prompt" before the prompt's own title. The poster is `aria-hidden` now — it is a concept render, not content — and the status pill that moved out of the picture into the card body is real text — deliberately not hidden, since with the poster hidden it is the only place a screen reader can learn the status — so a card link reads "Open prompt AI tool landing with terminal motif technical, confident Featured Next.js HTML 93 /100 · 3 runs". Verified against the running build: 0 occurrences of the navbar links and 0 of "See it live" on /prompts, 1 each on a prompt detail page. Reading the accessibility tree out of rendered HTML turned out to be its own trap — two hand-rolled strippers reported a name that was both too long and too short, because one glued the skipped subtree back on at the next closing tag and the other decremented its skip counter on any end tag, not the matching one. The number above comes from a depth-tracking parse of the served HTML. Gates green |
| 530 | An index of the gates, generated from the gates | Four suites, 193 passing checks, and no page that listed them, so "gated in CI" was a sentence a reader had to take on faith. **/quality/gates** is built from the sources rather than typed: the names and the conditions come from the `ok(…)` calls in the two scripts, parsed at request time, so renaming a check changes the page in the same commit; the accessibility rules come from `MARKUP_CHECKS`, which is already the list of failures they prevent; and the pass counts come from the last recorded run in `docs/check-report.json`. The column nobody could derive from a script was the one the suggestion asked for by name — the batch that added each check — so `npm run gates:index` writes a `git blame` index of every `ok(…)` line into a checked-in file, keyed by check name rather than line number, so inserting a check above another one does not rewrite it. `check:exports` re-derives that index and fails when it is stale, which is the only thing that keeps a generated file true. The page also prints what it cannot show: the 11 names that are composed at run time (a check inside a loop prints one name per route, shown here as `…` and tagged runs per item), the fact that the condition column is code rather than prose because only the 12 markup rules ship a sentence about the failure, that a blame commit is the last edit rather than the first idea, and the 7 manual checks that no command runs. Two of those claims are in the claim map, so the sentence promising the freshness gate cannot outlive the gate. Writing it turned up its own bug: the check that the page prints its derived counts matched text across tag boundaries until it stripped them first — and then a check named `<slug>` would have been stripped as markup, so the tags come off before entities are decoded, not after |

---

## 1. Component library — 70 ideas ✅ complete (70/70 shipped · catalog 39 → 107)

### Form & input elements
- **Combo box** ✅ (`combo-box`): text input with a live-filtered option list, keyboard navigation and a "no matches" row — slots into every filter on the site.
- **Odometer counter** ✅ (`odometer-counter`): rolling digit wheels for numbers (price tickers, followers) — complements the existing count-up scenes with mechanical charm.
- **Star rating input** ✅ (`star-rating`): five-star interactive picker with half-star precision and a clear-selection reset.
- **Tag input** ✅ (`tag-input`): type a word, press Enter, it becomes a chip; backspace removes the last chip (like the admin quick-add but reusable).
- **Slider with live ticks** ✅ (`slider-ticks`): range slider that shows min/max labels and a floating value bubble while dragging.
- **Checkbox card** ✅ (`checkbox-card`): an entire option card that is selectable, with checkmark that draws in — for pricing/plan pickers.
- **Quantity stepper** ✅ (`quantity-stepper`): − / + stepper with long-press repeat, used by cart rows and ticket seats.
- **Radio pills with focus ring** ✅ (`radio-pills`): keyboard-first segmented radios that announce the checked option.
- **Textarea auto-grow** ✅ (`auto-grow-textarea`): a textarea that expands as you type with a subtle char budget meter.
- **Date presets picker** ✅ (`date-presets`): Today / 7d / 30d / custom pill row for dashboards.
- **File drop zone** ✅ (`file-drop-zone`): drag-and-drop surface with a dash-bordered highlight state and honest progress.
- **Toggle with label stack** ✅ (`toggle-label-stack`): themeable iOS-style switch that ships with a labels-and-description row.
- **Password strength meter** ✅ (`password-strength`): input that grades a passphrase with animated segments.
- **Button with embedded menu** ✅ (`split-button-menu`): a primary button whose right half opens a dropdown of secondary actions.
- **Slug input transform** ✅ (`slug-field`): writes a URL slug live from a title field (title → kebab-case), folds the Latin marks it knows and reports what it cannot fold.

### Navigation & layout atoms
- **Command palette** ✅ (`command-palette`): ⌘K overlay that searches library, prompts, guides and admin routes in one fuzzy list.
- **Breadcrumb trail** ✅ (`breadcrumb-trail`): separator-aware breadcrumbs with a collapsing "…" on mobile.
- **Pagination with ellipsis** ✅ (`pagination-ellipsis`): page buttons that compress to "… 8 9 10" and keep the active page centred.
- **Table of contents spine** ✅ (`toc-spine`): sticky right rail that highlights the section in view and smooth-scrolls.
- **Tabs with indicator** ✅ (`tabs-indicator`): animated underline/slide that follows the active tab width.
- **Sticky section nav (sub-nav)** ✅ (`sticky-subnav`): second-row tabs that pin under the header on long docs.
- **Back-to-top comet** ✅ (`back-to-top`): a floating action that appears after 2 viewports and eases you up.
- **Disclosure list (accordion rows)** ✅ (`disclosure-list`): FAQ rows with plus→minus rotation, one-open-at-a-time mode.
- **Fullscreen overlay menu** ✅ (`fullscreen-overlay-menu`): a tasteful takeover nav with staggered link entrance.

### Feedback, status & loaders
- **Skeleton profile card** ✅ (`skeleton-card`): shimmering placeholders for avatars + lines, then content swaps in.
- **Toast queue** ✅ (`toast-stack` v1.1): stacked notifications that enter right, auto-dismiss with countdown bars and an undo action, capped at three on screen.
- **Inline status banner** ✅ (`status-banner`): four dismissible tone rows — success/error/warning/info — that announce politely.
- **Spinner with status text** ✅ (`spinner-status`): loader that swaps label ("Saving… → Saved ✓") without layout shift.
- **Empty-state trio** ✅ (`empty-state-trio`): the Learn essay pattern as three copyable cards (illustration, verb headline, escape hatch).
- **Offline indicator** ✅ (`offline-indicator`): a banner that appears on `online/offline` events with a reconnect pulse.
- **Error boundary card** ✅ (`error-boundary-card`): friendly fallback with retry, "copy error report" and expandable details.
- **Confetti burst** ✅ (`confetti-burst`): a tasteful celebratory burst (toggled, never autoplay) for "shipped!" moments.
- **Dot leader loading** ✅ (`dot-leader-loading`): terminal-style "installing…" with animated dots for CLI-adjacent pages.
- **Live region demo** ✅ (`live-region-demo`): a hidden-but-announced status that shows how to update screen readers politely.

### Animated signature pieces
- **Liquid button hover** ✅ (`liquid-button-hover`): a filled blob that starts from your cursor and washes across on hover.
- **Magnetic icon row** ✅ (`magnetic-icon-row`): social icons that lean toward the cursor within a radius.
- **Scroll-linked hue hero** ✅ (`scroll-linked-hue-hero`): a section whose background hue shifts as you scroll.
- **Staggered list entrance** ✅ (`staggered-list-entrance`): rows that fade-slide in sequence when scrolled into view.
- **Shuffle/ken-burns gallery** ✅ (`shuffle-kenburns-gallery`): frames that slowly zoom-pan between shots with crossfade.
- **Particle trail hero** ✅ (`particle-trail-hero`): pointer-following sparkles with a perf tier toggle.
- **Ink-stamp appear** ✅ (`ink-stamp-appear`): a title that appears with a quick scale+rotate "stamp" easing.
- **Gradient border flow** ✅ (`gradient-border-flow`): border that slowly rotates a conic gradient around a card.
- **Ripple reveal** ✅ (`ripple-reveal`): click-anywhere ripple on cards/buttons (ink line or halo glow).
- **Parallax layered scene** ✅ (`parallax-layered-scene`): two-layer mouse parallax with a CSS-drift fallback for touch.
- **Scroll vignette** ✅ (`scroll-vignette`): page edges darken as you scroll long content (reading-mode cue).
- **Word-by-word highlight** ✅ (`word-by-word-highlight`): headline words brighten in sequence as a script "reads" them.
- **Shake-on-error field** ✅ (`shake-on-error-field`): the classic inline validation shake, kept subtle and reduced-motion-aware.

### Sections
- **Bento feature grid** ✅ (`bento-feature-grid`): asymmetric feature tiles with an interactive centrepiece.
- **Logo wall with hover pop** ✅ (`logo-wall-hover-pop`): sponsor logos that lift and colourise on hover.
- **Testimonial marquee row** ✅ (`testimonial-marquee`): the classic dual-row counter-scroll, pausable on hover.
- **Pricing table (three plans)** ✅ (`pricing-table-three`): feature comparison with a "most popular" glow and toggle.
- **Stats band** ✅ (`stats-band`): headline metrics with count-up-once numbers and per-stat footnotes.
- **Team grid with roles filter** ✅ (`team-grid-filter`): filterable people grid with role chips.
- **FAQ two-column** ✅ (`faq-two-column`): question list left, answer panel right with animated swap.
- **Comparison slider (before/after)** ✅ (`comparison-slider`): draggable divider over two visuals.
- **Timeline (vertical)** ✅ (`timeline-vertical`): milestone rail with breathing cards and gradient spine.
- **Newsletter band with tiers** ✅ (`newsletter-band-tiers`): email capture with frequency choice pills.
- **Hero with product mock frame** ✅ (`hero-product-mock`): a browser-chrome frame containing a mini dashboard.
- **Split feature rows** ✅ (`split-feature-rows`): image/text alternating rows with scroll-fade and hover zoom on the art.
- **Case-study header** ✅ (`case-study-header`): client, role, year, stack as a labelled grid under a big title.
- **Changelog feed** ✅ (`changelog-feed`): the "Ship log" pattern extracted as a reusable section with version chips.
- **Resource/download cards** ✅ (`resource-download-cards`): card rows with format badges (PDF, ZIP, Figma) and size.
- **Event schedule list** ✅ (`event-schedule-list`): date-sticky list with session cards.
- **Map-free local band** ✅ (`map-free-local-band`): offices/where-we-work cards with live local time, no map script.
- **App screenshot tour** ✅ (`app-screenshot-tour`): sticky phone frame whose screen swaps with captions.

### Templates (whole pages)
- **Docs site template** ✅ (`template-docs-site`): sidebar TOC + content + prev/next footer, assembled from library sections.
- **Landing page template (dark SaaS)** ✅ (`template-landing-saas`): hero + logos + features + pricing + FAQ + CTA.
- **Waitlist template** ✅ (`template-waitlist`): hero with countdown and referral-style invite box.
- **Changelog/journal template** ✅ (`template-changelog`): date index pages for release notes and essays.
- **Template gallery page** ✅ (`template-gallery`): filters + preview tiles + copy-slug "use this" actions.

---

## 2. Backgrounds & textures ✅ complete (8 → 33; 33/33 live)

- **Topographic contour lines** ✅ (`topographic-contours`): SVG contour map motif with a quiet animated current.
- **Blueprint grid** ✅ (`blueprint-grid`): engineering-paper grid with crosshairs for architecture/atelier vibes.
- **Confetti field** ✅ (`confetti-field`): slow-falling confetti with two DOM-capped perf tiers.
- **Bokeh depth field** ✅ (`bokeh-depth-field`): large blurred circles drifting at different speeds/layers.
- **Glass shards** ✅ (`glass-shards`): angled translucent panes that catch light as they float.
- **Lava lamp blobs** ✅ (`lava-lamp-blobs`): two slow-morphing colour blobs on a dark base with rising bubbles.
- **Paper grain close-up** ✅ (`paper-grain`): heavy photographic grain with a film jitter for editorial/print sections.
- **Silk wave** ✅ (`silk-wave`): layered sine waves in brand hues with a slow hue-shift.
- **Star field with parallax** ✅ (`star-field-parallax`): three depth layers of stars leaning with the pointer.
- **Scanline CRT** ✅ (`scanline-crt`): subtle scanlines + vignette for retro/terminal aesthetics.
- **Liquid gradient mesh** ✅ (`liquid-mesh`): a slow-moving mesh gradient with `background-position` animation.
- **Dot matrix pattern** ✅ (`dot-matrix`): themeable halftone dots with size/opacity controls.
- **Brushed metal sheen** ✅ (`brushed-metal`): subtle diagonal light streaks for premium product pages.
- **Carbon fibre weave** ✅ (`carbon-fibre`): quiet repeating weave for dashboards/tech.
- **Water ripple ring** ✅ (`water-ripple`): expanding rings from a point, mouse-triggered.
- **Ink on wet paper** ✅ (`ink-bloom`): soft radial ink blooms that pulse gently.
- **Aurora band** ✅ (`aurora-band`): horizontal aurora ribbons instead of the current radial version.
- **Noise storm** ✅ (`noise-storm`): animated TV-static grain at 3–5% opacity with a flicker toggle.
- **Glass distortion** ✅ (`glass-distortion`): a real backdrop-blur refraction demo over moving colour fields.
- **Ember rise** ✅ (`ember-rise`): tiny rising embers for fireplace/retro vibes.
- **Checkerboard fade** ✅ (`checkerboard-fade`): an engineering checker that fades to transparent diagonally.
- **Plaid weave** ✅ (`plaid-weave`): warm plaid texture for lifestyle brands.
- **Halftone burst** ✅ (`halftone-burst`): radial halftone from a focal point for poster moments.
- **Cloud layer drift** ✅ (`cloud-drift`): soft translucent cloud bands drifting horizontally.
- **Sunset horizon strip** ✅ (`sunset-horizon`): a two-stop gradient with a light-source dot that drifts.

---

## 3. Prompt library — 50 next prompts across industries (24 → 74; 74 shipped so far) ✅ complete

### Growth industries
- **SaaS onboarding flow prompt** ✅ (`saas-activation-onboarding`): signup → plan → invite → success, in one prompt.
- **Dev-tool API reference prompt** ✅ (`devtool-api-reference`): docs site with request/response cards and try-it pane.
- **Crypto/fintech dashboard prompt** ✅ (`fintech-portfolio-dashboard`): data-dense but calm, candlestick-free chart honesty.
- **Creator newsletter landing prompt** ✅ (`creator-newsletter-landing`): subscribe wall with archive proof.
- **Web3 marketplace prompt** ✅ (`web3-marketplace-drop`): collection grid + mint steps, restrained glow.

### Retail & commerce
- **Perfume house prompt** ✅ (`perfume-house-editorial`): scent-notes accordion, editorial full-bleed.
- **Watch atelier prompt** ✅ (`watch-atelier-precision`): precision macro shots, movement cutaway diagrams.
- **Flower studio prompt** ✅ (`flower-studio-same-day`): seasonal bouquets with a same-day delivery band.
- **Furniture maker prompt** ✅ (`furniture-maker-joinery`): joinery close-ups, finish swatches, lead-time honesty.
- **Streetwear capsule prompt** ✅ (`streetwear-capsule-drop`): drop calendar, size-run honesty, lookbook marquee.
- **Skincare clinic prompt** ✅ (`skincare-clinic-treatments`): treatments menu with practitioner names.
- **Coffee roaster prompt** ✅ (`coffee-roaster-origin`): origin map, roast-level meter, brew guides.

### Hospitality & local
- **Boutique hotel prompt** ✅ (`boutique-hotel-amenities`): room gallery with real-amenity chips.
- **Craft brewery taproom prompt** ✅ (`brewery-taproom-taps`): tap list with ABV meter and food-pairing rows.
- **Bike shop prompt** ✅ (`bike-shop-service-tiers`): service tiers with turnaround honesty.
- **Yoga studio prompt** ✅ (`yoga-studio-first-class`): class schedule with teacher bios and first-class invite.
- **Dog-walking service prompt** ✅ (`dog-walking-service-trust`): GPS-route visuals, insured badges, sitter faces.
- **Bookshop café prompt** ✅ (`bookshop-cafe-staff-picks`): staff picks shelf and events calendar.

### Professional services
- **Accounting firm prompt** ✅ (`accounting-firm-plain-language`): services explained in plain language with fee cards.
- **Recruiting studio prompt** ✅ (`recruiting-studio-culture`): open roles, culture evidence, referral promise.
- **Industrial design firm prompt** ✅ (`industrial-design-process`): process photos, material library, ISO mentions.
- **Coaching practice prompt** ✅ (`coaching-practice-outcomes`): outcome stories, method steps, session formats.
- **Translation agency prompt** ✅ (`translation-agency-pairs`): language pairs, quality checks, quote form.
- **Interior design studio prompt** ✅ (`interior-design-studio-before-after`): before/after slider, style quiz teaser.
- **Financial advisor prompt** ✅ (`financial-advisor-fiduciary`): fiduciary language, fee schedule, meeting booking.

### Media, arts & events
- **Literary agency prompt** ✅ (`literary-agency-submissions`): submissions policy, authors list, representation FAQ.
- **Record label prompt** ✅ (`record-label-release-calendar`): release calendar, artist roster cards, press kit section.
- **Community theatre prompt** ✅ (`community-theatre-season`): season lineup, ticket tiers, volunteer call.
- **Design conference prompt** ✅ (`design-conference-schedule`): speaker grid, schedule by track, travel tips.
- **Food hall prompt** ✅ (`food-hall-vendor-map`): vendor map, dietary icons, opening hours.
- **Birding club prompt** ✅ (`birding-club-sighting-log`): sighting log, field-guide resources, trip signups.
- **Photography workshop prompt** ✅ (`photography-workshop-curriculum`): curriculum, dates, portfolio expectations.

### Technology & maker
- **Open-source project prompt** ✅ (`open-source-project-readme-site`): README-as-website with good-first-issue links.
- **Game jam team prompt** ✅ (`game-jam-team-weekend`): tools, roles, weekend timeline.
- **AI tool directory prompt** ✅ (`ai-tool-directory-tested`): curated list with "tested" badges like Motif's own.
- **Civic tech project prompt** ✅ (`civic-tech-transparency`): transparency metrics, city-partner logos.
- **Robotics lab prompt** ✅ (`robotics-lab-research`): research highlights, video lab notes.

### Health, education & lifestyle
- **Counselling directory prompt** ✅ (`counselling-directory-specialisms`): therapist cards by specialism with availability.
- **Nutrition coaching prompt** ✅ (`nutrition-coaching-sample-week`): sample week, no-shame copy, cancellation policy.
- **Language school prompt** ✅ (`language-school-level-paths`): level paths, teacher accents map, trial lesson.
- **Kids' coding club prompt** ✅ (`kids-coding-club-term`): term calendar, parent FAQ, showcase projects.
- **Ceramics studio prompt** ✅ (`ceramics-studio-kiln-schedule`): kiln-schedule, class tiers, gallery of student work.
- **Plant nursery prompt** ✅ (`plant-nursery-care-guides`): care guides per species, delivery windows.
- **Slow-travel agency prompt** ✅ (`slow-travel-agency-routes`): itineraries, local-host notes, carbon honesty.

### Prompt-form experiments (any industry)
- **Dark-mode-first prompt variant** ✅ (`dark-mode-first-page`): same brief, delivered for dark surfaces.
- **Whitespace-maximal prompt** ✅ (`whitespace-maximal-page`): ≤ 3 colours, one typeface, no gradients.
- **Print-inspired web prompt** ✅ (`print-inspired-editorial`): editorial layout that works like a magazine spread.
- **A11y-strict prompt** ✅ (`accessibility-strict-page`): WCAG AA as a hard requirement list in the brief.
- **Multi-language prompt** ✅ (`multilanguage-i18n-page`): the same page brief in three languages with i18n notes.
- **Motion-spec prompt** ✅ (`motion-spec-only`): a prompt that *only* ships the animation spec, no layout.


---

## 4. Learn — 50 more essays & formats (currently 10 → 60 live) ✅ complete

### Motion & animation theory
- **Easing cheatsheet deep-dive** ✅ (`easing-cheatsheet-deep-dive`): compare the 8 named curves side-by-side with the Lab embeds.
- **Springs are not easings** ✅ (`springs-are-not-easings`): when to reach for spring physics instead of cubic-bezier.
- **The choreography question** ✅ (`choreography-question`): is this motion telling the story or decorating it?
- **Micro-interactions that pay rent** ✅ (`micro-interactions-pay-rent`): 20 tiny motions with a measurable UX job.
- **Will-change is a promise** ✅ (`will-change-is-a-promise`): when it helps, when it leaks memory, how to clean up.
- **Why 60fps feels like 24fps** ✅ (`why-60fps-feels-like-24fps`): perceived smoothness, frame pacing and jank perception.
- **Animating on the GPU without asking** ✅ (`gpu-animating-without-asking`): transform/opacity and the compositor explained plainly.
- **Scroll speed is a type choice** ✅ (`scroll-speed-is-a-type-choice`): mapping reading rhythm to reveal timing.
- **The 200ms click window** ✅ (`the-200ms-click-window`): how click-to-action motion shapes perceived latency.
- **Reduced motion beyond the switch** ✅ (`reduced-motion-beyond-the-switch`): designing a second, calmer experience not a stripped one.

### Craft & CSS
- **Glass, part two** ✅ (`glass-part-two-when-glass-belongs`): when glass belongs over photography vs. flat colour.
- **Shadow discipline** ✅ (`shadow-discipline`): layer counts, elevation scales, and when not to glow.
- **Grid systems that don't shout** ✅ (`grid-systems-that-dont-shout`): layout rhythm without 12-column anxiety.
- **Fluid type without magic numbers** ✅ (`fluid-type-without-magic-numbers`): clamp() math you can explain in a tweet.
- **CSS nesting now** ✅ (`css-nesting-now`): writing cleaner cascade with native nesting.
- **Container queries cookbook** ✅ (`container-queries-cookbook`): component-first responsive that isn't viewport-sized.
- **has() is finally useful** ✅ (`has-is-finally-useful`): three parent-selector patterns that survive production.
- **scroll-timeline, honestly** ✅ (`scroll-timeline-honestly`): what scroll-driven animations can and can't do today.
- **In defence of the button** ✅ (`in-defence-of-the-button`): states, semantics and the one you always forget.
- **Colour contrast you can compute** ✅ (`colour-contrast-you-can-compute`): relative luminance without the calculator.

### Prompt engineering for websites
- **Writing a brief the model can't ignore** ✅ (`brief-the-model-cant-ignore`): anatomy of Motif's own prompt format.
- **The retry loop** ✅ (`the-retry-loop`): what to change between run 1 and run 2 when fidelity is 84.
- **One palette, three moods** ✅ (`one-palette-three-moods`): how prompt colour direction phrases change output.
- **When to say "no gradients" in a prompt** ✅ (`when-to-say-no-gradients-in-a-prompt`): and when it backfires.
- **Model personality drift** ✅ (`model-personality-drift`): same prompt on three models — what actually differs.
- **Design tokens inside prompts** ✅ (`design-tokens-inside-prompts`): making output restyleable after generation.
- **Prompting for reduced motion** ✅ (`prompting-for-reduced-motion`): baking a11y constraints into the brief.
- **From prompt to component** ✅ (`from-prompt-to-component`): turning a great generated page into library assets.
- **The 5-line prompt myth** ✅ (`the-five-line-prompt-myth`): short vs. long briefs, evidence from the run logs.
- **Fidelity is a claim** ✅ (`fidelity-is-a-claim`): how Motif scores runs and why screenshots aren't proof.

### Accessibility & inclusive design
- **The keyboard walk** ✅ (`the-keyboard-walk`): audit a page with Tab only and find the traps.
- **Screen-reader poetry** ✅ (`screen-reader-poetry`): writing alt text and labels that respect attention.
- **Focus order is layout** ✅ (`focus-order-is-layout`): why DOM order beats visual order.
- **Contrast on brand colours** ✅ (`contrast-on-brand-colours`): keeping personality inside AA.
- **Touch targets beyond 44px** ✅ (`touch-targets-beyond-44px`): thumbs, gloves and the real minimum.
- **Autoplay is a decision** ✅ (`autoplay-is-a-decision`): motion, sound and the users it excludes.
- **Designing for cognitive load** ✅ (`designing-for-cognitive-load`): chunking, defaults and forgiving forms.
- **Forms that fail kindly** ✅ (`forms-that-fail-kindly`): inline errors, retries and undo.
- **The invisible header** ✅ (`the-invisible-header`): landmarks, headings and why structure is design.
- **Testing with one hand** ✅ (`testing-with-one-hand`): mobile-first accessibility without a device lab.

### Career, process & industry
- **Building a personal UI library** ✅ (`building-a-personal-ui-library`): lessons from Motif for your own site.
- **Copy-paste guilt is a feature** ✅ (`copy-paste-guilt-is-a-feature`): why stealing good patterns is how craft spreads.
- **Designing in the open** ✅ (`designing-in-the-open`): shipping a changelog people actually read.
- **The first 90 days of a content site** ✅ (`first-90-days-of-a-content-site`): what Motif would do differently.
- **Performance budgets for solo builders** ✅ (`performance-budgets-for-solo-builders`): the 200ms/60fps contract without a team.
- **Portfolio pieces that get you hired** ✅ (`portfolio-pieces-that-get-you-hired`): motion specs that interview well.
- **Freemium that isn't a lie** ✅ (`freemium-that-isnt-a-lie`): where to draw the free/pro line honestly.
- **Animated storytelling for non-profits** ✅ (`animated-storytelling-for-nonprofits`): emotion with ethics.
- **Dark mode is a design system** ✅ (`dark-mode-is-a-design-system`): not a filter, a second system.
- **Naming is design** ✅ (`naming-is-design`): component names that make APIs feel inevitable.

---

## 5. Lab tools — 20 additions (currently 8) ✅ complete — all 20 additions live on /lab

- **Timing-chart composer** ✅ (`timing-composer`): visually author a keyframe timeline (enter/dwell/exit) and export CSS.
- **Stagger calculator** ✅ (`stagger-calculator`): input N items and read the per-item delay offsets for a wave.
- **Background-position painter** ✅ (`bg-position-painter`): drag gradient stops on a canvas and export CSS.
- **Text-animation lab** ✅ (`text-animation-lab`): pick scramble/typewriter/wipe on your copy and compare.
- **Colour-ramp checker** ✅ (`colour-ramp-checker`): build an accessible ramp with AA/AAA markers per step.
- **Border-radius playground** ✅ (`radius-playground`): asymmetric radii with live preview and Tailwind output.
- **Shadow stacker** ✅ (`shadow-stacker`): add shadow layers, tune blur/spread, export a layered value.
- **Filter (blur/brightness) lab** ✅ (`filter-lab`): live single-filter previews on a test image.
- **Hue-shift simulator** ✅ (`hue-shift-simulator`): preview brand hue rotation across surfaces.
- **Breakpoint inspector** ✅ (`breakpoint-inspector`): resize a component demo through container widths.
- **Motion-preference preview** ✅ (`motion-preference-preview`): toggle reduced-motion and watch scenes adapt.
- **Export clipboard** ✅ (`export-clipboard`): one-click "copy Tailwind / CSS / React" from any lab.
- **Perf meter** ✅ (`perf-meter`): each lab shows a paint/transform badge and estimated cost.
- **URL state for labs** ✅ (`url-state-labs`): shareable lab configurations via query params.
- **Favourite recipes** ✅ (`favourite-recipes`): save tuned outputs to localStorage with names.
- **Random inspiration button** ✅ (`random-inspiration`): shuffle presets when the blank canvas stares back.
- **Typing-speed meter** ✅ (`typing-speed-meter`): calibrate the typewriter demo to your copy length.
- **Icon line-weight lab** ✅ (`icon-line-weight-lab`): stroke width/roundness adjustments across the icon set.
- **Logo-drift preview** ✅ (`logo-drift-preview`): preview logo animation ideas with safe-zone guides.
- **Diff viewer** ✅ (`diff-viewer`): paste two gradient/easing exports side by side and compare frames.

---

## 6. Detail pages — 30 ways to make every asset a course (currently: preview + code + notes) ✅ complete — course rail live on every component detail page

- **Variant gallery** ✅ (`variant-gallery`): 3–5 rendered variants per component (tone, density, accent) as live mini-stages.
- **Prop explorer** ✅ (live controls beside the playground on every detail page): every prop as a live control.
- **Playground on the detail page** ✅ (embedded above the code with ambience + prop controls): the asset's Lab controls embedded above the code, not just linked.
- **Copy-format tabs** ✅ (React / HTML+CSS / Vue SFC): views of the same snippet with dependency badges.
- **Usage recipe** ✅ (`usage-recipe`): a 90-second "where this fits" story, not just "why/skip" bullets.
- **Composition map** ✅ (`composition-map`): which library assets combine well with this one (auto-suggested links).
- **Theming example** ✅ (`theming-example`): same component re-skinned in two token themes side-by-side.
- **Sizing system** ✅ (`sizing-system`): 3 text/layout densities with code for each.
- **Performance note per asset** ✅ (`perf-note`): paint cost, bundle estimate, and the cheaper alternative.
- **a11y report card** ✅ (audit report, per-check fixes): what the automated audit checks for this asset, with fixes.
- **Browser support strip** ✅ (`browser-support`): which modern features it needs (backdrop-filter, view-timeline…).
- **Reduced-motion fallback note** ✅ (`reduced-motion-note`): what the asset does when motion is off.
- **Keyboard walk demo** ✅ (`keyboard-walk`): pressable step-through of the component's focus flow.
- **Related Learn essays** ✅ (in `composition-map`): the guides that teach the technique behind this asset.
- **Inspiration context** ✅ (`inspiration-context`): one original micro-case of the pattern in the wild (written, not screenshotted).
- **Changelog per asset** ✅ (`asset-changelog`): every version of this component with what changed and why.
- **Copy history count** ✅ (`copy-history`): "copied 2.1k times" with a sparkline of the last 30 days.
- **Community remixes** ✅ (`community-remixes`): alternate versions of this asset submitted by users (future queue).
- **Star/favourite control** ✅ (`collect-star`): bookmark an asset into your saved list.
- **"Pairs well with prompt"** ✅ (`pairs-with-prompt`): which AI prompt would build a page containing this asset.
- **Bundled-deps disclosure** ✅ (`deps-disclosure`): exact dependency tree with sizes.
- **Export as single file** ✅ (`single-file-export`): one `.tsx` or `.html` download button.
- **Open in CodeSandbox-style sandbox** ✅ (`sandbox-open`): a real runnable copy with the library's CSS injected.
- **Tutorial transcript** ✅ (`tutorial-transcript`): if the asset ever gets a video, host the written version here.
- **Design rationale panel** ✅ ("Design notes from the studio" on every detail page): the "why we made the default the default" note.
- **Code line walk** ✅ (`code-line-walk`): annotated key lines of the snippet (why this line matters).
- **Size vs. quality trade-off slider** ✅ (`size-quality-slider`): compare the 4KB version and the 12KB "pro" version.
- **Stack-switch cost note** ✅ (`stack-switch-cost`): what changes if you take the HTML version into React.
- **Tag synonyms** ✅ (`tag-synonyms`): discoverability terms ("dropdown", "select", "picker" → same asset).
- **Sibling comparison** ✅ (`sibling-comparison`): two similar assets side-by-side with a "when to pick which" table.

---

## 7. Templates & sample builds — 15 more ✅

- **"Made with Motif" case studies** ✅ (`/samples` gallery + per-case pages): expand the three samples into full case pages (challenge → assets used → result).
- **Recipe cards on templates** ✅ (`recipe-cards`): each template shows the exact assets it composes with links.
- **Template preview iframe** ✅ (`template-preview-iframe`): render the full template inline before opening it.
- **One-click stack selector** ✅ (`stack-selector-diff`): toggle a template between React and HTML views and see the diff.
- **Template gallery filtering** ✅ (`template-gallery-filters`): filter templates by mood, stack or section count.
- **Community template submissions** ✅ (`community-submissions`): accept and moderate template builds (ties to the queue).
- **Template bundle downloads** ✅ (`template-bundle-downloads`): a zip of assets + README for offline use.
- **Time-to-build meter** ✅ (`time-to-build`): "this template assembles in ~6 copies" — honest effort cues.
- **Rebrand playbacks** ✅ (`rebrand-playback`): swap the demo template into two token themes live.
- **Case-study numbers** ✅ (`case-study-numbers`): what each sample build's page weights and how many requests.
- **Blank-canvas pack** ✅ (`blank-canvas-pack`): start-your-own template with a section checklist.
- **Section swap explorer** ✅ (`section-swap-explorer`): swap the hero/pricing section of a template to compare pairings.
- **Dark/light template twins** ✅ (`dark-light-twins`): two sample builds of the same template in both modes.
- **Template provenance tags** ✅ (`template-provenance`): original studio, date, and audit badges per template.
- **Copy entire build** ✅ (`build-spec-export`): a JSON "build spec" export you could paste into a future CLI.

---

## 8. Discovery, search & browsing — 20 refinements ✅

- **Save searches** ✅ (`/search#saved-searches`): persist recent queries as chips on /search (localStorage).
- **Search scoped by type** ✅ (`/search#scope-tabs`): tab the results into Components/Prompts/Guides before typing.
- **Fuzzy typo tolerance** ✅ (`?q=glss` finds glass): "glss" still finds glass via edit-distance matching.
- **Highlight matched terms** ✅ (`<mark>`): in result titles and descriptions.
- **Per-asset aliases** ✅ (`?q=dropdown`): search "dropdown" finds the sheet menu etc.
- **Result meta chips** ✅ (kind · stack · KB · copies): show kind, stack and size right in search rows.
- **Keyboard-first search** ✅ (↑/↓ + Enter): ↑/↓ to move, Enter to open the highlighted result.
- **URL-synced filters** ✅ (q · type · sort · stack): every kind/stack/sort filter lands in the query string for shareable links.
- **Save a component set** ✅ (`/components` → Build a stack): multi-select cards into a "stack" you can share as a build recipe.
- **Browse by collection** ✅ (`/components` → Collections): editorial lists ("Landing heroes", "Dark SaaS", "Under 5KB").
- **Counts everywhere** ✅ (search tabs · catalog chips · template moods): totals shown per filter chip, updated live (started on /components).
- **Sort by new-within-30d** ✅ (`fresh30` on catalog + search): freshness sort that weighs recency not raw date.
- **View-density toggle** ✅ (rich cards ⇄ compact rows): switch between rich cards and compact list rows on catalog pages.
- **Colour-first filter** ✅ (hue chips on catalog): pick a hue and see assets whose accent matches.
- **Zero-stack filter** ✅ (`zero-dep` chip): filter to dependency-free assets only.
- **Random asset button** ✅ (🎲 Surprise me): a curated "surprise me" that teaches breadth.
- **Shareable asset links** ✅ (`?hue=` + prop params, copy button): deep link with theme + variant state preserved.
- **Next/prev asset trail** ✅ (detail-page footer): foot-of-page navigation between catalog siblings on detail pages.
- **Discovery via Learn** ✅ (essays end with practice assets): each essay ends with assets that practice its lesson (started — widen it).
- **Weekly digest page** ✅ (`/digest` archive): "this week at Motif" as a real archive route, not only a homepage section.

---

## 9. Homepage & marketing pages — 20 upgrades ✅

- **Sticky CTA rail** ✅ (`CtaRail` bottom bar, dismiss once): a subtle bottom bar on scroll for first-time visitors.
- **Feature math section** ✅ (data-derived receipts band): copy the honesty ("every prompt has test scores") into concrete numbers.
- **Live demo leaderboard** ✅ (top 4 playing inline): homepage strip of the most-copied asset playing inline.
- **Week note** ✅ (editor's desk block): a short "editor's log" block with the changelog's human voice.
- **Real testimonials from sample builds** ✅ (quotes → /samples): link out to three made-with-Motif pages.
- **"Built in an afternoon" timeline** ✅ (animated 90-min story): an animated 90-minute build story (not a fake claim).
- **Press/kit footer** ✅ (lockup · fact sheet · palette downloads): logo lockup, fact sheet, and brand palette downloads.
- **Mission page** ✅ (`/mission` about + principles + won't-do list): a short about page explaining "original only, tested or it doesn't ship".
- **/components needs a header CTA** ✅ (action strip under header): convert the top strip from explanation to action.
- **Search empty-state on home** ✅ (popular-topic chips under hero search): if the hero search has no query yet, offer popular topics.
- **Home stats with truth links** ✅ (each hero stat links to its proof): each hero stat links to the list that proves it.
- **Interactive changelog** ✅ (expand/collapse full log): expand/collapse older entries instead of a flat list.
- **Contrast band** ✅ (differentiator rows link to their proof pages): "old way vs. Motif" (already exists) — turn the five rows into clickable case links.
- **Returning-visitor cue** ✅ (`Welcome back` since-last-visit card): subtle "back? here's what's new since last visit" via localStorage.
- **Moodboard entry point** ✅ (`/shuffle` + homepage tile): one "get inspired" tile leading to a shuffle view.
- **Pricing page anchor honesty** ✅ (`#free-forever` promise + plan anchors): compare plans with a "what stays free forever" promise block.
- **Side-by-side pricing demo** ✅ (`#side-by-side` live renders): two free/Pro component renders, not just a table.
- **Newsletter promise on every page footer** ✅ (monthly cadence, demo save): one-line capture with cadence honesty.
- **Error pages designed** ✅ (404 pre-fills search with the broken path): a 404 that routes you to search with the broken path pre-filled.
- **Localised landing copy test** ✅ (`/es` translated landing): one translated page to prove the i18n path before committing.

---

## 10. Theme Studio & design tokens — 20 upgrades — complete (20/20 shipped ✅)

- **Real token editor** ✅ (`/studio` live editor + catalog previews): edit accent/hues/radii in the Lab and see catalog-wide previews.
- **Token diff view** ✅ (+/- CSS token lines per tweak): show what changed in code when you tweak one value.
- **Palette presets** ✅ (10 hand-made themes): 10 hand-made token themes ("Monochrome", "Terminal", "Paper").
- **Accent rotation demo** ✅ (▶ live sweep of hues): sweep the whole library's accent through hues live.
- **Radius system explorer** ✅ (5-step scale + use cases): consistent radii scales and when to use each step.
- **Type scale calculator** ✅ (base + ratio → rem/px scale): generate a modular scale from a base size and ratio.
- **Density presets** ✅ (compact / comfortable / spacious): compact/comfortable/spacious token sets.
- **Token export formats** ✅ (CSS vars · Tailwind v4 · JSON · DTCG on [/studio](/studio)): Tailwind config, CSS vars, JSON, and design-token spec output.
- **Contrast guardrail** ✅ (live WCAG ratios on [/studio](/studio)): warn when an edit breaks AA between paired tokens.
- **Theme preview gallery** ✅ (hero/asset/pricing mocks on [/studio](/studio)): render 3 representative pages in the active theme.
- **Saved themes** ✅ (save + share as ?hue=…&mode= on [/studio](/studio)): persist theme recipes to localStorage and share as URL.
- **Original default defence** ✅ (case study on [/studio](/studio)): Motif's own violet/cyan/mint explained as a case study.
- **Theming a real component** ✅ (Halo Button recipe on [/studio](/studio)): step-through showing which tokens change which layers.
- **Colour-blind simulation** ✅ (CVD filters on [/studio](/studio)): preview a theme under protanopia/deuteranopia filters.
- **Semantic token map** ✅ (live role table on [/studio](/studio)): colour → role (accent, positive, warning) with usage counts.
- **Motion tokens** ✅ (playable dot preview on [/studio](/studio)): durations and easings as named tokens with Lab previews.
- **Spacing scale explorer** ✅ (ruler + live effect on [/studio](/studio)): 4/8-based rhythm with visual rulers.
- **Iconography token set** ✅ (live sliders on [/studio](/studio)): stroke weight and corner radius controls.
- **Theme API preview** ✅ (spec preview on [/studio](/studio)): the future Theme Studio endpoint's JSON shape.
- **Reset-theme escape hatch** ✅ (one-click reset on [/studio](/studio)): prove every theme is undoable in one click.

---

## 11. Quality bar, a11y & testing — 20 mechanisms — complete (20/20 shipped ✅)

- **Automated axe pass per asset** ✅ (score distributions on [/quality](/quality)): run axe in CI and publish the score on detail pages.
- **Contrast CI check** ✅ (real palette pairs + fingerprint tiers on [/quality](/quality)): fail a component if its default palette misses AA.
- **Reduced-motion CI check** ✅ (global rule shown on [/quality](/quality)): assert every animated asset has a fallback state.
- **Size budget check** ✅ (budget table + heaviest-five on [/quality](/quality)): fail an asset over a per-kind KB budget.
- **Dependency ledger** ✅ (public ledger on [/quality](/quality)): require an "added deps" note on every asset change.
- **Keyboard-flow tests** ✅ (five scripted walks on [/quality](/quality)): scripted Tab walks per asset (Playwright).
- **Screen-reader smoke test** ✅ (draft assertions on [/quality](/quality)): one announced-label assertion per interactive asset.
- **Copy consistency lint** ✅ (dead-end scan on [/quality](/quality)): flag "no items yet" style wording across the site.
- **Numeric truth check** ✅ (claim→source table on [/quality](/quality); found & fixed footer "30 guides"): every visible stat traces to a data source (like the ticker fix).
- **Perf regression tracker** ✅ (baseline snapshot on [/quality](/quality)): a tiny metric history per asset over versions.
- **Tone-of-voice lint** ✅ (dictionary + context scan on [/quality](/quality)): reject marketing copy that overclaims ("instantly", "magically").
- **URL inventory test** ✅ (crawl 258 routes on [/quality](/quality); found & fixed digest background links): all cross-links resolve (curl over every href).
- **Share-audit page** ✅ (107-row ledger on [/quality](/quality)): public per-asset audit log (this is a differentiator — publish it).
- **Freshness job** ✅ (live windows on [/quality](/quality)): weekly "stale content" report for prompts and changelog dates.
- **Spellcheck in CI** ✅ (misspelling scan on [/quality](/quality)): catch typos in prose and prompt bodies before deploy.
- **Image-free audit** ✅ (0 <img> scan on [/quality](/quality)): assert decorative-only images are aria-hidden.
- **Focus-visible regression suite** ✅ (ring rule + suite plan on [/quality](/quality)): per-component focus ring screenshots.
- **Security hygiene** ✅ (0 external URLs on [/quality](/quality)): no external fonts/CDNs in snippets without an integrity note.
- **Licence scanner** ✅ (107 MIT + CC BY table on [/quality](/quality)): confirm snippet code is Motif-original (no copy-paste from libs).
- **Annual content review** ✅ (due-queue calendar on [/quality](/quality)): a calendar reminder to re-run every prompt when models ship majors.

---

## 12. Community — 25 features — complete (25/25 shipped ✅)

Shipped so far: favourites/collect (#340) · collections with URLs (#341) · remix submit flow (#342) · community prompt re-run (#343) · copy leaderboard (#344) · maker profile pages (#345) · review threads on code lines (#346) · weekly picks (#347) · monthly challenges with a winners rail (#348) · rule-awarded badges (#349) · thank-you button and a loved board (#350) · spotlight interviews (#351).

Batch 50 closed the section: recognition tiers that print what exists against what is deliberately not offered (#359), an RSS 2.0 feed built from the catalog's dated records with the origin taken from the request Host so it works behind any proxy (#360), a teams-and-licensing page answering the questions that block a ship (#361), the translation programme with a do-not-translate glossary and a status table that honestly reads zero (#362), a two-session event cadence whose next dates are computed from today and whose past list is empty (#363), and a footer merit list ranked from dated records only (#364).

Batch 49 added the accountability layer: a craft-talk page that explains why there is no chat server yet (#352), a requests board where every ask carries a coverage number measured from the catalog (#353), snippet provenance that prints the record we hold and names the per-line history we do not (#354), remix forking with provenance attached (#355), the attribution policy (#356), public moderation outcomes aggregated from the sample queue (#357) and the contributor onboarding guide (#358).

Everything lives under [/community](/community). The split is printed on every surface: picks, challenge winners and badges are computed from catalog and gate data by published rules; saved lists, submissions, review threads and thanks are browser-local; the re-run log is an explicit simulation — no model is called. Interview subjects are sample roster personas and are labelled as such.

- **Favourites (public or private)**: star assets and prompts into a saved list.
- **User collections**: "Landing stack", "Under 5KB" shared collections with URLs.
- **Remix submit flow**: community versions feed the moderation queue (extends what exists).
- **Prompt re-run by community**: let users trigger a fresh model run and compare.
- **Copy leaderboard**: top-copied assets with author credits.
- **Profile pages**: minimal maker pages showing their submissions and stars.
- **Comment threads on assets**: anchored to code lines for review-style feedback.
- **Weekly community picks**: editors curate 3 community submissions into a "made it" band.
- **Challenge prompts**: "build the best preloader" — monthly with a winners rail.
- **Badges**: original-contributor, a11y-champion, prompt-scientist — earned, not bought.
- **Thank-you button**: lightweight appreciation that feeds a "community loved" sort.
- **Spotlight interviews**: one maker per month in the Learn section.
- **Discord/forum teaser**: a "join the craft talk" panel without pretending it exists yet.
- **Content requests board**: upvote what asset/prompt to build next.
- **GitHub-style blame for snippets**: which contributor last touched an asset's code.
- **Fork in the sandbox**: copy a community remix into your own saved set.
- **Attribution policy page**: how remixes credit the original author.
- **Moderation outcomes visible**: the queue's decisions aggregate into public stats.
- **Onboarding for contributors**: "how to submit" guide with the audit criteria.
- **New-contributor swag tier**: honest milestone notes, not fake merch.
- **Community RSS**: feed of new community assets.
- **Pair programming page**: how teams use the library together (license clarifications).
- **Translation crowd help**: community translations of Learn guides (CC BY).
- **Event calendar page**: virtual build-alongs and AMAs (future-dated honestly).
- **Merit sorting**: "top contributors this month" on the home footer.

---

## 13. Admin & content workflow — 20 tools — 20/20 shipped ✅

Shipped, in the order the rows landed: #365 content editor · #366 pipeline overview · #367 scheduled publishing · #368 bulk transitions · #369 audit trail · #370 console-wide search · #371 content health · #372 copy inspector · #373 prompt re-run console · #374 changelog composer · #375 ⌘K command palette · #376 notification centre · #377 escalation lane · #378 export reports · #379 theme control room · #380 mobile pass · #381 undo/redo · #382 duplicate detector · #383 queue empty state · #384 quick stats. Twenty tools, all under [/admin](/admin), and every one of them obeys one rule: a figure is either computed from the catalog or named as a gap — nothing in the console invents traffic, contributor counts or review latency. The dashboard's hard-coded KPIs and its invented community numbers were replaced as part of this section's first batch.

The second batch tightened that rule from *don't invent numbers* to *don't assert behaviour either*. Building the console surfaced four claims about the site that were not true of the site: component `status` was offered as a visibility switch when no public listing filters on it, the changelog composer's tag list held two tags no entry carries while rejecting `Backgrounds` which does, a hard `lint` failure was reported as a "gate warning", and the copy inspector described truncation limits that no card implements. All four now describe the render path: the tag vocabulary is read out of the feed, the failure wording follows the same all-gates-clean rule as bulk approve, and the inspector's field notes quote measurements taken from the 107 published components.

The closing batch went looking for the same class of problem in the tools that already shipped and found three more. The moderation queue printed a hard-coded **61% accept rate** whenever this device had no decisions — the last invented figure in the console, now an em dash with the count that would replace it. Its persist effect rewrote the storage key as `{ decisions, at }` on every state change, which would have quietly erased the decision history the new undo bar depends on; all three writers now go through one payload helper. And the admin topbar sat under a pulsing dot reading **"Live · last sync just now"**, describing a server this build does not have — it now says *static build, catalog read at build time*.

The theme control room's contrast check then caught a real accessibility miss in the site's own palette: `--color-ink-faint` at `#5b6472` measured **3.24:1** on the panel colour, under the 4.5:1 AA line for body text, and it is used in 851 places. It ships at `#747b87` (4.55:1), and the control room recomputes every preset's ratios so the next drift is visible rather than assumed.

The closing item on the list was *quick stats per content type*, described in the idea bank as "30-day copy trends rendered as mini charts". The catalog keeps one rolling `copies` number per asset and no history, so that chart cannot be drawn from this data; [/admin/stats](/admin/stats) ships the two charts the dates do support — publish volume per month and per-kind means — and gives the missing one a panel of its own rather than a smooth line built from nothing. Two figures worth knowing came out of it: 293 dated records across six types, and 135,020 copies in the single number the catalog stores.

- **Local-first content CMS**: edit components/prompts/essays in the admin and export the data patch.
- **Pipeline overview dashboard**: funnel of submitted → audited → reviewed → live, with times.
- **Scheduled publishing**: set a future date for a prompt or changelog entry.
- **Bulk status transitions**: select multiple submissions → approve/reject (with a confirm).
- **Audit trail log**: every decision with actor, timestamp and note (localStorage now, server later).
- **Search inside admin**: filter assets/prompts/submissions by anything.
- **Quick stats per content type**: 30-day copy trends rendered as mini charts.
- **Content health score**: freshness, audit status and open issues per asset.
- **Copy inspector**: live preview of list/detail rendering before publishing.
- **Prompt re-run button**: trigger the 3-model test cycle and preview a fidelity change.
- **Changelog composer**: create a changelog entry that auto-links the assets it ships.
- **Admin keyboard shortcuts**: ⌘K command palette across admin tools.
- **Notification centre**: "queue passed SLA", "asset flagged by community" inbox.
- **Escalation lane**: submissions stuck over 48h float to the top with a timer.
- **Export reports**: CSV of monthly copies per asset for planning.
- **Theme control room**: flip the whole site theme from admin as a demo.
- **Admin mobile pass**: approve from a phone with big tap targets.
- **Undo/redo for decisions**: restore a rejected submission back to the queue.
- **Duplicate detector**: flag submissions whose title/tags match a live asset.
- **Empty-state for admin**: when the queue is clear, show "here's what shipped this week" instead of blank.


---

## 14. Pro plans & monetization — 15 upgrades — 15/15 shipped ✅

- **Pro feature list page**: one page that shows every Pro asset/lab with a live preview gate.
- **License clarity cards**: free = MIT assets · Pro = team licence + reports + API (visual, not legalese).
- **Usage-based honesty**: what "unlimited copies" means and what it doesn't.
- **Team seats preview**: a demo of inviting teammates (no real billing needed for the show).
- **Pro trial playbook**: 7-day Pro preview with per-feature unlock states.
- **API tokens mock page**: generate a fake API key with scopes to demo the future product.
- **Pro-only lab gate**: let free users play 3 minutes, then show the upgrade card.
- **Bundle vs. ala-carte**: compare "everything" vs. single-pack pricing with a cost meter.
- **Student/independent discount lane**: a real, humble discount for solo builders.
- **Grandfather promise**: "if you join now, this price never changes" — trust framing.
- **Cancel-path demo**: show that cancelling is a real button (no dark patterns).
- **Referral credit mock**: invite a friend, both get a month — demoed with local state.
- **Enterprise contact card**: what to say when teams ask for SSO/SLA, honestly scoped.
- **Receipt/plans page mock**: a fake-but-working billing settings page for admin demos.
- **Pro changelog**: every Pro-only addition listed with its free alternative noted.

Monetization is the section where a site is most tempted to describe a product it does not have, so the whole section is built around one label: every Pro promise carries a state — **works now**, **browser demo** or **needs a server** — with the evidence for that state and the free path that already exists beside it. The label is not decoration. It is what says out loud that per-model prompt reports are already free on every prompt page (74 prompts, 221 runs), that a seven-day trial over features needing no server would be theatre, and that "Priority review (48h → 6h)" cannot be kept by a static build because no submission is ever received.

Two claims came off the existing pages. The paid CTA's tooltip promised that "checkout is wired up in the production build" — there is no production build with a checkout, so the button is now visibly disabled and titled with the gap. And the free-forever panel asserted MIT for backgrounds and lab tools, which the catalog does not record: `license` is a field on components (107/107 MIT, counted from the data) and nothing else, so those rows now read *policy, not a stored field*. Prices, the yearly saving and every pack unit price moved into one module that the plan cards and all seven pages read, which is the only reliable way to stop a price drifting from its own checkout copy.

The second half of the section pushed the same label into the places where monetization usually stops being honest. The team card said "everything in Pro, per member" for $49 and never named a seat count — the seats page now states the count it assumes (3 included, $12 after) and says the card was silent. The discount lanes include one that asks for a single line and no documents, because the cheapest lane to administer is the one that says the most about who the discount is for. The cancel-path demo refuses five specific retention tricks and lists them, so the claim is checkable against the flow itself. The grandfather promise is printed with the four cases it does not cover and a plain-text copy, since a promise you cannot quote without a screenshot is not a promise you can hold anyone to. And the Pro changelog is generated from the same ledger every other page reads — 11 rows, 3 of which are already free, which is the honest shape of a changelog written about promises rather than releases.

One structural note: the Pro changelog, the feature ledger and the pricing audit all derive from `PRO_FEATURES`, so a promise cannot be added to one page without answering, on all three, what it is in this build and what the free user gets instead.

---

## 15. Performance & delivery — 15 upgrades — 15/15 shipped ✅

- **Per-page budget report**: publish each route's JS/CSS weight with a "why this size" note.
- **Font-loading audit**: confirm variable fonts subset and preload the display face.
- **Zero-JS showcase pages**: mark which assets need no JS at all and demo them with JS disabled.
- **Lazy scene mounting**: catalog cards render demos only when scrolled near (IntersectionObserver).
- **Image-free policy page**: explain why the site uses no heavy imagery and how that keeps it fast.
- **Edge-cache headers plan**: a future-state note on cache invalidation when the CMS becomes real.
- **Bundle-splitting tour**: what ships on /components vs. /learn and why.
- **Backdrop-blur budget**: quantify where blur is used so the polish doesn't become the lag.
- **Animation layer inspector**: a Lab page showing which layers each demo creates.
- **Prefetch strategy**: Next.js prefetch on viewport hover for the next likely page.
- **Memory hygiene guide**: timers/intervals cleanup rules for every animated asset.
- **Low-end device test notes**: publish the 3-device matrix Motif tests against.
- **Perf regression badge on changelog**: each entry says whether size went up/down.
- **Build-time page**: what the production build compiles in — a transparency stat.
- **Service worker plan**: offline support for the catalog once the API lands.

The section has one rule: a number is either measured, or it is printed as a gap. Nothing is estimated. That rule forced the shape of the whole thing. The first version of the budget page measured the build *while it was running* and reported "31 of 94 routes have a prerendered body" against 106 real pages, because `next build` writes each page's HTML as it prerenders it — a page rendered early sees a partial `.next`. The measurement moved into `scripts/measure-build.mjs`, which runs after the build, writes `docs/build-report.json`, and refuses to write a report whose HTML count is more than a tenth below what is on disk, so a failed build cannot replace measured numbers with zeroes. Every page in the section reads that file; the same run also prints the numbers on the build report page.

The audit found real defects, not just numbers. The budget report showed pages that render no demo loading 743.1 KB of JavaScript; the cause was three hops of imports — the public layout needed one keyframes component, that component lived in `cards.tsx`, and `cards.tsx` imports the 7,392-line demo module. Splitting the keyframes into their own 41-line file took those routes to 427.6 KB. The font audit found nine subset files (261.4 KB) shipped for English copy with no preload link on any page; the site now ships two latin subsets (80 KB) preloaded on 99 of 101 pages. The prefetch page came from the same reading: 181 cards in the component and prompt grids each point at a route rendered on demand, so the cards now fetch after 140 ms of pointer or keyboard intent instead of on scroll, and the page states the cost of one payload (15.8 KB, measured with the header Next itself sends) rather than a saving nobody traced.

Three pages exist mainly to keep the section honest. The no-JavaScript page reads its own built HTML: 74 of 74 prompt posters are still `pending` in the file, but all 107 component titles and 115 links are in it, so the catalog's information survives a scriptless client while its decoration does not. The device matrix publishes the three classes it would test against and no results, because no such devices have been used — the alternative was a table of green ticks invented in an editor. And the service worker page explains why the one asset a browser cannot un-register is scheduled after the API rather than before it. The only place a measurement is allowed to be local is the layer inspector: it reads computed styles and samples frames in the reader's own browser, says so, and names the one thing it cannot see (the compositor's real layer count, which needs a trace).

The cache work is the section's other carry-forward. `src/lib/cache-rules.ts` holds the three rules that `next.config.ts` serves and the page prints, and the rules were wrong in the first draft in the way these things are usually wrong: the catch-all was listed last, and a later matching rule overrides an earlier one for the same header, so fingerprinted assets were being served the HTML policy. The harness now reads the headers off the running server, which is why the ordering bug could not survive a batch.

---

## 16. Integrations & exports — 15 bridges — 15/15 shipped ✅

- **VS Code snippet pack**: install Motif snippets as editor completions.
- **Figma variable sync**: export tokens as Figma variables (documented format).
- **Tailwind preset package**: the design tokens as an installable Tailwind preset.
- **React package scaffold**: each component with an npm-ready wrapper (future).
- **HTML/CSS single-file copies**: copy as a self-contained file with inline styles.
- **Export to CodeSandbox**: deep link that opens the snippet in a sandbox.
- **Open Graph helper**: copy-paste OG markup per asset for promo pages.
- **Storybook decorator**: a starter Storybook theme wired to the tokens.
- **Framer-style code embed**: `<iframe>` embed snippet for component docs.
- **Design-token JSON endpoint**: the Theme Studio output as a stable JSON URL.
- **Browser bookmarklet**: highlight-and-save any page's accent palette.
- **CLI sketch**: `npx motif add tilt-card` — document the intended command UX.
- **CI badge**: a fake-but-designed "tests passing" badge per asset for READMEs.
- **RSS for changelog**: subscribe to release notes in a feed reader.
- **Print stylesheet for Learn**: articles that print cleanly as PDF (publish the CSS).


The section's rule was that an export must hand out what the build actually stores, and it cost three features to keep. The React package is one provider rather than a component set, because the catalog holds metadata and not component source; the CodeSandbox export is three files rather than a define-link, because the link's compression runs on somebody else's server and this build has no way to check its own output; the CLI is a script you download and run, because there is no registry entry and a printed `npx` line would be a lie the reader discovers by typing it. The score badge is the sharpest case: the idea bank asked for a "fake-but-designed tests passing badge", and a badge claiming a test suite this project does not run is exactly the kind of decoration the rest of the site argues against — so the badge carries the number the catalog already stores and says, inside its own SVG description, that no pipeline stands behind it.

The harness keeps the section checkable from outside: it fetches all thirteen export endpoints, reads the served bytes back against the page that prints them, parses both served scripts with `node --check`, and asserts the five remainders are still listed where the hub claims them. Five gaps now sit inside fourteen shipped deliverables, each named on the page that owns it.

---

## 17. More interactive scenes & motion — 25 demos — complete (25/25 shipped ✅)

- **Drag-to-reorder list**: rows that glide when you drag, with a11y keyboard reorder. ✅
- **Swipeable cards (deck)**: tinder-style stack with undo and reduced-motion note. ✅
- **Split-pane resizer**: draggable divider between two live panels. ✅
- **Zoom-on-hover image map**: an image that magnifies under the cursor. ✅
- **Range-linked chart scrubber**: a chart that scrubs as you drag the range (chart-card sibling). ✅
- **Scroll-jack by choice**: a section that pins once with explicit "next" affordances. ✅
- **Interactive bezier drawer**: drag the control points of a cubic-bezier (lab meets asset). ✅
- **Springy 3D flip stack**: cards that flip on hover with Z layering. ✅
- **Draw-on-scroll path**: an SVG path that traces itself as it enters view. ✅
- **Morphing icon set**: icons that morph between two glyphs on toggle (play→pause). ✅
- **Infinite logo chase**: logos that stream vertically in a column layout. ✅
- **Shimmer text reveal**: text that sparkles through once on view (tasteful, not unicorn). ✅
- **Progress ring with threshold ticks**: a ring that stops at milestones with labels. ✅
- **Animated counters in a row**: a stats band demo using the odometer (asset-to-asset cross-link). ✅
- **Hover-linked cards**: hovering one card dims its siblings (focus-the-story pattern). ✅
- **Share-sheet overlay**: mobile share sheet with spring entry (pattern echo). ✅
- **Drag-theme chip onto a card**: a playful theme-picker interaction for the catalog. ✅
- **Inline search highlight walk**: typing scrolls and highlights occurrences across a doc demo. ✅
- **Reading-time progress dots**: a sidebar that fills dot-by-dot as you read. ✅
- **Pulse network graph**: a tiny node graph whose edges pulse (data-viz style). ✅
- **Easing icon families**: each easing rendered as a bouncing ball icon (Learn + Lab bridge). ✅
- **Preloader choreography**: 3 loaders that hand off to content on a fake "load" ✅
- **Ripple nav dots**: page-position dots that ripple on change ✅
- **Tilted hero CTA**: a hero button that subtly orients to the pointer ✅
- **Success-state celebration**: an account-created screen with a restrained burst ✅

---

## 18. Engagement & retention — 10 habits — complete (10/10 shipped ✅)

- **"Copy of the week" email mock**: a designed digest page people can preview. ✅
- **Streak for makers**: track days with a copy/contribution (fun, opt-in). ✅
- **Build-a-thon calendar**: monthly challenge with a public countdown. ✅
- **Rate-your-build**: after copying, a 1-tap "did this ship?" check-in. ✅
- **Returning-visitor "new since you left" strip** on the home feed. ✅
- **Learning paths**: "Motion starter → springs → scroll" sequences with progress dots. ✅
- **Saved-stack share prompts**: when you save 5 assets, offer a shareable recipe. ✅
- **Quiet reminders**: an optional "your saved stack hasn't shipped yet" nudge. ✅
- **Weekly self-score**: a playful "your library fitness" meter from copies/reads. ✅
- **Community day**: every Thursday a themed prompt (+ badge for participants). ✅

---

## 19. SEO & growth — 15 levers — complete (15/15 shipped ✅)

- **Per-asset meta**: unique titles/descriptions from the detail data (already templated — enrich). ✅
- **FAQ schema on detail pages**: structured data for "what is a X component". ✅
- **Learn as the SEO engine**: target "how to …" long-tail queries with the essays. ✅
- **Comparable-free positioning pages**: "Motif vs. generic UI kits" written on merit, no competitor copying. ✅
- **Prompt glossary hub**: terms like "fidelity score", "run log", "concept render" explained and linked. ✅
- **Changelog as content**: each entry is a small publishable news item. ✅
- **Site search indexing**: make sure /search results pages are noindex while catalog pages index. ✅
- **Sitemap by content type**: components, prompts, essays, backgrounds in one clean sitemap. ✅
- **OG images per asset**: auto-generated poster cards for social shares (like prompt posters). ✅
- **Original-code bait**: every snippet page shows enough craft to earn links. ✅
- **Internal-link spine**: every asset links 2 essays and 1 prompt, forming a crawlable graph. ✅
- **Speed as SEO**: publish the Lighthouse story and let performance earn ranking. ✅
- **Multilingual titles**: page slugs stay English; add one translated title test later. ✅
- **Evergreen refresh dates**: visible "updated" stamps (learn articles have them — reuse site-wide). ✅
- **Honest schema**: avoid product/aggregate markup until the data truly exists. ✅

---

## 20. Brand, social proof & launch — 10 moves — complete (10/10 shipped ✅)

- **Logo system page**: the mark, wordmark, clear-space and misuse examples (all original). ✅
- **Voice guide**: 10 "we say / we never say" lines that keep copy consistent. ✅
- **Launch checklist page**: the actual pre-launch list Motif used — content and culture. ✅
- **Social proof shelf**: quote three real-feeling builders (fictional-but-labelled demo makers). ✅
- **Build notes on X/threads**: the ticker copy as shareable one-liners. ✅
- **Open metrics page**: page views, copies, model runs as a public dashboard (trust play). ✅
- **Mascot concept**: a tiny original character for 404s and empty states (not a stock meme). ✅
- **Wallpaper/poster downloads**: brand-palette wallpapers for fans (original art). ✅
- **Thank-you page design**: after a mock signup, show the library's best first steps. ✅
- **"Made by Motif" watermarks**: optional badge for builds that used the library. ✅

---

## 21. Beyond the MVP — 10 north-star bets — complete (10/10 shipped ✅)

- **Real accounts & favourites backend**: the first server feature worth building. ✅
- **Prompt re-run service**: queue a real 3-model run and stream the log. ✅
- **Theme Studio as a product**: the token editor becomes the flagship tool. ✅
- **Component API (JSON)**: assets served as data with code, notes and versions. ✅
- **Public audit API**: let anyone verify an asset's scores programmatically. ✅
- **Native share/embed SDK**: third-party sites embed Motif demos with one tag. ✅
- **Community moderation marketplace**: trusted reviewers earn Pro months. ✅
- **Learn certificates**: finish a path, earn a shareable "motion literate" badge. ✅
- **Desktop helper app**: a tray app for quick snippet lookup (electron, later). ✅
- **Open book**: publish the site's own build metrics and content playbook as the ultimate case study. ✅

---

_Total: 500 suggestions across 21 sections. Start with the three ideas in each section
that make you want to build — that's how Motif got from 20 to 39 components._