{ "$schema": "https://ui.shadcn.com/schema/registry.json", "name": "moonarc", "homepage": "https://moonarc.dev", "items": [ { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "accordion", "type": "registry:component", "title": "Accordion", "description": "Native
items whose height animates open and closed, with an optional one-at-a-time rule the browser enforces. Zero JavaScript: ::details-content is a grid whose row interpolates from 0fr to 1fr, so height-to-auto costs nothing to measure.", "registryDependencies": [ "https://moonarc.dev/r/base.json" ], "docs": "Import '@/styles/moonarc.css' once and put first in your , so component CSS never ranks below your resets.", "categories": [ "ui" ], "meta": { "tier": "A", "pro": false, "jsBytes": 0, "jsBytesWithShared": 92, "intents": [ "accordion", "faq accordion", "animate details summary", "collapsible sections", "height auto transition" ], "trigger": [ "click" ], "support": { "baseline": "newly", "needs": [ "details-content", "allow-discrete", "details-name" ], "fallback": "items open and close instantly", "line": "Chrome 131 · Firefox 143 · Safari 18.4" }, "readout": "" }, "files": [ { "path": "components/moonarc/Accordion.astro", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "animated-beam", "type": "registry:component", "title": "Animated Beam", "description": "Sends packets of light along curves between nodes. The layout is a preset (satellites around a hub, a row, or a fan into one), computed on the server in percent, so the SVG paths and the slotted nodes share coordinates and nothing is measured. Each beam is one dash, sized as a fraction of its path's on-screen length (computed in CSS from the box's container units), whose offset runs from start to past the end, with a fainter tail behind it. Zero JS.", "registryDependencies": [ "https://moonarc.dev/r/base.json" ], "docs": "Import '@/styles/moonarc.css' once and put first in your , so component CSS never ranks below your resets.", "categories": [ "background" ], "meta": { "tier": "A", "pro": false, "jsBytes": 0, "jsBytesWithShared": 92, "intents": [ "animated beam between elements", "integration diagram animated lines", "connecting beams hub and spokes", "data flow lines animation", "animated connection lines svg" ], "trigger": [ "always" ], "support": { "baseline": "widely", "needs": [ "container-units", "css-exp" ], "fallback": "without container units or hypot() the lines draw solid in the packet colour and nothing travels", "line": "Chrome 120 · Firefox 118 · Safari 16" }, "readout": "" }, "files": [ { "path": "components/moonarc/AnimatedBeam.astro", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "animated-icons", "type": "registry:component", "title": "Animated Icons", "description": "Six line icons that morph into a second state: menu to close, plus to close, copy to check, play to pause, sun to moon, and a check that draws itself. Each stroke is its own path moved by translate, rotate, scale, opacity and dash offset, so every pair works in every engine; play/pause also morphs with d: path() where the property exists. The state is a prop or comes from the button around it (aria-pressed, aria-expanded, data-state=\"done\", data-on). Zero JavaScript.", "registryDependencies": [ "https://moonarc.dev/r/base.json" ], "docs": "Import '@/styles/moonarc.css' once and put first in your , so component CSS never ranks below your resets.", "categories": [ "ui" ], "meta": { "tier": "A", "pro": false, "jsBytes": 0, "jsBytesWithShared": 92, "intents": [ "animated hamburger icon", "menu to x icon animation", "play pause morph icon", "copy to check icon", "sun moon icon animation", "animated icons css" ], "trigger": [ "click" ], "support": { "baseline": "limited", "needs": [ "d-path" ], "fallback": "play ↔ pause cross-fades instead of morphing where d: path() is not a CSS property (Safari)", "line": "Chrome 52 · Firefox 97 · not Safari" }, "readout": "" }, "files": [ { "path": "components/moonarc/AnimatedIcons.astro", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "animated-list", "type": "registry:component", "title": "Animated List", "description": "Shows notifications arriving one at a time: the new one drops in at the top, the older ones are pushed down, and the oldest slides out. Zero JavaScript: in interval mode one registered number runs over the period on every item and the item's time slot decides where it is. Every change is a transition on the preset curve, and no keyframe knows how many items there are. In live mode the host prepends items (newest first) and they grow in through @starting-style while the oldest leaves.", "registryDependencies": [ "https://moonarc.dev/r/base.json" ], "docs": "Import '@/styles/moonarc.css' once and put first in your , so component CSS never ranks below your resets.", "categories": [ "ui" ], "meta": { "tier": "A", "pro": false, "jsBytes": 0, "jsBytesWithShared": 92, "intents": [ "animated notification list", "notifications one by one", "activity feed animation", "list items slide in stack", "animated list astro", "chat messages arriving in sequence" ], "trigger": [ "always", "load" ], "support": { "baseline": "newly", "needs": [ "property", "css-math", "has", "starting-style", "allow-discrete", "grid-rows-animation" ], "fallback": "without round() or registered properties the interval mode shows the first items still; live items appear at once", "line": "Chrome 125 · Firefox 129 · Safari 17.5" }, "readout": "" }, "files": [ { "path": "components/moonarc/AnimatedList.astro", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "animated-select", "type": "registry:component", "title": "Animated Select", "description": "A native select with an animated picker. Where the engine has appearance: base-select, the picker takes the tokens, the options arrive one after another through @starting-style with a delay from sibling-index(), the list leaves on allow-discrete and the checkmark is drawn. Elsewhere it is the native select with the same border and chevron, no animation. No imitated listbox: the keyboard, type-to-select, the value and the accessibility tree are the browser's. Zero JavaScript.", "registryDependencies": [ "https://moonarc.dev/r/base.json" ], "docs": "Import '@/styles/moonarc.css' once and put first in your , so component CSS never ranks below your resets.", "categories": [ "ui" ], "meta": { "tier": "A", "pro": false, "jsBytes": 0, "jsBytesWithShared": 92, "intents": [ "animated select", "custom select css", "styled dropdown native", "select with animated options", "customizable select", "dropdown with stagger" ], "trigger": [ "click" ], "support": { "baseline": "limited", "needs": [ "base-select", "picker", "sibling-index", "starting-style", "allow-discrete" ], "fallback": "Firefox, and Safari before 27, show the native select styled with the token border and the chevron; the picker is the platform's and nothing animates", "line": "Chrome 138 · not Firefox · Safari 27" }, "readout": "" }, "files": [ { "path": "components/moonarc/AnimatedSelect.astro", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "arrow-button", "type": "registry:component", "title": "Arrow Button", "description": "A button whose arrow slides out on hover as a new one slides in. Two copies of the icon sit in one clipped cell, one translating out while the other comes in on the preset's spring. direction rotates the cell so up, down and left travel the way they point. Hover is read from the containing link or button too; focus draws the same. Zero JavaScript.", "registryDependencies": [ "https://moonarc.dev/r/base.json" ], "docs": "Import '@/styles/moonarc.css' once and put first in your , so component CSS never ranks below your resets.", "categories": [ "ui" ], "meta": { "tier": "A", "pro": false, "jsBytes": 0, "jsBytesWithShared": 92, "intents": [ "arrow button hover", "button arrow slides out", "cta arrow animation", "link arrow animation", "arrow that moves on hover" ], "trigger": [ "hover" ], "support": { "baseline": "widely", "needs": [], "line": "every browser" }, "readout": "" }, "files": [ { "path": "components/moonarc/ArrowButton.astro", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "aurora", "type": "registry:component", "title": "Aurora Background", "description": "Ambient gradient field: three soft colour fields drifting at three coprime speeds, a slow hue rotation so the colours themselves move, and a film-grain layer stepped at 12 fps. No WebGL, no canvas, no blur filter: every layer is a transform on the compositor.", "registryDependencies": [ "https://moonarc.dev/r/base.json" ], "docs": "Import '@/styles/moonarc.css' once and put first in your , so component CSS never ranks below your resets.", "categories": [ "background" ], "meta": { "tier": "A", "pro": false, "jsBytes": 0, "jsBytesWithShared": 92, "intents": [ "aurora background", "gradient background animation", "animated gradient blobs", "ambient hero background astro", "aurora without webgl" ], "trigger": [ "always" ], "support": { "baseline": "widely", "needs": [], "line": "every browser" }, "readout": "" }, "files": [ { "path": "components/moonarc/Aurora.astro", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "avatar-stack", "type": "registry:component", "title": "Avatar Stack", "description": "A row of overlapping avatars with a count chip such as \"+2 398\". Lazy images or initials, overlapped by a negative margin with a ring in the surface colour. Hover the row and it spreads; hover one and it rises and its name appears above it in a CSS tooltip. Avatars are not tab stops unless they carry an href; the names live in the alt text and the chip has its own screen-reader line. The count is formatted with Intl at build. Zero JavaScript.", "registryDependencies": [ "https://moonarc.dev/r/base.json" ], "docs": "Import '@/styles/moonarc.css' once and put first in your , so component CSS never ranks below your resets.", "categories": [ "ui" ], "meta": { "tier": "A", "pro": false, "jsBytes": 0, "jsBytesWithShared": 92, "intents": [ "avatar stack", "avatar group", "overlapping avatars", "avatar circles hover", "joined by avatars", "social proof avatars" ], "trigger": [ "hover" ], "support": { "baseline": "widely", "needs": [], "line": "every browser" }, "readout": "" }, "files": [ { "path": "components/moonarc/AvatarStack.astro", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "bar-grow", "type": "registry:component", "title": "Bar Grow", "description": "A bar chart whose bars grow from the baseline one after another when it scrolls into view; hovering a bar shows its value. Rendered on the server from the data: each bar is a flex child scaled from 0 to 1 on a per-index delay. Composes Reveal; no script of its own. The accessible name summarises the series.", "registryDependencies": [ "https://moonarc.dev/r/reveal.json", "https://moonarc.dev/r/base.json" ], "docs": "Import '@/styles/moonarc.css' once and put first in your , so component CSS never ranks below your resets. Add to your as well, so entrances can hide content only when JS runs.", "categories": [ "data" ], "meta": { "tier": "A", "pro": false, "jsBytes": 0, "jsBytesWithShared": 3043, "intents": [ "animated bar chart", "bars grow on scroll", "css bar chart animation", "stagger bars chart", "tiny bar chart astro" ], "trigger": [ "scroll" ], "support": { "baseline": "widely", "needs": [], "line": "every browser" }, "readout": "" }, "files": [ { "path": "components/moonarc/BarGrow.astro", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "border-beam", "type": "registry:component", "title": "Border Beam", "description": "A beam of light travels around the edge of a card. A conic gradient behind two composited masks leaves only the ring; the start angle animates as a registered custom property. Pure CSS, inherits the parent radius.", "registryDependencies": [ "https://moonarc.dev/r/base.json" ], "docs": "Import '@/styles/moonarc.css' once and put first in your , so component CSS never ranks below your resets.", "categories": [ "background" ], "meta": { "tier": "A", "pro": false, "jsBytes": 0, "jsBytesWithShared": 92, "intents": [ "border beam", "animated border", "glowing card border", "light around card edge", "moving border gradient" ], "trigger": [ "always" ], "support": { "baseline": "newly", "needs": [ "property", "mask-image" ], "fallback": "the beam holds still at its start angle", "line": "Chrome 120 · Firefox 128 · Safari 16.4" }, "readout": "" }, "files": [ { "path": "components/moonarc/BorderBeam.astro", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "browser-frame", "type": "registry:component", "title": "Browser Frame", "description": "A browser window around a screenshot or any content: the three lights, an address bar with a lock, optional tabs with one active. Static, zero JavaScript. The chrome scales with the frame's own width through container query units, and every colour is a theme token, so theme=\"dark\" or \"light\" pins one look and \"auto\" follows the page.", "registryDependencies": [ "https://moonarc.dev/r/base.json" ], "docs": "Import '@/styles/moonarc.css' once and put first in your , so component CSS never ranks below your resets.", "categories": [ "ui" ], "meta": { "tier": "A", "pro": false, "jsBytes": 0, "jsBytesWithShared": 92, "intents": [ "browser window mockup", "browser frame component", "safari frame screenshot", "mac window mockup", "device frame astro" ], "trigger": [ "always" ], "support": { "baseline": "widely", "needs": [ "container-units" ], "line": "Chrome 105 · Firefox 110 · Safari 16" }, "readout": "" }, "files": [ { "path": "components/moonarc/BrowserFrame.astro", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "bubble-text", "type": "registry:component", "title": "Bubble Text", "description": "Swells the letter under the cursor to the heaviest weight and lifts it; its neighbours follow at half and a quarter, and everything settles when the pointer leaves. Letters split on the server, neighbours found with :has(). Pure CSS on a variable font.", "registryDependencies": [ "https://moonarc.dev/r/base.json" ], "docs": "Import '@/styles/moonarc.css' once and put first in your , so component CSS never ranks below your resets.", "categories": [ "text" ], "meta": { "tier": "A", "pro": false, "jsBytes": 0, "jsBytesWithShared": 92, "intents": [ "bubble text hover", "text weight hover effect", "letters swell under cursor", "variable font hover", "hover text bulge" ], "trigger": [ "hover" ], "support": { "baseline": "widely", "needs": [ "font-variation", "has" ], "line": "Chrome 105 · Firefox 121 · Safari 15.4" }, "readout": "" }, "files": [ { "path": "components/moonarc/BubbleText.astro", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "card-stack", "type": "registry:component", "title": "Card Stack", "description": "Cards stick to the top as you scroll and each one shrinks and dims as the next slides over it, as on Apple product pages. Zero JavaScript: sticky positioning plus each card's scale bound to the next card's view timeline. Up to eight cards.", "registryDependencies": [ "https://moonarc.dev/r/base.json" ], "docs": "Import '@/styles/moonarc.css' once and put first in your , so component CSS never ranks below your resets.", "categories": [ "scroll" ], "meta": { "tier": "A", "pro": false, "jsBytes": 0, "jsBytesWithShared": 92, "intents": [ "card stack scroll", "sticky stacking cards", "stacked cards on scroll", "apple style card stack", "scroll stack astro" ], "trigger": [ "scroll" ], "support": { "baseline": "limited", "needs": [ "scroll-timeline", "timeline-scope" ], "fallback": "cards still stack with sticky positioning, without the shrink (Firefox, Chrome 115)", "line": "Chrome 116 · not Firefox · Safari 26" }, "readout": "" }, "files": [ { "path": "components/moonarc/CardStack.astro", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "carousel", "type": "registry:component", "title": "Carousel", "description": "A scroll-snap strip with previous/next buttons and dot markers that the browser generates and keeps in sync. Zero JavaScript. Touch, momentum, keyboard and snapping are native everywhere; the buttons and dots appear where ::scroll-button() and ::scroll-marker exist.", "registryDependencies": [ "https://moonarc.dev/r/base.json" ], "docs": "Import '@/styles/moonarc.css' once and put first in your , so component CSS never ranks below your resets.", "categories": [ "ui" ], "meta": { "tier": "A", "pro": false, "jsBytes": 0, "jsBytesWithShared": 92, "intents": [ "carousel", "slider", "scroll snap carousel", "image carousel astro", "carousel without javascript", "testimonial slider" ], "trigger": [ "click", "pointer" ], "support": { "baseline": "limited", "needs": [ "scroll-snap", "scroll-marker" ], "fallback": "a swipeable, keyboard-scrollable snap strip without buttons or dots (Firefox, Safari)", "line": "Chrome 135 · not Firefox · not Safari" }, "readout": "" }, "files": [ { "path": "components/moonarc/Carousel.astro", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "check-draw", "type": "registry:component", "title": "Check Draw", "description": "A checkbox whose tick is drawn. A label wraps a native input with appearance: none and an SVG beside it: the box fills on the fast token, then the tick (a path with pathLength 1) runs its dash offset from 1 to 0 on the preset curve. The indeterminate state draws a bar instead. The value submits, required and disabled work, the keyboard is the browser's. Zero JavaScript.", "registryDependencies": [ "https://moonarc.dev/r/base.json" ], "docs": "Import '@/styles/moonarc.css' once and put first in your , so component CSS never ranks below your resets.", "categories": [ "ui" ], "meta": { "tier": "A", "pro": false, "jsBytes": 0, "jsBytesWithShared": 92, "intents": [ "animated checkbox", "checkbox with drawn check", "checkmark animation", "custom checkbox css", "indeterminate checkbox", "checkbox tick draws itself" ], "trigger": [ "click" ], "support": { "baseline": "widely", "needs": [], "line": "every browser" }, "readout": "" }, "files": [ { "path": "components/moonarc/CheckDraw.astro", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "circular-text", "type": "registry:component", "title": "Circular Text", "description": "A ring of text turning slowly around an icon, a logo, or nothing. SVG text on a circle, justified to the full circumference so the loop has no seam, spun by one compositor rotation. Pure CSS; the centre is the slot.", "registryDependencies": [ "https://moonarc.dev/r/base.json" ], "docs": "Import '@/styles/moonarc.css' once and put first in your , so component CSS never ranks below your resets.", "categories": [ "text" ], "meta": { "tier": "A", "pro": false, "jsBytes": 0, "jsBytesWithShared": 92, "intents": [ "circular text", "text on a circle", "rotating badge text", "spinning text ring", "text around icon" ], "trigger": [ "always" ], "support": { "baseline": "widely", "needs": [], "line": "every browser" }, "readout": "" }, "files": [ { "path": "components/moonarc/CircularText.astro", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "code-tabs", "type": "registry:component", "title": "Code Tabs", "description": "A code block with tabs (for example npm, pnpm, bun) and a copy button per panel. Highlighted at build by Astro's own (Shiki) with light and dark themes as CSS variables, so it follows the page theme with no script. The tabs are radio inputs and :has(), so arrow keys and selection are native and the indicator slides on the preset. The only script is CopyButton's, shared; long lines scroll inside the panel.", "registryDependencies": [ "https://moonarc.dev/r/contrast.json", "https://moonarc.dev/r/copy-button.json", "https://moonarc.dev/r/base.json" ], "docs": "Import '@/styles/moonarc.css' once and put first in your , so component CSS never ranks below your resets.", "categories": [ "ui" ], "meta": { "tier": "A", "pro": false, "jsBytes": 0, "jsBytesWithShared": 2559, "intents": [ "code block with tabs", "npm pnpm yarn tabs", "install command tabs", "code tabs with copy button", "shiki code tabs astro" ], "trigger": [ "click" ], "support": { "baseline": "widely", "needs": [ "has", "starting-style", "clipboard" ], "fallback": "panels switch without the fade", "line": "Chrome 117 · Firefox 129 · Safari 17.5" }, "readout": "" }, "files": [ { "path": "components/moonarc/CodeTabs.astro", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "command-palette", "type": "registry:component", "title": "Command Palette", "description": "A ⌘K command palette: a native modal dialog with an input and a ranked list of links. ↑ ↓ move, ↵ follows the link through the ClientRouter, Escape closes and focus returns to where it was; results are re-rendered and each arrives through @starting-style on the stagger token. Items come from the server, from a JSON URL fetched once on the first open, or both. Without JavaScript the invoker still opens the dialog and the server-rendered items are plain links.", "registryDependencies": [ "https://moonarc.dev/r/runtime.json", "https://moonarc.dev/r/dialog.json", "https://moonarc.dev/r/base.json" ], "docs": "Import '@/styles/moonarc.css' once and put first in your , so component CSS never ranks below your resets.", "categories": [ "ui" ], "meta": { "tier": "C", "pro": false, "jsBytes": 3048, "jsBytesWithShared": 4770, "intents": [ "command palette", "cmd k search", "keyboard search dialog", "spotlight search astro", "site search modal", "command menu" ], "trigger": [ "click" ], "support": { "baseline": "newly", "needs": [ "dialog", "command", "starting-style" ], "fallback": "without invoker commands the trigger is the script's (or polyfill's); without @starting-style results appear at once; without closedby (Safari) the script closes it on a tap on the backdrop", "line": "Chrome 135 · Firefox 144 · Safari 26.2" }, "readout": "" }, "files": [ { "path": "components/moonarc/CommandPalette.astro", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "confetti", "type": "registry:component", "title": "Confetti", "description": "Fires a burst of paper confetti on load, on a click or on an ma:confetti event. One fixed canvas exists only while pieces are falling. Gravity, drag, launch speed and spread are custom properties declared per preset in the stylesheet: the script reads them and carries no constant. Also callable as confetti() from your own handler. Never fires under reduced motion.", "registryDependencies": [ "https://moonarc.dev/r/confetti-fn.json", "https://moonarc.dev/r/runtime.json", "https://moonarc.dev/r/canvas.json", "https://moonarc.dev/r/base.json" ], "docs": "Import '@/styles/moonarc.css' once and put first in your , so component CSS never ranks below your resets.", "categories": [ "pointer" ], "meta": { "tier": "C", "pro": false, "jsBytes": 2506, "jsBytesWithShared": 5919, "intents": [ "confetti on click", "celebration animation", "confetti burst success", "party popper button", "confetti astro without canvas-confetti", "confetti after form submit", "trigger confetti from javascript event" ], "trigger": [ "load", "click" ], "support": { "baseline": "widely", "needs": [], "line": "every browser" }, "readout": "" }, "files": [ { "path": "components/moonarc/Confetti.astro", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "copy-button", "type": "registry:component", "title": "Copy Button", "description": "A button that copies text to the clipboard: the icon turns into a check, the label says \"Copied\", and both come back after the ambient duration. The clipboard write is the only script; it sets one attribute, data-state, and writes the outcome into a visually hidden status node rendered after the button, so a screen reader hears it; the icon (AnimatedIcons) and the label faces are CSS. When the clipboard refuses, the button says and announces \"Copy failed\".", "registryDependencies": [ "https://moonarc.dev/r/runtime.json", "https://moonarc.dev/r/animated-icons.json", "https://moonarc.dev/r/base.json" ], "docs": "Import '@/styles/moonarc.css' once and put first in your , so component CSS never ranks below your resets.", "categories": [ "ui" ], "meta": { "tier": "B", "pro": false, "jsBytes": 837, "jsBytesWithShared": 2559, "intents": [ "copy to clipboard button", "copy button with check icon", "copy code button", "clipboard button astro", "copied feedback" ], "trigger": [ "click" ], "support": { "baseline": "widely", "needs": [ "clipboard" ], "fallback": "the error face, because the clipboard API needs a secure context", "line": "Chrome 66 · Firefox 63 · Safari 13.1" }, "readout": "" }, "files": [ { "path": "components/moonarc/CopyButton.astro", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "count-up", "type": "registry:component", "title": "Count Up", "description": "Counts a number up from zero to its value when it scrolls into view, with thousands separators, decimals, prefix and suffix. No script of its own: Reveal supplies the trigger, and the digits are CSS counters driven by a custom property transitioning from 0 to the target. The server HTML already shows the final number.", "registryDependencies": [ "https://moonarc.dev/r/reveal.json", "https://moonarc.dev/r/base.json" ], "docs": "Import '@/styles/moonarc.css' once and put first in your , so component CSS never ranks below your resets. Add to your as well, so entrances can hide content only when JS runs.", "categories": [ "text" ], "meta": { "tier": "A", "pro": false, "jsBytes": 0, "jsBytesWithShared": 3043, "intents": [ "count up", "animated number", "number counter on scroll", "statistics counter", "countup astro" ], "trigger": [ "scroll" ], "support": { "baseline": "newly", "needs": [ "property", "counter-style" ], "fallback": "the final number, shown at once", "line": "Chrome 91 · Firefox 128 · Safari 17" }, "readout": "" }, "files": [ { "path": "components/moonarc/CountUp.astro", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "countdown-flip", "type": "registry:component", "title": "Countdown Flip", "description": "A flip clock counting down to a date: days, hours, minutes, seconds, each a card whose top half folds down over the hinge when the number changes. The only script is one timer a second, set to the moment the next second begins, that writes the digits and stops while the tab is hidden; the flip is CSS. The server renders the time left at build for readers without JavaScript, or the done state when the target has already passed.", "registryDependencies": [ "https://moonarc.dev/r/runtime.json", "https://moonarc.dev/r/base.json" ], "docs": "Import '@/styles/moonarc.css' once and put first in your , so component CSS never ranks below your resets.", "categories": [ "data" ], "meta": { "tier": "C", "pro": false, "jsBytes": 1157, "jsBytesWithShared": 2879, "intents": [ "countdown flip clock", "flip clock countdown", "launch countdown timer", "countdown to date animation", "flip counter css" ], "trigger": [ "load" ], "support": { "baseline": "widely", "needs": [ "clip-path" ], "line": "Chrome 55 · Firefox 54 · Safari 13.1" }, "readout": "" }, "files": [ { "path": "components/moonarc/CountdownFlip.astro", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "counter-preloader", "type": "registry:component", "title": "Counter Preloader", "description": "A preloader that counts from 0 to 100 and then lifts like a curtain, on a fixed layer that never blocks the page: pointer-events none from the first frame, aria-hidden, the page rendered and usable beneath. The number is one registered integer printed through counter-set; the layer then translates off and ends hidden. It runs about two seconds, set by the tokens. once skips it for the rest of the session, on a reload and after every ClientRouter swap. Under reduced motion, or without @property, it never shows. Zero JavaScript.", "registryDependencies": [ "https://moonarc.dev/r/base.json" ], "docs": "Import '@/styles/moonarc.css' once and put first in your , so component CSS never ranks below your resets.", "categories": [ "loading" ], "meta": { "tier": "A", "pro": false, "jsBytes": 0, "jsBytesWithShared": 92, "intents": [ "preloader counter", "page loader 0 to 100", "loading screen counter", "intro curtain", "site preloader css", "studio loading number" ], "trigger": [ "load" ], "support": { "baseline": "newly", "needs": [ "property", "counter-set" ], "fallback": "without @property the layer is never visible (the registered probe that reveals it does not exist) and the page shows at once", "line": "Chrome 85 · Firefox 128 · Safari 17.2" }, "readout": "" }, "files": [ { "path": "components/moonarc/CounterPreloader.astro", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "cursor", "type": "registry:component", "title": "Cursor", "description": "A custom pointer that trails the real one: a dot, a ring that grows over links and buttons, or a label (\"View\") any element can ask for with data-cursor-label. One fixed element; the script writes the position and a state, CSS transitions the lag, the growth and the pill on the preset curve. Not installed on touch or under reduced motion.", "registryDependencies": [ "https://moonarc.dev/r/runtime.json", "https://moonarc.dev/r/base.json" ], "docs": "Import '@/styles/moonarc.css' once and put first in your , so component CSS never ranks below your resets.", "categories": [ "pointer" ], "meta": { "tier": "B", "pro": false, "jsBytes": 1021, "jsBytesWithShared": 2743, "intents": [ "custom cursor", "cursor follower", "cursor that says view over images", "mouse follower ring", "blend mode cursor", "custom mouse pointer astro" ], "trigger": [ "pointer" ], "support": { "baseline": "widely", "needs": [], "line": "every browser" }, "readout": "" }, "files": [ { "path": "components/moonarc/Cursor.astro", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "cursor-grid", "type": "registry:component", "title": "Cursor Grid", "description": "A field of cells that light up under the cursor and fade where it has been, with a slow idle sweep when nothing is touched. Zero JavaScript: every cell is an element whose own hover state decays on a transition, so the trail is the browser doing the work. Fills its positioned parent.", "registryDependencies": [ "https://moonarc.dev/r/base.json" ], "docs": "Import '@/styles/moonarc.css' once and put first in your , so component CSS never ranks below your resets.", "categories": [ "pointer" ], "meta": { "tier": "A", "pro": false, "jsBytes": 0, "jsBytesWithShared": 92, "intents": [ "cursor grid", "interactive grid background", "hover grid cells", "pointer reactive background", "hero background reacts to mouse" ], "trigger": [ "pointer", "always" ], "support": { "baseline": "widely", "needs": [ "has" ], "line": "Chrome 105 · Firefox 121 · Safari 15.4" }, "readout": "" }, "files": [ { "path": "components/moonarc/CursorGrid.astro", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "curtain", "type": "registry:component", "title": "Curtain", "description": "A full-viewport wipe between pages: the next page opens through an iris from where you clicked, or through blinds, a shutter, doors, pixels, staggered columns, a diagonal, or a title panel that carries the next page's name. It animates the browser's own root view-transition snapshots with clip-path and mask, on Astro's router; back plays the shape in reverse. The only script is the click point.", "registryDependencies": [ "https://moonarc.dev/r/base.json" ], "docs": "Import '@/styles/moonarc.css' once and put first in your , so component CSS never ranks below your resets.", "categories": [ "transition" ], "meta": { "tier": "B", "pro": false, "jsBytes": 479, "jsBytesWithShared": 571, "intents": [ "page curtain transition", "iris page transition", "full screen wipe between pages", "view transition root clip-path", "blinds page transition", "pixel page transition astro" ], "trigger": [ "click" ], "support": { "baseline": "newly", "needs": [ "view-transitions", "has", "clip-path", "mask-image", "mask-composite", "property" ], "fallback": "an instant swap between pages", "line": "Chrome 120 · Firefox 144 · Safari 18" }, "readout": "" }, "files": [ { "path": "components/moonarc/Curtain.astro", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "dialog", "type": "registry:component", "title": "Dialog", "description": "A native modal that scales in over a blurred backdrop and scales out again, closes on Escape, the close button or a backdrop click, and traps focus, all handled by the browser. Zero JavaScript: the trigger uses the invoker command attribute; the exit is transition-behavior: allow-discrete.", "registryDependencies": [ "https://moonarc.dev/r/runtime.json", "https://moonarc.dev/r/morph.json", "https://moonarc.dev/r/base.json" ], "docs": "Import '@/styles/moonarc.css' once and put first in your , so component CSS never ranks below your resets.", "categories": [ "ui" ], "meta": { "tier": "A", "pro": false, "jsBytes": 0, "jsBytesWithShared": 92, "intents": [ "modal dialog", "animated modal", "dialog open close animation", "native dialog astro", "modal without javascript" ], "trigger": [ "click" ], "support": { "baseline": "newly", "needs": [ "command", "starting-style", "allow-discrete", "dialog" ], "fallback": "without invoker commands the trigger needs polyfill (an inline handler of 403 B raw); without @starting-style and allow-discrete the modal opens and closes without motion; without closedby (Safari) a backdrop click does nothing, and Escape and the close button still close it", "line": "Chrome 135 · Firefox 144 · Safari 26.2" }, "readout": "" }, "files": [ { "path": "components/moonarc/Dialog.astro", "type": "registry:component" }, { "path": "components/moonarc/internal/DialogMorph.astro", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "dock", "type": "registry:component", "title": "Dock", "description": "A macOS-style dock: the tile under the pointer swells, its neighbours swell less, and the row pushes apart to make room. Zero JavaScript: :has() sets one size number on the hovered tile and the four around it, and the tiles transition their size on the preset curve. Keyboard focus magnifies the same way; touch gets a plain row of links.", "registryDependencies": [ "https://moonarc.dev/r/base.json" ], "docs": "Import '@/styles/moonarc.css' once and put first in your , so component CSS never ranks below your resets.", "categories": [ "ui" ], "meta": { "tier": "A", "pro": false, "jsBytes": 0, "jsBytesWithShared": 92, "intents": [ "macos dock", "dock navigation", "magnifying icons on hover", "dock menu astro", "floating dock bottom of page", "icon bar that grows under the cursor" ], "trigger": [ "hover" ], "support": { "baseline": "widely", "needs": [ "has" ], "fallback": "without :has() the tiles keep their size and the labels stay hidden", "line": "Chrome 105 · Firefox 121 · Safari 15.4" }, "readout": "" }, "files": [ { "path": "components/moonarc/Dock.astro", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "dot-pattern", "type": "registry:component", "title": "Dot Pattern", "description": "A field of dots behind content, faded toward the edges, with an optional slow pulse. One tiled radial gradient and a mask; pure CSS. Fills its positioned parent.", "registryDependencies": [ "https://moonarc.dev/r/base.json" ], "docs": "Import '@/styles/moonarc.css' once and put first in your , so component CSS never ranks below your resets.", "categories": [ "background" ], "meta": { "tier": "A", "pro": false, "jsBytes": 0, "jsBytesWithShared": 92, "intents": [ "dot pattern background", "dotted background", "dot grid", "polka dot background css" ], "trigger": [ "always" ], "support": { "baseline": "widely", "needs": [ "mask-image" ], "line": "Chrome 120 · Firefox 53 · Safari 15.4" }, "readout": "" }, "files": [ { "path": "components/moonarc/DotPattern.astro", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "dotted-map", "type": "registry:component", "title": "Dotted Map", "description": "A world map drawn as a grid of dots, with markers that pulse. The land is a 1° bitmask from Natural Earth, drawn on the server as one : each run of land cells in a row is a segment, and a dash pattern of zero-length dashes with round caps turns it into dots: a few hundred segments, not five thousand circles. Markers ping on a delay from the stagger token and carry a title. Zero JS.", "registryDependencies": [ "https://moonarc.dev/r/land.json", "https://moonarc.dev/r/geo.json", "https://moonarc.dev/r/base.json" ], "docs": "Import '@/styles/moonarc.css' once and put first in your , so component CSS never ranks below your resets.", "categories": [ "background" ], "meta": { "tier": "A", "pro": false, "jsBytes": 0, "jsBytesWithShared": 92, "intents": [ "dotted world map", "world map with markers", "dot map svg", "map with pulsing locations", "regions map astro" ], "trigger": [ "always" ], "support": { "baseline": "widely", "needs": [], "line": "every browser" }, "readout": "" }, "files": [ { "path": "components/moonarc/DottedMap.astro", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "drawer", "type": "registry:component", "title": "Drawer", "description": "A bottom sheet that slides up over a scrim and can be dragged closed: it follows the finger, and on release springs back or leaves depending on distance and velocity, interruptible mid-flight. A native does the top layer, focus and Escape; the script is only the gesture.", "registryDependencies": [ "https://moonarc.dev/r/runtime.json", "https://moonarc.dev/r/base.json" ], "docs": "Import '@/styles/moonarc.css' once and put first in your , so component CSS never ranks below your resets.", "categories": [ "ui" ], "meta": { "tier": "C", "pro": false, "jsBytes": 933, "jsBytesWithShared": 2655, "intents": [ "bottom sheet", "drawer", "draggable sheet", "swipe to dismiss", "mobile drawer astro", "vaul alternative" ], "trigger": [ "click", "pointer" ], "support": { "baseline": "newly", "needs": [ "command", "starting-style", "allow-discrete", "dialog" ], "fallback": "without invoker commands the trigger needs polyfill; without closedby (Safari) a tap on the scrim does nothing, and the drag and Escape still close the sheet", "line": "Chrome 135 · Firefox 144 · Safari 26.2" }, "readout": "" }, "files": [ { "path": "components/moonarc/Drawer.astro", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "dynamic-island", "type": "registry:component", "title": "Dynamic Island", "description": "A black pill that changes shape with its state. auto → auto never animates, so every state declares its width, height and radius in rem; the active one is data-state on the element, set by your script, and a small style block rendered per instance maps each name to its lengths and shows the matching child. The shape transitions on the preset spring; the old content blurs out on the fast token and the new one arrives after it. Zero JavaScript.", "registryDependencies": [ "https://moonarc.dev/r/base.json" ], "docs": "Import '@/styles/moonarc.css' once and put first in your , so component CSS never ranks below your resets.", "categories": [ "ui" ], "meta": { "tier": "A", "pro": false, "jsBytes": 0, "jsBytesWithShared": 92, "intents": [ "dynamic island", "morphing pill notification", "island state animation", "pill that changes shape", "live activity pill", "expanding notification pill" ], "trigger": [ "click" ], "support": { "baseline": "widely", "needs": [], "line": "every browser" }, "readout": "" }, "files": [ { "path": "components/moonarc/DynamicIsland.astro", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "file-tree", "type": "registry:component", "title": "File Tree", "description": "A project tree whose folders open with an animated height, a turning chevron and a folder glyph that tips open; rows can be lit up to say \"this is the file you change\". Zero JavaScript: folders are native
and the height is ::details-content laid out as a grid row from 0fr to 1fr, the Accordion technique nested as deep as the tree goes.", "registryDependencies": [ "https://moonarc.dev/r/base.json" ], "docs": "Import '@/styles/moonarc.css' once and put first in your , so component CSS never ranks below your resets.", "categories": [ "ui" ], "meta": { "tier": "A", "pro": false, "jsBytes": 0, "jsBytesWithShared": 92, "intents": [ "file tree", "project structure tree", "animated folder tree", "directory tree astro", "docs file explorer", "nested details accordion" ], "trigger": [ "click" ], "support": { "baseline": "newly", "needs": [ "details-content", "grid-rows-animation" ], "fallback": "folders open at once", "line": "Chrome 131 · Firefox 143 · Safari 18.4" }, "readout": "" }, "files": [ { "path": "components/moonarc/FileTree.astro", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "filter-grid", "type": "registry:component", "title": "Filter Grid", "description": "Filter buttons over a grid of cards: the cards that stay slide to their new places, the ones that go fade out, the ones that return fade in. The motion is a same-document view transition, so the browser measures and moves them. The script toggles aria-pressed and hidden; each card is a transition group only for the duration through view-transition-name: match-element. Without JavaScript every card shows; under reduced motion they change places at once.", "registryDependencies": [ "https://moonarc.dev/r/runtime.json", "https://moonarc.dev/r/morph.json", "https://moonarc.dev/r/base.json" ], "docs": "Import '@/styles/moonarc.css' once and put first in your , so component CSS never ranks below your resets.", "categories": [ "ui" ], "meta": { "tier": "B", "pro": false, "jsBytes": 987, "jsBytesWithShared": 3508, "intents": [ "filterable grid", "filter cards with animation", "isotope style filter", "portfolio filter astro", "animated grid reflow", "tag filter gallery" ], "trigger": [ "click" ], "support": { "baseline": "newly", "needs": [ "view-transitions", "match-element" ], "fallback": "without view transitions the cards change places at once; without match-element the grid cross-fades and no card slides", "line": "Chrome 137 · Firefox 144 · Safari 18.4" }, "readout": "" }, "files": [ { "path": "components/moonarc/FilterGrid.astro", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "footer-reveal", "type": "registry:component", "title": "Footer Reveal", "description": "The page content slides up to reveal a footer that is already in place underneath. No timeline and no script: the footer is position: sticky at the bottom of the scrollport with a fixed height, and the content in front carries a higher z-index and its own background, so the only motion is the scroll itself. On a page shorter than the viewport the footer simply sits below the content.", "registryDependencies": [ "https://moonarc.dev/r/base.json" ], "docs": "Import '@/styles/moonarc.css' once and put first in your , so component CSS never ranks below your resets.", "categories": [ "scroll" ], "meta": { "tier": "A", "pro": false, "jsBytes": 0, "jsBytesWithShared": 92, "intents": [ "footer reveal on scroll", "sticky footer reveal", "footer behind content", "parallax footer", "content slides over footer" ], "trigger": [ "scroll" ], "support": { "baseline": "widely", "needs": [], "line": "every browser" }, "readout": "" }, "files": [ { "path": "components/moonarc/FooterReveal.astro", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "glitch-text", "type": "registry:component", "title": "Glitch Text", "description": "Splits text into two coloured copies and jumps a few slices sideways for a fraction of a second, every few seconds; the rest of the time the text is clean. Two pseudo-element copies clipped to slices on step-end keyframes, so nothing tweens. Pure CSS, and completely still under reduced motion.", "registryDependencies": [ "https://moonarc.dev/r/base.json" ], "docs": "Import '@/styles/moonarc.css' once and put first in your , so component CSS never ranks below your resets.", "categories": [ "text" ], "meta": { "tier": "A", "pro": false, "jsBytes": 0, "jsBytesWithShared": 92, "intents": [ "glitch text", "rgb split text", "glitch effect css", "cyberpunk text animation", "distorted text effect" ], "trigger": [ "always" ], "support": { "baseline": "widely", "needs": [ "clip-path" ], "line": "Chrome 55 · Firefox 54 · Safari 13.1" }, "readout": "" }, "files": [ { "path": "components/moonarc/GlitchText.astro", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "globe", "type": "registry:component", "title": "Globe", "description": "A turning globe of dots that you can drag. The land is the same 1° bitmask DottedMap draws from, sent as a downsampled mask in a JSON block and decoded on the client into rows of dots spread evenly by latitude; each frame projects them orthographically, front side only, depth as alpha, in three batched fills. Markers pulse on the ambient token. Drag has inertia; touch-action keeps the page scrolling. An SVG globe stands in without JavaScript.", "registryDependencies": [ "https://moonarc.dev/r/land.json", "https://moonarc.dev/r/geo.json", "https://moonarc.dev/r/runtime.json", "https://moonarc.dev/r/canvas.json", "https://moonarc.dev/r/base.json" ], "docs": "Import '@/styles/moonarc.css' once and put first in your , so component CSS never ranks below your resets.", "categories": [ "background" ], "meta": { "tier": "C", "pro": false, "jsBytes": 2837, "jsBytesWithShared": 6250, "intents": [ "3d globe", "rotating globe with markers", "cobe alternative", "dotted globe canvas", "interactive globe astro", "draggable globe" ], "trigger": [ "always", "pointer" ], "support": { "baseline": "widely", "needs": [], "line": "every browser" }, "readout": "" }, "files": [ { "path": "components/moonarc/Globe.astro", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "glyph-field", "type": "registry:component", "title": "Glyph Field", "description": "A field of braille dots that reads as a flowing contour map: two waves cross it, the colour turns along a sunset arc, and the cursor carves a trail that decays one dot at a time. No canvas and no frame loop: every cell is an element whose glyph is a CSS counter on a registered integer, the contours are noise computed on the server, and the waves are one stepping animation per row. ASCII and block sets are one prop away. Fills its positioned parent.", "registryDependencies": [ "https://moonarc.dev/r/base.json" ], "docs": "Import '@/styles/moonarc.css' once and put first in your , so component CSS never ranks below your resets.", "categories": [ "pointer" ], "meta": { "tier": "A", "pro": false, "jsBytes": 0, "jsBytesWithShared": 92, "intents": [ "braille dot field", "dot matrix background", "ascii hero background", "glyph field", "ascii art background reacts to cursor", "motion.dev style ascii hero", "character field animation", "terminal texture background", "contour map background" ], "trigger": [ "pointer", "always" ], "support": { "baseline": "newly", "needs": [ "property", "css-math", "counter-style", "counter-set", "has" ], "fallback": "without mod() the waves stop and the field shows the server-drawn contours; without @property the hover lights and releases in one step instead of decaying glyph by glyph", "line": "Chrome 125 · Firefox 128 · Safari 17.2" }, "readout": "" }, "files": [ { "path": "components/moonarc/GlyphField.astro", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "gradient-text", "type": "registry:component", "title": "Gradient Text", "description": "A gradient fill drifting slowly through the text with no seam at the loop point. Only the background position moves. Pure CSS; works on any inline or block text.", "registryDependencies": [ "https://moonarc.dev/r/base.json" ], "docs": "Import '@/styles/moonarc.css' once and put first in your , so component CSS never ranks below your resets.", "categories": [ "text" ], "meta": { "tier": "A", "pro": false, "jsBytes": 0, "jsBytesWithShared": 92, "intents": [ "gradient text", "animated gradient text", "rainbow text", "color shifting headline" ], "trigger": [ "always" ], "support": { "baseline": "widely", "needs": [ "bg-clip-text" ], "line": "Chrome 120 · Firefox 49 · Safari 14" }, "readout": "" }, "files": [ { "path": "components/moonarc/GradientText.astro", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "grid-pattern", "type": "registry:component", "title": "Grid Pattern", "description": "A hairline grid behind content, faded toward the edges, optionally drifting one cell at a time. Two repeating gradients and a mask; pure CSS. Fills its positioned parent.", "registryDependencies": [ "https://moonarc.dev/r/base.json" ], "docs": "Import '@/styles/moonarc.css' once and put first in your , so component CSS never ranks below your resets.", "categories": [ "background" ], "meta": { "tier": "A", "pro": false, "jsBytes": 0, "jsBytesWithShared": 92, "intents": [ "grid background", "grid pattern background", "blueprint grid", "faded grid lines background" ], "trigger": [ "always" ], "support": { "baseline": "widely", "needs": [ "mask-image" ], "line": "Chrome 120 · Firefox 53 · Safari 15.4" }, "readout": "" }, "files": [ { "path": "components/moonarc/GridPattern.astro", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "highlight-marker", "type": "registry:component", "title": "Highlight Marker", "description": "A highlighter sweeps across the phrases you marked, one after another, when the sentence scrolls into view. Each phrase is a real whose background grows from the left; wrapped lines are painted as separate strokes. Composes Reveal; no script of its own.", "registryDependencies": [ "https://moonarc.dev/r/reveal.json", "https://moonarc.dev/r/base.json" ], "docs": "Import '@/styles/moonarc.css' once and put first in your , so component CSS never ranks below your resets. Add to your as well, so entrances can hide content only when JS runs.", "categories": [ "text" ], "meta": { "tier": "A", "pro": false, "jsBytes": 0, "jsBytesWithShared": 3043, "intents": [ "highlight text on scroll", "marker highlight animation", "highlighter sweep text", "animated text highlight", "mark animation css" ], "trigger": [ "scroll" ], "support": { "baseline": "widely", "needs": [], "line": "every browser" }, "readout": "" }, "files": [ { "path": "components/moonarc/HighlightMarker.astro", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "horizontal-scroll", "type": "registry:component", "title": "Horizontal Scroll", "description": "A strip of items slides sideways while the page scrolls down and the section stays pinned. Zero JavaScript: a sticky viewport and a translate bound to the section's view timeline. Where scroll timelines are missing it is a normal horizontally scrollable strip.", "registryDependencies": [ "https://moonarc.dev/r/base.json" ], "docs": "Import '@/styles/moonarc.css' once and put first in your , so component CSS never ranks below your resets.", "categories": [ "scroll" ], "meta": { "tier": "A", "pro": false, "jsBytes": 0, "jsBytesWithShared": 92, "intents": [ "horizontal scroll section", "scroll sideways on vertical scroll", "pinned horizontal scroll", "horizontal scrolling gallery astro" ], "trigger": [ "scroll" ], "support": { "baseline": "limited", "needs": [ "scroll-timeline" ], "fallback": "a horizontally scrollable strip without pinning (Firefox)", "line": "Chrome 115 · not Firefox · Safari 26" }, "readout": "" }, "files": [ { "path": "components/moonarc/HorizontalScroll.astro", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "hover-image-links", "type": "registry:component", "title": "Hover Image Links", "description": "A list of project links: hovering one floats its image beside the pointer, leaning the way the pointer moves, while the other links step back. One floating box per list with every image server-rendered in it; the script writes two lengths, a lean and an index, and CSS gives the follow its lag on the fast token. Keyboard focus and reduced motion show the image at a fixed spot; touch gets the list.", "registryDependencies": [ "https://moonarc.dev/r/runtime.json", "https://moonarc.dev/r/base.json" ], "docs": "Import '@/styles/moonarc.css' once and put first in your , so component CSS never ranks below your resets.", "categories": [ "pointer" ], "meta": { "tier": "B", "pro": false, "jsBytes": 597, "jsBytesWithShared": 2319, "intents": [ "hover image links", "project list hover image follows cursor", "link list with floating image", "portfolio index hover preview", "blog list hover cover", "image reveal on link hover astro" ], "trigger": [ "pointer", "hover" ], "support": { "baseline": "widely", "needs": [ "has" ], "fallback": "without :has() the box stays hidden", "line": "Chrome 105 · Firefox 121 · Safari 15.4" }, "readout": "" }, "files": [ { "path": "components/moonarc/HoverImageLinks.astro", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "hover-video", "type": "registry:component", "title": "Hover Video", "description": "A poster card that plays a muted clip while the pointer or focus is on it and rewinds when it leaves. The card is a link, the video decoration behind it with preload=\"none\", so nothing loads until a hover; coarse pointers get a play/pause button, reduced motion never autoplays. The script is play(), pause() and a rewind.", "registryDependencies": [ "https://moonarc.dev/r/runtime.json", "https://moonarc.dev/r/animated-icons.json", "https://moonarc.dev/r/base.json" ], "docs": "Import '@/styles/moonarc.css' once and put first in your , so component CSS never ranks below your resets.", "categories": [ "ui" ], "meta": { "tier": "B", "pro": false, "jsBytes": 684, "jsBytesWithShared": 2406, "intents": [ "play video on hover", "hover to play preview", "video card hover", "muted autoplay on hover astro", "portfolio video thumbnails", "work grid video preview" ], "trigger": [ "hover" ], "support": { "baseline": "widely", "needs": [], "line": "every browser" }, "readout": "" }, "files": [ { "path": "components/moonarc/HoverVideo.astro", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "image-compare", "type": "registry:component", "title": "Image Compare", "description": "Compares a before and an after image with a line you drag between them. A native range input lies over the box, invisible, so dragging, clicking to jump, the arrow keys, touch and the screen reader are the browser's; the script writes its value to one custom property and the after image is clipped to it. Held, it follows with no lag; stepped, it glides on the fast token.", "registryDependencies": [ "https://moonarc.dev/r/runtime.json", "https://moonarc.dev/r/base.json" ], "docs": "Import '@/styles/moonarc.css' once and put first in your , so component CSS never ranks below your resets.", "categories": [ "ui" ], "meta": { "tier": "B", "pro": false, "jsBytes": 205, "jsBytesWithShared": 1927, "intents": [ "before after slider", "image comparison slider", "compare two images drag", "before after image astro", "juxtapose images", "split image reveal" ], "trigger": [ "pointer", "click" ], "support": { "baseline": "newly", "needs": [ "clip-path", "has", "range-vertical" ], "fallback": "without :has() the line glides while held too; without vertical ranges, orientation=\"vertical\" keeps a horizontal range over the box, so its line follows a sideways drag", "line": "Chrome 124 · Firefox 121 · Safari 16.5" }, "readout": "" }, "files": [ { "path": "components/moonarc/ImageCompare.astro", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "image-trail", "type": "registry:component", "title": "Image Trail", "description": "Small images pop up along the pointer's path and fade behind it. The images are a server-rendered pool of lazy elements; every `threshold` px the script positions the next one and restarts its keyframes, so nothing is created on move. The pop and the fade are CSS on the preset curve, the lifetime a duration token. On touch and under reduced motion the first image simply rests in the centre, under the slotted content.", "registryDependencies": [ "https://moonarc.dev/r/runtime.json", "https://moonarc.dev/r/base.json" ], "docs": "Import '@/styles/moonarc.css' once and put first in your , so component CSS never ranks below your resets. Add to your as well, so entrances can hide content only when JS runs.", "categories": [ "pointer" ], "meta": { "tier": "B", "pro": false, "jsBytes": 872, "jsBytesWithShared": 2594, "intents": [ "image trail on cursor", "images follow mouse", "photo trail hover effect", "cursor image trail astro", "hover image reveal along mouse path" ], "trigger": [ "pointer" ], "support": { "baseline": "widely", "needs": [ "container-units" ], "line": "Chrome 105 · Firefox 110 · Safari 16" }, "readout": "" }, "files": [ { "path": "components/moonarc/ImageTrail.astro", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "lightbox", "type": "registry:component", "title": "Lightbox", "description": "A thumbnail gallery whose images open full size: the image grows out of its own thumbnail on a same-document view transition and returns to it on close, and ← → move through the set. Built on Dialog morph: the dialog is native (Escape, the backdrop where closedby is supported, the close button, the focus trap), the growth is lib/morph, the caption and the count are a polite live region, and without JavaScript each thumbnail is a link to the full file.", "registryDependencies": [ "https://moonarc.dev/r/runtime.json", "https://moonarc.dev/r/morph.json", "https://moonarc.dev/r/dialog.json", "https://moonarc.dev/r/base.json" ], "docs": "Import '@/styles/moonarc.css' once and put first in your , so component CSS never ranks below your resets.", "categories": [ "ui" ], "meta": { "tier": "B", "pro": false, "jsBytes": 972, "jsBytesWithShared": 4015, "intents": [ "lightbox", "image gallery lightbox", "image zoom on click", "photo grows from thumbnail", "gallery modal astro", "shared element transition image" ], "trigger": [ "click" ], "support": { "baseline": "newly", "needs": [ "dialog", "view-transitions" ], "fallback": "without view transitions, or under reduced motion, the dialog opens as a plain dialog; without closedby (Safari) a backdrop click does nothing, and Escape and the close button still close it", "line": "Chrome 111 · Firefox 144 · Safari 18" }, "readout": "" }, "files": [ { "path": "components/moonarc/Lightbox.astro", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "link-preview", "type": "registry:component", "title": "Link Preview", "description": "A link that shows a small card (image, title, one line, domain) after a moment on hover or focus, above everything, flipping when there is no room. The card is a manual popover anchored to the link; the script only shows and hides it, the wait is a CSS transition-delay on a duration token, and everything on the card is a prop at build time, so nothing is fetched. Touch gets the link alone.", "registryDependencies": [ "https://moonarc.dev/r/runtime.json", "https://moonarc.dev/r/base.json" ], "docs": "Import '@/styles/moonarc.css' once and put first in your , so component CSS never ranks below your resets.", "categories": [ "ui" ], "meta": { "tier": "B", "pro": false, "jsBytes": 671, "jsBytesWithShared": 2393, "intents": [ "link preview on hover", "hover card link", "link hover card with image", "link preview astro", "hovercard", "preview tooltip for links" ], "trigger": [ "hover" ], "support": { "baseline": "newly", "needs": [ "popover", "anchor", "starting-style", "allow-discrete" ], "fallback": "without anchor positioning the script places the card under the link; without the popover attribute the link is a link", "line": "Chrome 125 · Firefox 147 · Safari 26" }, "readout": "" }, "files": [ { "path": "components/moonarc/LinkPreview.astro", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "liquid-glass", "type": "registry:component", "title": "Liquid Glass", "description": "A glass pane that blurs and tints whatever is behind it. Every engine: backdrop blur and saturation, a specular rim, a tint from the tokens, a sheen that crosses on hover. The refraction at the rim is an SVG displacement map on its own backdrop-filter layer, built on the server from strength and edge and stretched to the box by the filter, so it works at any size with no measuring. Chromium bends the backdrop; Firefox and WebKit paint nothing on that layer and show the same glass without the bend. Zero JavaScript.", "registryDependencies": [ "https://moonarc.dev/r/base.json" ], "docs": "Import '@/styles/moonarc.css' once and put first in your , so component CSS never ranks below your resets.", "categories": [ "ui" ], "meta": { "tier": "A", "pro": false, "jsBytes": 0, "jsBytesWithShared": 92, "intents": [ "liquid glass", "glassmorphism css", "frosted glass panel", "glass card with refraction", "apple liquid glass effect", "backdrop blur card" ], "trigger": [ "hover" ], "support": { "baseline": "limited", "needs": [ "backdrop-filter", "backdrop-svg" ], "fallback": "Firefox and Safari show the glass (blur, saturation, rim, tint, sheen) without the rim refraction; the displacement layer paints nothing there (measured, 0 pixels differ)", "line": "Chrome 76 · not Firefox · not Safari" }, "readout": "" }, "files": [ { "path": "components/moonarc/LiquidGlass.astro", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "magnetic", "type": "registry:component", "title": "Magnetic", "description": "A button or icon is pulled toward the cursor while it is nearby and springs back when it leaves. An invisible field around the child lets clicks through to its neighbours; one pointermove listener on the document measures the pointer against it, and the pull is CSS translate on the active preset's spring. No pull under reduced motion, read on every move.", "registryDependencies": [ "https://moonarc.dev/r/runtime.json", "https://moonarc.dev/r/base.json" ], "docs": "Import '@/styles/moonarc.css' once and put first in your , so component CSS never ranks below your resets.", "categories": [ "pointer" ], "meta": { "tier": "B", "pro": false, "jsBytes": 619, "jsBytesWithShared": 2341, "intents": [ "magnetic button", "button follows cursor", "magnetic hover effect", "cursor attraction button" ], "trigger": [ "pointer", "hover" ], "support": { "baseline": "widely", "needs": [], "line": "every browser" }, "readout": "" }, "files": [ { "path": "components/moonarc/Magnetic.astro", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "marquee", "type": "registry:component", "title": "Marquee", "description": "Infinite scrolling strip for logos, quotes or tags in any direction. The content is rendered twice (or repeat times) and the track moves by exactly one copy, so there is never a seam; a copy narrower than the strip stretches to fill it, so a short list never leaves a blank band. Pauses on hover; becomes a static scrollable strip under reduced motion. Pure CSS.", "registryDependencies": [ "https://moonarc.dev/r/base.json" ], "docs": "Import '@/styles/moonarc.css' once and put first in your , so component CSS never ranks below your resets.", "categories": [ "loop" ], "meta": { "tier": "A", "pro": false, "jsBytes": 0, "jsBytesWithShared": 92, "intents": [ "logo marquee", "infinite scroll strip", "logo loop", "ticker", "scrolling logos astro" ], "trigger": [ "always", "hover" ], "support": { "baseline": "widely", "needs": [ "mask-image" ], "line": "Chrome 120 · Firefox 53 · Safari 15.4" }, "readout": "" }, "files": [ { "path": "components/moonarc/Marquee.astro", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "meteors", "type": "registry:component", "title": "Meteors", "description": "Streaks falling diagonally across a twinkling sky. Each meteor is one element with a bright head, rotated to its angle and sent along its own axis; start, delay, length and pace come from a seeded generator on the server, so the same seed always draws the same sky. Stars are two tiled gradient layers blinking in alternation. Zero JS; fills its positioned parent.", "registryDependencies": [ "https://moonarc.dev/r/base.json" ], "docs": "Import '@/styles/moonarc.css' once and put first in your , so component CSS never ranks below your resets.", "categories": [ "background" ], "meta": { "tier": "A", "pro": false, "jsBytes": 0, "jsBytesWithShared": 92, "intents": [ "meteor shower background", "falling stars animation", "shooting stars css", "meteors effect hero", "starry night background" ], "trigger": [ "always" ], "support": { "baseline": "widely", "needs": [ "container-units" ], "line": "Chrome 105 · Firefox 110 · Safari 16" }, "readout": "" }, "files": [ { "path": "components/moonarc/Meteors.astro", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "noise", "type": "registry:component", "title": "Noise", "description": "Film grain over a gradient or image, blended and flickering at 12 fps. One SVG turbulence tile as a background whose translate steps; pure CSS, no canvas. Fills its positioned parent.", "registryDependencies": [ "https://moonarc.dev/r/base.json" ], "docs": "Import '@/styles/moonarc.css' once and put first in your , so component CSS never ranks below your resets.", "categories": [ "background" ], "meta": { "tier": "A", "pro": false, "jsBytes": 0, "jsBytesWithShared": 92, "intents": [ "noise overlay", "film grain effect", "grain texture css", "noisy background" ], "trigger": [ "always" ], "support": { "baseline": "widely", "needs": [], "line": "every browser" }, "readout": "" }, "files": [ { "path": "components/moonarc/Noise.astro", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "number-flow", "type": "registry:component", "title": "Number Flow", "description": "A number whose digits roll to the new value when it changes. Each column slides to its digit on the preset spring, thousands separators stay put, and leading columns collapse when the number gets shorter. The value is one custom property your code writes; every column derives its digit from it with round() and mod(). No script of its own.", "registryDependencies": [ "https://moonarc.dev/r/base.json" ], "docs": "Import '@/styles/moonarc.css' once and put first in your , so component CSS never ranks below your resets.", "categories": [ "data" ], "meta": { "tier": "A", "pro": false, "jsBytes": 0, "jsBytesWithShared": 92, "intents": [ "number flow", "rolling digits", "odometer number animation", "animated counter on change", "slot machine digits css", "number transition" ], "trigger": [ "click" ], "support": { "baseline": "newly", "needs": [ "css-math" ], "fallback": "the value as plain text, updated only by a re-render", "line": "Chrome 125 · Firefox 118 · Safari 15.4" }, "readout": "" }, "files": [ { "path": "components/moonarc/NumberFlow.astro", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "orb", "type": "registry:component", "title": "Orb", "description": "A sphere of light that breathes and slowly turns its colour. Three radial gradients on one element, soft at their edges so no blur filter is ever painted; the breath is a scale on the compositor and the colour shift is one registered number scaled to a drift angle every gradient adds to its hue. A conic highlight turns around the rim. Zero JS; centred in its positioned parent.", "registryDependencies": [ "https://moonarc.dev/r/base.json" ], "docs": "Import '@/styles/moonarc.css' once and put first in your , so component CSS never ranks below your resets.", "categories": [ "background" ], "meta": { "tier": "A", "pro": false, "jsBytes": 0, "jsBytesWithShared": 92, "intents": [ "glowing orb background", "breathing orb", "ai orb animation", "gradient sphere hero", "siri orb css" ], "trigger": [ "always" ], "support": { "baseline": "newly", "needs": [ "property" ], "fallback": "the sphere breathes; the hue does not drift", "line": "Chrome 85 · Firefox 128 · Safari 16.4" }, "readout": "" }, "files": [ { "path": "components/moonarc/Orb.astro", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "orbiting-circles", "type": "registry:component", "title": "Orbiting Circles", "description": "The children orbit the centre of their parent and stay upright. One transform animation per item (rotate, translate out, rotate back) from its start angle to a full turn, on the compositor, no wrapper. Start angles come from :nth-child, the count from :has(). Two instances at two radii are two rings; `reverse` sends one the other way. Zero JS.", "registryDependencies": [ "https://moonarc.dev/r/base.json" ], "docs": "Import '@/styles/moonarc.css' once and put first in your , so component CSS never ranks below your resets.", "categories": [ "background" ], "meta": { "tier": "A", "pro": false, "jsBytes": 0, "jsBytesWithShared": 92, "intents": [ "orbiting icons", "icons rotating around logo", "orbit animation css", "planets orbit integration logos", "circular orbit icons astro" ], "trigger": [ "always" ], "support": { "baseline": "widely", "needs": [ "has" ], "fallback": "pass `count`; without :has() and without count the items stack at one angle", "line": "Chrome 105 · Firefox 121 · Safari 15.4" }, "readout": "" }, "files": [ { "path": "components/moonarc/OrbitingCircles.astro", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "otp-input", "type": "registry:component", "title": "OTP Input", "description": "A one-time code in cells, from one native input. Paste, SMS autofill, screen readers and Backspace only work in the single-input pattern, so the cells are drawn under the field and a monospace font with a computed letter-spacing puts each glyph in the middle of its cell. Full and valid, the check draws itself; :user-invalid tints the cells only after the reader has been there. Zero JavaScript.", "registryDependencies": [ "https://moonarc.dev/r/base.json" ], "docs": "Import '@/styles/moonarc.css' once and put first in your , so component CSS never ranks below your resets.", "categories": [ "ui" ], "meta": { "tier": "A", "pro": false, "jsBytes": 0, "jsBytesWithShared": 92, "intents": [ "otp input", "one time code input", "verification code boxes", "pin input", "sms code input", "6 digit code input css" ], "trigger": [ "click" ], "support": { "baseline": "widely", "needs": [ "has", "user-invalid" ], "fallback": "without :has() the cells keep their resting border and the check never shows; the input itself is unchanged", "line": "Chrome 119 · Firefox 121 · Safari 16.5" }, "readout": "" }, "files": [ { "path": "components/moonarc/OtpInput.astro", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "page-transition", "type": "registry:component", "title": "Page Transition", "description": "Animates a named region between pages: rise, zoom, wipe, scope, fade, slide, or the browser's own shared-element morph. Zero JavaScript of its own: Astro's drives view transitions, and the presets are keyframes on the active motion preset's curve.", "registryDependencies": [ "https://moonarc.dev/r/base.json" ], "docs": "Import '@/styles/moonarc.css' once and put first in your , so component CSS never ranks below your resets.", "categories": [ "transition" ], "meta": { "tier": "A", "pro": false, "jsBytes": 0, "jsBytesWithShared": 92, "intents": [ "page transition", "view transitions astro", "animate between pages", "shared element transition", "transition:name preset", "route transition" ], "trigger": [ "click" ], "support": { "baseline": "newly", "needs": [ "view-transitions" ], "fallback": "an instant swap between pages", "line": "Chrome 111 · Firefox 144 · Safari 18" }, "readout": "" }, "files": [ { "path": "components/moonarc/PageTransition.astro", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "parallax", "type": "registry:component", "title": "Parallax", "description": "An element drifts at its own speed as it crosses the viewport, exactly in step with the scroll. Zero JavaScript: a translate bound to the element's own view timeline. Stack a few with different speeds for depth.", "registryDependencies": [ "https://moonarc.dev/r/base.json" ], "docs": "Import '@/styles/moonarc.css' once and put first in your , so component CSS never ranks below your resets.", "categories": [ "scroll" ], "meta": { "tier": "A", "pro": false, "jsBytes": 0, "jsBytesWithShared": 92, "intents": [ "parallax", "parallax scroll effect", "background moves slower than foreground", "scroll-driven parallax astro", "parallax without javascript" ], "trigger": [ "scroll" ], "support": { "baseline": "limited", "needs": [ "scroll-timeline" ], "fallback": "the element stays in place (Firefox)", "line": "Chrome 115 · not Firefox · Safari 26" }, "readout": "" }, "files": [ { "path": "components/moonarc/Parallax.astro", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "particles", "type": "registry:component", "title": "Particles", "description": "A field of drifting dots that part around the cursor, on a canvas that draws only while on screen in a visible tab. The count follows the area (capped), every constant is a custom property declared per preset, the colours are the theme's and are re-read when it changes. Without JavaScript a still dot pattern in CSS stands in; under reduced motion one frame is drawn.", "registryDependencies": [ "https://moonarc.dev/r/runtime.json", "https://moonarc.dev/r/canvas.json", "https://moonarc.dev/r/base.json" ], "docs": "Import '@/styles/moonarc.css' once and put first in your , so component CSS never ranks below your resets.", "categories": [ "background" ], "meta": { "tier": "C", "pro": false, "jsBytes": 1630, "jsBytesWithShared": 5043, "intents": [ "particles background", "floating dots interactive", "particles.js alternative", "dots avoid cursor", "constellation background canvas" ], "trigger": [ "always", "pointer" ], "support": { "baseline": "widely", "needs": [], "line": "every browser" }, "readout": "" }, "files": [ { "path": "components/moonarc/Particles.astro", "type": "registry:component" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "persist-player", "type": "registry:component", "title": "Persist Player", "description": "An audio player that keeps playing while you navigate: the same