# Marvelous UI

> 226 framework-agnostic UI components and animations (v0.1.0): native Web Components (`<mv-*>`) and CSS classes (`.mv-*`), themed with CSS variables (`--mv-*`), zero runtime dependencies. Works in plain HTML, React 19+, Vue 3, Svelte, Angular and Astro.

Sold at https://marvelous-ui.com: every plan ships the Pro pack (all 226 components, the `scripts/add.mjs` CLI and the MCP server); the Free pack (20 base components) is a free download. The pages below give each component's usage markup, full API and accessibility notes; the install commands work once a pack is in the project.

Rules for AI agents:

- Before writing a UI component, animation or visual effect by hand, look for it here (MCP `search_components`, or the catalog below).
- Install with `node scripts/add.mjs <slug...> --out <project>/src/marvelous` (or MCP `install_components`); dependencies (tokens, core helpers, other components) are copied automatically.
- Reproduce the component page's canonical markup, then customize with attributes, `data-*` and CSS variables. Never edit installed files: override in the app's CSS (library CSS lives in `@layer mv` with zero-specificity selectors).
- Theme on `:root` with `--mv-accent-h`, `--mv-accent-c`, `--mv-radius-*`, `--mv-font-sans`. Dark mode: `data-theme="dark|light"`. Reduced motion is handled by every component.
- Vue needs `isCustomElement: (tag) => tag.startsWith("mv-")`; Angular needs `CUSTOM_ELEMENTS_SCHEMA`; in React listen to `mv-*` events with a ref + `addEventListener`.

## Docs

