# Moonarc
> Zero-runtime, ClientRouter-safe animation and motion components for Astro: 125 primitives (83 of them load no JavaScript) and, in Pro, 108 sections and 11 GPU effects. Every component states its JavaScript cost, measured from a real build, and its browser support. Primitives are MIT.
Install: `npx astro add moonarc`. Import per component: `import Reveal from '@moonarc/core/Reveal'`. Full setup, per package manager and project type, with fixes: https://moonarc.dev/setup.md
Runtime for your own scripts: `import { onMount, onPage } from '@moonarc/core/runtime'`. It binds now and after every navigation, never double-binds, and cleans up on astro:before-swap. Do not listen to astro:page-load directly: it does not fire without 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. Cost: 0 B JS. Support: newly (Chrome 131 · Firefox 143 · Safari 18.4). Intents: accordion, faq accordion, animate details summary, collapsible sections, height auto transition.
- [Animated Beam](https://moonarc.dev/components/animated-beam.md): 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. Cost: 0 B JS. Support: widely (Chrome 120 · Firefox 118 · Safari 16). Intents: animated beam between elements, integration diagram animated lines, connecting beams hub and spokes, data flow lines animation, animated connection lines svg.
- [Animated Icons](https://moonarc.dev/components/animated-icons.md): 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. Cost: 0 B JS. Support: limited (Chrome 52 · Firefox 97 · not Safari). Intents: animated hamburger icon, menu to x icon animation, play pause morph icon, copy to check icon, sun moon icon animation, animated icons css.
- [Animated List](https://moonarc.dev/components/animated-list.md): 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. Cost: 0 B JS. Support: newly (Chrome 125 · Firefox 129 · Safari 17.5). Intents: animated notification list, notifications one by one, activity feed animation, list items slide in stack, animated list astro, chat messages arriving in sequence.
- [Animated Select](https://moonarc.dev/components/animated-select.md): 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. Cost: 0 B JS. Support: limited (Chrome 138 · not Firefox · Safari 27). Intents: animated select, custom select css, styled dropdown native, select with animated options, customizable select, dropdown with stagger.
- [App Screen](https://moonarc.dev/components/app-screen.md): A phone app's screen drawn from rows instead of a screenshot: a status bar, a title, then rows of fourteen kinds (a big figure, a ring of progress, a checklist, a bar chart, a card, chips, a map with a route, a player, a chat, a list, a week of days, a button, a lock screen's clock, a notification) and a tab bar. Without its chrome it draws a widget, a lock screen or a watch face. It sizes itself to the box it sits in with container units, so inside PhoneFrame it scales with the phone, and it takes its colours from the theme and the colour block it names, so a palette recolours every screen. As it arrives the ring fills, the bars grow, the route draws and the checks tick in, once; inside a Reveal they wait for it. One accessible name for the whole screen, or hidden as decoration. Zero JavaScript. Cost: 0 B JS. Support: widely (Chrome 105 · Firefox 110 · Safari 16). Intents: app screen mockup, phone app ui mockup, mobile app screenshot placeholder, drawn app screen, app landing page phone screen, fake app ui in phone frame.
- [Arrow Button](https://moonarc.dev/components/arrow-button.md): 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. Cost: 0 B JS. Support: widely (every browser). Intents: arrow button hover, button arrow slides out, cta arrow animation, link arrow animation, arrow that moves on hover.
- [Aurora Background](https://moonarc.dev/components/aurora.md): 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. Cost: 0 B JS. Support: widely (every browser). Intents: aurora background, gradient background animation, animated gradient blobs, ambient hero background astro, aurora without webgl.
- [Avatar Stack](https://moonarc.dev/components/avatar-stack.md): 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. Cost: 0 B JS. Support: widely (every browser). Intents: avatar stack, avatar group, overlapping avatars, avatar circles hover, joined by avatars, social proof avatars.
- [Bar Grow](https://moonarc.dev/components/bar-grow.md): 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. Cost: 0 B JS of its own · uses Reveal + runtime. Support: widely (every browser). Intents: animated bar chart, bars grow on scroll, css bar chart animation, stagger bars chart, tiny bar chart astro.
- [Border Beam](https://moonarc.dev/components/border-beam.md): 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. Cost: 0 B JS. Support: newly (Chrome 120 · Firefox 128 · Safari 16.4). Intents: border beam, animated border, glowing card border, light around card edge, moving border gradient.
- [Browser Frame](https://moonarc.dev/components/browser-frame.md): 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. Cost: 0 B JS. Support: widely (Chrome 105 · Firefox 110 · Safari 16). Intents: browser window mockup, browser frame component, safari frame screenshot, mac window mockup, device frame astro.
- [Bubble Text](https://moonarc.dev/components/bubble-text.md): 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. Cost: 0 B JS. Support: widely (Chrome 105 · Firefox 121 · Safari 15.4). Intents: bubble text hover, text weight hover effect, letters swell under cursor, variable font hover, hover text bulge.
- [Card Stack](https://moonarc.dev/components/card-stack.md): 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. Cost: 0 B JS. Support: limited (Chrome 116 · not Firefox · Safari 26). Intents: card stack scroll, sticky stacking cards, stacked cards on scroll, apple style card stack, scroll stack astro.
- [Carousel](https://moonarc.dev/components/carousel.md): 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. effect="ring" centres the slides and turns each one by where it sits in the strip, on a view timeline of its own, so the strip reads as a ring of cards that turns as it is scrolled. Cost: 0 B JS. Support: limited (Chrome 135 · not Firefox · not Safari). Intents: carousel, slider, scroll snap carousel, image carousel astro, carousel without javascript, testimonial slider.
- [Check Draw](https://moonarc.dev/components/check-draw.md): 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. Cost: 0 B JS. Support: widely (every browser). Intents: animated checkbox, checkbox with drawn check, checkmark animation, custom checkbox css, indeterminate checkbox, checkbox tick draws itself.
- [Circular Text](https://moonarc.dev/components/circular-text.md): 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. Cost: 0 B JS. Support: widely (every browser). Intents: circular text, text on a circle, rotating badge text, spinning text ring, text around icon.
- [Code Tabs](https://moonarc.dev/components/code-tabs.md): 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. Cost: 0 B JS of its own · uses CopyButton + runtime. Support: widely (Chrome 117 · Firefox 129 · Safari 17.5). Intents: code block with tabs, npm pnpm yarn tabs, install command tabs, code tabs with copy button, shiki code tabs astro.
- [Command Palette](https://moonarc.dev/components/command-palette.md): 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. Cost: 3.0 kB raw JS · 1.4 kB gzip · + runtime. Support: newly (Chrome 135 · Firefox 144 · Safari 26.2). Intents: command palette, cmd k search, keyboard search dialog, spotlight search astro, site search modal, command menu.
- [Confetti](https://moonarc.dev/components/confetti.md): 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. Cost: 2.4 kB raw JS · 1.3 kB gzip · + runtime + canvas. Support: widely (every browser). 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.
- [Copy Button](https://moonarc.dev/components/copy-button.md): 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". Cost: 837 B raw JS · 489 B gzip · + runtime. Support: widely (Chrome 66 · Firefox 63 · Safari 13.1). Intents: copy to clipboard button, copy button with check icon, copy code button, clipboard button astro, copied feedback.
- [Count Up](https://moonarc.dev/components/count-up.md): 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. Cost: 0 B JS of its own · uses Reveal + runtime. Support: newly (Chrome 91 · Firefox 128 · Safari 17). Intents: count up, animated number, number counter on scroll, statistics counter, countup astro.
- [Countdown Flip](https://moonarc.dev/components/countdown-flip.md): 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. Cost: 1.1 kB raw JS · 649 B gzip · + runtime. Support: widely (Chrome 55 · Firefox 54 · Safari 13.1). Intents: countdown flip clock, flip clock countdown, launch countdown timer, countdown to date animation, flip counter css.
- [Counter Preloader](https://moonarc.dev/components/counter-preloader.md): 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. Cost: 0 B JS. Support: newly (Chrome 85 · Firefox 128 · Safari 17.2). Intents: preloader counter, page loader 0 to 100, loading screen counter, intro curtain, site preloader css, studio loading number.
- [Cursor](https://moonarc.dev/components/cursor.md): 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. Cost: 1021 B raw JS · 574 B gzip · + runtime. Support: widely (every browser). Intents: custom cursor, cursor follower, cursor that says view over images, mouse follower ring, blend mode cursor, custom mouse pointer astro.
- [Cursor Grid](https://moonarc.dev/components/cursor-grid.md): 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. Cost: 0 B JS. Support: widely (Chrome 105 · Firefox 121 · Safari 15.4). Intents: cursor grid, interactive grid background, hover grid cells, pointer reactive background, hero background reacts to mouse.
- [Curtain](https://moonarc.dev/components/curtain.md): 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. Cost: 479 B raw JS · 266 B gzip. Support: newly (Chrome 120 · Firefox 144 · Safari 18). Intents: page curtain transition, iris page transition, full screen wipe between pages, view transition root clip-path, blinds page transition, pixel page transition astro.
- [Dialog](https://moonarc.dev/components/dialog.md): 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. Cost: 0 B JS. Support: newly (Chrome 135 · Firefox 144 · Safari 26.2). Intents: modal dialog, animated modal, dialog open close animation, native dialog astro, modal without javascript.
- [Dock](https://moonarc.dev/components/dock.md): 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. Cost: 0 B JS. Support: widely (Chrome 105 · Firefox 121 · Safari 15.4). Intents: macos dock, dock navigation, magnifying icons on hover, dock menu astro, floating dock bottom of page, icon bar that grows under the cursor.
- [Dot Pattern](https://moonarc.dev/components/dot-pattern.md): 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. Cost: 0 B JS. Support: widely (Chrome 120 · Firefox 53 · Safari 15.4). Intents: dot pattern background, dotted background, dot grid, polka dot background css.
- [Dotted Map](https://moonarc.dev/components/dotted-map.md): 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. Cost: 0 B JS. Support: widely (every browser). Intents: dotted world map, world map with markers, dot map svg, map with pulsing locations, regions map astro.
- [Drawer](https://moonarc.dev/components/drawer.md): 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. Cost: 933 B raw JS · 500 B gzip · + runtime. Support: newly (Chrome 135 · Firefox 144 · Safari 26.2). Intents: bottom sheet, drawer, draggable sheet, swipe to dismiss, mobile drawer astro, vaul alternative.
- [Dynamic Island](https://moonarc.dev/components/dynamic-island.md): 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. Cost: 0 B JS. Support: widely (every browser). Intents: dynamic island, morphing pill notification, island state animation, pill that changes shape, live activity pill, expanding notification pill.
- [Expanding Panels](https://moonarc.dev/components/expanding-panels.md): A row of panels where the one pointed at or focused widens and shows its words, and the others narrow to a strip with their title turned up the side. Each panel is a link or a plain panel, its picture a slot of its own or the colour block it names. With nothing pointed at, one panel you pick is the wide one. Below 40 rem of width the panels stack, each one whole. The widening is a transition of flex-grow, a number, so it runs in every engine. Zero JavaScript. Cost: 0 B JS. Support: widely (Chrome 105 · Firefox 110 · Safari 16). Intents: expanding panels, hover expand cards, accordion slider horizontal, expanding gallery hover, flex grow hover panels, neighbourhood panels.
- [File Tree](https://moonarc.dev/components/file-tree.md): 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. Cost: 0 B JS. Support: newly (Chrome 131 · Firefox 143 · Safari 18.4). Intents: file tree, project structure tree, animated folder tree, directory tree astro, docs file explorer, nested details accordion.
- [Fill Text](https://moonarc.dev/components/fill-text.md): A statement that fills in as it is read: the words start faint and take their full colour in reading order, line after line, while the block crosses the viewport. One inline span with a two-colour gradient clipped to the text, moved by a scroll-driven timeline, so the fill follows the lines wherever they wrap. Zero JavaScript; where scroll-driven animation is missing, and under reduced motion, the text is full colour from the start. Cost: 0 B JS. Support: limited (Chrome 120 · not Firefox · Safari 26). Intents: text fill on scroll, scroll reveal text color, text highlight on scroll, statement text fill, scroll driven text, apple style text fill.
- [Filter Grid](https://moonarc.dev/components/filter-grid.md): 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. Cost: 987 B raw JS · 535 B gzip · + runtime + morph. Support: newly (Chrome 137 · Firefox 144 · Safari 18.4). Intents: filterable grid, filter cards with animation, isotope style filter, portfolio filter astro, animated grid reflow, tag filter gallery.
- [Fluted Glass](https://moonarc.dev/components/fluted-glass.md): Reeded glass over whatever is behind it: the box's backdrop blurred and lightly brightened, cut into vertical flutes (or flutes at an angle), each with a light edge and a shade, as a pane of fluted glass bends what is behind it into strips. Put it in a positioned box over a picture, a video or a gradient, and give it the flute's width and how far it blurs. Without backdrop-filter the flutes are drawn over the content as they are, unblurred. Decoration, hidden from a screen reader; it never takes a click. Zero JavaScript. Cost: 0 B JS. Support: widely (Chrome 76 · Firefox 103 · Safari 18). Intents: fluted glass effect, reeded glass css, glass texture overlay, ribbed glass effect, frosted glass stripes astro.
- [Focus Siblings](https://moonarc.dev/components/focus-siblings.md): A group whose item pointed at or focused stays as it is while its siblings step back: dimmed, and a little smaller or softer if you ask. One :has() rule on the group reads which child is pointed at, so the items are the group's own children, whatever they are: cards, rows of a list, portraits. The pointer counts only on a screen that can hover, since a tap leaves :hover behind; a focus ring from the keyboard counts everywhere, and a click's focus does not. Zero JavaScript. Cost: 0 B JS. Support: widely (Chrome 105 · Firefox 121 · Safari 15.4). Intents: dim siblings on hover, focus one card dim others, hover highlight list, blur other items on hover, focus siblings css, has selector hover group.
- [Footer Reveal](https://moonarc.dev/components/footer-reveal.md): 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. Cost: 0 B JS. Support: widely (every browser). Intents: footer reveal on scroll, sticky footer reveal, footer behind content, parallax footer, content slides over footer.
- [Gauge](https://moonarc.dev/components/gauge.md): A ring, a three-quarter arc or a half circle that fills to a value as it scrolls into view, the number counting up in the middle with it and a label under it. The SVG is drawn on the server; the value's stroke is one dash that grows from the start of the track, and its colour can follow the value through bands you set, picked at build (red under 99, green above). The element is a meter with the value and the label, so a screen reader hears it once. Composes Reveal and CountUp; no script of its own. Cost: 0 B JS of its own · uses Reveal + runtime. Support: newly (Chrome 91 · Firefox 128 · Safari 17). Intents: gauge, radial progress, ring chart, donut progress, circular progress bar, uptime gauge, speedometer gauge, kpi ring astro.
- [Glitch Text](https://moonarc.dev/components/glitch-text.md): 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. Cost: 0 B JS. Support: widely (Chrome 55 · Firefox 54 · Safari 13.1). Intents: glitch text, rgb split text, glitch effect css, cyberpunk text animation, distorted text effect.
- [Globe](https://moonarc.dev/components/globe.md): 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. Cost: 2.8 kB raw JS · 1.4 kB gzip · + runtime + canvas. Support: widely (every browser). Intents: 3d globe, rotating globe with markers, cobe alternative, dotted globe canvas, interactive globe astro, draggable globe.
- [Glyph Field](https://moonarc.dev/components/glyph-field.md): 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. Cost: 0 B JS. Support: newly (Chrome 125 · Firefox 128 · Safari 17.2). 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.
- [Gradient Text](https://moonarc.dev/components/gradient-text.md): 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. Cost: 0 B JS. Support: widely (Chrome 120 · Firefox 49 · Safari 14). Intents: gradient text, animated gradient text, rainbow text, color shifting headline.
- [Grid Pattern](https://moonarc.dev/components/grid-pattern.md): 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. Cost: 0 B JS. Support: widely (Chrome 120 · Firefox 53 · Safari 15.4). Intents: grid background, grid pattern background, blueprint grid, faded grid lines background.
- [Highlight Marker](https://moonarc.dev/components/highlight-marker.md): 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. Cost: 0 B JS of its own · uses Reveal + runtime. Support: widely (every browser). Intents: highlight text on scroll, marker highlight animation, highlighter sweep text, animated text highlight, mark animation css.
- [Hold Button](https://moonarc.dev/components/hold-button.md): A button that asks to be held for a moment before it acts, for the one action on a page that should not happen by a slip: delete, cancel a booking, send for good. While it is held (a pointer down on it, or Space or Enter held on it) a fill crosses it; let go early and the fill drains back and nothing happens; hold to the end and it acts: it submits its form, or a listener on ma:hold takes it from there. The line under it says what to do and says when it is done, to a screen reader too. Without JavaScript it is an ordinary button that acts on a press. Cost: 984 B raw JS · 538 B gzip · + runtime. Support: widely (every browser). Intents: hold to confirm button, press and hold button, long press to delete, hold to delete, confirm destructive action button astro.
- [Home Art](https://moonarc.dev/components/home-art.md): A building drawn flat, for a listing that has no photograph yet: a house, a terrace, an apartment block, a villa, a cabin, a tower, an office or a shop, in the colour of the block or tone it sits on, with a shade, a light and the windows mixed from it. A seed varies the floors, the windows, the roof and the trees and draws the same building on every build; time lights the windows at dusk and at night and darkens the sky. As a tile it fills its box with the block's ground as the sky. Hovering or focusing a link around it lights a few more windows. Nothing moves on its own. Zero JavaScript. Cost: 0 B JS. Support: widely (every browser). Intents: house illustration, building illustration svg, real estate placeholder image, property listing art, drawn house astro, apartment building svg.
- [Horizontal Scroll](https://moonarc.dev/components/horizontal-scroll.md): 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. Cost: 0 B JS. Support: limited (Chrome 115 · not Firefox · Safari 26). Intents: horizontal scroll section, scroll sideways on vertical scroll, pinned horizontal scroll, horizontal scrolling gallery astro.
- [Hover Image Links](https://moonarc.dev/components/hover-image-links.md): 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. Cost: 596 B raw JS · 354 B gzip · + runtime. Support: widely (Chrome 105 · Firefox 121 · Safari 15.4). 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.
- [Hover Video](https://moonarc.dev/components/hover-video.md): 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. Cost: 684 B raw JS · 364 B gzip · + runtime. Support: widely (every browser). Intents: play video on hover, hover to play preview, video card hover, muted autoplay on hover astro, portfolio video thumbnails, work grid video preview.
- [Image Compare](https://moonarc.dev/components/image-compare.md): 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. Cost: 205 B raw JS · 177 B gzip · + runtime. Support: newly (Chrome 124 · Firefox 121 · Safari 16.5). Intents: before after slider, image comparison slider, compare two images drag, before after image astro, juxtapose images, split image reveal.
- [Image Trail](https://moonarc.dev/components/image-trail.md): Small images pop up along the pointer's path and fade behind it. The images are a server-rendered pool of lazy element is carried into the next page by Astro's router, so position, volume and playback never restart. Native controls, zero JavaScript of its own. Put it in the layout; every page gets the one that is already playing. Cost: 0 B JS. Support: widely (every browser). Intents: persistent audio player astro, music keeps playing between pages, transition:persist audio, site-wide player view transitions, audio survives navigation.
- [Phone Frame](https://moonarc.dev/components/phone-frame.md): A generic phone frame around a screenshot or any content, with three cut-outs (island, notch, punch), a home bar, and no logo, buttons or brand. The chrome scales with the frame's width through container query units and shares BrowserFrame's tokens; scroll drifts content taller than the screen up and back on a translate keyframe, paused under the pointer. Zero JavaScript. Cost: 0 B JS. Support: widely (Chrome 105 · Firefox 110 · Safari 16). Intents: phone mockup, iphone frame css, device frame screenshot, mobile mockup scrolling, app screenshot frame, phone frame no brand.
- [Pill Nav](https://moonarc.dev/components/pill-nav.md): A floating pill of links whose active pill glides to the page you chose. Zero JavaScript: the server marks the current link, the pill carries a view-transition-name, and under ClientRouter the browser slides it across the swap; a faint pill follows hover and focus through anchor positioning. Cost: 0 B JS. Support: newly (Chrome 125 · Firefox 147 · Safari 26). Intents: pill navigation, floating nav pill, sliding active indicator nav, nav with animated indicator, navbar pill astro, tab bar that slides between pages.
- [Pixel Reveal](https://moonarc.dev/components/pixel-reveal.md): A picture that resolves from blocks as it scrolls into view: a grid of squares in one colour lies over the slot, and each square clears on its own stretch of the picture's entry, picked by a seed, so the picture comes through in a scatter and stands whole by the time it is a third of the way up the screen. The squares run on the picture's own view timeline, so there is no script and no observer. Where view timelines are not supported, and with reduced motion, the picture is shown whole and the squares are never drawn. Zero JavaScript. Cost: 0 B JS. Support: limited (Chrome 115 · not Firefox · Safari 26). Intents: pixel reveal image, image reveal on scroll, pixelated image transition, blocks reveal image, scroll reveal picture css.
- [Popover](https://moonarc.dev/components/popover.md): A popover that opens beside its trigger, flips when there is no room, closes on outside click or Escape, and animates in and out. Zero JavaScript: the popover attribute, anchor positioning and @starting-style do all of it. Cost: 0 B JS. Support: newly (Chrome 125 · Firefox 147 · Safari 26). Intents: popover, tooltip popover, anchored popup, dropdown without javascript, popover api astro.
- [Portrait Art](https://moonarc.dev/components/portrait-art.md): A drawn portrait for a slot that has no photograph yet: a speaker, an artist, a host, a member of a team. A flat bust with no face, seeded from a name so the same name always draws the same person and a list of names draws a varied one: eight kinds of hair, five skin tones, six hair colours, a collar, and now and then glasses, headphones or an earring. The top and the backdrop take the two drawing colours of the colour block it sits on. With tile it fills its box. A link around it tilts the head a little on hover. Zero JavaScript. Cost: 0 B JS. Support: widely (every browser). Intents: avatar placeholder, speaker portrait placeholder, team photo placeholder, drawn avatar svg, person illustration astro, lineup portraits.
- [Preloader](https://moonarc.dev/components/preloader.md): An opening that plays once as a page loads and then gets out of the way, in one of three cuts: words (two to four words in turn, then the layer lifts), stairs (the layer is columns that rise away one after another) or split (a word, then the layer parts in two). A fixed layer that never stands in the way: pointer-events: none from the first frame and aria-hidden, the page under it rendered and usable throughout, and the whole of it under two seconds, then hidden. CSS only; once inlines a few bytes that skip it for the rest of the session. With reduced motion it never shows. Cost: 0 B JS. Support: widely (every browser). Intents: page preloader, intro animation, loading screen words, stairs transition preloader, split screen intro, website intro astro.
- [Price Switch](https://moonarc.dev/components/price-switch.md): A monthly / yearly toggle whose prices roll to the other amount instead of swapping. The thumb slides, the period label changes places, and a "save" badge appears on the yearly option. Two native radios, :has() and NumberFlow. Zero JavaScript; both prices are in the HTML as text for assistive tech. Cost: 0 B JS. Support: newly (Chrome 125 · Firefox 129 · Safari 17.5). Intents: pricing toggle monthly yearly, price switch animation, billing period toggle, animated pricing switch, pricing table toggle astro.
- [Product Art](https://moonarc.dev/components/product-art.md): A product drawn flat, for a shop slot that has no photograph yet: 29 drawings in six sets (clothes, ceramics, coffee, skincare, furniture and objects, bakery). Each is a few SVG shapes in the product's colour with a shade, a light and an accent mixed from it, so one drawing takes any colourway; unset, it takes the first drawing colour of the colour block it sits on. With tile it fills its box with the block colour and stands the product on a soft shadow. A link around it picks the product up on hover, and a few have a second gesture: a cup steams, a lamp lights, a pump presses, a jar opens. Zero JavaScript. Cost: 0 B JS. Support: widely (every browser). Intents: product illustration, product placeholder image, shop placeholder art, drawn product picture svg, colourway illustration, ecommerce placeholder astro.
- [Progress](https://moonarc.dev/components/progress.md): A bar that fills to its value when it scrolls into view, with the number counting up beside it, or a ring with the number in the middle. No script of its own: Reveal is the trigger and CountUp the number; the fill is one translate transition, the ring one dash offset. The server HTML already shows the final state. Cost: 0 B JS of its own · uses Reveal + runtime. Support: newly (Chrome 91 · Firefox 128 · Safari 17). Intents: progress bar, animated progress bar on scroll, skill bar, percentage bar animation.
- [Progressive Blur](https://moonarc.dev/components/progressive-blur.md): An edge that blurs what scrolls under it, more the closer it gets: a few bands, each with a backdrop blur twice the last and a mask that keeps it to its own slice, so the blur ramps instead of stepping. Nothing animates: the content moving beneath is the motion. Without backdrop-filter the edge fades to a colour. Zero JS. Cost: 0 B JS. Support: widely (Chrome 120 · Firefox 103 · Safari 18). Intents: progressive blur edge, gradient blur bottom of list, blurred fade scroll edge, apple style progressive blur, backdrop blur gradient css.
- [Prompt Input](https://moonarc.dev/components/prompt-input.md): The AI prompt box: a form with a textarea that grows with its content through field-sizing, a model select, an attachment button that is a real file input, and a send button that dims until something is typed and spins while the form carries data-pending. Zero JavaScript by default; submitOnEnter adds a measured script: Enter sends, Shift+Enter breaks the line, and an IME composition is never interrupted. Cost: 0 B JS. Support: newly (Chrome 123 · Firefox 152 · Safari 26.2). Intents: ai prompt input, chat input box, growing textarea, textarea autosize css, prompt box with model picker, chatgpt style input.
- [QR Code](https://moonarc.dev/components/qr-code.md): A QR code for a URL or a short text, encoded at build and drawn as one SVG path inside the quiet zone a reader needs. Byte mode at error correction level M (15 % of the code can be lost and it still reads), versions 1 to 10, a value of up to 213 ASCII characters; the mask is picked by the four penalty rules of the specification, and a longer text stops the build naming its length. Dark modules on a light ground by default, on a dark page too, since not every camera reads a code drawn light on dark. A screen reader hears where the code leads. Zero JavaScript; nothing of the encoder reaches the browser. Cost: 0 B JS. Support: widely (every browser). Intents: qr code, qr code generator astro, qr code svg, scan to download qr, qr code without javascript, app download qr code.
- [Radial Menu](https://moonarc.dev/components/radial-menu.md): A round button whose items fan out around it in a ring or an arc. The menu is a popover the button opens, so it opens and closes, and closes on Escape or a click outside, with no script; anchor positioning centres the ring on the button, and without it the ring opens in the middle of the screen. Each item is a link or a button with a name, placed on the ring at build, growing out from the centre one after another. A few lines of script move the focus around the ring with the arrow keys and put it on the first item as the menu opens. Cost: 743 B raw JS · 448 B gzip · + runtime. Support: newly (Chrome 125 · Firefox 147 · Safari 26). Intents: radial menu, circular menu, fan out menu, speed dial, floating action menu, radial share menu astro.
- [Reading TOC](https://moonarc.dev/components/reading-toc.md): A table of contents that lights up as you read. The list is server-rendered from items (Astro's own headings shape works), the links are plain anchors, and one passive scroll listener sets aria-current on the link of the last heading above the reading line, which is the only thing the script does. The indicator is CSS from that attribute. Works inside a scrolling box as well as on the page, follows jumps from its own links, and is dropped before every navigation. Cost: 899 B raw JS · 547 B gzip · + runtime. Support: widely (every browser). Intents: table of contents highlight on scroll, active heading toc, scrollspy, on this page navigation, reading progress toc.
- [Retro Grid](https://moonarc.dev/components/retro-grid.md): A perspective grid floor sliding toward the viewer. Two repeating gradients on one plane rotated in 3D; the motion is a translate of exactly one cell on the compositor, so the loop has no visible seam and never repaints. A mask fades the horizon. Zero JS; fills its positioned parent. Cost: 0 B JS. Support: widely (Chrome 120 · Firefox 53 · Safari 15.4). Intents: retro grid background, synthwave grid, perspective grid floor, moving grid background hero, tron grid css.
- [Ripple](https://moonarc.dev/components/ripple.md): Rings expand from a point and fade, one after another, like a pulse. Each ring is an element scaling and fading on its own delay; pure CSS, compositor only. Fills its positioned parent. Cost: 0 B JS. Support: widely (every browser). Intents: ripple effect, pulsing rings, radar pulse background, concentric circles animation.
- [Room Art](https://moonarc.dev/components/room-art.md): A room drawn flat, for a stay that has no photograph of it yet: a single, a double, a twin, a suite, a family room, a bunk room or a loft, in the colours of the block or tone it sits on, with a shade, a light and a pale tone mixed from them. A seed varies the drawing (which side the window is, the rug, the plant, the picture on the wall) and draws the same room on every build; time sets the sky in the window, day, dusk or night, and lights the lamp after dark. As a tile it fills its box with the block's ground as the wall. Hovering or focusing a link around it switches the lamp on. Nothing moves on its own. Zero JavaScript. Cost: 0 B JS. Support: widely (every browser). Intents: room illustration, hotel room placeholder, bedroom drawing svg, room card art, drawn interior, room placeholder image astro.
- [Rotating Text](https://moonarc.dev/components/rotating-text.md): Cycles through a list of words in place. Each word rises in, holds, and leaves upward, and the box is sized to the widest word so the surrounding text never shifts. Pure CSS. Cost: 0 B JS. Support: newly (Chrome 85 · Firefox 128 · Safari 16.4). Intents: rotating words, word cycle animation, flip words, animated headline words, text loop astro.
- [Scroll Expand](https://moonarc.dev/components/scroll-expand.md): An image that starts narrow and rounded and opens to the full width as it scrolls into view. The layout never changes: the element is full width from the start and a clip-path inset with its rounding shrinks it, animated on the element's own view() timeline; the content inside scales up a touch for depth. Without scroll timelines it is simply full width. Zero JavaScript. Cost: 0 B JS. Support: limited (Chrome 115 · not Firefox · Safari 26). Intents: image expands on scroll, scroll zoom image full width, container scroll expand, scroll expand media, hero image grows on scroll.
- [Scroll Progress](https://moonarc.dev/components/scroll-progress.md): A hairline along the top of the viewport that fills as the page is read. Zero JavaScript: its scale is bound to the document's scroll timeline, so nothing listens to scroll and it is never a frame behind. Cost: 0 B JS. Support: limited (Chrome 115 · not Firefox · Safari 26). Intents: scroll progress bar, reading progress indicator, page scroll indicator, progress bar on scroll astro.
- [Scroll Reveal](https://moonarc.dev/components/reveal.md): Entrance on scroll that plays once and stays, staggers its children, scrubs with the scroll position when asked, honours reduced motion, and keeps working after every ClientRouter navigation. Server HTML stays readable without JavaScript. Cost: 1.3 kB raw JS · 718 B gzip · + runtime. Support: widely (every browser). Intents: scroll reveal, fade in on scroll, animate on scroll, AOS alternative, stagger children on scroll, scroll-linked reveal, view transitions safe reveal.
- [Scroll Scrub](https://moonarc.dev/components/scroll-scrub.md): Bind translate, scale, rotate and opacity to the scroll position: the element goes from the start values you give to neutral across a range of its own passage through the viewport, exactly in step. Zero JavaScript. Cost: 0 B JS. Support: limited (Chrome 115 · not Firefox · Safari 26). Intents: scroll linked animation, scrub animation with scroll, animate on scroll position, scroll-driven transform, scrolltrigger scrub alternative.
- [Shimmer Button](https://moonarc.dev/components/shimmer-button.md): A highlight sweeps across the body of a button on a loop; hover lifts it on the preset's hover travel and adds a ring, and focus draws the same. One pseudo-element gradient whose position animates: no layout, though every frame repaints the button's own box. Renders a or an . Zero JavaScript. Cost: 0 B JS. Support: widely (every browser). Intents: shimmer button, shiny button, animated cta button, button with light sweep, glowing button astro.
- [Shiny Text](https://moonarc.dev/components/shiny-text.md): A highlight sweeps across the text every few seconds. The text keeps its own colour; the shine is a gradient clipped to a repeated copy on top, and only its position animates. Pure CSS. Cost: 0 B JS. Support: widely (Chrome 120 · Firefox 49 · Safari 14). Intents: shiny text, shimmer text, text highlight sweep, glossy text animation, shine effect on text.
- [Skeleton](https://moonarc.dev/components/skeleton.md): Placeholder lines, optionally with an avatar, shimmering while content loads. The shimmer is a gradient texture whose position moves; pure CSS. Marks itself busy for assistive tech. Cost: 0 B JS. Support: widely (every browser). Intents: skeleton loader, loading placeholder, shimmer loading, content placeholder animation.
- [Sparkline](https://moonarc.dev/components/sparkline.md): A small line chart that draws itself from left to right when it scrolls into view; the last point lands and pulses. The SVG is rendered on the server from the data, the line is uncovered by a clip that sweeps from its left edge to its right, and the accessible name summarises the series. Composes Reveal; no script of its own. Cost: 0 B JS of its own · uses Reveal + runtime. Support: widely (Chrome 55 · Firefox 54 · Safari 13.1). Intents: sparkline, animated line chart, svg line draw on scroll, tiny chart astro, trend line animation.
- [Spinner](https://moonarc.dev/components/spinner.md): An indeterminate arc whose length breathes while it rotates, so it looks like it is working rather than spinning a fixed wedge. One SVG circle, pure CSS; announces itself as a status. Cost: 0 B JS. Support: widely (every browser). Intents: loading spinner, css spinner, indeterminate loader, spinner astro.
- [Split Flap](https://moonarc.dev/components/split-flap.md): A departures board: every character spins through the alphabet and locks, one cell after another, when the board scrolls into view. Each glyph is a CSS counter on a registered integer that transitions from blank to the letter, and a flap turns once per step. Composes Reveal; no script of its own. The server HTML already reads the final text. Cost: 0 B JS of its own · uses Reveal + runtime. Support: newly (Chrome 91 · Firefox 128 · Safari 17.2). Intents: split flap text, departures board animation, airport board text, flip board letters, solari board css.
- [Split Text](https://moonarc.dev/components/split-text.md): Splits a string into words, characters or lines on the server and reveals them with a capped stagger when they scroll into view. One string to screen readers, zero script of its own. Cost: 0 B JS of its own · uses Reveal + runtime. Support: widely (every browser). Intents: split text animation, animate words on scroll, staggered text reveal, character reveal, text animation astro.
- [Spotlight](https://moonarc.dev/components/spotlight.md): A soft radial light follows the cursor over a card and fades in only while hovered. One pointermove listener writes two custom properties; the light itself is a CSS gradient. Bound through the shared runtime, so it survives navigation. Cost: 340 B raw JS · 250 B gzip · + runtime. Support: widely (Chrome 120 · Firefox 53 · Safari 15.4). Intents: spotlight card, cursor light effect, hover glow follows mouse, radial gradient follows cursor, spotlight hover astro.
- [Stagger Menu](https://moonarc.dev/components/stagger-menu.md): A burger that opens a full-screen menu (or a top sheet, or a side panel) whose items arrive one after another and leave in reverse. No script: a native modal dialog opened by the invoker command (focus trap, Escape, backdrop click and the focus returning to the burger are the browser's), and each item is a @starting-style transition delayed by its index on the stagger token. A link to a place on the same page carries a one-line onclick that closes the menu. Cost: 0 B JS. Support: newly (Chrome 135 · Firefox 144 · Safari 26.2). Intents: fullscreen menu, staggered menu items, burger menu overlay, hamburger menu animation astro, menu items animate in one by one, mobile nav overlay.
- [Stateful Button](https://moonarc.dev/components/stateful-button.md): One submit button with four faces (idle, pending with a spinner, done with a check that draws itself, error) and a width that follows the label. The state is data-state on the button, set by the prop, by your script, or inherited from its form: data-pending and data-state done, exists or error, the attributes @moonarc/core/form writes. The faces are clipped to a bound derived from the label, so nothing is measured, and only the face that shows is in the accessibility tree. Zero JavaScript of its own. Cost: 0 B JS. Support: widely (every browser). Intents: loading button, submit button with spinner, button success state, stateful button, button that shows sending and done.
- [Stepper](https://moonarc.dev/components/stepper.md): A form, or any flow, in steps: a rail of the steps' names over the step in hand, with Back and Next under it. The steps are the slot's own children, a fieldset with its legend each, so every field stays in one form and sends with it. Without JavaScript nothing is hidden: the steps stand one under the other and the submit button follows the last, as a long form. With it, one step shows at a time; Next checks the step's fields with the browser's own validation before it moves on, Enter in a field does the same, a submit that finds an invalid field in a step behind brings that step back, and whatever follows the stepper in its form (the submit button) shows on the last step only. A step already done is a button on the rail. Cost: 2.0 kB raw JS · 979 B gzip · + runtime. Support: widely (Chrome 105 · Firefox 121 · Safari 15.4). Intents: multi step form, form wizard, stepper progress, steps progress bar, multi-step form astro, checkout steps, onboarding steps.
- [Sticky Banner](https://moonarc.dev/components/sticky-banner.md): An announcement ribbon that sticks to the top of the page and folds away when dismissed, the content below sliding up on the preset curve. Zero JavaScript: a non-modal dialog closed by a form with method="dialog", a grid row that :has() collapses, and an exit through allow-discrete. remember inlines 286 B raw that keep it closed across pages. Cost: 0 B JS. Support: newly (Chrome 117 · Firefox 129 · Safari 17.4). Intents: announcement banner, sticky top banner dismissible, promo bar, cookie bar without javascript, site notice ribbon, banner that remembers dismissal.
- [Sticky Reveal](https://moonarc.dev/components/sticky-reveal.md): Steps on the left scroll by; one visual on the right stays put and changes with them. Each step names its own view timeline, the visuals are stacked in a sticky cell, and each visual's opacity and travel are bound to its step through timeline-scope. Without scroll timelines, or in a narrow container, the steps and visuals interleave in one column so every step still meets its own visual. Zero JavaScript. Cost: 0 B JS. Support: limited (Chrome 116 · not Firefox · Safari 26). Intents: sticky scroll reveal, scroll steps with sticky image, features scroll with changing image, sticky scroll section, scrollytelling astro.
- [Stroke Draw](https://moonarc.dev/components/stroke-draw.md): A headline's outline draws itself glyph by glyph when it scrolls into view, then the fill comes in. SVG text with one stroked per character, a dash longer than any outline offset to zero on a per-index delay. Composes Reveal; no script of its own. The server HTML holds the finished text. Cost: 0 B JS of its own · uses Reveal + runtime. Support: widely (every browser). Intents: text stroke animation, draw text outline svg, handwritten headline animation, svg text stroke dashoffset, outline text draw on scroll.
- [Switch](https://moonarc.dev/components/switch.md): A toggle that springs. It is a native checkbox with role="switch" and appearance: none (the input is the track, its ::before the thumb), so the value submits, required and disabled work, Space flips it, and the thumb travels on the preset curve with a bounce under the snap and lively presets. Zero JavaScript. Cost: 0 B JS. Support: widely (every browser). Intents: toggle switch, animated switch, checkbox as switch, ios style toggle, switch with spring, settings toggle.
- [Tabs](https://moonarc.dev/components/tabs.md): Tabs with an indicator that slides to the selected one and panels that fade in. Zero JavaScript: the tabs are radio inputs, so keyboard and selection are native, and :has() turns the checked index into the indicator's position. Cost: 0 B JS. Support: widely (Chrome 117 · Firefox 129 · Safari 17.5). Intents: tabs, animated tab indicator, sliding underline tabs, tabs without javascript, segmented control.
- [Text Roll](https://moonarc.dev/components/text-roll.md): A label rolls upward into a copy of itself on hover, letter by letter from the left, and rolls back when the pointer leaves. Two copies in one clipped cell, one translate per character on a per-index delay. Pure CSS; works from the link or button around it. Cost: 0 B JS. Support: widely (every browser). Intents: text roll hover, rolling link text, hover text flip up, letter roll animation, text roll motion primitives.
- [Text Scramble](https://moonarc.dev/components/text-scramble.md): Random characters resolve into the real text from left to right when it scrolls into view, on load, or on hover. The server HTML is the final string; a small requestAnimationFrame loop does the rest and never runs under reduced motion. Cost: 921 B raw JS · 530 B gzip · + runtime. Support: widely (every browser). Intents: text scramble, decrypt text effect, hacker text animation, scramble letters into words, decode text on scroll.
- [Theme Toggle](https://moonarc.dev/components/theme-toggle.md): Cycles system → light → dark, and the page changes theme through a circle that grows from the click, on a same-document view transition. ThemeScript in stores the choice, applies it before paint and after every swap and exposes the API; ThemeToggle's own script only advances the choice and wraps the change (its storageKey prop is ThemeScript's). Without view transitions, or under reduced motion, the theme switches at once. Without ThemeScript, which includes a page without JavaScript, the toggle is hidden. The icon is AnimatedIcons (sun to moon). Cost: 1.0 kB raw JS · 613 B gzip · + runtime. Support: newly (Chrome 111 · Firefox 144 · Safari 18). Intents: dark mode toggle, theme toggle with animation, theme switch circle transition, view transition dark mode, light dark system toggle astro.
- [Tilt](https://moonarc.dev/components/tilt.md): A card leans toward the cursor in 3D, lifts slightly, catches a glare, and settles back on the active preset's spring when the cursor leaves. The pointer writes two custom properties; everything visible is CSS. Never binds under reduced motion. Cost: 588 B raw JS · 346 B gzip · + runtime. Support: widely (every browser). Intents: tilt card, 3d hover card, card tilts on mouse move, parallax tilt effect, vanilla-tilt astro.
- [Toast](https://moonarc.dev/components/toast.md): Notifications that slide in, stack behind each other, push up as new ones arrive, and expand into a list on hover. Raise one from anywhere with toast() or a DOM event; timers pause while the stack is hovered or focused and while the tab is hidden, and the region is a polite live region. The stack geometry is CSS reading one custom property per toast. Cost: 1.0 kB raw JS · 605 B gzip · + runtime. Support: newly (Chrome 117 · Firefox 129 · Safari 17.5). Intents: toast notification, sonner alternative, stacked toasts, notification stack, toast astro.
- [Tooltip](https://moonarc.dev/components/tooltip.md): A short tip anchored to a word, a code or a button: it shows after a moment on hover and at once on focus or a tap, stays while the pointer moves onto it, flips when there is no room, and Escape hides it. The tip is a manual popover in the top layer, so a table, a scrolling box or a sticky header never covers or clips it, and it is the trigger's description, so a screen reader reads it with the trigger. The script only shows and hides it; the wait is a CSS transition-delay. A span trigger is focusable and carries a dotted underline. Cost: 802 B raw JS · 462 B gzip · + runtime. Support: newly (Chrome 125 · Firefox 147 · Safari 26). Intents: tooltip, hover tooltip, tooltip on focus, accessible tooltip, tooltip astro, css anchor positioning tooltip, tooltip for code term, info tip.
- [Tracing Beam](https://moonarc.dev/components/tracing-beam.md): A line beside an article fills as it is read, with a dot at its head. One registered percentage animates on the article's own view() timeline, and both the fill's height and the head's position read that value. Without scroll timelines the line is full and still. Correct for an article shorter than the viewport too. Zero JavaScript. Cost: 0 B JS. Support: limited (Chrome 115 · not Firefox · Safari 26). Intents: tracing beam, article progress line, scroll progress beside content, vertical reading progress, beam follows scroll.
- [Typewriter](https://moonarc.dev/components/typewriter.md): Types a string one character at a time in any font, with a caret that stays solid while typing and blinks once idle. Pure CSS: every character is a span whose display animates on its own delay. Cost: 0 B JS. Support: limited (Chrome 116 · not Firefox · Safari 18). Intents: typewriter effect, typing animation, type text one character at a time, terminal typing effect astro.
- [Underline Hover](https://moonarc.dev/components/underline-hover.md): A link underline that enters from the left on hover and leaves to the right, so the exit continues the entrance instead of rewinding it. One background gradient, no pseudo-element, wraps across lines. Pure CSS; triggered by the link, button or summary around it. Cost: 0 B JS. Support: widely (every browser). Intents: underline hover animation, link underline slide in, animated underline css, underline left to right hover, nav link underline effect.
- [Vanish Input](https://moonarc.dev/components/vanish-input.md): Placeholders that take turns, and text that blurs away on submit. A native input in your form: the first suggestion is the placeholder attribute, the rest cycle in an aria-hidden overlay driven by one registered number, so their entrances are transitions on the preset curve. A small script listens for submit on the document and, only when your handler prevented the default, splits the value into characters that rise and blur out on the stagger token. Cost: 604 B raw JS · 375 B gzip · + runtime. Support: newly (Chrome 125 · Firefox 128 · Safari 16.4). Intents: placeholders and vanish effect, input with rotating placeholder, text vanishes on submit, animated placeholder input, search input hints cycle, waitlist input animation.
- [Video Dialog](https://moonarc.dev/components/video-dialog.md): A poster with a breathing play button that opens the video in a dialog: a file with native controls, or an embed. The dialog is Dialog (native, invoker-opened, optionally morphing out of the poster); the script does what a closed dialog will not: play on open, pause on close, and for an embed set the iframe src on open and blank it on close so nothing loads or keeps playing behind a closed dialog. Cost: 604 B raw JS · 374 B gzip · + runtime. Support: newly (Chrome 135 · Firefox 144 · Safari 26.2). Intents: video modal, play video in dialog, hero video popup, youtube embed modal astro, video lightbox, poster with play button opens video.
- [Waveform](https://moonarc.dev/components/waveform.md): A row of bars drawn from a word, like the shape of an episode's sound. The same word draws the same shape on every build: the bars rise and fall the way speech does, with now and then a pause, and taper in and out at the ends. A share of it can be marked as played (the progress prop, or the --ma-wave-progress custom property a player script writes): the played bars take the emphasis colour and the rest a fainter share of the text colour. While playing is set the bars move, each out of step with its neighbours, and they move while a link or a button around the waveform is hovered or focused, or an element marked ma-wave-host around it is hovered. Zero JavaScript: a player that drives it owns the controls and the time. Cost: 0 B JS. Support: widely (every browser). Intents: audio waveform bars, podcast episode waveform, waveform for an audio player, voice message waveform css, waveform without javascript, playing equalizer bars.
- [Weight Wave](https://moonarc.dev/components/weight-wave.md): A wave of boldness rolls through the letters of a line, each character animating its font weight on its own delay. Pure CSS. Continuous with a variable font; steps between available weights otherwise. Cost: 0 B JS. Support: widely (Chrome 62 · Firefox 62 · Safari 11). Intents: variable font animation, font weight wave, text weight animation, animate font-weight, wavy bold text.
## Pro (demo public, source gated)
- [404](https://moonarc.dev/components/not-found-section.md): A 404 page: the code scrambles into place from random digits, rings spread slowly behind it, and the headline, copy and one link home arrive in three beats. Cost: 0 B JS of its own · uses TextScramble + runtime + Reveal. Install: `npx shadcn@latest add @moonarc-pro/not-found-section` with a license key (https://moonarc.dev/account/).
- [Agent Cards](https://moonarc.dev/components/agent-cards.md): The people a buyer deals with: each drawn by PortraitArt on a colour block, with the name, the role, the areas and languages, a figure or two, a line in their own words, and a call and an email as links. One card lays the portrait beside the words, for a listing's page; three or four are the team. Zero JavaScript. Cost: 0 B JS of its own · uses Reveal + runtime. Install: `npx shadcn@latest add @moonarc-pro/agent-cards` with a license key (https://moonarc.dev/account/).
- [Agent Run](https://moonarc.dev/components/agent-run.md): An AI agent's run, replayed in the page: the task at the top, then four lanes that fill in order (the plan ticks off, tool calls spin and finish with their time, a diff writes in line by line, a person is asked to approve and the approve reads Approved), then the result with its numbers. The server HTML is the end state, so without JavaScript and under reduced motion every lane is filled; the animation only plays the path to it, once, in 8 to 12 s. A native checkbox drawn as a small Pause button holds the run, and so does a pointer over it. Zero JavaScript of its own; replay adds a button with a small script. Cost: 0 B JS of its own · uses Reveal + runtime. Install: `npx shadcn@latest add @moonarc-pro/agent-run` with a license key (https://moonarc.dev/account/).
- [API Reference](https://moonarc.dev/components/api-reference.md): An API reference in one section: a sidebar of groups and their operations; for each operation its method and path, what it does, its path, query and header parameters, the fields of its body (nested fields under a disclosure, as deep as they go) and its responses; and beside it, sticky on a wide screen, the request in every language with a copy button and the response examples by status. The language picked once switches every sample on the page through radios and :has(), with no script; a small script remembers it for the next page. A type with more to say (a format, a range) carries it in a Tooltip, and the sidebar marks the operation in view where the browser has scroll-target-group. It takes operations already shaped, the way a template turns an OpenAPI document into them at build. Cost: 404 B raw JS · 285 B gzip · + CopyButton + runtime. Install: `npx shadcn@latest add @moonarc-pro/api-reference` with a license key (https://moonarc.dev/account/).
- [App Hero](https://moonarc.dev/components/hero-app.md): A hero for a mobile app: the headline, the rating line (stars, the average, how many rated and where) and the store buttons beside a phone on a disc of the app's colour. The phone's screen is drawn from rows (AppScreen), so a palette recolours it and no screenshot goes stale; two or three screens take their turn once, then the first returns and rests, and the phone holds still while it is pointed at. On a wide screen a QR code to the app sits beside the buttons, since a reader on a laptop has the phone in their other hand. A card can float beside the phone, the way a notification would. The store buttons are text, as neither store lets its badge be redrawn. Zero JavaScript. Cost: 0 B JS of its own · uses Reveal + runtime. Install: `npx shadcn@latest add @moonarc-pro/hero-app` with a license key (https://moonarc.dev/account/).
- [Area Panels](https://moonarc.dev/components/area-panels.md): The neighbourhoods an agency sells in, as ExpandingPanels: each area a panel with its street drawn by HomeArt, its starting price over its name and a line about it, widening as it is pointed at or focused; under the row the same areas with a few figures each, so the figures are read in order. Zero JavaScript. Cost: 0 B JS of its own · uses Reveal + runtime. Install: `npx shadcn@latest add @moonarc-pro/area-panels` with a license key (https://moonarc.dev/account/).
- [Block Cards](https://moonarc.dev/components/block-cards.md): What is on offer, as colour blocks: each card paints one of the palette's blocks and carries a drawing in its corner (Motif), an index, a name, a line, chips for what it includes and a foot with a price and a round arrow. With layout="feature" the first card is twice as tall and stands beside the others. The card's name is its link, stretched over the card; a hover or the keyboard focus anywhere on it moves the drawing and turns the arrow. Zero JavaScript. Cost: 0 B JS. Install: `npx shadcn@latest add @moonarc-pro/block-cards` with a license key (https://moonarc.dev/account/).
- [Block CTA](https://moonarc.dev/components/block-cta.md): The closing call on a colour block: a short line, a large heading that ends on a phrase in the emphasis face, a sentence and two pill actions, on one of the palette's blocks with a drawing (Motif) rising out of its lower corner. The panel opens a little as it arrives (Reveal); the actions fill from below on hover, the primary with the page's own colours so its text always reads. Zero JavaScript of its own. Cost: 0 B JS of its own · uses Magnetic + runtime + Reveal. Install: `npx shadcn@latest add @moonarc-pro/block-cta` with a license key (https://moonarc.dev/account/).
- [Blog Article](https://moonarc.dev/components/blog-article.md): The page of one blog post: a header with the date, the reading time, the title, the author, the tags and the cover, then the body in a measured column that a beam fills as it is read, beside a contents list that follows the reader. The body is your rendered Markdown or MDX, and the contents list comes from the headings Astro returns with it. No script of its own: the beam is TracingBeam, the list is ReadingToc. Cost: 0 B JS of its own · uses ReadingToc + runtime. Install: `npx shadcn@latest add @moonarc-pro/blog-article` with a license key (https://moonarc.dev/account/).
- [Blog Grid](https://moonarc.dev/components/blog-grid.md): Shows blog posts as cards, with the first post featured across two columns. Cards reveal with a stagger and covers ease larger on hover. Each cover carries a transition name, so with Astro's router a click morphs it into the post's own cover. Give the post page the same name. Cost: 0 B JS of its own · uses Reveal + runtime. Install: `npx shadcn@latest add @moonarc-pro/blog-grid` with a license key (https://moonarc.dev/account/).
- [Blog Hover List](https://moonarc.dev/components/blog-hover-list.md): Writing as a list: the day, the title at display size and the reading time on one line per post, the whole line a link, and the post's cover floating by the pointer while the line is hovered. The float, its lag and its lean are HoverImageLinks (each line picks its cover through data-hil); the title underlines with UnderlineHover; the other lines step back. Keyboard focus shows the cover at a fixed spot and touch gets the plain list. Each cover carries the view transition name BlogArticle gives the same post's cover, so with Astro's router it grows into the post. Zero JavaScript of its own. Cost: 0 B JS of its own · uses HoverImageLinks + runtime. Install: `npx shadcn@latest add @moonarc-pro/blog-hover-list` with a license key (https://moonarc.dev/account/).
- [Booking Bar](https://moonarc.dev/components/booking-bar.md): The dates and the guests of a stay, handed to the place's own booking engine: a form that sends them to the engine's address as the parameters it reads (check-in, check-out, adults, children, and any fixed ones, such as the property's id), so a guest lands on the engine's page with the search filled in. Nothing is kept on the site: the engine holds the rooms, the prices and the payment. Without JavaScript it is a plain form that sends ISO dates. With it, the dates cannot start in the past, the check-out follows the check-in by the shortest stay, the nights are said as the dates change, and a date is rewritten for an engine that reads day first or month first. Cost: 934 B raw JS · 575 B gzip · + runtime. Install: `npx shadcn@latest add @moonarc-pro/booking-bar` with a license key (https://moonarc.dev/account/).
- [Call to Action](https://moonarc.dev/components/cta-section.md): A closing call to action: a deep brand panel with an aurora and film grain behind it, a headline that catches a shine, a magnetic primary action, a secondary one, and a typed command. Scales in as it is reached. Cost: 0 B JS of its own · uses Magnetic + runtime + Reveal. Install: `npx shadcn@latest add @moonarc-pro/cta-section` with a license key (https://moonarc.dev/account/).
- [Case Stack](https://moonarc.dev/components/case-stack.md): Case studies as a deck: on a wide screen each card holds at the top of the screen while the next slides up over it, and the one underneath shrinks and darkens a little on a scroll-driven timeline; on a phone they follow one another. Each card paints a colour block: its number and field, its name (the card's link), a line, the work it took as chips and a "View case" cue, beside a picture or a drawing in a second block (Motif). Zero JavaScript. Cost: 0 B JS. Install: `npx shadcn@latest add @moonarc-pro/case-stack` with a license key (https://moonarc.dev/account/).
- [Case Study Hero](https://moonarc.dev/components/case-study-hero.md): The top of a case study: the project's title at display size, its facts in a grid (client, year, role, credits), the cover that opens from a rounded inset to the full width as the page scrolls (ScrollExpand), then a before-and-after (ImageCompare) or a gallery that opens full size (Lightbox). The cover's frame carries the project's view transition name, so with Astro's router the cover a reader chose on an index (ProjectIndex, WorkGrid) grows into it; the frame is the element with the clip, so the snapshot is the cover as it looks. Zero JavaScript of its own. Cost: 0 B JS. Install: `npx shadcn@latest add @moonarc-pro/case-study-hero` with a license key (https://moonarc.dev/account/).
- [Changelog](https://moonarc.dev/components/changelog-section.md): Lists dated releases in a hairline list. Each entry reveals as it is reached, and the newest version catches a shine. Every entry carries its date, so readers can check how often you ship. Cost: 0 B JS of its own · uses Reveal + runtime. Install: `npx shadcn@latest add @moonarc-pro/changelog-section` with a license key (https://moonarc.dev/account/).
- [Chat Demo](https://moonarc.dev/components/chat-demo.md): A conversation with an AI agent, replayed in the page: the reader's message, the agent's reply with its tool calls folded into (the call and its result in the monospace face), a request for approval that is approved, and the final answer, typed, with a button that copies it; a prompt box at the foot as a demo form. The server HTML is the end state. The replay is CSS on one clock, started when the chat comes into view, held by a native checkbox drawn as a Pause button and by a pointer, and done in 8 to 12 s. Several conversations can be keyed by slug, and a small internal script picks one from the address (?task=refactor); the default renders without it. Cost: 0 B JS of its own · uses Reveal + runtime + CopyButton + PromptInputSubmitOnEnter. Install: `npx shadcn@latest add @moonarc-pro/chat-demo` with a license key (https://moonarc.dev/account/).
- [Comparison Table](https://moonarc.dev/components/compare-table.md): Compares your product with others in an "us versus them" table. The first column is highlighted, rows reveal with a stagger, and a thin bar under each numeric cell shows a byte count or a score at a glance. A semantic table with zero JavaScript of its own. Cost: 0 B JS of its own · uses Reveal + runtime. Install: `npx shadcn@latest add @moonarc-pro/compare-table` with a license key (https://moonarc.dev/account/).
- [Contact Split](https://moonarc.dev/components/contact-split.md): A contact section in two columns: the ways to reach you (email, phone, office) on one side, a form that really sends on the other. The fields are data (text, email, phone, a message, a select and a switch, in your order) with an optional consent box. It is a real form first (method="post" to your action, labelled, validated by the browser), so it sends with JavaScript off. One small script binds it with the core form lib for the fetch, the pending lock, the spoken status and the button's faces. `sent` renders the confirmation in the form's place, for the page a native post lands on. Cost: 43 B raw JS · 63 B gzip · + form + runtime. Install: `npx shadcn@latest add @moonarc-pro/contact-split` with a license key (https://moonarc.dev/account/).
- [Dither](https://moonarc.dev/components/dither.md): Draws slow noise waves on the GPU, ordered-dithered into pixel cells of one colour on the page's ground, for the look of a 1-bit screen. The pointer lifts the field around it. The drawing buffer is one pixel per cell, scaled up pixelated by CSS, so the shader touches a ninth of the pixels at the default cell. Every constant is a custom property re-read when the element's style changes. Without WebGL2 or JavaScript a still dot grid stands in. Fills its positioned parent. Cost: 1.2 kB raw JS · 776 B gzip · + runtime + shader + canvas + gl, 10.8 kB raw in all. Install: `npx shadcn@latest add @moonarc-pro/dither` with a license key (https://moonarc.dev/account/).
- [Docs Shell](https://moonarc.dev/components/docs-shell.md): A documentation layout: a sticky sidebar with the current page marked, a reading-progress hairline bound to the scroll, the header and content revealed in two beats, and previous/next links. Content is the default slot. Cost: 0 B JS of its own · uses Reveal + runtime. Install: `npx shadcn@latest add @moonarc-pro/docs-shell` with a license key (https://moonarc.dev/account/).
- [Dot Process](https://moonarc.dev/components/dot-process.md): How the work runs, in a few steps across the page: each step a round number in a colour block, a title and a line. On a wide screen the steps stand in one row and a hairline runs behind the numbers, drawn across as the row comes into view on a scroll-driven timeline; on a phone each step is a card of its own. The steps come in one after another (Reveal). Zero JavaScript of its own. Cost: 0 B JS of its own · uses Reveal + runtime. Install: `npx shadcn@latest add @moonarc-pro/dot-process` with a license key (https://moonarc.dev/account/).
- [Editorial Hero](https://moonarc.dev/components/hero-editorial.md): A split hero: a tall headline revealed line by line on the left, a live panel sliding in from the right, on a slowly drifting grid. Copy and actions follow in two beats; the primary action is magnetic. Everything inside is free-tier; the composition is what is sold. Cost: 0 B JS of its own · uses Reveal + runtime. Install: `npx shadcn@latest add @moonarc-pro/hero-editorial` with a license key (https://moonarc.dev/account/).
- [FAQ](https://moonarc.dev/components/faq-section.md): A heading and lead beside a native accordion: one question open at a time, heights animated by the browser, keyboard and screen reader handled by . Zero JavaScript of its own. Cost: 0 B JS of its own · uses Reveal + runtime. Install: `npx shadcn@latest add @moonarc-pro/faq-section` with a license key (https://moonarc.dev/account/).
- [Feature Atlas](https://moonarc.dev/components/feature-atlas.md): Lays out features as a bento grid: one slab split by 1 px hairlines, with the page ground showing through the gaps. Each cell has a stage slot for a live demo, an index, a title (a link when `href` is set), a blurb and one readout line. Cells reveal with a stagger, and two can be accent-filled. The Moonarc home page's atlas uses the same pattern. Cost: 0 B JS of its own · uses Reveal + runtime. Install: `npx shadcn@latest add @moonarc-pro/feature-atlas` with a license key (https://moonarc.dev/account/).
- [Feature Rows](https://moonarc.dev/components/feature-rows.md): Shows features in alternating rows of copy and a visual. The copy reveals from its side, and the visual rises and sharpens exactly in step with the scroll. One slot per row for a live demo, a screenshot or a video. Zero JavaScript of its own. Cost: 0 B JS of its own · uses Reveal + runtime. Install: `npx shadcn@latest add @moonarc-pro/feature-rows` with a license key (https://moonarc.dev/account/).
- [Feature Tabs](https://moonarc.dev/components/feature-tabs.md): A product's features as tabs: a named radio group over one panel per feature, each with its title, body and image, the image optionally in a browser window. The panel slides in from the side of the tab that was chosen, so going back comes in from the start. Zero JavaScript of its own: the radios are native and :has() moves the panels. Cost: 0 B JS of its own · uses Reveal + runtime. Install: `npx shadcn@latest add @moonarc-pro/feature-tabs` with a license key (https://moonarc.dev/account/).
- [Feature with Code](https://moonarc.dev/components/feature-code.md): A feature section with code beside the copy: a headline, copy and a short list on one side, and CodeTabs on the other, one tab per client or language, each panel with its own copy button. The code keeps a ground it reads on in every tone, and the section sets CodeTabs through its tokens. The section ships no script of its own; CopyButton's script is the shared chunk. Cost: 0 B JS of its own · uses CopyButton + runtime. Install: `npx shadcn@latest add @moonarc-pro/feature-code` with a license key (https://moonarc.dev/account/).
- [Fee Table](https://moonarc.dev/components/fee-table.md): What a practice charges, as tables a reader can trust: one a group, each row a service, its price and a note, and where insurance applies a column that says in words whether it is covered, partly or not, with a mark that repeats it in shape. Under the tables, the insurers it works with, the ways to pay and the notes a price needs. Real tables with captions and row headers, so a screen reader reads a price with its service; three columns fit a phone without scrolling sideways. Zero JavaScript. Cost: 0 B JS of its own · uses Reveal + runtime. Install: `npx shadcn@latest add @moonarc-pro/fee-table` with a license key (https://moonarc.dev/account/).
- [Field Hero](https://moonarc.dev/components/hero-field.md): A hero with a field of glyphs behind a panel in the brand colour (ink on a page without a theme) whose meta line, headline and actions wipe in one after another. The field is CSS counters on server-drawn noise, with two crossing waves and a cursor trail that decays one character at a time. Zero JavaScript of its own; swish inlines one measured listener. Cost: 0 B JS. Install: `npx shadcn@latest add @moonarc-pro/hero-field` with a license key (https://moonarc.dev/account/).
- [Floor Plan](https://moonarc.dev/components/floor-plan.md): A home's floors drawn from its rooms: each room a rectangle on a grid of metres with its walls round it and its name and area over it, and beside the plan the same rooms as a list with the total. Pointing at a room in the list, or focusing it, lights the room on the plan, and pointing at a room on the plan lights its line (:has(), one rule a room up to twelve). Two or three floors take tabs. The plan is a picture of the list and is hidden from a screen reader, which reads the rooms and their areas. Zero JavaScript. Cost: 0 B JS of its own · uses Reveal + runtime. Install: `npx shadcn@latest add @moonarc-pro/floor-plan` with a license key (https://moonarc.dev/account/).
- [Flow Particles](https://moonarc.dev/components/flow-particles.md): Moves thousands of particles along an invisible current, leaving fading trails. Positions live in a float texture that a GPU pass moves along curl noise, which is divergence-free, so the particles swirl instead of bunching. Each frame they are drawn as points into a trail texture that fades, shown in two tones on the page's ground. The pointer drags the current with it. Every constant is a custom property re-read when the element's style changes. Without WebGL2 or a colour-renderable float texture, or without JavaScript, a still wisp of lines stands in. Fills its positioned parent. Cost: 2.9 kB raw JS · 1.6 kB gzip · + runtime + canvas + gl, 11.4 kB raw in all. Install: `npx shadcn@latest add @moonarc-pro/flow-particles` with a license key (https://moonarc.dev/account/).
- [Fluid Field](https://moonarc.dev/components/fluid-field.md): Draws smoke that follows the cursor. It is a real fluid simulation on the GPU (advection, vorticity confinement and a pressure solve in WebGL2), drawn in two tones: the ground and one colour. The dye is one channel coloured at display time, so a theme change never resets the smoke; `dots` lights a halftone grid instead of a wash. A slow emitter wanders around the focus while the pointer is still and on touch. Every constant is a custom property re-read when the element's style changes. Without WebGL2 or JavaScript a still glow stands in. Fills its positioned parent. Cost: 1.9 kB raw JS · 1.1 kB gzip · + runtime + canvas + gl + fluid, 12.8 kB raw in all. Install: `npx shadcn@latest add @moonarc-pro/fluid-field` with a license key (https://moonarc.dev/account/).
- [Footer](https://moonarc.dev/components/footer-section.md): A site footer: brand and blurb, link columns revealed with a stagger, a legal row, and a dot field fading up from the bottom edge. Pure CSS. Cost: 0 B JS of its own · uses Reveal + runtime. Install: `npx shadcn@latest add @moonarc-pro/footer-section` with a license key (https://moonarc.dev/account/).
- [Footer Big Type](https://moonarc.dev/components/footer-big-type.md): A footer for a studio or a person: a line and the email address to write to, columns of links, and the name set across the whole width at the bottom. It waits under the page (FooterReveal): the page slides up and uncovers it, and the name's letters rise from their masks (SplitText) as the uncovering starts. The name's size is the container's width over its length in characters, in container units, so it fills the width from a 320 px phone to a wide screen and never runs out of its box. Zero JavaScript of its own. Cost: 0 B JS of its own · uses Reveal + runtime. Install: `npx shadcn@latest add @moonarc-pro/footer-big-type` with a license key (https://moonarc.dev/account/).
- [Footer Label](https://moonarc.dev/components/footer-label.md): The foot of a maker's site, made like the label sewn into what they make: a panel in a colour block with a stitched edge, the name large (a second part in the emphasis face), the link columns, a row of care symbols drawn as line icons with their words (how to wash it, that it goes in the oven, that it is mended for free) and a few small lines in the mono face. Zero JavaScript. Cost: 0 B JS. Install: `npx shadcn@latest add @moonarc-pro/footer-label` with a license key (https://moonarc.dev/account/).
- [Footer Signoff](https://moonarc.dev/components/footer-signoff.md): A footer that signs off like a letter: on a strong colour block, a line of thanks, the name set large with its second part in the emphasis face and a stroke drawn under that part, a way back to the signup, the links in columns and a few small lines at the foot. The stroke draws itself as the footer comes into view; where there is no view timeline, or under reduced motion, it is drawn from the start. Zero JavaScript. Cost: 0 B JS. Install: `npx shadcn@latest add @moonarc-pro/footer-signoff` with a license key (https://moonarc.dev/account/).
- [Gooey](https://moonarc.dev/components/gooey.md): Draws a cluster of liquid drops that merge and pull apart: metaballs on the GPU with a compact kernel, cut with an edge exactly one pixel soft. Seven drops orbit a focus at their own pace; an eighth follows the pointer on a spring and the others lean toward it, so the cluster stretches after the cursor, necks form between drops, and it gathers again when the pointer leaves. Two tones: the body, and a core only where drops overlap. Every constant is a custom property re-read when the element's style changes. Without WebGL2 or JavaScript two still drops stand in. Fills its positioned parent. Cost: 1.1 kB raw JS · 752 B gzip · + runtime + shader + canvas + gl, 10.6 kB raw in all. Install: `npx shadcn@latest add @moonarc-pro/gooey` with a license key (https://moonarc.dev/account/).
- [Hero Bento](https://moonarc.dev/components/hero-bento.md): The first screen of one person's work, as a bento. On a strong colour block sit the headline, a line and two actions, and beside them soft tiles in the palette's tints: the person drawn (PortraitArt) or photographed, with a ring of words turning at its corner; the latest piece with its waveform or its drawing; the count of readers, rising as it comes into view (core CountUp); and the places to find them elsewhere. The tiles lean toward the pointer (core Tilt). Zero JavaScript of its own. Cost: 0 B JS of its own · uses Tilt + runtime. Install: `npx shadcn@latest add @moonarc-pro/hero-bento` with a license key (https://moonarc.dev/account/).
- [Hero Blocks](https://moonarc.dev/components/hero-blocks.md): The opening of a colour-block site: the headline rises line by line out of its masks, its last word turns through a few in the emphasis face (RotatingText), a round badge with text running around it links further down the page, the lede and two pill actions sit under it, and a strip of tiles in the palette's blocks runs across the bottom (Marquee), each a drawing (Motif) or a picture with a caption. The rise is a CSS animation on load, so it needs no script. Zero JavaScript of its own. Cost: 0 B JS. Install: `npx shadcn@latest add @moonarc-pro/hero-blocks` with a license key (https://moonarc.dev/account/).
- [Hero Kinetic](https://moonarc.dev/components/hero-kinetic.md): A first screen in type as large as it will go: the name or the claim in a few lines that rise once, one after another, from masks of their own (SplitText by line). A line of roles can lead them, its word turning once through the list and settling within five seconds (RotatingText, fluid, with cycles), as in "I design / build / write". Under the type, an optional reel: a muted loop that plays while it is on screen, opens from a rounded inset to the full width as the page scrolls (ScrollExpand), and has a visible play and pause button. Zero JavaScript without a reel. Cost: 0 B JS of its own · uses Reveal + runtime. Install: `npx shadcn@latest add @moonarc-pro/hero-kinetic` with a license key (https://moonarc.dev/account/).
- [Hero Poster](https://moonarc.dev/components/hero-poster.md): The first screen of an event, made like its poster: one colour block with the edition and the place in the mono face, the name huge, the dates, a line, two actions, three facts, a countdown to the doors (core CountdownFlip) and the days as chips, and beside them a composition of nine shapes in the block's drawing colours that pop into place one after another as the page opens and turn a quarter when a pointer rests on them, one of them turning round a quarter at a time once they are in, inside five seconds, then resting. Zero JavaScript of its own. Cost: 0 B JS. Install: `npx shadcn@latest add @moonarc-pro/hero-poster` with a license key (https://moonarc.dev/account/).
- [Hero Practice](https://moonarc.dev/components/hero-practice.md): The first screen of a practice (a dentist, a doctor, a vet, a law or an accounting firm): the headline, a line of what it does, the two things a visitor comes to do (book and call) and a line for the register it is on; beside them the place as one card on a colour block, its front drawn by HomeArt, a line from OpenStatus that says whether it is open now in the place's own time zone, the address, the phone and a few rows a patient or a client asks first. Calm on purpose: the words arrive once and nothing loops. Cost: 0 B JS of its own · uses OpenStatus + runtime + Reveal. Install: `npx shadcn@latest add @moonarc-pro/hero-practice` with a license key (https://moonarc.dev/account/).
- [Hero Section](https://moonarc.dev/components/hero-section.md): A complete hero as one component with props: an ambient aurora, a headline split and revealed word by word, supporting copy with a rotating word, two actions and a typed command. The parts arrive in a fixed order and timing. Cost: 0 B JS of its own · uses Reveal + runtime. Install: `npx shadcn@latest add @moonarc-pro/hero-section` with a license key (https://moonarc.dev/account/).
- [Hero Specimen](https://moonarc.dev/components/hero-specimen.md): The first screen of a maker's site: the heading, a line, two actions and three facts on one side; on the other, the products themselves, each drawn on its plate (ProductArt) with its name, a spec line in the mono face and its price. The plates take turns: one product rises in as the last fades, and the plate's colour changes with it. Small plates under them pick one (radio buttons, so the arrow keys move along them), which stops the turning; a Pause switch, a pointer or the focus on the plates stop it too. Zero JavaScript. Cost: 0 B JS. Install: `npx shadcn@latest add @moonarc-pro/hero-specimen` with a license key (https://moonarc.dev/account/).
- [Hero Stay](https://moonarc.dev/components/hero-stay.md): The first screen of a place to stay: the headline and a line of what the place is, a few facts, and the place by day and by night in one frame: light falling over the day picture (LightRays), the windows lit in the night one, and a pair of radios under them that picks which shows, with no script. The pictures are drawn by HomeArt unless the slots day and night hold photographs; the one not shown is hidden from a screen reader. The slot booking holds the dates and the guests (BookingBar), under the picture and its radios. Cost: 0 B JS. Install: `npx shadcn@latest add @moonarc-pro/hero-stay` with a license key (https://moonarc.dev/account/).
- [House Rules](https://moonarc.dev/components/house-rules.md): What a guest agrees to before they come, set out to be read: the arrival and departure times large, the house rules as a list where each answer is a word with a mark that repeats it in shape (a tick, a cross), what the stay includes, and the policies in a sentence or two each: cancelling, a deposit, a late arrival. Zero JavaScript. Cost: 0 B JS of its own · uses Reveal + runtime. Install: `npx shadcn@latest add @moonarc-pro/house-rules` with a license key (https://moonarc.dev/account/).
- [Hyperspeed](https://moonarc.dev/components/hyperspeed.md): Draws a jump to light speed: streaks of light rush out of a vanishing point, longer and brighter toward the edge, in one colour with a hot head in a second tone. Three layers of angular sectors on the GPU, each streak at its own pace; the vanishing point leans toward the pointer, and holding the pointer down on the host (or Space or Enter while the host itself has focus) punches the drive: streaks stretch and the rush speeds up, easing back on release. Every constant is a custom property re-read when the element's style changes. Without WebGL2 or JavaScript a still starburst stands in. Fills its positioned parent. Cost: 1.5 kB raw JS · 928 B gzip · + runtime + shader + canvas + gl, 11.1 kB raw in all. Install: `npx shadcn@latest add @moonarc-pro/hyperspeed` with a license key (https://moonarc.dev/account/).
- [Ink Reveal](https://moonarc.dev/components/ink-reveal.md): Covers content with a layer that the cursor washes away like ink in water, showing what is underneath. The content is ordinary HTML in the slot, in the page for readers, search and keyboard users from the start. The cover is a canvas above it, drawn by the GPU: a fluid simulation whose dye is the hole, with a ragged, moving edge and a soft grain. The ink fades back at `fade` per second (0 keeps what was revealed). A small swirl opens at the centre on the first frame to say there is something underneath. Focus inside, reduced motion, a touch device without hover, no WebGL2 or no JavaScript all show the content with no cover. Cost: 1.6 kB raw JS · 1.0 kB gzip · + runtime + canvas + gl + fluid, 12.5 kB raw in all. Install: `npx shadcn@latest add @moonarc-pro/ink-reveal` with a license key (https://moonarc.dev/account/).
- [Integration Beams](https://moonarc.dev/components/integration-beams.md): The product in the middle, its integrations around it, and data travelling along the lines between them: up to eight on the lines, more on a ring around the product. The drawing is decoration hidden from screen readers; the integrations are also a real list under it, with links where they have one. Zero JavaScript. Cost: 0 B JS. Install: `npx shadcn@latest add @moonarc-pro/integration-beams` with a license key (https://moonarc.dev/account/).
- [Integration Grid](https://moonarc.dev/components/integration-grid.md): A grid of integrations, tools or partners: cards with an icon, a name and a line, each lit by a spotlight that follows the cursor and lifting on hover, revealed with a tight stagger. Cost: 0 B JS of its own · uses Spotlight + runtime + Reveal. Install: `npx shadcn@latest add @moonarc-pro/integration-grid` with a license key (https://moonarc.dev/account/).
- [Lineup Grid](https://moonarc.dev/components/lineup-grid.md): Who is on: each person a drawn portrait on a colour block (PortraitArt, seeded from the name), the name and what they do, and on the back of the portrait their session: its title, the day and time, the stage. A pointer resting on a card, or the keyboard focus on its link, turns the portrait over; on a touch screen the session is a line under the name. With layout="feature" the first two people are drawn twice as large. Zero JavaScript. Cost: 0 B JS. Install: `npx shadcn@latest add @moonarc-pro/lineup-grid` with a license key (https://moonarc.dev/account/).
- [Liquid Chrome](https://moonarc.dev/components/liquid-chrome.md): Draws a pool of liquid metal. Coordinates are folded through six octaves of sine warps on the GPU and read through a chrome ramp (a deep body, a sharp bright horizon, a soft sky), tinted by one colour with a highlight tone. Opaque, like metal. The pointer sends ripples across the surface. Every constant is a custom property re-read when the element's style changes. Without WebGL2 or JavaScript a still brushed-metal gradient stands in. Fills its positioned parent. Cost: 744 B raw JS · 508 B gzip · + runtime + shader + canvas + gl, 10.3 kB raw in all. Install: `npx shadcn@latest add @moonarc-pro/liquid-chrome` with a license key (https://moonarc.dev/account/).
- [Liquid Image](https://moonarc.dev/components/liquid-image.md): Makes an image turn liquid under the cursor and settle back. A velocity field on the GPU (WebGL2 stable fluids, no dye) displaces where the picture is sampled, with a touch of chromatic split along the flow. The picture is a real opened by the invoker command, so the focus stays inside it, Escape closes it and the focus returns to the button; the current page is marked with aria-current. The bar sticks on the page's ground, or scrolls away with the button kept in the corner. Zero JavaScript of its own. Cost: 0 B JS. Install: `npx shadcn@latest add @moonarc-pro/nav-fullscreen` with a license key (https://moonarc.dev/account/).
- [Nearby List](https://moonarc.dev/components/nearby-list.md): What is around a place to stay, by how a guest gets there: a group a way (on foot, by bike, by car, by boat), each place a row with its name, a line about it and the minutes it takes, and a bar drawn to scale against the farthest place of its group, so the near ones read near at a glance. A place can link to a map. Zero JavaScript. Cost: 0 B JS of its own · uses Reveal + runtime. Install: `npx shadcn@latest add @moonarc-pro/nearby-list` with a license key (https://moonarc.dev/account/).
- [Newsletter](https://moonarc.dev/components/newsletter-section.md): An email signup section built on a real form: native validation, an invalid state that only shows after the user has typed, a submit button whose label swaps for a spinner when the form carries data-pending, a status line for your handler, and a dot field behind. It takes a list service's form as it is (field name, hidden fields, a honeypot, form attributes) and only posts. Zero JavaScript of its own; wire the fetch yourself or let the form post. Cost: 0 B JS of its own · uses Reveal + runtime. Install: `npx shadcn@latest add @moonarc-pro/newsletter-section` with a license key (https://moonarc.dev/account/).
- [Notes Wall](https://moonarc.dev/components/notes-wall.md): Kind words from readers, listeners or students, pinned up as notes: each a card in one of the palette's tints with a strip of tape across its top, tilted a little by its words (the same tilt on every build), the quote and who wrote it with where they are. The notes fall into columns that fill top to bottom, so notes of any length hang without gaps. As they scroll in they settle into place, rising from a little lower and more askew on a view timeline; where there is none, or under reduced motion, they hang still. Zero JavaScript. Cost: 0 B JS. Install: `npx shadcn@latest add @moonarc-pro/notes-wall` with a license key (https://moonarc.dev/account/).
- [Notice Band](https://moonarc.dev/components/notice-band.md): The notices a regulated practice owes its readers, set where they are read: first, on a panel of its own in the page's ink, what to do in an emergency with the number as a link; then the rest as short notes, each a title, a sentence and a link (the register it is on, how to complain, that the site gives general information and not advice, the access to the building). A band above the footer on every page, or the whole of a notices page. Zero JavaScript. Cost: 0 B JS. Install: `npx shadcn@latest add @moonarc-pro/notice-band` with a license key (https://moonarc.dev/account/).
- [Now List](https://moonarc.dev/components/now-list.md): A "now" page in one section: what one person is making, reading, learning and planning at the moment. Each row has a small drawn icon, its word in the mono face and a line, and over the rows sits when the page was last updated, beside a dot that pulses like a light left on, three times as it comes in, then stays lit. Eight icons are drawn: make, read, listen, learn, plan, watch, write and travel. With block the panel is a colour block. Zero JavaScript. Cost: 0 B JS. Install: `npx shadcn@latest add @moonarc-pro/now-list` with a license key (https://moonarc.dev/account/).
- [Offer Shelf](https://moonarc.dev/components/offer-shelf.md): What one person sells, on a shelf: a course, a guide, a membership, prints or sessions. Each is a card with a cover drawn on a colour block (its name set large, a drawing in the corner, its kind on a band), then the kind and what it holds, the name, a line, the price and the way to buy it. A course lists its modules under a disclosure. One offer can be featured, twice as wide on a wide box. A pointer on a card lifts its cover off the shelf and leans it a little, and the buy button rises. Zero JavaScript. Cost: 0 B JS. Install: `npx shadcn@latest add @moonarc-pro/offer-shelf` with a license key (https://moonarc.dev/account/).
- [Package Cards](https://moonarc.dev/components/package-cards.md): Fixed packages with what they cost: each card names a package and who it suits, gives the price and what it is counted in (or "Price on request", for a business that quotes), lists what is included with a tick in a colour block, can carry a bonus line on that block, and ends in an action that asks about that package. The cards lift a hover step under the pointer. The action is a link: a contact page, a mailto, a chat. Zero JavaScript. Cost: 0 B JS. Install: `npx shadcn@latest add @moonarc-pro/package-cards` with a license key (https://moonarc.dev/account/).
- [People List](https://moonarc.dev/components/people-list.md): The people of a practice as cards: each drawn by PortraitArt on a colour block, with the name, the role, the qualifications after the name, and the facts a patient or a client checks (the days they are in, the languages they speak, the register they are on and their number), a line in their own words and a link to their page. The cards sit in FocusSiblings: the one pointed at or focused stays, the others step back in grey, their text at full contrast. Zero JavaScript. Cost: 0 B JS of its own · uses Reveal + runtime. Install: `npx shadcn@latest add @moonarc-pro/people-list` with a license key (https://moonarc.dev/account/).
- [Piece List](https://moonarc.dev/components/piece-list.md): The issues, episodes, lessons or videos of one person's work, as a list of rows in the order you give them (newest first). Each row has its number in the mono face, a picture, the title as the row's link, the date and the length. The picture is the piece's own: a waveform drawn from its title (look="wave", for audio), a drawing on a colour block (look="tile") or a frame with a play mark and the running time (look="frame", for video). A pointer on a row tints it, sets its waveform or its drawing moving and swells a frame's play mark, and with detail each row also carries its summary. A piece with audio gets a play button: one small script plays the file in the page, one piece at a time, and shows how much is played on its waveform. Without audio the script has nothing to bind and every row is a link. Cost: 893 B raw JS · 510 B gzip · + runtime. Install: `npx shadcn@latest add @moonarc-pro/piece-list` with a license key (https://moonarc.dev/account/).
- [Plasma](https://moonarc.dev/components/plasma.md): Draws glowing ribbons of light drifting through each other: four sine fields interfere on the GPU, the sum folds into soft bands, and each band glows in a colour sliding between two tones with a hot core at its peak. The ground between the ribbons is the page, so it reads on either theme: neon on dark, pastel on light. The pointer draws the plasma toward it. Every constant is a custom property re-read when the element's style changes. Without WebGL2 or JavaScript a still two-tone glow stands in. Fills its positioned parent. Cost: 723 B raw JS · 487 B gzip · + runtime + shader + canvas + gl, 10.2 kB raw in all. Install: `npx shadcn@latest add @moonarc-pro/plasma` with a license key (https://moonarc.dev/account/).
- [Press Kit](https://moonarc.dev/components/press-kit.md): What a writer needs on one page: the app's icon, the fact sheet (a description list a reader can copy from), the files to download with their format and size, the colours with their values, a few words from the people who make it, and who to write to. Every part is plain HTML; the downloads are links with the download attribute, and the colours are written out beside their swatches. The parts arrive in turn. Zero JavaScript. Cost: 0 B JS of its own · uses Reveal + runtime. Install: `npx shadcn@latest add @moonarc-pro/press-kit` with a license key (https://moonarc.dev/account/).
- [Pricing Cards](https://moonarc.dev/components/pricing-cards.md): Shows pricing plans side by side, with an annual/monthly toggle that rolls every price digit by digit to the other period with zero JavaScript (radios, :has and NumberFlow), the highlighted plan wearing a travelling border beam, cards revealed with a stagger. Plans with no monthly price render without the toggle, each price as plain text. Cost: 0 B JS of its own · uses Reveal + runtime. Install: `npx shadcn@latest add @moonarc-pro/pricing-cards` with a license key (https://moonarc.dev/account/).
- [Pricing Table](https://moonarc.dev/components/pricing-table.md): A feature-by-plan comparison: the highlighted plan's column lit, rows revealed with a 40 ms stagger as the table scrolls into view, and a header row that sticks when you cap the table's height. Semantic table, zero JavaScript of its own. Cost: 0 B JS of its own · uses Reveal + runtime. Install: `npx shadcn@latest add @moonarc-pro/pricing-table` with a license key (https://moonarc.dev/account/).
- [Process Thread](https://moonarc.dev/components/process-thread.md): How a thing is made, as steps sewn on one thread: a stitched line runs down the section and each step is a knot on it (a round number in a colour block, stitched round its edge) with a title, a line and how long it takes. On a wide screen the steps fall to either side of the thread in turn; on a phone the thread runs down the left. The thread is sewn as the list comes into view and each step settles in as it arrives. Zero JavaScript. Cost: 0 B JS. Install: `npx shadcn@latest add @moonarc-pro/process-thread` with a license key (https://moonarc.dev/account/).
- [Product Detail](https://moonarc.dev/components/product-detail.md): The top of a product's page: the product drawn large on its plate (ProductArt), with its colourways under it as small swatches (radio buttons) that recolour the drawing in place; beside it the trail back to the shop, the name, the price, a line, how many of the batch are left, two actions, the specifications in the mono face and a few notes that open (care, delivery). On a wide screen the picture holds while the details scroll past it. Zero JavaScript. Cost: 0 B JS. Install: `npx shadcn@latest add @moonarc-pro/product-detail` with a license key (https://moonarc.dev/account/).
- [Product Drop](https://moonarc.dev/components/product-drop.md): The next batch, as one colour block: the product drawn large (ProductArt) under a round date stamp, and beside it the heading, a line, how many of the batch are spoken for (a count, and a bar that fills as the panel comes into view), three facts in the mono face and two actions. For a small run, a pre-order, a seasonal bake or a restock. Zero JavaScript. Cost: 0 B JS. Install: `npx shadcn@latest add @moonarc-pro/product-drop` with a license key (https://moonarc.dev/account/).
- [Product Grid](https://moonarc.dev/components/product-grid.md): A whole collection on one page, filtered by kind: the products as cards (each drawn on its plate with ProductArt, a hang tag for the price, the name as the card's link and a spec line in the mono face) in two, three or four columns by the box's width, and above them a row of filters with their counts (core FilterGrid: the cards that stay slide into place, and the URL keeps the filter). A hover or the keyboard focus on a card picks its product up and swings its tag. Without JavaScript every product shows. Cost: 0 B JS of its own · uses FilterGrid + runtime + morph. Install: `npx shadcn@latest add @moonarc-pro/product-grid` with a license key (https://moonarc.dev/account/).
- [Product Hero](https://moonarc.dev/components/hero-product.md): A product hero: a headline revealed word by word, two actions, a play chip that opens the demo video in a dialog, and the product screenshot in a browser window that leans back 20 degrees and stands upright as the page scrolls. The tilt is CSS on the scroll timeline. The section ships no script of its own; VideoDialog's script loads only when video is set. Cost: 0 B JS of its own · uses Reveal + runtime. Install: `npx shadcn@latest add @moonarc-pro/hero-product` with a license key (https://moonarc.dev/account/).
- [Product Rail](https://moonarc.dev/components/product-rail.md): A row of products that runs off the page's edge: each drawn on its plate (ProductArt) with a hang tag for the price, the name as the card's link and a spec line in the mono face. The row scrolls sideways and snaps to a card, and a thin bar under it follows the scroll. A hover or the keyboard focus on a card picks its product up and swings its tag. Each picture can carry a view-transition-name, so a product page that names its picture the same way takes it over from the card. Zero JavaScript. Cost: 0 B JS. Install: `npx shadcn@latest add @moonarc-pro/product-rail` with a license key (https://moonarc.dev/account/).
- [Project Index](https://moonarc.dev/components/project-index.md): The work as a numbered index: one line per project with the title at display size and the client, the discipline and the year in mono, the whole line a link. Over a line the project's cover floats by the pointer and the pointer becomes a label (View); the other titles step back. Each cover can carry the project's view transition name, so with Astro's router the cover a reader chose grows into the case study (CaseStudyHero, same name). On a touch screen each line shows a thumbnail instead, and keyboard focus shows the cover at a fixed spot. The float is HoverImageLinks, the label Cursor; zero JavaScript of its own. Cost: 0 B JS of its own · uses HoverImageLinks + runtime + Cursor. Install: `npx shadcn@latest add @moonarc-pro/project-index` with a license key (https://moonarc.dev/account/).
- [Prompt Hero](https://moonarc.dev/components/hero-prompt.md): A hero whose entry point is a prompt box: a small label, a short headline, a lead, a large PromptInput with Enter to send, a status line and example tasks. The placeholder line cycles through example tasks once and settles on the first, a caret in the accent blinks four times and stays, and the status line sweeps a highlight twice while it says the agent is ready. By default the form is a demo that sends nothing: it goes to a demo page with method="get" and the textarea has no name, so a typed prompt never lands in a URL. The section ships no script of its own; Enter to send is PromptInput's measured script. Cost: 0 B JS of its own · uses PromptInputSubmitOnEnter + runtime. Install: `npx shadcn@latest add @moonarc-pro/hero-prompt` with a license key (https://moonarc.dev/account/).
- [Quickstart Steps](https://moonarc.dev/components/quickstart-steps.md): A quickstart as numbered steps down a rail that fills as the reader moves through them, each number lighting as its step reaches the middle of the screen. A step has its words, its code in tabs (one per language or package manager, a copy button on each) and what the reader should see when it worked, as a line or as output, so a step can be checked before the next. A last line can point to what to read next. Scroll-driven where the browser has view timelines; the rail full and every number lit where it does not. Composes TracingBeam and CodeTabs; zero JavaScript of its own. Cost: 0 B JS of its own · uses CopyButton + runtime. Install: `npx shadcn@latest add @moonarc-pro/quickstart-steps` with a license key (https://moonarc.dev/account/).
- [Rating Summary](https://moonarc.dev/components/rating-summary.md): What people who use the app say, as the stores show it: the average large with its stars and how many rated, a bar for each star count with its share written beside it, and a few reviews, each with its stars, its title, who wrote it, when and where. The bars grow in turn as the summary arrives. The stars are one element each (a star mask repeated five times, filled to the value), named by their value for a screen reader. Zero JavaScript. Cost: 0 B JS of its own · uses Reveal + runtime. Install: `npx shadcn@latest add @moonarc-pro/rating-summary` with a license key (https://moonarc.dev/account/).
- [Regions Map](https://moonarc.dev/components/regions-map.md): Where a service runs: the world in dots with each region pinned and pulsing in turn, a chip at each pin with its code and the latency measured there, and under the map the same regions as a list (name, code, figure), so a reader who cannot see the map, or reads on a narrow screen where the chips would crowd, loses nothing. A region still to open is a dashed ring and says so in the list. A few figures can sit beside the heading. Zero JavaScript; the map is core DottedMap. Cost: 0 B JS of its own · uses Reveal + runtime. Install: `npx shadcn@latest add @moonarc-pro/regions-map` with a license key (https://moonarc.dev/account/).
- [Request Hero](https://moonarc.dev/components/hero-request.md): A hero for an HTTP API: the headline beside a console where a request is written line by line, a line runs while it is sent, the status lands with the time it took and the region that answered, and the JSON response streams in under it. Two to four requests take their turn once and the last one rests; a tab above the console picks any of them with radios and :has(), and the console holds still while it is pointed at or holds focus. The code is highlighted at build by Shiki, each token colour moved until it reads on the console, which is dark on every page and every tone: the theme's deepest neutral. Zero JavaScript. Cost: 0 B JS of its own · uses Reveal + runtime. Install: `npx shadcn@latest add @moonarc-pro/hero-request` with a license key (https://moonarc.dev/account/).
- [Room Cards](https://moonarc.dev/components/room-cards.md): The rooms of a place to stay as cards: each drawn by RoomArt on a colour block, with its name, how many it sleeps, its beds and its size, what it has (a terrace, a bath, a sea view), a sentence about it and its price from a night, the whole card a link to book it or to its page. The drawing's lamp comes on when the card is pointed at. Zero JavaScript. Cost: 0 B JS of its own · uses Reveal + runtime. Install: `npx shadcn@latest add @moonarc-pro/room-cards` with a license key (https://moonarc.dev/account/).
- [Schedule Days](https://moonarc.dev/components/schedule-days.md): A programme by day: a row of day chips (radio buttons, each a weekday over its date in a colour block) picks the day, and under it the day's sessions in order, with the time in the mono face, the title, who leads it, the stage as a chip in the stage's own colour and the kind of session beside it. A session can carry an id, so a lineup card links straight to it and it is marked when it is the target; one small script makes such a link pick the session's day, whose panel is hidden until then. Cost: 419 B raw JS · 309 B gzip · + runtime. Install: `npx shadcn@latest add @moonarc-pro/schedule-days` with a license key (https://moonarc.dev/account/).
- [Screens Scroll](https://moonarc.dev/components/screens-scroll.md): An app's features told down the page while one phone stays in view beside them and its screen changes with each feature. Every feature names its own view timeline; each screen fades in on its feature's timeline over the one before it, so between two features the phone is never empty and scrolling back turns the screens back. A line beside each feature fills as it is read. Where view timelines are missing, below 64 rem, or with reduced motion, each feature shows its own phone under its text. The screens are drawn from rows (AppScreen). Zero JavaScript. Cost: 0 B JS of its own · uses Reveal + runtime. Install: `npx shadcn@latest add @moonarc-pro/screens-scroll` with a license key (https://moonarc.dev/account/).
- [Service Detail](https://moonarc.dev/components/service-detail.md): A service's own page, top to bottom: its name and what it is in a sentence, then the parts a reader looks for before booking (what it is, who it is for, what happens step by step, what to bring, what comes after), each under its own heading; beside them a card that stays in view while the page scrolls (position: sticky, nothing animated) with the facts (how long, from what price, whether insurance covers it), the two actions and a line of small print. Zero JavaScript. Cost: 0 B JS of its own · uses Reveal + runtime. Install: `npx shadcn@latest add @moonarc-pro/service-detail` with a license key (https://moonarc.dev/account/).
- [Service Index](https://moonarc.dev/components/service-index.md): What a practice does, by group: each group's name and a line about it on one side, its services on the other as rows, each with a line of what it is, how long it takes and what it costs from, and a link to its own page. One group sets its rows alone. The row is the link, its arrow moving a little on hover and focus; nothing else moves. Zero JavaScript. Cost: 0 B JS of its own · uses Reveal + runtime. Install: `npx shadcn@latest add @moonarc-pro/service-index` with a license key (https://moonarc.dev/account/).
- [Services List](https://moonarc.dev/components/services-list.md): What a studio or a freelancer does, as numbered rows at display size that open one at a time: each row names a service, and opens to a short text beside the list of deliverables. Every row is a native (the browser owns the opening, the keyboard and the one-open rule through the name attribute), the height animates through ::details-content, and the name underlines on hover with UnderlineHover. Zero JavaScript of its own. Cost: 0 B JS. Install: `npx shadcn@latest add @moonarc-pro/services-list` with a license key (https://moonarc.dev/account/).
- [Sign In](https://moonarc.dev/components/sign-in.md): A sign-in card in two steps, email then a one-time code, as the front end of your own auth service. Each step is a real form that posts, so it works with JavaScript off. With JavaScript the core form lib sends each step with fetch, CSS swaps step one for step two when the email is accepted, and the section's script moves the focus to the code field and cleans a pasted code of spaces and dashes. It ships no backend: your service keeps the session and answers both steps. Cost: 761 B raw JS · 452 B gzip · + runtime + form. Install: `npx shadcn@latest add @moonarc-pro/sign-in` with a license key (https://moonarc.dev/account/).
- [Signup Preview](https://moonarc.dev/components/signup-preview.md): A newsletter signup beside a look at what arrives: the heading, a line, one email field with its button and the count of people already reading, and next to them the next issue as it lands in an inbox (who it is from, the subject, the day it sends, its first lines fading out) on a small stack of the issues before it. The form is a real form first: method="post" to your action, labelled and validated, so it sends with JavaScript off. One small script binds it with the core form lib for the fetch, the spoken status line and the button's four faces. The field is core VanishInput: what was typed vanishes as the form sends, and with a thanks page (success) the reader goes there once it has. demo renders a form that sends nothing and says so; sent swaps the form for its confirmation, the page a native post lands on. Cost: 43 B raw JS · 63 B gzip · + VanishInput + runtime + form. Install: `npx shadcn@latest add @moonarc-pro/signup-preview` with a license key (https://moonarc.dev/account/).
- [Silk](https://moonarc.dev/components/silk.md): Draws a sheet of fabric drifting in slow folds, lit from one side: a warped height field on the GPU, normals from finite differences, a diffuse body in the colour and a narrow sheen in a second tone. The troughs keep a trace of the colour and let the page's ground through, so it reads on either theme. The pointer presses a soft dent into the cloth. Every constant is a custom property re-read when the element's style changes. Without WebGL2 or JavaScript a still diagonal sheen stands in. Fills its positioned parent. Cost: 1.1 kB raw JS · 683 B gzip · + runtime + shader + canvas + gl, 10.6 kB raw in all. Install: `npx shadcn@latest add @moonarc-pro/silk` with a license key (https://moonarc.dev/account/).
- [Stats Row](https://moonarc.dev/components/stats-row.md): Shows big numbers that count up when scrolled into view, 120 ms apart, with labels and an optional bar under each, in a hairline row. No script of its own: CountUp and Progress do the counting. Cost: 0 B JS of its own · uses Reveal + runtime. Install: `npx shadcn@latest add @moonarc-pro/stats-row` with a license key (https://moonarc.dev/account/).
- [Status Board](https://moonarc.dev/components/status-board.md): A status page in one section: the state of everything as the heading with its light (it pulses three times, then stays lit), the uptime of the days shown as a Gauge, each service with its state and a bar for every day (up, degraded, an outage, maintenance, no data) rising in turn as the board arrives, and the incidents with their updates, newest first. Pointing at a bar names its day; the days that were not clean are written out for a screen reader under each service, so nothing depends on the bars. A narrow box shows the last thirty days. All of it is data at build. Zero JavaScript. Cost: 0 B JS of its own · uses Reveal + runtime. Install: `npx shadcn@latest add @moonarc-pro/status-board` with a license key (https://moonarc.dev/account/).
- [Steps / Timeline](https://moonarc.dev/components/steps-section.md): A vertical timeline: the line draws itself down the page in step with the scroll, each step revealing from the line's side as it is reached, markers numbered or dated. Zero JavaScript of its own; where scroll timelines are missing the line is simply drawn. Cost: 0 B JS of its own · uses Reveal + runtime. Install: `npx shadcn@latest add @moonarc-pro/steps-section` with a license key (https://moonarc.dev/account/).
- [Sticker Cloud](https://moonarc.dev/components/sticker-cloud.md): Who it is for, as stickers: a heading and a line beside a cloud of rounded labels in the palette's blocks, each tilted a little its own way, coming in one after another as the cloud enters the screen (Reveal). A clientele, the kinds of event a venue hosts, the cuisines a kitchen cooks. The labels are a list, read in order and named by the heading. Zero JavaScript of its own. Cost: 0 B JS of its own · uses Reveal + runtime. Install: `npx shadcn@latest add @moonarc-pro/sticker-cloud` with a license key (https://moonarc.dev/account/).
- [Sticky Features](https://moonarc.dev/components/feature-sticky.md): Steps on one side and one visual on the other that stays in view and changes with them, under a lead paragraph that brightens word by word as it is read. The current step is at full strength and the others dim. Zero JavaScript: StickyReveal binds each visual to its step's view timeline and SplitText scrub binds each word of the lead. Cost: 0 B JS of its own · uses Reveal + runtime. Install: `npx shadcn@latest add @moonarc-pro/feature-sticky` with a license key (https://moonarc.dev/account/).
- [Sticky Nav Bar](https://moonarc.dev/components/nav-bar.md): A sticky navigation bar that condenses over the first 120 px of scroll: the row tightens and a hairline appears, bound to the document's scroll timeline, with zero JavaScript. mode="hide" also slides it away on the way down and back on the way up (a measured script, in every engine), mode="static" keeps it still. An optional theme switch at its end and an optional announcement banner above it, in the same sticky header. Cost: 0 B JS. Install: `npx shadcn@latest add @moonarc-pro/nav-bar` with a license key (https://moonarc.dev/account/).
- [Store CTA](https://moonarc.dev/components/store-cta.md): The call to get the app: a panel of the app's colour block with the headline, the store buttons and, on a wide screen, a QR code to the app, and a phone rising out of the panel's lower edge as the panel comes into view, its lower third cut by the panel. The rise is a view timeline; where there is none, or with reduced motion, the phone stands where the rise ends. The store buttons invert on the panel, the block's text as their ground. Zero JavaScript. Cost: 0 B JS of its own · uses Reveal + runtime. Install: `npx shadcn@latest add @moonarc-pro/store-cta` with a license key (https://moonarc.dev/account/).
- [Team Grid](https://moonarc.dev/components/team-grid.md): Shows team members in a hairline grid: portraits that tilt toward the cursor with a glare, initials when there is no photo, names and roles revealed with a stagger. Cost: 0 B JS of its own · uses Tilt + runtime + Reveal. Install: `npx shadcn@latest add @moonarc-pro/team-grid` with a license key (https://moonarc.dev/account/).
- [Terminal Hero](https://moonarc.dev/components/hero-terminal.md): A hero for developer tools: split headline on the left, a terminal window on the right that types the install command and prints its output line by line, on a pulsing dot field. Zero JavaScript of its own. Cost: 0 B JS of its own · uses Reveal + runtime. Install: `npx shadcn@latest add @moonarc-pro/hero-terminal` with a license key (https://moonarc.dev/account/).
- [Testimonial Cards](https://moonarc.dev/components/testimonial-cards.md): Shows testimonial quotes in a staggered grid. Each card tilts gently toward the cursor, and the featured quote spans two columns with its words revealed one by one. Attribution with avatar and role. Cost: 0 B JS of its own · uses Tilt + runtime + Reveal. Install: `npx shadcn@latest add @moonarc-pro/testimonial-cards` with a license key (https://moonarc.dev/account/).
- [Testimonial Marquee](https://moonarc.dev/components/testimonial-marquee.md): Shows two rows of testimonial cards drifting in opposite directions, pausing while hovered so any quote can be read. Pure CSS; under reduced motion the rows become scrollable strips. Cost: 0 B JS. Install: `npx shadcn@latest add @moonarc-pro/testimonial-marquee` with a license key (https://moonarc.dev/account/).
- [Thank You](https://moonarc.dev/components/thank-you.md): A thanks page for after a signup: a headline, the reader's place in line rolling up, a referral link with a copy button, and one burst of confetti. The values come from the server or from the record the form lib leaves for this page, never from the URL. Without any values, the page still reads as complete. Cost: 981 B raw JS · 608 B gzip · + CopyButton + runtime + Confetti + canvas. Install: `npx shadcn@latest add @moonarc-pro/thank-you` with a license key (https://moonarc.dev/account/).
- [Ticker Bands](https://moonarc.dev/components/ticker-bands.md): Two tilted bands that cross the page, each a marquee of the same few words running the other way: one in the ink tone, one in a colour block, the words alternating between the body face and the emphasis face with a spark between them. A divider with a voice of its own. The bands are decoration, hidden from assistive technology with no tab stop; label gives the words to a screen reader once. They pause under a pointer and stand still under reduced motion (Marquee). Zero JavaScript of its own. Cost: 0 B JS. Install: `npx shadcn@latest add @moonarc-pro/ticker-bands` with a license key (https://moonarc.dev/account/).
- [Ticket Stub](https://moonarc.dev/components/ticket-stub.md): The foot of an event's site, made like its ticket: a colour block with the name large (a second part in the emphasis), the dates and the place, the link columns and a few small lines; a perforated line, and past it the stub, with "Admit one", the dates again and a barcode drawn from the name. On a wide screen the stub stands at the right end, on a phone at the foot. Zero JavaScript. Cost: 0 B JS. Install: `npx shadcn@latest add @moonarc-pro/ticket-stub` with a license key (https://moonarc.dev/account/).
- [Ticket Tiers](https://moonarc.dev/components/ticket-tiers.md): The tickets, as tickets: each tier a card with a perforated line under its head (a notch cut from each side), the name and the price, what it includes, how many are left (a count, and a bar that fills as the card comes into view) and its action. One tier can be featured in a colour block; a sold-out tier is stamped and loses its action; a tier not yet on sale says so. An action that leads to another site's ticket shop says that too. Zero JavaScript. Cost: 0 B JS. Install: `npx shadcn@latest add @moonarc-pro/ticket-tiers` with a license key (https://moonarc.dev/account/).
- [Usage Pricing](https://moonarc.dev/components/pricing-usage.md): Usage-based pricing: a slider of monthly usage and every plan priced at the usage picked, each price rolling to its new figure, the cheapest plan for that usage lit and badged. A plan is a base price, what it includes, the rate for each block over it and an optional limit, past which it says so instead of a price. The slider is a group of radios drawn as a track with a thumb, so arrow keys and focus are native; every price at every stop is worked out at build and :has() shows the one picked, and a screen reader hears that price, not the reel. Zero JavaScript. Cost: 0 B JS. Install: `npx shadcn@latest add @moonarc-pro/pricing-usage` with a license key (https://moonarc.dev/account/).
- [Venue Guide](https://moonarc.dev/components/venue-guide.md): Where it is and how to get round it: a drawn site map in a colour block with the places on it as numbered dots in their own colours (the stages, the food, the entrance), and beside it the same places as a numbered list with a line each; pointing at a place in the list lights its dot on the map. Under them, how to get there by train, bus, bike, car or on foot, each with its icon, and the address with a link to a map. Zero JavaScript. Cost: 0 B JS. Install: `npx shadcn@latest add @moonarc-pro/venue-guide` with a license key (https://moonarc.dev/account/).
- [Visit Card](https://moonarc.dev/components/visit-card.md): Where to find a studio, a shop or a counter, as one card in a colour block: a drawn map with a pin, the address with a directions link, the opening hours for the week, the ways to get in touch, and above them a live line that says whether it is open now and until when (or when it opens next), with the time where the place is. Today's row of the week is marked. The live line is a small script reading the hours in the place's own time zone; without JavaScript the week reads as it is. Cost: 1006 B raw JS · 626 B gzip · + runtime. Install: `npx shadcn@latest add @moonarc-pro/visit-card` with a license key (https://moonarc.dev/account/).
- [Waitlist Hero](https://moonarc.dev/components/hero-waitlist.md): A pre-launch hero with a waitlist form: a flip countdown over a retro grid floor, an email field whose text blurs away on submit, a status line that says what happened, and the people already waiting. It is a real form first (method="post" to your action, labelled, validated), so it sends with JavaScript off. One small script binds it with the core form lib for the fetch, the pending lock, the spoken status and the thanks-page record. The email never goes in the URL: any method but post fails the build. Cost: 43 B raw JS · 63 B gzip · + CountdownFlip + runtime + VanishInput + form. Install: `npx shadcn@latest add @moonarc-pro/hero-waitlist` with a license key (https://moonarc.dev/account/).
- [Wave Field](https://moonarc.dev/components/wave-field.md): Draws a water surface in halftone. It runs the wave equation on the GPU (a height field and its previous step), so a drop spreads into rings that cross, interfere and settle, and the edges absorb them. The cursor drops ripples along its path, a wake of rings behind it; while it rests, a light rain falls around the focus. The steepness of the surface sizes a dot per cell, in two tones on the page's ground; `dots` 0 draws a smooth surface. Every constant is a custom property re-read when the element's style changes. Without WebGL2 or a colour-renderable float texture, or without JavaScript, still rings stand in. Fills its positioned parent. Cost: 2.3 kB raw JS · 1.3 kB gzip · + runtime + canvas + gl, 10.8 kB raw in all. Install: `npx shadcn@latest add @moonarc-pro/wave-field` with a license key (https://moonarc.dev/account/).
- [Widget Bento](https://moonarc.dev/components/widget-bento.md): An app beyond its own screen, in a bento: its home-screen widgets in three sizes, its lock screen (a phone's top half, cut by the tile) and its watch face, each drawn from rows (AppScreen without its chrome) on a tile of a colour block, with a title and a line under it. Small widgets take one column, medium two, large two by two, the lock screen two rows. The tiles arrive in turn and each drawing fills as its tile arrives: the ring, the bars, the checks. Zero JavaScript. Cost: 0 B JS of its own · uses Reveal + runtime. Install: `npx shadcn@latest add @moonarc-pro/widget-bento` with a license key (https://moonarc.dev/account/).
- [Work Grid](https://moonarc.dev/components/work-grid.md): The whole body of work as a grid of covers with filters by discipline. The filters are real buttons (aria-pressed, each with its count), the order of the grid is kept, and the cards that stay slide to their places through a view transition (FilterGrid); a status line says how many projects show and is spoken after each press. A project with a clip plays it on hover (HoverVideo, caption under the clip; never under reduced motion), the others show their cover, and each card is wiped open from its foot as it enters (Reveal clip). Each cover can carry the project's view transition name, so with Astro's router it grows into the case study. Cost: 443 B raw JS · 317 B gzip · + Reveal + runtime + HoverVideo + FilterGrid + morph. Install: `npx shadcn@latest add @moonarc-pro/work-grid` with a license key (https://moonarc.dev/account/).
## Docs
Index: https://moonarc.dev/docs/
### Start here
- [Installation](https://moonarc.dev/docs/installation.md): One command, or a manual install when you want to own every line.
- [The integration](https://moonarc.dev/docs/integration.md): What `moonarc()` does to your project, and how to turn each part off.
- [Runtime](https://moonarc.dev/docs/runtime.md): The lifecycle substrate every scripted component sits on, and the API you can use for your own scripts.
### Style
- [Motion tokens and presets](https://moonarc.dev/docs/motion-tokens.md): Five sampled springs, one attribute to switch the whole page, and the durations, travel and stagger every component resolves from, as CSS custom properties and an opt-in Tailwind v4 layer.
- [Theming](https://moonarc.dev/docs/theming.md): The Pro sections read shadcn's variable names with the base tokens as fallback. Paste a shadcn or tweakcn theme, set one --ma-brand (and optionally a neutral and an accent), or write the tokens yourself. The tone, density, align, columns and media props set the variants, and a painted tone re-declares the card, border, field and focus colours inside the section.
### Checks
- [Performance](https://moonarc.dev/docs/performance.md): How every cost on this site is measured, and how to run the same check on your own build.
- [Accessibility](https://moonarc.dev/docs/accessibility.md): The reduced-motion policy every component follows, and the details screen readers care about.
- [Browser support](https://moonarc.dev/docs/browser-support.md): What each component needs from the browser, which engines have it, and what the others show instead, stated per component.
### Patterns
- [View transitions](https://moonarc.dev/docs/view-transitions.md): How every component survives ClientRouter navigation, and how to keep GSAP and Lenis working too.
- [Forms that send](https://moonarc.dev/docs/forms.md): One function turns a plain posting form into a fetch with a pending state, spoken status, a thanks-page record and the value back after a failure. The form still posts with JavaScript off.
### Moving over
- [Migrating from React Bits and friends](https://moonarc.dev/docs/migrating-from-react-bits.md): Maps each React Bits, Aceternity, Magic UI, shadcn and Framer Motion component to its Moonarc equivalent and the byte delta.
## Guides
- [An AOS alternative for Astro](https://moonarc.dev/resources/guides/aos-alternative-for-astro.md): AOS keeps animated elements invisible until its script runs, shows elements without animating them after a ClientRouter navigation, and has had no release since October 2018. Reveal does the same job without those problems.
- [GSAP ScrollTrigger with Astro View Transitions](https://moonarc.dev/resources/guides/gsap-scrolltrigger-astro-view-transitions.md): Why ScrollTrigger stops working after a ClientRouter navigation, and the adapter that sets it up on every page and cleans up before the next one.
- [Lenis smooth scroll with Astro's ClientRouter](https://moonarc.dev/resources/guides/lenis-smooth-scroll-astro-clientrouter.md): A navigation made while Lenis is still easing scrolls the next page to the old page's target. lenisPage stops the animation and resyncs Lenis after every ClientRouter swap.
## Registry and agents
- shadcn registry index: https://moonarc.dev/r/registry.json (items at /r/.json)
- MCP server: `npx -y @moonarc/mcp`. Free tools: search_motion(intent, max_js_bytes?, tier?, limit?), get_component(name), get_install_command(names, method?) and get_usage(). With a Pro key also: audit_motion(paths, format?), measure_budget(dist, ceiling?, base?, format?) and compose_section(intent). max_js_bytes counts raw bytes. Setup: https://moonarc.dev/mcp/
- Pro registry index: https://moonarc.dev/r/pro/registry.json (public; items at /r/pro/.json need a license key; @moonarc-pro namespace)
- Agent Skill: https://moonarc.dev/skills/moonarc/SKILL.md (the rules for using the library; install into .claude/skills/moonarc/ or .agents/skills/moonarc/, MIT)
## Templates
- [Templates](https://moonarc.dev/templates.md): Complete Astro sites built from Moonarc Pro sections, from a waitlist page to a shop, an event and a newsletter, with every page's JavaScript measured.
- Waitlist: A pre-launch page that collects email addresses and keeps every one it receives. 3 pages, the heaviest at 9.2 kB raw JS, 5.0 kB gzip. Page: https://moonarc.dev/templates/#waitlist
- Launch: A site for a software product sold by subscription, from the home page to the sign-in. 14 pages, the heaviest at 8.7 kB raw JS, 4.8 kB gzip. Page: https://moonarc.dev/templates/#launch
- Agentic: A site for an AI agent or an MCP product, with the agent shown at work. 10 pages, the heaviest at 8.6 kB raw JS, 4.6 kB gzip. Page: https://moonarc.dev/templates/#agentic
- Studio: The site of a design studio or of one designer, where the work comes first: a project chosen in the index grows into its case study. 14 pages, the heaviest at 23.7 kB raw JS, 9.7 kB gzip. Page: https://moonarc.dev/templates/#studio
- Agency: The site of a business that sells what it does by the package, in colour blocks with drawn pictures: the offer with its prices, the work, the story and a contact form. 14 pages, the heaviest at 6.3 kB raw JS, 3.4 kB gzip. Page: https://moonarc.dev/templates/#agency
- Atelier: The site of a maker or a small product brand: the collection drawn on coloured plates, a page per product with its colourways and a pre-order form, how it is made, what it is made of, and a visit card that knows whether the studio is open. 15 pages, the heaviest at 6.0 kB raw JS, 3.3 kB gzip. Page: https://moonarc.dev/templates/#atelier
- Gather: The site of an event: the name and the dates set large on a poster with a countdown to the doors, the lineup drawn as portraits that turn over to their sessions, the programme by day, the tickets with what is left, and the venue on a drawn map. 8 pages, the heaviest at 5.0 kB raw JS, 2.7 kB gzip. Page: https://moonarc.dev/templates/#gather
- Creator: The site of one person’s work: a bento of soft tiles with a drawn portrait, the latest piece and the count of readers rising, the issues or episodes with a waveform, a signup that shows the next issue, what you sell, kind words pinned up as notes, and what you are on now. 7 pages, the heaviest at 8.3 kB raw JS, 4.6 kB gzip. Page: https://moonarc.dev/templates/#creator
- Endpoint: The site of a developer product with an HTTP API: a console that sends a request and streams the response back, an API reference written from your OpenAPI document, a quickstart and guides, usage pricing with a slider, a status page, the regions on a map and a changelog with a feed. 14 pages, the heaviest at 6.9 kB raw JS, 3.4 kB gzip. Page: https://moonarc.dev/templates/#endpoint
- Homescreen: The site of a mobile app: a phone beside the store buttons, a tour where the phone stays in view and its screen changes with each feature, the widgets and the watch face, the ratings, the plans, what is new by version, support, a privacy page and a press kit. 9 pages, the heaviest at 6.3 kB raw JS, 3.4 kB gzip. Page: https://moonarc.dev/templates/#homescreen
- Estate: The site of an estate agency: the homes for sale or to let as cards that filter with no script, a page per home with its pictures under a magnifier, its floor plan room by room and what it would cost a month, the neighbourhoods, the agents and a viewing request. 14 pages, the heaviest at 7.9 kB raw JS, 4.4 kB gzip. Page: https://moonarc.dev/templates/#estate
- Practice: The site of a practice that readers come to book and to check: the practice as a card that says whether it is open now, the services with a page each, the people with their registrations, the fees as tables with what insurance covers, an appointment request in steps and the notices a regulated practice owes. 19 pages, the heaviest at 8.3 kB raw JS, 4.4 kB gzip. Page: https://moonarc.dev/templates/#practice
- Stay: The site of a place to stay: the place by day and by night with the dates and guests handed to your own booking engine, the rooms drawn with their beds, sizes and prices and a page each, the rates by season, what is around and how far, the house rules and an enquiry form. 15 pages, the heaviest at 6.3 kB raw JS, 3.4 kB gzip. Page: https://moonarc.dev/templates/#stay
## Compare
- [Animation libraries for Astro, measured](https://moonarc.dev/compare.md): The same scroll reveal built with 6 animation libraries in 9 setups on Astro 7.3.5, measured on 2026-10-04 in Chromium, Firefox and WebKit. Without `ClientRouter`, 8 of the 9 setups animate; astro-reveal (default mode) does not, for a reason its card gives. With `ClientRouter`, 2 setups animate on every page: Moonarc (1.3 kB gzip of JavaScript) and Motion for React in a React island (107.9 kB gzip of JavaScript). The other 7 setups lose the reveal on one page or more; each card gives the cause, and the fix where one was measured. Raw results: https://moonarc.dev/compare.json
## Pricing and license
- [Pricing](https://moonarc.dev/pricing/): the plans and what each covers
- [License](https://moonarc.dev/license/): the free MIT primitives and the Pro license
- [Refunds](https://moonarc.dev/refund/)
## About
- [About Moonarc](https://moonarc.dev/about.md): Who builds Moonarc, why it exists, how it is tested and paid for, and what keeps working if it stops.