Quality bar · a11y · testing
The quality bar, kept in the open
Motif gates every asset on accessibility and editorial review, budgets its weight by kind, tracks every dependency and writes a test for every keyboard flow. This page shows the mechanisms and the real numbers they produce — recomputed from the live catalog at build time, nothing stored by hand.
Mechanism 1 · audit scores, published
Every asset ships with two public numbers
Accessibility (auto + human review) and editorial quality are computed per asset and shown on every card and detail page — not kept in a private QA sheet. The two distributions below are the whole catalog at build time.
Accessibility score
92 – 100 rangeEditorial quality
92 – 97 rangeThe scores are composites of the automated audit and human review that gate each asset before it is listed. Wiring that audit step to run in CI on every change is the next upgrade on this page's roadmap — the numbers it would publish are the ones above.
Mechanism 2 · contrast CI on the default palette
The palette is checked, not trusted
WCAG ratios computed from the real @theme hex values — body text, surfaces, the primary button and the three role accents as text. Every asset inherits this palette, so these pairs are its default palette.
Ink on page bg
default body text
Ink on panel
cards, inputs, surfaces
White label on primary
the primary-button case
Violet accent as text
links & chips on page bg
Cyan accent as text
code & keyboard hints
Mint accent as text
verified / positive marks
Fingerprint as body text on page bg
If every asset's accent fingerprint were used as 14px text on #06070b…
What the CI check would flag
Nothing in the library uses a fingerprint as small body text on the raw background — fingerprints drive the colour blocks, chips and demo accents, which only need the 3:1 large/UI threshold. The band above is the safety margin: 259 of 289 assets would pass even if used as small text; the other 30 are large-text-only, and none fall under 3.0.
Tightest fingerprint today: confetti-burst at 3.55:1 — comfortably above the 3:1 UI-component floor it is actually used at.
Rule of thumb this page enforces: default palettes must pass AA-normal for the roles they render as text; anything failing that is either promoted to a stronger token or demoted to decoration — never shipped as copy.
Mechanism 3 · reduced-motion fallback
Motion honours the system setting site-wide
93 of 289 assets are animated scenes, plus many elements animate on hover or scroll. One global rule collapses them all when the visitor asks for less motion.
The rule, verbatim
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Duration collapse is global; the scroll-behavior reset stops smooth anchor jumps. Individual demo scenes add their own checks (e.g. pausing on hover) on top.
The check this would run in CI
The fallback layer is implemented today; asserting it on every build is the automation step this panel tracks.
Mechanism 4 · per-kind size budgets
Weight is budgeted by kind, then measured
The stated budget per kind sits below, next to the real max in the catalog today. Budgets are policy; compliance is data.
| Kind | Assets | Budget | Min → max KB | Status |
|---|---|---|---|---|
| Elements | 131 | ≤ 8 KB | 0.3 → 6.8 KB | all 131 pass |
| Animated | 93 | ≤ 10 KB | 0.5 → 9.7 KB | all 93 pass |
| Sections | 63 | ≤ 8 KB | 0.7 → 6.8 KB | all 63 pass |
| Templates | 2 | ≤ 28 KB | 21.3 → 24 KB | all 2 pass |
Heaviest five today
Bar scale is the template budget (28 KB). The two templates are the only assets past 10 KB — expected for whole pages; the check treats them against their own budget.
Mechanism 5 · dependency ledger
Zero-dependency is the default, and it is tracked
Every asset carries an explicit deps list. Policy: adding a dependency requires a named note in the changelog entry for that asset, so a weight increase is never silent.
Ledger rows (assets with deps)
Why it matters here
- Paste-and-run is the product promise — a dep-free asset runs with zero install steps.
- When a dep is genuinely worth it (e.g. a physics or motion library), the ledger makes the trade visible next to the KB figure.
- The catalog pages print the deps list and the bundle size on every card, so the ledger is public, not internal.
The CI half — refusing a change that adds deps without a note — is the automation step this panel tracks.
Mechanism 6 · keyboard-flow tests
Scripted Tab walks for every keyboard asset
149 of 289 assets declare interactive behaviours (click, keyboard, type, hold, drag). Each gets a written walk: exact key presses, what should happen, and the one assertion that gates it.
01Combo boxcombo-boxwalk + assertion ▾
- 1.Tab to the text input — focus ring appears on the wrapper, popup stays closed
- 2.Type a query; the option list opens and filters live
- 3.ArrowDown / ArrowUp move the highlight; active option is announced
- 4.Enter commits the highlighted option into the input
- 5.Escape closes the popup and returns focus to the input
Assertion: After Enter the input value equals the chosen label, aria-expanded is false, and focus never leaves the control.
02Star ratingstar-ratingwalk + assertion ▾
- 1.Tab to the first star (the group is one tab stop)
- 2.ArrowRight / ArrowLeft step through 0.5 → 5 stars
- 3.Home / End jump to 0 and 5
- 4.Space sets the current value; value is re-announced
Assertion: The live value is announced as “N out of 5 stars” and persists after the group loses focus.
03Tag inputtag-inputwalk + assertion ▾
- 1.Tab to the field, type a tag, press Enter — chip appears before the caret
- 2.Backspace on an empty field removes the last chip and refocuses the field
- 3.Each chip exposes a real button for delete (Tab reaches it)
Assertion: Removed tags are announced by role=status, and the input caret is never orphaned.
04Command palettecommand-palettewalk + assertion ▾
- 1.Ctrl/Cmd+K opens the palette; focus lands on the search box
- 2.Type to filter; ArrowDown/Up move the selection with the list wrapping
- 3.Enter runs the highlighted action; Escape closes and restores the trigger
- 4.Tab cycles only within the palette while it is open (focus trap)
Assertion: The palette is role=dialog with aria-modal=true; focus returns to the opener on close.
05Quantity stepperquantity-stepperwalk + assertion ▾
- 1.Tab to the number input, type a value directly
- 2.Buttons increment/decrement and clamp at min/max
- 3.ArrowUp/ArrowDown nudge the value by step
Assertion: The stepper exposes a labelled spinbutton; every change re-announces the value.
Specs are written from each component's shipped behaviour (the code snippets on its page); running them as Playwright scripts on every change is the automation step this panel tracks.
Mechanism 7 · screen-reader smoke test
One announced label per interactive asset
The smoke test keeps the bar simple: every interactive asset must announce its state change. Below, six draft assertions — one per sampled asset — written from the roles and labels its live demo exposes.
| Asset | Kind | Announcement to assert | Trigger |
|---|---|---|---|
| prism-switchPrism Switch | Elements | “Switch, on” / “Switch, off” | on value change |
| star-ratingStar Rating Input | Elements | “3 stars out of 5” | on value change |
| tag-inputTag Input | Elements | “Tag added” / “Tag removed” | on value change |
| command-paletteCommand Palette | Elements | “Command palette, dialog” on open | on open |
| slider-ticksSlider with Live Ticks | Elements | “Value 40, tick 8 of 11” | on value change |
| password-strengthPassword Strength Meter | Elements | “Strength: strong” after pause | after pause in field |
Method: run the live demo under a screen reader (or axe/Playwright's aria snapshot), perform the trigger, and assert the expected announcement appears in the live region. Interactive assets count: 149 — the smoke test above samples six; the full per-asset matrix is generated the same way.
Mechanism 8 · copy consistency lint
Empty states say what happened, then what to do
Motif's writing rule for empty surfaces: a filter result that finds nothing stays tiny and factual (“Nothing matched those filters”), never a verbless dead-end like “No items yet”. The scan below checks the public prose files for the dead-end patterns and lists what it finds instead.
Lint dictionary (verbless dead-ends)
Each pattern is a screen that explains nothing and offers nothing. The real filter fallbacks below are the pattern the lint defends.
Live scan result: 14 occurrences across the scanned public files.
What the scan finds instead (current copy)
Scan scope: every page and client component under src/app/(public) plus the shared chrome — the copy a visitor can read. Runs at build time.
Mechanism 9 · numeric truth check
Every visible stat traces to a data source
The headline counts printed across the site are not typed constants — each is derived from the same arrays that render the pages. Below, each published claim, its live value, and the exact source.
| Claim as published | Live value | Derived from | Source | Surfaces |
|---|---|---|---|---|
| “289 original assets” | 289 | COMPONENTS.length | COMPONENTS array in src/lib/data.ts | homepage proof band · footer tagline · /components |
| “74 run-tested prompts” | 116 | PROMPTS.length | PROMPTS array in src/lib/data.ts | footer tagline · /prompts scoreboard |
| “60 guides” | 91 | LEARN_ARTICLES.length | src/lib/learn.ts | footer tagline · /learn |
| “33 backgrounds” | 33 | BACKGROUNDS.length | BACKGROUNDS array in src/lib/data.ts | footer count line · /backgrounds |
| “288/289 dependency-free” | 288/289 | assets with deps.length === 0 | deps field across COMPONENTS | homepage dependency-free receipt |
| “0 over size budget” | 0 | per-kind budget comparison | kindSizeTable() on this page | /quality size-budget panel |
Watchlist · demo figures that must never become claims
The odometer and count-up component demos animate sample figures (a member count, prompt count, copy total) to show what the scenes do. Those numbers live inside the demo code as run targets and are labelled by the demo scenes themselves — they never feed a site statistic, so a counter demo of “148.2k copies” cannot drift into the footer. The check: grep any headline number on a marketing surface, trace it to a data source, and reject sources that live under components/demos.
Mechanism 10 · perf regression tracker
A baseline today, a history from here
Per-release weight history starts with a baseline snapshot — the whole catalog's size and audit metrics as this build shipped them. Every future release re-records the same rows so a drift is visible, not felt.
| Kind | Assets | Budget | Min | Mean | Median | Max | Headroom |
|---|---|---|---|---|---|---|---|
| Elements | 131 | ≤ 8 KB | 0.3 | 1.3 | 1 | 6.8 | +1.2000000000000002 KB |
| Animated | 93 | ≤ 10 KB | 0.5 | 1.4 | 1 | 9.7 | +0.3000000000000007 KB |
| Sections | 63 | ≤ 8 KB | 0.7 | 1.7 | 1.1 | 6.8 | +1.2000000000000002 KB |
| Templates | 2 | ≤ 28 KB | 21.3 | 22.7 | 22.7 | 24 | +4 KB |
Catalog totals at baseline
What the tracker records per release
- Per asset:
bundleKbat its shipped version, plus a11y and quality scores. - Per asset change: dep list hash, so a “zero-dep” claim is verifiable per version.
- Per release: this whole table re-published — min/mean/median/max and budget headroom per kind.
The rows above are real current data; the versioned history is the automation step this panel tracks.
Mechanism 11 · tone-of-voice lint
Overclaim words are scanned, then read in context
Marketing copy that promises “effortless”, “flawless” or “magical” gets flagged by the dictionary below. The lint also implements the context rule: a flagged word inside a negation (“No ‘effortless’ marketing”) is intentional and cleared. This very scan runs on the current public prose — results are live.
Dictionary · scanned 138 files
Scope: page prose under src/app/(public) + chrome. Copy inside component demo scenes and sample prompt posters is out of scope — those are deliberate samples, not site voice.
Findings on this build
The two current hits are the homepage's “No ‘effortless’ marketing” and the mission page's “not ‘effortless’” — exactly the context rule working. Re-running this scan is the CI half of the mechanism.
Mechanism 12 · URL inventory test
Every internal link resolved, and one was broken
The first full crawl of the built site checked 258 routes and followed 264 internal hrefs. It caught a real bug — and the fix is in this same build.
258
routes fetched
static + every component/prompt/learn detail page
264
internal hrefs followed
collected from the 17 top-level pages
258/258
returned 200
0 broken — fixed before shipping
Found and fixed in this batch
- The weekly digest linked “Background refresh” entries to /components/<bg-slug>, which 404s — backgrounds have no per-slug page.
- digest/page.tsx now sends background chips to /backgrounds, the page that renders all 33 cards.
Mechanism 13 · share-audit ledger
The audit log is public per asset
Every asset's checks, scores and weight sit on its own detail page — this ledger is the same data in one table, weakest a11y first. The three checks mirror the audit block each detail page publishes.
| Asset | Kind | KB | a11y | Quality | Audit | Version | Published |
|---|---|---|---|---|---|---|---|
| orbit-deckOrbit Deck | Animated | 9.7 | 92 | 96 | 3/3 ✓ | 1.1.0 | 2026-07-08 |
| halo-trailHalo Trail | Animated | 5.8 | 93 | 95 | 3/3 ✓ | 1.4.2 | 2026-06-09 |
| scroll-pinScroll-jack by Choice | Sections | 3.1 | 93 | 93 | 3/3 ✓ | 1.0.0 | 2026-09-10 |
| confetti-burstConfetti Burst | Animated | 1.7 | 93 | 92 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| binary-rainBinary Rain (restrained) | Animated | 0.6 | 93 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| dot-drawDot Draw Grid | Elements | 4.9 | 94 | 95 | 3/3 ✓ | 1.0.0 | 2026-08-31 |
| tilt-cardTilt Card | Animated | 2.9 | 94 | 97 | 3/3 ✓ | 2.1.0 | 2026-06-30 |
| zoom-lensZoom-on-hover Map | Elements | 2.8 | 94 | 92 | 3/3 ✓ | 1.0.0 | 2026-09-10 |
| flip-stackSpringy 3D Flip Stack | Animated | 2.7 | 94 | 93 | 3/3 ✓ | 1.0.0 | 2026-09-10 |
| pulse-graphPulse Network Graph | Animated | 2.6 | 94 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-10 |
| particle-trail-heroParticle Trail Hero | Animated | 1.5 | 94 | 93 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| ripple-revealRipple Reveal | Animated | 1.1 | 94 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| magnetic-icon-rowMagnetic Icon Row | Elements | 1 | 94 | 93 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| pull-to-refreshPull to Refresh | Animated | 1 | 94 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| topo-contoursTopographic Contours | Animated | 0.9 | 94 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| pointer-image-trailPointer Image Trail | Animated | 0.9 | 94 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| scroll-year-railScroll Year Rail | Animated | 0.9 | 94 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| grid-parallax-driftGrid Parallax Drift | Animated | 0.8 | 94 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| constellation-linesConstellation Lines | Animated | 0.8 | 94 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| scene-accordionScene Accordion | Elements | 0.8 | 94 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| word-cloud-settleWord Cloud Settle | Animated | 0.7 | 94 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| keycap-fieldKeycap Field | Animated | 0.6 | 94 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| elastic-dividerElastic Divider | Elements | 0.5 | 94 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| agency-showcaseAgency Showcase | Templates | 21.3 | 95 | 95 | 3/3 ✓ | 0.9.2 | 2026-07-30 |
| nav-dockNav Dock | Elements | 4.4 | 95 | 92 | 3/3 ✓ | 1.0.1 | 2026-07-01 |
| sheet-menuMobile Sheet Menu | Elements | 3.4 | 95 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-08 |
| avatar-stackAvatar Crowd Stack | Elements | 3 | 95 | 96 | 3/3 ✓ | 1.0.0 | 2026-09-05 |
| bezier-drawerInteractive Bezier Drawer | Elements | 2.9 | 95 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-10 |
| chart-scrubberRange-linked Chart Scrubber | Elements | 2.9 | 95 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-10 |
| file-drop-zoneFile Drop Zone | Elements | 2.6 | 95 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| theme-dropDrag-a-theme Chip | Elements | 2.4 | 95 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-10 |
| swipe-deckSwipeable Card Deck | Animated | 2.4 | 95 | 93 | 3/3 ✓ | 1.0.0 | 2026-09-10 |
| preloader-handoffPreloader Handoff | Animated | 2.3 | 95 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-10 |
| fullscreen-overlay-menuFullscreen Overlay Menu | Elements | 2.2 | 95 | 93 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| draw-pathDraw-on-scroll Path | Animated | 2 | 95 | 93 | 3/3 ✓ | 1.0.0 | 2026-09-10 |
| progress-ringUpload Progress Ring | Animated | 1.9 | 95 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| bento-feature-gridBento Feature Grid | Sections | 1.8 | 95 | 96 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| tilted-ctaTilted Hero CTA | Animated | 1.6 | 95 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-10 |
| shuffle-kenburns-galleryKen Burns Gallery | Animated | 1.6 | 95 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| skeleton-cardSkeleton Profile Card | Elements | 1.3 | 95 | 93 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| offline-indicatorOffline Indicator | Elements | 1.3 | 95 | 93 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| parallax-layered-sceneParallax Layered Scene | Animated | 1.2 | 95 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| testimonial-marqueeTestimonial Marquee | Animated | 1.1 | 95 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| liquid-button-hoverLiquid Button Hover | Animated | 1 | 95 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| double-tap-likeDouble-Tap Like | Elements | 1 | 95 | 93 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| aurora-dawnAurora Dawn | Animated | 1 | 95 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| flip-clockFlip Counter Clock | Animated | 1 | 95 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| ink-stamp-appearInk-stamp Appear | Animated | 0.9 | 95 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| orbit-progressOrbit Progress Ring | Animated | 0.9 | 95 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| gradient-meshGradient Mesh | Animated | 0.8 | 95 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| card-dealerCard Dealer Shuffle | Animated | 0.8 | 95 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| duotone-wavesDuotone Waves | Animated | 0.8 | 95 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| holo-cardHolographic Card | Animated | 0.8 | 95 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| aurora-ribbonsAurora Ribbons | Animated | 0.8 | 95 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| tilt-glareTilt Card with Glare | Animated | 0.8 | 95 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| dot-matrix-scrollDot Matrix Scroll | Animated | 0.7 | 95 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| stack-cards-scrollStacked Cards on Scroll | Animated | 0.7 | 95 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| paper-foldPaper Fold | Animated | 0.5 | 95 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| glass-pricingGlass Pricing Trio | Sections | 6.8 | 96 | 97 | 3/3 ✓ | 1.0.0 | 2026-09-08 |
| bento-studioBento Studio Grid | Sections | 5.5 | 96 | 95 | 3/3 ✓ | 1.1.1 | 2026-07-05 |
| polaroid-stackPolaroid Stack | Animated | 3.7 | 96 | 96 | 3/3 ✓ | 1.0.0 | 2026-09-08 |
| chart-cardMomentum Chart Card | Sections | 3.6 | 96 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-06 |
| reorder-listDrag-to-reorder List | Animated | 2.6 | 96 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-10 |
| odometer-counterOdometer Counter | Animated | 2.4 | 96 | 97 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| toc-spineTable of Contents Spine | Elements | 2.4 | 96 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| date-presetsDate Presets Picker | Elements | 2.2 | 96 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| share-sheetShare-sheet Overlay | Elements | 2.2 | 96 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-10 |
| morph-iconsMorphing Icon Set | Animated | 2.2 | 96 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-10 |
| halo-buttonHalo Button | Elements | 2.1 | 96 | 94 | 3/3 ✓ | 1.1.0 | 2026-06-18 |
| success-burstSuccess-state Celebration | Animated | 2.1 | 96 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-10 |
| easing-iconsEasing Icon Families | Animated | 2 | 96 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-10 |
| ring-ticksAudit Ring with Threshold Ticks | Animated | 2 | 96 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-10 |
| empty-state-trioEmpty-state Trio | Sections | 2 | 96 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| checkbox-cardCheckbox Cards | Elements | 1.9 | 96 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| search-walkInline Search Highlight Walk | Elements | 1.9 | 96 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-10 |
| split-button-menuSplit Button Menu | Elements | 1.9 | 96 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| tag-inputTag Input | Elements | 1.8 | 96 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| ripple-dotsRipple Nav Dots | Elements | 1.8 | 96 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-10 |
| logo-chaseInfinite Logo Chase | Animated | 1.8 | 96 | 93 | 3/3 ✓ | 1.0.0 | 2026-09-10 |
| flip-cardFlip Card Duo | Animated | 1.7 | 96 | 96 | 3/3 ✓ | 1.0.0 | 2026-09-08 |
| template-landing-saasLanding Template (Dark SaaS) | Sections | 1.7 | 96 | 96 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| linked-cardsHover-linked Card Row | Sections | 1.6 | 96 | 93 | 3/3 ✓ | 1.0.0 | 2026-09-10 |
| number-ticker-scrollNumber Ticker on Scroll | Animated | 1.6 | 96 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| reading-dotsReading-time Progress Dots | Elements | 1.5 | 96 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-10 |
| error-boundary-cardError Boundary Card | Elements | 1.5 | 96 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| hero-product-mockHero with Product Mock Frame | Sections | 1.5 | 96 | 96 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| gradient-pickerMulti-Stop Gradient Picker | Elements | 1.5 | 96 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| password-strengthPassword Strength Meter | Elements | 1.4 | 96 | 93 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| pricing-table-threePricing Table — Three Plans | Sections | 1.4 | 96 | 96 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| versus-tableUs-vs-Them Comparison | Sections | 1.3 | 96 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| pricing-faq-miniPricing FAQ Mini-Bundle | Sections | 1.3 | 96 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| back-to-topBack-to-top Comet | Elements | 1.1 | 96 | 93 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| scroll-linked-hue-heroScroll-linked Hue Hero | Animated | 1.1 | 96 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| split-feature-rowsSplit Feature Rows | Sections | 1.1 | 96 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| app-screenshot-tourApp Screenshot Tour | Sections | 1.1 | 96 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| hover-reveal-cornerHover-Reveal Corner | Elements | 1.1 | 96 | 93 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| chip-paste-inputChip Paste Input | Elements | 1.1 | 96 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| how-it-works-bandThree-Step How-It-Works Band | Sections | 1.1 | 96 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| values-gridTeam Values Grid | Sections | 1.1 | 96 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| staggered-list-entranceStaggered List Entrance | Animated | 1 | 96 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| gradient-border-flowGradient Border Flow | Animated | 1 | 96 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| word-by-word-highlightWord-by-word Highlight | Animated | 1 | 96 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| stats-bandStats Band | Sections | 1 | 96 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| timeline-verticalVertical Timeline | Sections | 1 | 96 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| map-free-local-bandMap-free Local Band | Sections | 1 | 96 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| careers-rolesCareers Band with Roles | Sections | 1 | 96 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| logo-wall-hover-popLogo Wall with Hover Pop | Sections | 0.9 | 96 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| resource-download-cardsResource Download Cards | Sections | 0.9 | 96 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| snap-carouselSnap Carousel | Elements | 0.9 | 96 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| fab-speed-dialFAB Speed Dial | Elements | 0.9 | 96 | 93 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| particle-driftParticle Drift Field | Animated | 0.9 | 96 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| before-after-clipBefore/After Clip Slider | Animated | 0.9 | 96 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| expanding-searchExpanding Search Field | Animated | 0.9 | 96 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| scroll-vignetteScroll Vignette | Elements | 0.8 | 96 | 93 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| case-study-headerCase-study Header | Sections | 0.8 | 96 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| avatar-zoom-stackAvatar Zoom Stack | Elements | 0.8 | 96 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| gantt-liteGantt Lite | Elements | 0.8 | 96 | 93 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| cursor-spotlightCursor Spotlight | Animated | 0.8 | 96 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| vertical-carouselVertical Carousel | Animated | 0.8 | 96 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| integration-logo-gridIntegration Logo Grid | Sections | 0.8 | 96 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| integrations-code-tabsIntegrations Code Tabs | Sections | 0.8 | 96 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| heatmap-calendarHeatmap Calendar | Elements | 0.7 | 96 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| diff-viewTwo-Column Diff View | Elements | 0.7 | 96 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| glass-refractionGlass Refraction Card | Animated | 0.7 | 96 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| magnetic-buttonMagnetic Button | Animated | 0.7 | 96 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| wind-chime-listWind Chime List | Animated | 0.7 | 96 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| scroll-spineScroll Progress Spine | Animated | 0.7 | 96 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| pulse-map-pinPulse Map Pin | Animated | 0.7 | 96 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| headline-swapHero Headline Swap | Animated | 0.7 | 96 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| feature-split-altTwo-Column Feature Split | Sections | 0.7 | 96 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| film-grainFilm Grain | Animated | 0.6 | 96 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| checker-driftChecker Drift | Animated | 0.6 | 96 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| saas-launchSaaS Launch Page | Templates | 24 | 97 | 97 | 3/3 ✓ | 1.0.0 | 2026-07-26 |
| command-paletteCommand Palette | Elements | 6.8 | 97 | 97 | 3/3 ✓ | 1.1.0 | 2026-09-09 |
| hero-auroraAurora Hero Section | Sections | 6.2 | 97 | 96 | 3/3 ✓ | 1.0.0 | 2026-07-14 |
| terminal-heroTerminal Story Hero | Sections | 5.5 | 97 | 96 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| notification-bellNotification Bell | Elements | 4.6 | 97 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| star-motesStar Motes | Animated | 3.4 | 97 | 95 | 3/3 ✓ | 1.3.0 | 2026-05-30 |
| team-spotlightTeam Spotlight Grid | Sections | 3.3 | 97 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| counter-bandAnimated Counter Band | Sections | 2.3 | 97 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-10 |
| split-paneSplit-pane Resizer | Elements | 2.1 | 97 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-10 |
| sticky-subnavSticky Section Sub-nav | Sections | 2.1 | 97 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| tab-morphTab Morph Pill | Elements | 2 | 97 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| tabs-indicatorTabs with Sliding Indicator | Elements | 1.9 | 97 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| wipe-revealWipe Reveal Headline | Animated | 1.6 | 97 | 96 | 3/3 ✓ | 1.1.0 | 2026-09-08 |
| quantity-stepperQuantity Stepper | Elements | 1.6 | 97 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| status-bannerInline Status Banner | Elements | 1.6 | 97 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| shimmer-textShimmer Text Reveal | Animated | 1.4 | 97 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-10 |
| star-ratingStar Rating Input | Elements | 1.3 | 97 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| slug-fieldSlug Input Transform | Elements | 1.3 | 97 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-10 |
| template-docs-siteDocs Site Template | Sections | 1.3 | 97 | 96 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| palette-scopedScoped Command Palette | Elements | 1.3 | 97 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| faq-category-filterFAQ with Category Filter | Sections | 1.3 | 97 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| newsletter-optinNewsletter Opt-In Section | Sections | 1.3 | 97 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| signature-padSignature Pad | Elements | 1.3 | 97 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| auto-grow-textareaAuto-grow Textarea | Elements | 1.2 | 97 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| dot-leader-loadingDot Leader Loading | Animated | 1.2 | 97 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| team-grid-filterTeam Grid with Roles Filter | Sections | 1.2 | 97 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| newsletter-band-tiersNewsletter Band with Tiers | Sections | 1.2 | 97 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| template-waitlistWaitlist Template | Sections | 1.2 | 97 | 96 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| template-galleryTemplate Gallery Page | Sections | 1.2 | 97 | 96 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| ripple-buttonRipple Button | Elements | 1.2 | 97 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| smart-tooltipSmart Flip Tooltip | Elements | 1.2 | 97 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| slider-ticksSlider with Live Ticks | Elements | 1.1 | 97 | 93 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| breadcrumb-trailBreadcrumb Trail | Elements | 1.1 | 97 | 93 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| spinner-statusSpinner with Status Text | Animated | 1.1 | 97 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| comparison-sliderComparison Slider | Elements | 1.1 | 97 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| event-schedule-listEvent Schedule List | Sections | 1.1 | 97 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| tree-tableTree Table | Elements | 1.1 | 97 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| resizable-splitResizable Split | Elements | 1.1 | 97 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| security-bandSecurity Band | Sections | 1.1 | 97 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| cron-editorCron Editor | Elements | 1.1 | 97 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| shake-on-error-fieldShake-on-error Field | Elements | 1 | 97 | 96 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| changelog-feedChangelog Feed | Sections | 1 | 97 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| template-changelogChangelog / Journal Template | Sections | 1 | 97 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| skeleton-fadeSkeleton-to-Content Fade | Animated | 1 | 97 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| stacked-bar-listStacked Bar List | Elements | 1 | 97 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| column-visibilityColumn Visibility Chips | Elements | 1 | 97 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| master-detailMaster-Detail Two-Pane | Elements | 1 | 97 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| scrollspy-railScrollspy Rail | Animated | 1 | 97 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| offcanvas-filtersOff-Canvas Filter Drawer | Elements | 1 | 97 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| pricing-usage-sliderPricing with Usage Slider | Sections | 1 | 97 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| roi-calculatorCalculator Section | Sections | 1 | 97 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| chat-composerChat Composer | Elements | 1 | 97 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| field-shakeField Shake on Invalid | Elements | 0.9 | 97 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| skeleton-tableSkeleton Table | Animated | 0.9 | 97 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| alternating-timelineAlternating Timeline | Elements | 0.9 | 97 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| inline-edit-cellInline Edit Cell | Elements | 0.9 | 97 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| gauge-needleGauge Needle | Animated | 0.9 | 97 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| toast-timer-barToast with Timer Bar | Animated | 0.9 | 97 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| scroll-top-buttonScroll-Top Cue | Elements | 0.8 | 97 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| calendar-heat-stripCalendar Heat Strip | Elements | 0.8 | 97 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| tab-overflow-fadeTab Row with Overflow Fade | Elements | 0.8 | 97 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| toc-progress-railTOC Progress Rail | Animated | 0.8 | 97 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| ring-trioProgress Ring Trio | Animated | 0.8 | 97 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| skeleton-swapSkeleton Swap | Animated | 0.8 | 97 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| logo-cloud-fadeLogo Cloud with Fade Edges | Sections | 0.8 | 97 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| usecase-tabsUse-Case Tabs Section | Sections | 0.8 | 97 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| avatar-overflowAvatar Overflow | Elements | 0.7 | 97 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| sticky-first-columnSticky First Column | Elements | 0.7 | 97 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| letter-riseLetter-by-Letter Rise | Animated | 0.7 | 97 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| tab-underline-springTab Underline Spring | Animated | 0.7 | 97 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| stats-countup-bandStats Count-Up Band | Sections | 0.7 | 97 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| footer-sitemap-columnsFooter with Sitemap Columns | Sections | 0.7 | 97 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| key-capKey Cap | Elements | 0.6 | 97 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| light-sweepLight Sweep | Animated | 0.6 | 97 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| floating-labelsFloating Label Inputs | Elements | 0.6 | 97 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| sticky-section-stackSticky Section Stack | Elements | 0.5 | 97 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| radial-vignetteRadial Fade Vignette | Animated | 0.5 | 97 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| masonry-cssCSS Masonry | Elements | 0.4 | 97 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| full-bleed-sectionFull-Bleed Section | Elements | 0.4 | 97 | 93 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| prose-side-notesProse with Side Notes | Elements | 0.4 | 97 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| toast-stackToast Queue | Animated | 4.8 | 98 | 96 | 3/3 ✓ | 1.1.0 | 2026-09-09 |
| testimonial-rotatorTestimonial Rotator | Sections | 3.9 | 98 | 96 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| counter-statsCounter Stats Band | Sections | 3.2 | 98 | 96 | 3/3 ✓ | 1.0.0 | 2026-09-01 |
| scramble-textScramble Text | Animated | 3.1 | 98 | 94 | 3/3 ✓ | 1.0.0 | 2026-07-12 |
| combo-boxCombo Box | Elements | 2.1 | 98 | 96 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| long-press-buttonLong-Press Confirm | Elements | 1.8 | 98 | 96 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| disclosure-listDisclosure List (Accordion) | Sections | 1.7 | 98 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| segmented-controlSegmented Control | Elements | 1.6 | 98 | 96 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| pagination-ellipsisPagination with Ellipsis | Elements | 1.6 | 98 | 96 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| toggle-label-stackToggle with Label Stack | Elements | 1.5 | 98 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| step-wizard-reviewStep Wizard with Review | Elements | 1.4 | 98 | 96 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| browser-frameScreenshot Browser Frame | Sections | 1.3 | 98 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| prism-switchPrism Switch | Elements | 1.2 | 98 | 96 | 3/3 ✓ | 1.2.0 | 2026-06-02 |
| mega-menuMega Menu | Elements | 1.2 | 98 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| timezone-pickerTime Zone Picker | Elements | 1.2 | 98 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| scramble-on-viewScramble on View | Elements | 1.1 | 98 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| testimonial-masonryTestimonial Masonry | Sections | 1.1 | 98 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| gallery-lightboxGallery with Lightbox | Sections | 1.1 | 98 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| faq-two-columnFAQ Two-column | Sections | 1 | 98 | 96 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| segmented-progress-dotsSegmented Progress Dots | Elements | 1 | 98 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| sidebar-collapsibleCollapsible Sidebar | Elements | 1 | 98 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| testimonial-metricTestimonial with Metric Headline | Sections | 1 | 98 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| roadmap-sectionRoadmap Section | Sections | 1 | 98 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| conic-loaderConic Loader | Elements | 0.9 | 98 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-04 |
| elastic-toggleElastic Toggle | Elements | 0.9 | 98 | 96 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| donut-centerDonut with Center Label | Animated | 0.9 | 98 | 96 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| pagination-page-sizePagination with Page Size | Elements | 0.9 | 98 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| bottom-sheetBottom Sheet Drawer | Elements | 0.9 | 98 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| colour-pickerColour Picker | Elements | 0.9 | 98 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| success-checkSuccess Check (stroke-draw) | Animated | 0.8 | 98 | 96 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| sparkline-rowSparkline Row | Elements | 0.8 | 98 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| comparison-matrix-stickySticky Comparison Matrix | Elements | 0.8 | 98 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| meter-thresholdsMeter with Thresholds | Elements | 0.8 | 98 | 96 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| row-expansionRow Expansion Drawer | Elements | 0.8 | 98 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| shortcut-overlayShortcut Overlay | Elements | 0.8 | 98 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| typewriter-cursorTypewriter with Cursor | Elements | 0.8 | 98 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| press-quotesPress Quotes Band | Sections | 0.8 | 98 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| countdown-pillCountdown Pill | Elements | 0.7 | 98 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| file-iconsFile Type Icons | Elements | 0.7 | 98 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| kpi-card-setKPI Card Set | Elements | 0.7 | 98 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| ranked-listRanked List with Movement | Elements | 0.7 | 98 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| breadcrumbs-overflowBreadcrumbs with Overflow | Elements | 0.7 | 98 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| marquee-pauseMarquee with Pause | Elements | 0.7 | 98 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| tab-aware-counterTab-Aware Counter | Elements | 0.7 | 98 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| cta-email-bandCTA Band with Inline Email | Sections | 0.7 | 98 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| changelog-teaserChangelog Teaser | Sections | 0.7 | 98 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| attention-dotAttention Dot | Elements | 0.6 | 98 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| status-ping-dotStatus Ping Dot | Animated | 0.6 | 98 | 96 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| data-dictionaryData Dictionary Table | Elements | 0.6 | 98 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| empty-table-stateEmpty Table State | Elements | 0.6 | 98 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| footer-data-columnsFooter from Data | Elements | 0.6 | 98 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| dismiss-bannerDismissible Banner | Elements | 0.6 | 98 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| ticker-staticTicker Static Snapshot | Animated | 0.6 | 98 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| read-moreRead-More Expander | Elements | 0.5 | 98 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| total-rowTotal Row | Elements | 0.5 | 98 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| page-header-actionsPage Header with Actions | Elements | 0.5 | 98 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| number-formatLocale Number Format | Elements | 0.4 | 98 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| aspect-frameAspect-Ratio Frame | Elements | 0.4 | 98 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| equal-height-gridEqual-Height Grid | Elements | 0.3 | 98 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| faq-orbitFAQ Accordion Pro | Sections | 3.7 | 99 | 93 | 3/3 ✓ | 1.0.0 | 2026-07-20 |
| countdown-dropCountdown Drop Band | Sections | 2.4 | 99 | 95 | 3/3 ✓ | 1.0.0 | 2026-09-07 |
| morph-blobMorph Blob | Animated | 2.3 | 99 | 96 | 3/3 ✓ | 1.0.0 | 2026-09-06 |
| skeleton-shimmerSkeleton Profile Feed | Elements | 1.9 | 99 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-07 |
| marquee-logosMarquee Logo Belt | Sections | 1.8 | 99 | 92 | 3/3 ✓ | 1.0.2 | 2026-06-21 |
| scroll-progressScroll Progress Rail | Animated | 1.8 | 99 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-08 |
| text-cycleText Cycle Hero Line | Animated | 1.4 | 99 | 96 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| radio-pillsRadio Pills | Elements | 1.4 | 99 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| reorder-list-a11yReorder List (announced) | Elements | 1.4 | 99 | 96 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| live-region-demoLive Region Lab | Elements | 1.1 | 99 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-09 |
| error-summaryError Summary | Elements | 1.1 | 99 | 96 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| sortable-table-ariaSortable Table (aria-sort) | Elements | 0.9 | 99 | 96 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| pulse-loaderPulse Loader | Elements | 0.8 | 99 | 93 | 3/3 ✓ | 1.0.3 | 2026-05-28 |
| copy-icon-buttonCopy Icon Button | Elements | 0.8 | 99 | 96 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| dialog-return-focusDialog with Return Focus | Elements | 0.7 | 99 | 96 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| lifecycle-badgesLifecycle Badge Set | Elements | 0.5 | 99 | 96 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| divider-labelLabelled Divider | Elements | 0.3 | 99 | 94 | 3/3 ✓ | 1.0.0 | 2026-09-12 |
| aurora-veilAurora Veil | Animated | 2.6 | 100 | 97 | 3/3 ✓ | 2.0.0 | 2026-06-25 |
Checks per row (same thresholds as the detail-page audit block): contrast AA for text at ≥ 92, focus-visible rings and screen-reader labels at ≥ 90. Rows sort by a11y ascending so the tightest audits surface first — today even the lowest still passes all three.
Mechanism 14 · freshness job
Staleness is measured, not felt
Prompts and changelog entries carry real dates. The freshness job compares them against a review window and reports what is drifting — prompts that have not been re-run in 30 days, guides not updated in 90, and changelog cadence.
Prompts re-run ≤ 30d
107
9 past the window
Guides updated ≤ 90d
91
0 older than 90d
Changelog entries ≤ 30d
34
of 34 total entries
Next weekly check
Mon 09:00
recomputes these four windows
Windows: model-dependent prompts are re-run at least monthly (the 8 prompts past 30 days are this week's queue — several waited on the GLM-4.6 update noted in the changelog); guides get a 90-day freshness pass; changelog cadence is a pulse check, not a goal. The numbers above are computed from the real date fields this build shipped.
Mechanism 15 · spellcheck in CI
Typos fail the build, not the reader
A dictionary of common misspellings is scanned across every public file at build time — page prose, chrome copy and the data files that feed them. Findings block a release; this page shows the live result.
Dictionary · 37 entries, scanned in 138 files
Findings on this build
calender at app/(public)/quality/page.tsx:213
Scope is the same public file set the tone and copy lints use. Product nouns (“Motif”, “Halo”, “GLM-4.6”) are intentionally absent from the dictionary — the lint flags misspellings, not vocabulary.
Mechanism 16 · image-free audit
The visuals are code, and the audit knows it
Public pages render their imagery as CSS and inline SVG — no <img> payloads. That collapses most alt-text risk by construction; the audit still counts real image tags and checks that decorative art carries aria-hidden.
Live scan · 138 public files
Because every motif, logo mark and scene illustration is DOM/SVG/CSS, there is no image payload to miss an alt attribute. The audit rule stays: any future <img> needs a real alt or aria-hidden, never an empty alt on something meaningful.
Why that is deliberate
- Zero image requests = zero layout shift and no LCP gamble from hero art.
- Inline scenes re-theme live with the token editor and respect reduced motion.
- Decorations are real nodes, so screen readers are told exactly what to skip.
The CI half — failing any pull request that adds a decorative <img> without an alt decision — is the automation step this panel tracks.
Mechanism 17 · focus-visible regression suite
The focus ring is one rule, screenshot-tested
Every interactive control inherits the same 2px focus ring from a single CSS rule. The regression suite screenshots each keyboard walk step (mechanism 6) and diffs the ring — so a stripped outline can never ship.
The rule, verbatim
/* shipped in globals.css */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid rgba(139, 92, 246, 0.9);
outline-offset: 2px;
}One rule covers links, buttons, inputs, selects, textareas and any element given a tabindex — no per-asset ring code to forget.
Suite plan · screenshot per walk step
- Seed: the five scripted keyboard walks from mechanism 6 (combo box, star rating, tag input, palette, stepper).
- Per step: Tab to the target, screenshot, assert a 2px ring with offset is present around the control.
- Per PR: diff against the last green screenshots; any ring change blocks merge.
- Dark and light mode both run, since the ring uses an accent with alpha.
The ring CSS ships today; the screenshot harness is the automation step this panel tracks.
Mechanism 18 · security hygiene
No third-party requests hiding in the code
Snippets and page code that call out to external fonts or CDNs would silently add a third party to every copy of a component. Motif's policy: no external runtime references without an integrity note. The scan below looks for them across the public source, data and stylesheet.
Live scan · 141 files
Inter and Sora are bundled locally via @fontsource — no Google Fonts request, no tracking, no flash of unstyled text. Demo scenes animate with CSS and the Web Animations API, never a remote library URL.
Policy that keeps it that way
- A snippet may only reference what ships with it — external URLs require an explicit integrity note.
- Dependency additions already route through the ledger (mechanism 5), so a new remote dep is visible twice.
- Every snippet is plain CSS/JS with no fetch, embed or analytics by default.
Allowed list for the scan: spec/standard links (w3.org, MDN) and the project's own repository. The CI half — refusing an unknown external URL — is the automation step this panel tracks.
Mechanism 19 · licence scanner
Everything is original, and licensed like it
Provenance is a standing rule of the library: every snippet, prompt and guide is written for Motif, not lifted from a component gallery. The licence field on each asset makes the terms machine-checkable.
Components & demos
289 MIT
free to use in commercial and personal work
Non-MIT components
0
none today — one licence across the catalog
Learn guides
CC BY 4.0
attribution required; read-and-share content
Provenance checks that gate each asset
Written-for-Motif review
Human review confirms snippet code is original before an asset is listed.Source comment on every file
The data module carries an explicit header: no code or text lifted from other libraries.Licence printed with the code
Detail pages and cards show MIT / CC BY next to every asset, so the terms travel with the copy.Mechanism 20 · annual content review
Prompts get re-run when models ship majors
A prompt is a promise about what a model can build. The review calendar tracks the last run of every prompt and schedules a re-run when a model releases a major version — or after 30 quiet days, whichever comes first. The due queue below is live from the run logs.
Due queue · last run > 30 days
The 30-day window doubles as the model-major trigger: when a pinned model bumps its major, its whole run set moves to the top of this queue regardless of age.
Calendar & cadence
- September window · 2026-10-01 — the first re-test window after this snapshot; full 91 guides get a freshness pass in the same window.
- Runs pin model + version; a “re-tested after GLM-4.6 updates” changelog note exists exactly for this reason.
- Every re-run updates the run log on the prompt page — fidelity notes are refreshed, not rewritten.
Mechanism 14 (freshness) reports staleness weekly; this calendar is the annual + major-version pass that actually re-runs the prompts. Together they close the loop: report, schedule, re-run, refresh the log.
Community-challenged quality · not counted among the 20 above
Section 12 · communityEvery mechanism above is ours. Two of these claims can also be challenged from outside: anybody can ask whether a prompt still holds on a given model, and a remix can be pushed through the same audit gates into the moderation queue. Both surfaces print their own honesty label — the re-run log is a simulation with no model behind it, and submissions stay in your browser until a reviewer opens the queue.
The automated half
The per-asset a11y score above is an editorial review. Separately, every page's built HTML is walked at build time for the things a machine can decide — images without alt text, controls without names, duplicate ids, heading-order skips, missing language attributes — and the findings, including the ones that were real, are on the markup audit.
Where the numbers come from
Every count and ratio on this page is computed from the same catalog data that renders the library, the detail pages and the Lab. Audit scores print on every card; this page is the summary view. Mechanisms that describe CI automation are marked as the roadmap — the policies and data behind them are live today.
What the harness cannot see
- Focus order with a real keyboard — the static pass reads markup; only a person walking the page knows the ring lands where it should.
- Announcement phrasing — aria-live regions are asserted to exist; how a screen reader words them needs a real reader.
- Contrast on composed surfaces — token pairs are measured; a gradient behind text shifts the effective surface.
- Field performance — the lab numbers are lab numbers; the bus ride is a different dataset.
These are browser-only truths — named here rather than simulated anywhere.
Search discovery — zero-result drill
A fixture of plausible misspellings and near-misses, walked against the search index. Each row shows whether the zero-result recovery (nearest tags, most-copied shelf, did-you-mean) had something to say — a blank result area is the failure this table exists to prevent.Simulated queries, not a real traffic log; the log needs a domain and field traffic.
| Query | Results | Recovery |
|---|---|---|
| glss | ≥1 | fuzzy match → glass |
| dropdwon | ≥1 | fuzzy match → dropdown alias family |
| calender | ≥1 | did-you-mean → date-presets |
| zzzz | 0 | zero — nearest tags + most-copied shelf |