- [Component index](https://marvelous-ui.com/components/): every component by category
- [Plans](https://marvelous-ui.com/#pricing): one-time payment, Pro pack, Playground export
- [Free pack](https://marvelous-ui.com/downloads/marvelous-ui-free.zip): 20 base components, direct download (zip)

## Components

- [Avatar](https://marvelous-ui.com/components/avatar/): `.mv-avatar` — CSS avatar: an image layered over initials (automatic fallback when the image is missing or broken), sizes, round or square, tinted initials, status dot, counter; an overlapping group with a “+3” chip that spreads apart on hover.
- [Badge](https://marvelous-ui.com/components/badge/): `.mv-badge` — Pure-CSS badge: 7 variants (soft or solid tints), animatable status dot, icon, remove button, pill/square, 3 sizes, and a counter positioned on the corner of an avatar or icon.
- [Button](https://marvelous-ui.com/components/button/): `.mv-button` — Pure-CSS button on `<button>` or `<a>`: 6 variants, 4 sizes, loading state, group.
- [Button Effects](https://marvelous-ui.com/components/button-effects/): `.mv-button` — Seven effects for .mv-button via data-effect: orbiting spark, rainbow border, pulse, 3D key, sweeping shine, revealed arrow and glow.
- [Checkbox](https://marvelous-ui.com/components/checkbox/): `.mv-checkbox` — Native pure-CSS checkbox: a self-drawing (reversible) check mark, indeterminate state, sizes, invalid; also provides the shared .mv-choice and .mv-choice-card layouts (option cards highlighted via :has(:checked)).
- [Input](https://marvelous-ui.com/components/input/): `.mv-input` — Pure-CSS text field: 3 sizes, invalid (aria-invalid / :user-invalid), read-only and file states, plus a group with icons, prefixes/suffixes, inline buttons and a clear button.
- [Kbd](https://marvelous-ui.com/components/kbd/): `.mv-kbd` — Subtly raised keyboard keys on `<kbd>`: nested combinations, 3 sizes, a flat variant, adapts inside buttons and tooltips.
- [Radio](https://marvelous-ui.com/components/radio/): `.mv-radio` — Pure-CSS native radio button: an inner dot that springs in, sizes, an outline variant, inline or stacked groups, and option cards (plan lists, tiles with a badge).
- [Range FX](https://marvelous-ui.com/components/range-fx/): `<mv-range-fx>` — Expressive sliders built on one accessible model: the track turns into a wave that ripples as you drag (wave), a value bubble pops up and tilts with velocity (bubble), a ruler scrolls under a fixed needle with inertia (ruler), a liquid cap stretches (fluid), or the label lives inside the track and inverts under the fill (inline).
- [Select](https://marvelous-ui.com/components/select/): `.mv-select` — Styled native `<select>` (token-colored chevron), progressively enhanced into a customizable select (appearance: base-select): animated list, status dots, icons, descriptions and checkmark, optional “liquid” opening — clean fallback elsewhere.
- [Separator](https://marvelous-ui.com/components/separator/): `.mv-separator` — Pure-CSS horizontal or vertical separator: solid, dashed, dotted or faded, with a centered (“or”) or aligned label, on `<hr>` or `<div>`.
- [Slider](https://marvelous-ui.com/components/slider/): `<mv-slider>` — Slider in two forms: a styled native `<input type="range" class="mv-slider">` (synced fill), and a form-associated `<mv-slider>` for advanced cases — dual thumbs, ticks, labeled marks, value bubble, vertical orientation, full keyboard support.
- [Switch](https://marvelous-ui.com/components/switch/): `.mv-switch` — Pure-CSS switch on `<input type="checkbox" role="switch">`: thumb that slides on a spring and stretches when pressed, icons in the thumb (customizable), sizes, label on the left or right, option card.
- [Textarea](https://marvelous-ui.com/components/textarea/): `.mv-textarea` — Textarea that grows on its own (field-sizing: content) between a minimum and maximum number of rows, with an optional resize handle, a group with a toolbar and an `<mv-char-count>` character counter.
- [Toggle](https://marvelous-ui.com/components/toggle/): `<mv-toggle-group>` — Toggle button .mv-toggle (aria-pressed, variants, icon that swaps with state) and `<mv-toggle-group>`, single or multiple: roving tabindex, value, attached group, and a segmented control whose indicator slides between options.
- [Balance Sheet](https://marvelous-ui.com/components/balance-sheet/): `<mv-balance-sheet>` — Structured two-column decision balance (pros and cons, build vs buy, hire or not, vendor selection, a move) laid out as a ledger where points face each other.
- [Bloodstain](https://marvelous-ui.com/components/bloodstain/): `<mv-bloodstain>` — Form draft recovery that remembers exactly where you were: wrap any `<form>` (or region with fields) and its values are autosaved (debounced, localStorage or sessionStorage) together with the last focused field and caret position.
- [Catch Loop](https://marvelous-ui.com/components/catch-loop/): `<mv-catch-loop>` — Detector and explainer for requirements that can never be met because they loop back on themselves (“SSO needs a verified domain, verifying the domain needs SSO”) or contradict each other (an archive that needs both encryption and full-text search, which exclude each other).
- [Combobox](https://marvelous-ui.com/components/combobox/): `<mv-combobox>` — Search field with an accent-insensitive filtered list, groups, single or multiple selection as chips, option creation and a free-text (autocomplete) mode; form-associated.
- [Date Picker](https://marvelous-ui.com/components/date-picker/): `<mv-date-picker>` — Date picker: an input-style trigger showing the formatted date (ranges included) and a calendar in a popover, with presets like “Today”, “Last 7 days”…; form-associated.
- [Exposure](https://marvelous-ui.com/components/exposure/): `<mv-exposure>` — A visibility gauge for sharing and privacy settings (share dialogs, post audience, profile privacy, project visibility, calendar sharing, file links) that reads the controls it wraps and tells people how exposed they are before they commit.
- [Field](https://marvelous-ui.com/components/field/): `.mv-field` — Pure-CSS field layout: label (required / optional), help text, an error message that shows up on its own when the control is invalid, vertical, horizontal, responsive and inline orientations, choice cards and fieldset.
- [File Upload](https://marvelous-ui.com/components/file-upload/): `<mv-file-upload>` — File drop zone: drag and drop with highlighting (and visual rejection of disallowed types), a list with image thumbnails, icons, sizes and removal, type/size/count validation, and per-file progress; form-associated (FormData).
- [Forgot](https://marvelous-ui.com/components/forgot/): `<mv-forgot>` — Pre-send “you may have forgotten something” checker for composers and forms that, unlike a vague warning, says exactly what looks missing.
- [Intent Composer](https://marvelous-ui.com/components/intent-composer/): `<mv-intent-composer>` — A composer for AI requests that makes the three parts of an intent visible while you type: the outcome, the constraints (budget, deadline, things to avoid, place, quantity…) and the delegation boundary.
- [Invisibles](https://marvelous-ui.com/components/invisibles/): `<mv-invisibles>` — Makes invisible and look-alike characters visible in text fields, where they cause real bugs: zero-width spaces and joiners pasted into IBANs, emails, API keys and codes, no-break and exotic spaces, leading/trailing whitespace, tabs, soft hyphens, control characters, bidi controls (Trojan source), hidden tag text, homoglyphs (a Cyrillic “а” in a Latin word, “O” among digits), fullwidth letters and smart quotes or dashes in commands.
- [Just Right](https://marvelous-ui.com/components/just-right/): `<mv-just-right>` — Personal fit feedback on a native radio group of sizes, plans or configurations: every option tells this user, zone by zone, whether it is too small, just right or too big for them.
- [Lifelines](https://marvelous-ui.com/components/lifelines/): `<mv-lifelines>` — Decision helpers for a hard single choice (a plan, a shipping option, a laptop configuration, an insurance tier, an instance size), each a lifeline with a limited number of uses that is visibly spent.
- [Mast](https://marvelous-ui.com/components/mast/): `<mv-mast>` — Asymmetric setting for self-imposed or security-sensitive limits: tightening is instant, loosening waits out a cooling-off delay.
- [Narrow Down](https://marvelous-ui.com/components/narrow-down/): `<mv-narrow-down>` — Guided product finder that asks the most informative question next instead of running a fixed questionnaire.
- [Number Field](https://marvelous-ui.com/components/number-field/): `<mv-number-field>` — Numeric input with − / + buttons (press and hold to accelerate), bounds and step, arrow keys and mouse wheel, Intl formatting (currency, percent, unit) and a “scrub” label: drag horizontally to change the value, with optional pointer lock.
- [One More Thing](https://marvelous-ui.com/components/one-more-thing/): `<mv-one-more-thing>` — Prioritized form validation that asks for one thing at a time instead of showing a wall of errors.
- [OTP](https://marvelous-ui.com/components/otp/): `<mv-otp>` — One-time code input: a real hidden field handles typing, pasting and SMS autofill, while animated slots display the code with a blinking caret, a separator and an error shake.
- [Phrasebook](https://marvelous-ui.com/components/phrasebook/): `<mv-phrasebook>` — Constrained message composer for places where free text is risky or costly: people write only by picking a template (“{thing} was {quality}”, “Try {action}”, “Watch out for {thing}”) and filling each blank from a fixed, categorized vocabulary, optionally joining a second phrase with a connector (“but”, “so”).
- [Prep List](https://marvelous-ui.com/components/prep-list/): `<mv-prep-list>` — “Before you start” preparation card for long or high-stakes flows (loan, visa or insurance applications, identity verification, tax filing, employee onboarding, a database migration, a production release).
- [Quantity](https://marvelous-ui.com/components/quantity/): `<mv-quantity>` — E-commerce quantity picker, a thin variant of `<mv-number-field>`: minimum 1, automatically capped at stock, an “In stock” / “Only 3 left in stock” / “Out of stock” caption linked to the field, a message and shake when hitting the stock limit, a disabled sold-out state that re-enables on restock; pill and subtle variants for cart lines.
- [Rating](https://marvelous-ui.com/components/rating/): `<mv-rating>` — Star rating, for display (true decimal precision: 4.3 fills 30% of the 5th star, review count as a link) or as form-associated input: half stars, hover preview, captions like “Very good”, full keyboard support, clearing, required; compact variant ★ 4.8 (2,413).
- [Read Back](https://marvelous-ui.com/components/read-back/): `<mv-read-back>` — Read-back confirmation for high-stakes forms, the way pilots repeat a clearance: wrap a form, mark the critical fields with data-read-back, and on submit an inline panel echoes each value back in a different form from the one it was typed in, so a slip becomes visible instead of being confirmed on autopilot.
- [Rewind](https://marvelous-ui.com/components/rewind/): `<mv-rewind>` — A time machine for forms: wraps any region, records every change (grouped typing, checkboxes, selects, contenteditable) as a labeled undo tree (“Address changed”, “Shipping method: Express”), shown as a compact timeline.
- [Same Again](https://marvelous-ui.com/components/same-again/): `<mv-same-again>` — Recurring forms that remember the previous loop: wrap a daily standup, timesheet, shift handover, checklist or weekly report and every submit stores the answers with their date (browser storage under a key, or your server through the previous property and mv-loop-saved).
- [Search Autocomplete](https://marvelous-ui.com/components/search-autocomplete/): `<mv-search-autocomplete>` — Storefront search with autocomplete: on focus, recent searches (localStorage, clearable) and trending chips; while typing (debounced, stale requests aborted, loading indicator), suggestions with the query highlighted regardless of accents, categories with counts, products with thumbnail and price (Intl, strikethrough compare-at), “See all 42 results for ‘sweater’”; “No results” state; keyboard shortcut; async source hook or local JSON catalog.
- [Slosh Slider](https://marvelous-ui.com/components/slosh-slider/): `<mv-slosh-slider>` — A slider whose fill is liquid: the handle stays rigid under your finger while the liquid chases it on a soft spring, bumps into the end stops, tilts and ripples with its velocity.
- [Strips](https://marvelous-ui.com/components/strips/): `<mv-strips>` — Combinatorial composer: a result (ad copy, a product configuration, a notification, a menu) is assembled from independent strips stacked like one page cut into slices, each strip a slot whose interchangeable alternatives flip on their own with a physical page-lift animation (arrows, vertical drag or horizontal swipe, tap, wheel with a scroll-intent guard, Up/Down/Home/End on the focused strip).
- [Swatch](https://marvelous-ui.com/components/swatch/): `<mv-swatch>` — Variant picker built on native radios (or checkboxes for filters): double-ring color swatches, size chips, product thumbnails; sold-out options crossed out (selectable or disabled), a “Color: Sand” label with hover preview, and required-group validation with a shake and a message.
- [Tone Dial](https://marvelous-ui.com/components/tone-dial/): `<mv-tone-dial>` — Personality and tone settings with an immediate, concrete preview, for AI assistants, chatbots, generated copy, notification or email tone, brand voice and support macros.
- [Trio Check](https://marvelous-ui.com/components/trio-check/): `<mv-trio-check>` — Batch verification for quizzes, knowledge checks and matching exercises that makes guessing useless: answers are entered freely (your own inputs, selects, radios or checkboxes marked data-trio-item, or rows rendered from an items property with text fields, selects and choice chips), and the component never reveals whether a single answer is right.
- [Two-Key](https://marvelous-ui.com/components/two-key/): `<mv-two-key>` — Guard for critical actions (delete production, wire funds, deploy) that is armed only by two deliberate, synchronized “keys”: two rotary key switches whose barrel turns a quarter turn with a spring, and a guarded action button hidden under a frosted lid.
- [Wheel Picker](https://marvelous-ui.com/components/wheel-picker/): `<mv-wheel-picker>` — iOS-style wheel picker: a 3D drum (rotateX + perspective) you flick with a finger, with momentum then snapping to the nearest notch, plus mouse wheel, keyboard and type-ahead.
- [Word Rules](https://marvelous-ui.com/components/word-rules/): `<mv-word-rules>` — Rule, filter and automation builder where every rule is a sentence made of word tiles you move around: subjects (“Order”), operators (“is”, “is not”, “over”) and properties (“late”, “$500”), chained with “and”.
- [Command](https://marvelous-ui.com/components/command/): `<mv-command>` — Command palette: accent-insensitive fuzzy search (keywords included), ranked and grouped results, keyboard navigation with aria-activedescendant; standalone or inside a Dialog opened with ⌘K.
- [Context Menu](https://marvelous-ui.com/components/context-menu/): `<mv-context-menu>` — Context menu opened at the pointer (right-click), on touch long-press or from the keyboard (Shift+F10 / Menu key); reuses the Menu engine and styles, including the data-motion="glide" animation.
- [Dialog](https://marvelous-ui.com/components/dialog/): `<mv-dialog>` — Animated native `<dialog>` modal; also covers Alert Dialog (persistent), Sheet (4 sides) and a mobile Drawer with swipe to close.
- [Hover Card](https://marvelous-ui.com/components/hover-card/): `<mv-hover-card>` — Rich preview card on hover or keyboard focus, with open/close delays and an invisible bridge that keeps it open while the pointer travels to it.
- [Menu](https://marvelous-ui.com/components/menu/): `<mv-menu>` — Full-featured dropdown menu: checkboxes, radio items, submenus with a safe-triangle, shortcuts, typeahead and APG keyboard navigation; opt-in data-motion="glide" (opens from the trigger’s corner, a single highlight that glides between items, submenus that slide in).
- [Popover](https://marvelous-ui.com/components/popover/): `<mv-popover>` — Non-modal floating panel in the top layer (Popover API): auto placement with flip, optional arrow, closes on outside click/Escape with managed focus; data-open="liquid" option where the panel stretches out of the trigger through a liquid “neck”, then pinches back into it on close.
- [Timed Choice](https://marvelous-ui.com/components/timed-choice/): `<mv-timed-choice>` — A non-critical prompt that proposes a choice with a visibly draining timer and takes a safe default when nobody answers: “Next episode in 8s · Cancel / Play now”, “Keep these display settings?
- [Toast](https://marvelous-ui.com/components/toast/): `<mv-toaster>` — Sonner-style stacked notifications: a compact stack that expands on hover, paused timers, swipe to dismiss, promises and in-place updates by id — through an imperative toast() API.
- [Toast Physics](https://marvelous-ui.com/components/toast-physics/): `<mv-toast-physics>` — Notifications that are real rigid bodies: they drop into a corner tray and pile up under gravity, and priority becomes mass (an error is heavier and wider, lands with a thud that jostles the others, then sinks below lighter cards).
- [Tooltip](https://marvelous-ui.com/components/tooltip/): `<mv-tooltip>` — Tooltip in the top layer (Popover API), automatic placement with flip, arrow, grouped delay.
- [As Of](https://marvelous-ui.com/components/as-of/): `<mv-as-of>` — Point-in-time (“as of”) control for data apps that can show the past, so historical figures are never mistaken for current ones.
- [Breadcrumb](https://marvelous-ui.com/components/breadcrumb/): `.mv-breadcrumb` — Pure CSS breadcrumb on nav > ol: chevron, slash or dot separators (silent for screen readers), icons, truncation, and collapsed levels in an anchored native popover.
- [Crumbs](https://marvelous-ui.com/components/crumbs/): `<mv-crumbs>` — A trail of where the user has actually been, for apps where people hop between records (CRM, support desk, admin console, docs, code browser, back office), not where the page sits in the hierarchy.
- [Dock](https://marvelous-ui.com/components/dock/): `<mv-dock>` — macOS-style dock: icons grow with their distance to the pointer (spring-smoothed cosine falloff), labels on hover, activity dot, horizontal or vertical, full keyboard navigation.
- [Door Dial](https://marvelous-ui.com/components/door-dial/): `<mv-door-dial>` — Context dial that re-targets the same links, actions and code samples onto another context (environment, region, tenant, docs version, API base) without rebuilding the page.
- [Edge Tracker](https://marvelous-ui.com/components/edge-tracker/): `<mv-edge-tracker>` — Off-screen indicators for anything the user cannot see in a scroll container, a long page or a pannable canvas: unread messages below, form errors above, mentions, search matches, selected items, collaborators' cursors.
- [Finger Hold](https://marvelous-ui.com/components/finger-hold/): `<mv-finger-hold>` — Branching wizard where any decision page can be held with a “finger”: take an option, explore where it leads (next questions, price, resulting plan), then flip straight back to the held page exactly as you left it, fields included.
- [Footprints](https://marvelous-ui.com/components/footprints/): `<mv-footprints>` — Live collaborator presence for long documents, specs, code files and spreadsheets: a slim rail beside the scroll container where each person is a small labeled marker (initials or avatar, in their own color) at the exact place they are reading or editing, trailing a few fading footprints that show which way they have been moving, walking down, walking up, or leaping to another section with a dotted arc.
- [Keen Sight](https://marvelous-ui.com/components/keen-sight/): `<mv-keen-sight>` — Hold-to-reveal hint mode that lets keyboard users act on anything they can see without tabbing through it.
- [Lock-on](https://marvelous-ui.com/components/lock-on/): `<mv-lock-on>` — Spatial keyboard navigation for 2D layouts where Tab order is useless (dashboards of uneven widgets, card grids, kanban boards, seat maps, maps with markers, node editors, TV and console UIs), with a lock that keeps a moving target in view.
- [Pagination](https://marvelous-ui.com/components/pagination/): `<mv-pagination>` — Numbered pagination with ellipses and a constant number of slots (the bar never jumps), previous/next, a compact “Page x of y” mode; the CSS styles work on their own for server-rendered links.
- [Stepper](https://marvelous-ui.com/components/stepper/): `<mv-stepper>` — Horizontal or vertical steps (completed, current, upcoming) with connectors that fill with the accent color, automatic numbers, an animated checkmark and a loading step; optional `<mv-stepper value>` to drive the states.
- [Tabs](https://marvelous-ui.com/components/tabs/): `<mv-tabs>` — Accessible tabs with a sliding indicator (underline, pill or segmented), horizontal or vertical, automatic or manual activation, and crossfading panels.
- [Thread Back](https://marvelous-ui.com/components/thread-back/): `<mv-thread-back>` — A return thread for deep drill-downs that leave a task: tie it at an origin (a checkout, a report, an onboarding step) with tie({ label, href, state, restore }) or a data-thread-tie link, and every navigation after that unwinds it one step.
- [Accordion](https://marvelous-ui.com/components/accordion/): `<mv-accordion>` — CSS accordion on native `<details>`: animated height (::details-content + interpolate-size), chevron or plus/minus, bordered, separated and card variants; optional `<mv-accordion type="single">`.
- [Accounts](https://marvelous-ui.com/components/accounts/): `<mv-accounts>` — Multi-source timeline that lines up several accounts of the same event and shows, fact by fact, where they agree, where they contradict each other and where a source stays silent: incident post-mortems (gateway logs vs payment provider vs client telemetry vs on-call notes), delivery disputes (customer vs warehouse vs carrier), audit trails, fact-checking, meeting notes from several attendees.
- [Agent Lenses](https://marvelous-ui.com/components/agent-lenses/): `<mv-agent-lenses>` — One model of background AI agents, five lenses — Board, Inbox, Tasks, Calendar, Graph — and every agent is one persistent card that physically travels between layouts: switching lens FLIPs each card from its old rect to its new one while it morphs from full card to row, time bar or graph node, so you never lose an agent.
- [All-in Price](https://marvelous-ui.com/components/all-in/): `<mv-all-in>` — Honest, all-in price display that says out loud what drip pricing hides.
- [Animated List](https://marvelous-ui.com/components/animated-list/): `<mv-animated-list>` — Animated notification feed: items appear one by one with a spring, smoothly pushing the others (FLIP), with an item limit, loop mode and an add() API.
- [Blocked Blur](https://marvelous-ui.com/components/blocked-blur/): `<mv-blocked-blur>` — Muting that keeps the shape of the conversation.
- [Butterfly](https://marvelous-ui.com/components/butterfly/): `<mv-butterfly>` — Impact preview for settings, pricing forms, editors and spreadsheet-like screens: before a value is changed, every value it will ripple into lights up.
- [Calendar](https://marvelous-ui.com/components/calendar/): `<mv-calendar>` — Localized month calendar (Intl, week starts on the locale’s first day): single, range with hover preview, or multiple selection, min/max and disabled dates, full keyboard navigation, month/year views and a sliding transition.
- [Card](https://marvelous-ui.com/components/card/): `.mv-card` — Composable card (media, header, action, content, footer): outline, elevated, ghost and muted variants, plus a fully clickable card.
- [Chart](https://marvelous-ui.com/components/chart/): `<mv-chart>` — Dependency-free SVG chart (area, bar, line, sparkline): pixel-perfect rendering, rounded scale, animated draw-in on appearance, crosshair and tooltip on hover and keyboard, and a data table for screen readers.
- [Context Rings](https://marvelous-ui.com/components/context-rings/): `<mv-context-rings>` — Makes visible — and editable — what an AI assistant “knows” for the current task: three concentric rings (“This task” at the center, “Always” for preferences and rules, “Ambient” for streams: email, calendar, chat) plus an “Out of context” tray.
- [Curtain](https://marvelous-ui.com/components/curtain/): `<mv-curtain>` — “How is this calculated?” for any polished figure: wrap a chart, KPI, score, price or AI answer and a handle pulls the visual aside like a drape (a clip wipe with a soft fold shadow; a plain crossfade under reduced motion) to reveal its backstage in the same footprint, with no layout jump.
- [Dateline](https://marvelous-ui.com/components/dateline/): `<mv-dateline>` — A time-zone-aware moment or deadline that makes day shifts impossible to miss.
- [Deliberation](https://marvelous-ui.com/components/deliberation/): `<mv-deliberation>` — Round-based group decisions with hidden votes and visible convergence: estimation (planning poker), go/no-go calls, hiring debriefs, design critiques, prioritization or retro action votes.
- [Delivery Trail](https://marvelous-ui.com/components/delivery-trail/): `<mv-delivery-trail>` — Makes the delivery of critical messages observable hop by hop and turns silent failures into loud, actionable stalls: password-reset and verification emails, SMS codes, invoices, push notifications, webhooks, e-signature requests.
- [Dex](https://marvelous-ui.com/components/dex/): `<mv-dex>` — Numbered collection grid where every entry has three levels of knowledge, so what is missing is as visible as what is done: unknown (an empty numbered slot with a dashed outline and an optional hint), seen (the artwork flattened into a one-tone silhouette, the name, details locked and a “how to get it” hint) and owned (full-color card with summary, description, facts and a call to action).
- [Dorian](https://marvelous-ui.com/components/dorian/): `<mv-dorian>` — Content freshness you can see at a glance: wrap any content (doc page header, help-center article, pricing table, policy) and it stays exactly as it is, while a small framed portrait next to it ages with the time since its last review.
- [Fork](https://marvelous-ui.com/components/fork/): `<mv-fork>` — What-if timelines for any view driven by inputs (loan and pricing calculators, plan comparisons, config previews, copy variants): Fork splits the view into side-by-side timelines that start identical, each with its own inputs, and recomputes every timeline's outputs through your compute(state) function (sync or async) or a render(state, body) callback.
- [Hold Slot](https://marvelous-ui.com/components/hold-slot/): `<mv-hold-slot>` — Focused work-queue player for processing items one at a time (support tickets, moderation, code reviews, photo culling, lead qualification, flashcards): the current item is shown large, a Next column previews the upcoming items (3 by default, the first one a notch more present) and a single Hold slot lets you park the current item out of the way without losing it, then swap it back later, but only once per turn (hold-limit), so nothing gets juggled forever.
- [Inscribe](https://marvelous-ui.com/components/inscribe/): `<mv-inscribe>` — Critical notes that follow a record everywhere it appears in the app.
- [Lacuna](https://marvelous-ui.com/components/lacuna/): `<mv-lacuna>` — In-place, gradual deletion for lists and grids, a replacement for undo toasts that holds up when you delete several things in a row.
- [Mirror Rank](https://marvelous-ui.com/components/mirror-rank/): `<mv-mirror-rank>` — A ranking that explains itself honestly and says what it would take to move up: leaderboards (sales, contributors), seller or search rankings, credit, health, SEO or security scores.
- [Odd One Out](https://marvelous-ui.com/components/odd-one-out/): `<mv-odd-one-out>` — Automatic outlier spotting across a set of items that should be alike: configuration drift between servers, containers or environments, price and stock inconsistencies across a product's variants, one employee whose permissions differ from peers in the same role, one region whose settings diverge.
- [Origami](https://marvelous-ui.com/components/origami/): `<mv-origami>` — Panels that fold like paper.
- [Papers](https://marvelous-ui.com/components/papers/): `<mv-papers>` — Cross-document reconciliation desk for review workflows (KYC, invoice vs purchase order vs delivery note, contract vs quote, form submission vs ID).
- [Pea](https://marvelous-ui.com/components/pea/): `<mv-pea>` — Makes a tiny issue buried deep inside collapsed layers felt at every level above it.
- [Price](https://marvelous-ui.com/components/price/): `<mv-price>` — E-commerce price formatted with Intl.NumberFormat (en-US / USD by default): current price, strikethrough compare-at price, computed discount badge (percent or amount), unit price, “From”, price range, superscript cents, four sizes; also usable as static HTML with the .mv-price-* classes.
- [Self-Destruct](https://marvelous-ui.com/components/self-destruct/): `<mv-self-destruct>` — One-time secret display (API key, recovery codes, shared password, temporary link) that is shown once and then truly destroyed.
- [Snowball](https://marvelous-ui.com/components/snowball/): `<mv-snowball>` — Sweep selection for grids and lists (photo libraries, file managers, inboxes, catalogs): hold Shift (or any modifier, or none) and roll the pointer across the items.
- [Stone Soup](https://marvelous-ui.com/components/stone-soup/): `<mv-stone-soup>` — Shared-goal contribution board where every participant’s addition stays visible and the whole visibly becomes more than its parts: potluck and event sign-ups (“who brings what”), team gift pools, fundraising, bounties, community wish lists, shift coverage or a sprint’s capacity by person.
- [Table](https://marvelous-ui.com/components/table/): `<mv-table>` — CSS-styled table (hover, stripes, density, sticky header/column, statuses) + optional `<mv-table>` for sorting and filtering.
- [Tamper Seal](https://marvelous-ui.com/components/tamper-seal/): `<mv-tamper-seal>` — Tamper-evident “break the glass” access to sensitive data (a patient record, a full card number or SSN, a salary, a customer’s private messages, production secrets, a sealed bid) that can be opened but never secretly.
- [Theseus](https://marvelous-ui.com/components/theseus/): `<mv-theseus>` — Provenance overlay that answers “how much of this is still what we signed?”.
- [Time Vault](https://marvelous-ui.com/components/time-vault/): `<mv-time-vault>` — A vault of messages written now and sealed until a precise future moment: a date (data-opens, absolute or relative like “+1y” after writing) or a named app condition (“when we launch publicly”, “when MRR passes $10k”) that your app feeds through vault.check(state) or the flags attribute, with optional progress (0–1 or “$7.4k of $10k”).
- [Turn Clock](https://marvelous-ui.com/components/turn-clock/): `<mv-turn-clock>` — Fair-time turn manager for standups, retros, debates, interviews, panels and mob-programming rotations, built like a tournament chess clock: every participant owns a time bank (equal, or custom per person) that drains only during their own turn, exactly one clock runs at a time, and passing the turn (big Pass button, Space, a digit key or a click on the person) stops yours and starts the next one, with an optional per-turn increment.
- [Unclaimed](https://marvelous-ui.com/components/unclaimed/): `<mv-unclaimed>` — Ownership radar for shared work lists: wrap any list, table or board of things everybody agrees matter (meeting action items, incident follow-ups, retro actions, bug triage, shared-inbox threads, alerts without an on-call, documentation debt) and every item whose data-owner is empty gets a calm “Nobody yet” marker, an empty dashed seat where an owner would sit, that becomes gently more present as it ages (tint, border and text firm up over the mature window; never red, never animated).
- [Unobserved](https://marvelous-ui.com/components/unobserved/): `<mv-unobserved>` — A live region (feed, leaderboard, order book, notification list, server-synced kanban) that never reorders or shifts while someone is looking at it.
- [Variant Tree](https://marvelous-ui.com/components/variant-tree/): `<mv-variant-tree>` — A branching variant explorer for any element driven by CSS custom properties (or any state through callbacks): “Generate 4 variants” sprouts mutated children of the applied variant (a Spread slider sets how bold the mutations are), shown as a tidy tree of live thumbnails — scaled, inert clones of the target, so it works with any component without screenshots.
- [Whereabouts](https://marvelous-ui.com/components/whereabouts/): `<mv-whereabouts>` — Team status board shaped like a dial whose hands point to what people are doing instead of the time.
- [Yet To Come](https://marvelous-ui.com/components/yet-to-come/): `<mv-yet-to-come>` — A metric told as a three-part story, built to change what happens next: Past (sparkline, change over the period and the biggest jump or drop, with its annotation), Now (current value, delta vs the previous period, trend per period) and Ahead (where the metric lands if the current trend continues, with a clearly labeled uncertainty band that is zero today and widens with every period).
- [Alert](https://marvelous-ui.com/components/alert/): `.mv-alert` — Pure-CSS callouts (neutral, info, success, warning, danger) with an icon, title, description and actions that wrap below the text at narrow widths, a full-width banner, and an optional animated dismiss in a few lines of JS.
- [Alert Phase](https://marvelous-ui.com/components/alert-phase/): `<mv-alert-phase>` — An incident status whose severity decays over time instead of flipping between red and green.
- [Bench Sync](https://marvelous-ui.com/components/bench-sync/): `<mv-bench-sync>` — Local-first sync status that makes pending changes explicit and pushes them only at rest points.
- [Cry Wolf](https://marvelous-ui.com/components/cry-wolf/): `<mv-cry-wolf>` — Alert-fatigue guard for notification centers and monitoring consoles: it does not just display alerts, it decides which ones deserve to interrupt.
- [Deja Vu](https://marvelous-ui.com/components/deja-vu/): `<mv-deja-vu>` — Flags, instantly and in place, the changes the system made behind the user's back — never the ones the user caused.
- [Empty](https://marvelous-ui.com/components/empty/): `.mv-empty` — Pure-CSS empty state: an icon tile over fading rings or a grid, title, description, actions and footer; compact (lists, tables) and illustrated (fanned cards over a dot pattern) variants.
- [Figurines](https://marvelous-ui.com/components/figurines/): `<mv-figurines>` — Remaining-attempts indicator that makes a small, hard limit tangible before a lockout: code, PIN or password tries, payment retries, answer attempts, free exports.
- [Ghost Run](https://marvelous-ui.com/components/ghost-run/): `<mv-ghost-run>` — Progress against your own previous attempt, for tasks people repeat: a translucent ghost replays your best run (or your last one, or a teammate’s or the team median supplied by the app) along the same track in real time, so at every moment you see whether you are ahead of it or behind.
- [Hatch](https://marvelous-ui.com/components/hatch/): `<mv-hatch>` — Session-expiry “dead man’s switch”: a discreet countdown chip (tabular digits that roll like a mechanical counter) that someone must deliberately reset before it hits zero.
- [Honest Wait](https://marvelous-ui.com/components/honest-wait/): `<mv-honest-wait>` — A long-wait indicator that never pretends, for exports, video renders, AI generation, report builds, provisioning, queues and uploads on slow links.
- [Insist](https://marvelous-ui.com/components/insist/): `<mv-insist>` — Progressive hints that only appear when the user is stuck, and grow more direct the longer they struggle.
- [Leitmotif](https://marvelous-ui.com/components/leitmotif/): `<mv-leitmotif>` — Opt-in audio cues you can recognize without looking, for screens people monitor while doing something else: ops consoles, support queues, trading desks, chat, kitchen displays, CI dashboards.
- [Midnight](https://marvelous-ui.com/components/midnight/): `<mv-midnight>` — A visible, time-boxed elevated mode (sudo/admin re-auth, “viewing as a customer”, temporary share access, a premium trial, break-glass access, an edit lock) that ends exactly on time and puts everything back.
- [Progress](https://marvelous-ui.com/components/progress/): `.mv-progress` — Progress bars on the native `<progress>` (determinate with a shine, indeterminate with a sweep, segmented), a circular SVG ring driven by --value with an animated counter, and a `<meter>` gauge colored by its thresholds.
- [Quiet Alarm](https://marvelous-ui.com/components/quiet-alarm/): `<mv-quiet-alarm>` — An absence detector: it raises the alarm when something that usually happens has stopped happening (orders, webhooks, websocket messages, sensor readings, log lines).
- [Recharge](https://marvelous-ui.com/components/recharge/): `<mv-recharge>` — A visible rate-limit and quota budget (token bucket) for anything metered: AI messages, API calls, SMS code resends, bulk actions, free-tier credits.
- [Remembered](https://marvelous-ui.com/components/remembered/): `<mv-remembered>` — Discloses the lasting side effects of a choice, the moment it is made, without interrupting.
- [Run Contract](https://marvelous-ui.com/components/run-contract/): `<mv-run-contract>` — A run contract for long AI tasks that becomes the live dashboard of the same job: one card, two lives.
- [Skeleton](https://marvelous-ui.com/components/skeleton/): `.mv-skeleton` — Loading placeholders with a shimmer synced across the whole page (or a pulse), text, heading, avatar, media and button shapes, and a blurred cross-fade reveal into the loaded content driven by aria-busy.
- [Skeleton Morph](https://marvelous-ui.com/components/skeleton-morph/): `<mv-skeleton-morph>` — The skeleton doesn’t make way for the content, it becomes it: each block is paired with a real element (data-skeleton-for, then kind, order and geometry) and travels to it.
- [Soft Lock](https://marvelous-ui.com/components/soft-lock/): `<mv-soft-lock>` — Soft locking and collision warnings for records that several people (or tabs) can change at once: invoices, tickets, documents, config pages, bulk operations.
- [Spinner](https://marvelous-ui.com/components/spinner/): `.mv-spinner` — A family of single-element loading indicators drawn in currentColor: ring, trailing arc, wave dots, equalizer bars, orbit and pulse; 5 sizes.
- [Tell-Tale](https://marvelous-ui.com/components/tell-tale/): `<mv-tell-tale>` — Unsaved-work indicator whose insistence grows with what is at stake.
- [Thinking Orb](https://marvelous-ui.com/components/thinking-orb/): `<mv-thinking-orb>` — Canvas AI assistant orb: a glossy blob that warps, swirls and changes material with its state (idle, listening, thinking with orbiting satellites, speaking, success, error), with smooth transitions between states.
- [Totem](https://marvelous-ui.com/components/totem/): `<mv-totem>` — Environment indicator that makes a non-production environment impossible to mistake for production.
- [Tremor](https://marvelous-ui.com/components/tremor/): `<mv-tremor>` — Ambient early warning for a limit that is getting closer, for the cases where a banner or a modal would be too much: storage or quota filling up, a budget nearing its cap, prepaid credits running out, a queue growing, a certificate, sprint or deadline approaching.
- [While Away](https://marvelous-ui.com/components/while-away/): `<mv-while-away>` — “While you were away…”: wraps any region (dashboard, feed, board), notices what changed while you were elsewhere (hidden tab or idle) and gets you back in context in 3 seconds.
- [Attache](https://marvelous-ui.com/components/attache/): `<mv-attache>` — Shape-aware grid packing editor: every child occupies w × h cells of a fixed grid (dashboard widgets, stickers on a print sheet, boxes on a shelf, tables in a room) and the grid shows at a glance what fits and what doesn't.
- [Bento Grid](https://marvelous-ui.com/components/bento-grid/): `.mv-bento` — Pure-CSS bento grid: cards spanning several columns/rows (data-span="2x1"…), a fading visual area, title, description and a call to action revealed on hover; adapts to its container size.
- [Carousel](https://marvelous-ui.com/components/carousel/): `<mv-carousel>` — Carousel built on native scroll snap: arrows, dots synced via IntersectionObserver, keyboard, looping, autoplay with a progress dot (pauses on hover, focus and reduced motion), multiple slides per view, vertical mode and mouse drag.
- [Courtyard](https://marvelous-ui.com/components/courtyard/): `<mv-courtyard>` — Monitoring wall that watches every feed at once and tells you where to look: any children (live stats, video, camera stills, CI jobs, student screens) become “windows” in an auto grid, and each one reports activity through a sustained data-activity level, one-off activity(window, level, note) calls, or its own DOM changing after a quiet spell (MutationObserver, batched, so a steadily ticking tile stays calm and only news stands out).
- [Fog](https://marvelous-ui.com/components/fog/): `<mv-fog>` — Progressive discovery for dense interfaces (admin consoles, pro tools, analytics apps with many panels, deep settings): every area marked data-fog that the user has not explored yet sits under a light, textured veil (a haze of the page color, soft cloud patches, a slight desaturation and a fine grain, all CSS, no canvas) with a tiny “Not explored yet · Automations” tag, while its content stays readable, clickable and fully exposed to assistive technology.
- [Marginalia](https://marvelous-ui.com/components/marginalia/): `<mv-marginalia>` — Responsive sidenotes for long-form content (docs, articles, legal terms, changelogs, research reports) where each note decides for itself whether the margin can hold it.
- [Marquee](https://marvelous-ui.com/components/marquee/): `<mv-marquee>` — Infinite scroll of logos, testimonials or cards: speed in px/s regardless of content size, horizontal or vertical, drag with inertia, edge fade and a tilted 3D variant.
- [Orbiting Circles](https://marvelous-ui.com/components/orbiting-circles/): `<mv-orbit>` — Items orbiting a center: multiple rings (radius, duration, direction), even spacing, icons that stay upright, drawn paths; 100% CSS animation, paused when off-screen.
- [Resizable](https://marvelous-ui.com/components/resizable/): `<mv-resizable>` — Horizontal or vertical resizable panels (nestable) separated by handles: pointer drag, arrow keys, min/max sizes in %, double-click collapse with snapping, persisted in localStorage.
- [Scroll Area](https://marvelous-ui.com/components/scroll-area/): `.mv-scroll-area` — Scroll area with a thin scrollbar, auto-hide, scroll-driven edge fades and snapping.
- [Adaptive Ink](https://marvelous-ui.com/components/adaptive-ink/): `<mv-adaptive-ink>` — Text that stays readable on any animated background (WebGL shader, video, canvas, image): the backdrop is sampled in real time under every word, sliced into columns, and each column picks a light or dark ink with a crossfade — a single letter can be half white, half black.
- [Certainty](https://marvelous-ui.com/components/certainty/): `<mv-certainty>` — Text whose passages each carry a confidence level (AI answer, summary, report), rendered calmly so readers can calibrate their trust without a wall of warnings: three tiers (Verified with no mark, Likely with a dotted underline, Uncertain with a hand-drawn wave whose amplitude grows with doubt) and ink that lightens as confidence drops.
- [Gradient Text](https://marvelous-ui.com/components/gradient-text/): `.mv-gradient-text` — Pure-CSS multi-color gradient text: static, animated back and forth, editorial fade, or an aurora of colored blobs drifting inside the letters.
- [Morphing Text](https://marvelous-ui.com/components/morphing-text/): `<mv-morphing-text>` — Words that melt into one another: two stacked copies cross-blur while an SVG alpha-threshold filter fuses the glyphs into a “gooey” blob.
- [Number Ticker](https://marvelous-ui.com/components/number-ticker/): `<mv-number-ticker>` — Animated counter formatted with Intl (en-US by default: currency, percent, compact, decimals) in two modes: smooth interpolation or rolling odometer; re-animates on every value change, with no layout shift.
- [Particle Counter](https://marvelous-ui.com/components/particle-counter/): `<mv-particle-counter>` — A KPI number drawn as a dot matrix of particles: when the value changes, the particles of the changed digits break apart, fly and are reassigned to the dots of the new digits (conserved: extras merge, missing ones split off from the others), with a green flash on the way up and a red one on the way down.
- [Scroll Text](https://marvelous-ui.com/components/scroll-text/): `<mv-scroll-text>` — Paragraph whose words (or letters) light up progressively as you scroll, from dim and blurred to sharp; scroll-driven CSS animations, JS fallback.
- [Shimmer Text](https://marvelous-ui.com/components/shimmer-text/): `.mv-shimmer-text` — Pure-CSS light sheen that sweeps across text (background-clip): a “New” badge, AI “thinking…” states with animated dots, and a pulse variant.
- [Sparkles Text](https://marvelous-ui.com/components/sparkles-text/): `<mv-sparkles-text>` — Tiny twinkling stars that pop up at random around and over the text; adjustable colors, density and speed, triggered on view or on hover.
- [Text Highlight](https://marvelous-ui.com/components/text-highlight/): `<mv-text-highlight>` — Highlights words as they enter the viewport: a marker stroke that sweeps across lines, or a hand-drawn annotation (underline, circle, box, strike-through) drawn stroke by stroke.
- [Text Reveal](https://marvelous-ui.com/components/text-reveal/): `<mv-text-reveal>` — Text reveal split into letters, words or lines with 6 staggered presets (fade, blur, slide, 3D rotate, zoom, mask), triggered when it enters the viewport; inline markup is preserved.
- [Wind Text](https://marvelous-ui.com/components/wind-text/): `<mv-wind-text>` — Text whose letters behave like grass (or a flag) in a single wind field shared by the whole page: scrolling sends gusts whose front sweeps across the text in the scroll direction, the cursor blows locally on an advected velocity grid that dissipates, each letter bends around its baseline on its own spring, and a few grains of pollen take off wherever the wind blows.
- [Dot Pattern](https://marvelous-ui.com/components/dot-pattern/): `<mv-dot-pattern>` — Dot pattern in pure CSS (fade, staggered) plus a living canvas version: twinkling halos with a hover glow, or a concentric wave the cursor pushes away with an elastic return.
- [Grid Pattern](https://marvelous-ui.com/components/grid-pattern/): `<mv-grid-pattern>` — Pure-CSS background grid (solid or dashed lines, highlighted cells, radial fade) plus an animated element: flicker, cells that light up under the cursor with a trail and a ripple on click, and a retro perspective floor.
- [Light Rays](https://marvelous-ui.com/components/light-rays/): `.mv-light-rays` — Divine light rays falling from above, in pure CSS: two fans of blurred conic gradients that slowly sway and pulse, with a glow at the origin.
- [Meteors](https://marvelous-ui.com/components/meteors/): `<mv-meteors>` — Diagonal meteor shower with glowing trails: 100% CSS animation; the JS only distributes the shooting stars and changes their lane on each pass.
- [Particles](https://marvelous-ui.com/components/particles/): `<mv-particles>` — Canvas particles that drift and twinkle, pushed away or pulled in by the cursor with an elastic return; an optional constellation mode links neighbors and the pointer.
- [Still Time](https://marvelous-ui.com/components/still-time/): `<mv-still-time>` — Ambient-motion governor: wrap any region and every animation inside it (CSS keyframes, CSS transitions, Web Animations, muted videos) runs only as fast as the user is acting.
- [Cursor Follower](https://marvelous-ui.com/components/cursor-follower/): `<mv-cursor>` — Custom cursor: a precise dot and a ring that follows on a spring, stretching with speed, grows over interactive elements and shows a label (data-cursor="View"), with a difference-blend variant; scoped to an area or the whole page.
- [Precog](https://marvelous-ui.com/components/precog/): `<mv-precog>` — Foresees which control the user is about to click from the pointer trajectory, before the click, and keeps score of its own foresight.
- [Reading Map](https://marvelous-ui.com/components/reading-map/): `<mv-reading-map>` — A live minimap of an article, built from its DOM rather than a screenshot: every line of text (with its real length), heading, bullet, image, table and code line becomes an abstract shape.
- [Scroll Progress](https://marvelous-ui.com/components/scroll-progress/): `<mv-scroll-progress>` — Reading progress indicator: a pure-CSS bar at the top of the page (scroll timeline), or a bar / ring element with a percentage that follows any scrolling container, with optional spring smoothing.
- [Scroll Reveal](https://marvelous-ui.com/components/scroll-reveal/): `<mv-reveal>` — Reveal on scroll: children fade, blur, slide or zoom in with a stagger, once or every time; a pure-CSS variant is driven by a view timeline.
- [Scroll Velocity](https://marvelous-ui.com/components/scroll-velocity/): `<mv-scroll-velocity>` — Rows of large text that scroll infinitely; their speed and direction follow the (spring-smoothed) scroll velocity, and the text skews on fast scrolls.
- [Sticky Scroll](https://marvelous-ui.com/components/sticky-scroll/): `<mv-sticky-scroll>` — Scrollytelling section: steps hang off a progress rail that fills continuously with scroll (done / active / upcoming nodes), while the pinned panel wipes between visuals along a single direction-aware seam and a segmented meter tracks the current step; stacks on mobile.
- [Device Mockup](https://marvelous-ui.com/components/device-mockup/): `.mv-device` — Pure-CSS device frames around any content: iPhone (Dynamic Island, buttons), Android (punch-hole), iPad portrait/landscape, MacBook (notch, aluminum base) and a browser window (traffic lights, address bar via data-url); dark or light bezels, all scaled from a single width.
- [Esper](https://marvelous-ui.com/components/esper/): `<mv-esper>` — Deep-zoom image inspector built on discrete, addressable steps instead of free pinch and scroll.
- [Invite In](https://marvelous-ui.com/components/invite-in/): `<mv-invite-in>` — Privacy-first embed that makes zero requests to a third party until the user invites it in: YouTube and Vimeo videos, maps, social posts, chat widgets, analytics-heavy iframes, third-party font stylesheets.
- [Lens](https://marvelous-ui.com/components/lens/): `<mv-lens>` — Magnifier that follows the cursor over an image or any content: an enlarged copy clipped to a circle (or square) anchored at the pointer, glass rim, animated opening, optional fixed position and keyboard movement.
- [Product Gallery](https://marvelous-ui.com/components/product-gallery/): `<mv-product-gallery>` — Product page gallery: main image on native scroll-snap (swipe on touch), synced thumbnails in a column or a row (optional swap on hover), hover zoom that follows the pointer, arrows and counter, a segmented bar in small containers, and fullscreen in a `<dialog>` with click-to-zoom and panning.
- [Card Stack](https://marvelous-ui.com/components/card-stack/): `<mv-card-stack>` — Swipeable card pile: cards rest at their own slight tilt and straighten as the top one is pulled away; the top card pivots around the point you grabbed, a verdict badge and edge tint grow with the pull while the matching button fills, flings keep the gesture’s momentum, and next() tucks the card under the pile; buttons, arrow keys, undo, loop or run-out, and autoplay.
- [Exploded View](https://marvelous-ui.com/components/exploded/): `<mv-exploded>` — A 3D exploded view of any live interface: every box becomes a plane lifted by its visual depth (invisible wrappers don’t add a floor), the whole assembly tilts into an isometric pose, orbits by drag or keyboard, isolates a layer on hover (tag, classes, size), labels layers with leader lines, then reassembles on per-floor springs and restores the original styles byte for byte.
- [Globe](https://marvelous-ui.com/components/globe/): `<mv-globe>` — Interactive dotted globe on 2D canvas (orthographic projection of an embedded land mask, zero dependencies): auto-rotation, drag with inertia, pulsing markers, great-circle arcs animated like comets, and a halo and atmospheric rim in your token colors.
- [Grin](https://marvelous-ui.com/components/grin/): `<mv-grin>` — “Dismiss to residue” for announcement banners, chat widgets, upload panels, video players and filter panels: instead of disappearing, a dismissed, minimized, idle or scrolled-past panel vanishes progressively and leaves a tiny persistent residue that keeps its single essential datum, live (“New · 2”, the unread count, a progress ring, “4 filters”).
- [Morph Panel](https://marvelous-ui.com/components/morph-panel/): `<mv-morph-panel>` — A container that animates its measured width and height when switching views, with a blurred crossfade of the content: multi-step drawers, popovers, and a “Dynamic Island” variant that grows from a pill into a panel.
- [Portal](https://marvelous-ui.com/components/portal/): `<mv-portal>` — Linked drop zones that move items across a page in one gesture: two `<mv-portal>` openings are paired, and any [data-portal-item] dragged into one is swallowed by its elliptical opening, then emerges from its twin somewhere else on the page, flying out along the twin's facing with a speed proportional to the speed it went in with (clamped), decelerating and settling into the twin's target container, or gliding and bouncing to a stop on a free canvas when there is no target.
- [Confetti](https://marvelous-ui.com/components/confetti/): `<mv-confetti-button>` — Physics-based canvas confetti (gravity, drag, 3D tumble, wobble): a standalone confetti() function, cannons / fireworks / stars / emoji presets, a trigger button and a press-and-hold “cool” mode.
- [Copy Button](https://marvelous-ui.com/components/copy-button/): `<mv-copy-button>` — Copy button with odometer feedback: icon and label roll up to a check (or drop down to an alert on failure) inside fixed windows, while a tinted wash fills the button and drains over the timeout as a countdown; icon buttons get a status tag.
- [Icon Morph](https://marvelous-ui.com/components/icon-morph/): `.mv-icon-morph` — Pure-CSS icons that morph with their parent’s ARIA state: hamburger ↔ close, plus ↔ minus, play ↔ pause, chevron V ↔ Λ, rotating chevron, arrow → check.
- [Physics Stack](https://marvelous-ui.com/components/physics-stack/): `<mv-physics-stack>` — A list whose items are rigid bodies stacked in a box: grab a card by a corner (it pivots around the grab point), toss it, the pile falls back under gravity and the DOM order follows the visual order.
- [Ripple](https://marvelous-ui.com/components/ripple/): `<mv-pulse-ring>` — Material-style ink ripple from the click point on any element (.mv-ripple / data-mv-ripple, grows while held), plus `<mv-pulse-ring>`: concentric rings that radiate or breathe.
- [Salvage Stop](https://marvelous-ui.com/components/salvage-stop/): `<mv-salvage-stop>` — A Stop button for long-running processes (AI agents, exports, generation) that shows what you keep before you stop: on hover or focus, an anchored panel unfolds two trays, “You keep” (finished artifacts, bright, with their kind glyph) and “You lose” (in-progress items, dimmed, with their progress), plus a headline that states the salvage value (“You keep 7 of 9 items · 78% of the work”, weighted per item).
- [Theme Toggle](https://marvelous-ui.com/components/theme-toggle/): `<mv-theme-toggle>` — Light/dark toggle: the new theme is revealed in a circle from the button (View Transition + clip-path), a sun morphs into a moon, the choice is remembered and the system preference respected.
- [Animated Beam](https://marvelous-ui.com/components/animated-beam/): `<mv-animated-beam>` — Curved SVG beam between two elements of a container, traveled by a gradient pulse; follows resizes — ideal for integration diagrams.
- [Border Beam](https://marvelous-ui.com/components/border-beam/): `<mv-border-beam>` — Animated light that travels the border of any box: a constant-speed comet, conic highlights, a shifting gradient, gliding stars or an electric border.
- [Glow](https://marvelous-ui.com/components/glow/): `.mv-glow` — Blurred gradient backlight behind any element, plus a neon card with a gradient border, static or slowly rotating.
- [Gooey](https://marvelous-ui.com/components/gooey/): `.mv-gooey` — Metaball utility: a filtered background layer (blur + SVG alpha threshold) where shapes melt into each other like liquid, while text, icons and focus stay crisp on top.
- [Noise](https://marvelous-ui.com/components/noise/): `.mv-noise` — Pure-CSS film grain (SVG feTurbulence texture as a data URI) on any surface: fine or coarse, static or animated, beneath or above the content.
- [Progressive Blur](https://marvelous-ui.com/components/progressive-blur/): `.mv-progressive-blur` — Pure-CSS progressive edge blur: stacked backdrop-filter layers masked in slices, on any side, with an optional fade to the background color.
- [Spotlight Card](https://marvelous-ui.com/components/spotlight-card/): `<mv-spotlight>` — A spotlight that follows the cursor inside a card and reveals its border; around a grid, the same light spills onto the borders of neighboring cards.
- [Surface](https://marvelous-ui.com/components/surface/): `<mv-surface-layer>` — A GPU material system for any element: data-mv-surface="glass \| chrome \| jelly \| velvet \| holo".
- [AI Chat](https://marvelous-ui.com/components/ai-chat/): `<mv-ai-chat>` — AI chat interface: streaming replies with a caret, shimmering “thinking” state, safe Markdown rendering (lists, bold, code with a copy button), auto-growing composer with attachments, model picker, suggestions, stop / regenerate, and auto-scroll that yields to the user.
- [App Shell](https://marvelous-ui.com/components/app-shell/): `<mv-app-shell>` — Complete dashboard block: collapsible sidebar, sticky header (breadcrumb, Ctrl/⌘ + K search, unread notifications, account), KPI tiles with sparklines, a sales chart by period and an activity table — layout driven by container queries.
- [Auth](https://marvelous-ui.com/components/auth/): `<mv-auth>` — Four-step authentication block (log in, sign up, forgot password, OTP code): split layout with visual and testimonial, social buttons, password reveal, strength meter, timed code resend, native validation and async submission.
- [CTA](https://marvelous-ui.com/components/cta/): `.mv-cta` — Editorial call-to-action: a band between two hairlines with the headline on the left and details on the right, an always-dark ink slab, or a newsletter panel with inline form and status feedback.
- [Data table](https://marvelous-ui.com/components/data-table/): `<mv-data-table>` — Full-featured data table around a .mv-table: column sorting, accent-insensitive search, value filters, a column visibility menu, row selection (indeterminate header checkbox, Shift + click for ranges) with a bulk-actions bar, pagination with rows per page, and an empty state.
- [Facets](https://marvelous-ui.com/components/facets/): `<mv-facets>` — Product listing filter panel: collapsible checkbox groups with counts (“Show 2 more”), color and size swatches, a two-thumb price range synced with two inputs, a deselectable minimum rating, an in-stock switch, removable active-filter chips with “Clear all”, and a mobile drawer (native `<dialog>`) with a “Show 42 products” button.
- [FAQ](https://marvelous-ui.com/components/faq/): `.mv-faq` — Editorial FAQ section: numbered questions in a mono gutter on hairline rules, a topic-sorted version with a sticky index (dotted leaders, counts) and a contact note, or an open grid of numbered answers.
- [Features](https://marvelous-ui.com/components/features/): `.mv-features` — Editorial features section: a numbered index grid on hairlines, tinted panels whose whole tile is the link, or a ledger with a sticky intro and numbered steps.
- [Footer](https://marvelous-ui.com/components/footer/): `.mv-footer` — Editorial site footer: numbered mono column headings on hairlines, brand + newsletter, a row of contact tiles and a full-width bottom strip; a statement version with a large headline and calls to action; or a minimal one-line version.
- [Hero](https://marvelous-ui.com/components/hero/): `.mv-hero` — Editorial landing opener: a mono meta line drawn on a hairline, an oversized two-tone headline, lead and actions, a captioned product plate and a ruled facts row — editorial, split or centered.
- [Kanban](https://marvelous-ui.com/components/kanban/): `<mv-kanban>` — Kanban board in open lanes divided by hairline rules: pointer drag and drop with a flat floating copy, a hatched reserved slot and cards that slide into place (FLIP), a settle ring on drop, auto-scroll, WIP load bars for limited columns, and full keyboard moves (Space, arrow keys, Escape) announced to screen readers.
- [Logo Cloud](https://marvelous-ui.com/components/logo-cloud/): `<mv-logo-cloud>` — Customer logo section in an editorial register: a ruled table of logos with mono captions next to a headline figure, a marquee band beside a stat, or columns that swap logos one after another (pausable, reduced-motion aware).
- [Mega Menu](https://marvelous-ui.com/components/mega-menu/): `<mv-mega-menu>` — E-commerce navigation with mega panels: opens on hover with intent (delay, instant switch between categories) or on click, a shared surface whose height animates while panels cross-fade, link columns with badges, promo tiles, a page scrim; full keyboard support; below the breakpoint (host width, ResizeObserver), a burger menu in a `<dialog>` drawer with drill-down screens and a back button.
- [Navbar](https://marvelous-ui.com/components/navbar/): `<mv-navbar>` — Sticky editorial navigation bar that blurs on scroll: mono labels and counters, popover mega menus with an accent rule on the bar marking the open menu, an optional shared viewport that resizes between menus, a floating mode that detaches into a card on scroll, and a stacked search + sections layout; dialog-based mobile drawer with numbered links.
- [Pricing](https://marvelous-ui.com/components/pricing/): `<mv-pricing>` — Pricing section styled like a spec sheet: plan panels set in one muted frame, a segmented monthly / yearly switch on native radios, a ring-marked recommended plan, usage meters and an explicit struck-through saving on yearly prices; as columns, horizontal rows or a single plan.
- [Review](https://marvelous-ui.com/components/review/): `<mv-reviews>` — Customer reviews: summary (average rating, stars, 5→1 histogram where each bar filters, fit gauge), sort (recent, helpful, rating), “With photos” filter, active filter chips, “Show 4 more reviews” pagination; `<mv-review>` card with “Verified purchase”, purchased variant, collapsed text with “Read more”, photo lightbox, “helpful” votes (one per visitor, undoable), reporting and merchant reply; validated “Write a review” form that adds the review pending moderation.
- [Settings](https://marvelous-ui.com/components/settings/): `<mv-settings>` — Settings page: section navigation with scroll tracking, profile (photo preview, validated fields), notification switches, security, an “unsaved changes” bar and a danger zone with type-to-confirm.
- [Sidebar](https://marvelous-ui.com/components/sidebar/): `<mv-sidebar>` — App sidebar: animated icon rail with tooltips, persisted state, groups, collapsible nested sections, counters, workspace switcher and user menu, slide-out panel (dialog) when the container is narrow, Ctrl/⌘ + B shortcut.
- [Stats](https://marvelous-ui.com/components/stats/): `.mv-stats` — Key figures section with animated counters (number-ticker): ruled columns with mono labels, KPI cards with a trend slot and sparkline, or one oversized headline figure beside a stacked ledger.
- [Testimonials](https://marvelous-ui.com/components/testimonials/): `.mv-testimonials` — Testimonials section with an editorial, hairline-ruled look: a numbered ledger grid with a featured result entry, a horizontal ticker of compact notes, or a case-study split pairing one quote with its key figures; a score summary sits in the header.
- [Agent Vision](https://marvelous-ui.com/components/agent-vision/): `<mv-agent-vision>` — See your page the way an AI agent (or a screen reader) sees it: wraps any region and splits it with a draggable scan line.
- [Assist Mode](https://marvelous-ui.com/components/assist-mode/): `<mv-assist-mode>` — A judgment-free, site-wide assist panel for everything that depends on time or motion, offered as optional help rather than as an “accessibility mode”.
- [Combo](https://marvelous-ui.com/components/combo/): `<mv-combo>` — Keyboard sequence-shortcut engine for power-user apps, with a live input buffer.
- [Drill](https://marvelous-ui.com/components/drill/): `<mv-drill>` — Keyboard-shortcut trainer that turns an app’s shortcuts into reflexes through short, spaced drills.
- [Motion Budget](https://marvelous-ui.com/components/motion-budget/): `<mv-motion-budget>` — An animation governor: wraps a region (or the whole page) and gives it a motion budget, the share of the screen allowed to move at once (25% by default).