Skip to content

New in Pro11 GPU effects: smoke, ripples, silk, chromeOpen source / MIT · 0.1.0

Motion components for Astro that keep working after every navigation.

Text, scroll, pointer, backgrounds, UI and page transitions: 125 primitives, 83 of them at 0 B, each with its JavaScript cost measured from a real build and printed beside it. What most of them cost: 0 B, nothing, zero

Set up in five minutesEvery component, live

$ npx astro add moonarc

01Library

The components, running live.

125 primitives, MIT forever. Every tile is the component itself, not a recording, and under each one: the props and the price.

Browse all 125 →
01

Scroll Reveal

Once and stays, per-child stagger, survives every navigation.

02

Split Text

Split on the server; one string to a screen reader.

page one

Hero.

page two

Hero.

Try the real swap →
03

Page Transition

Name a region on two pages and it animates between them with a native view transition.

04

Count Up

CSS counters driven by one custom property. The HTML already holds the number.

05

Marquee

Two copies, one translate, no seam. Pauses on hover.

06

Tilt

Follows in 80 ms; settles on the preset spring.

07

Aurora Background

Three fields at coprime speeds, a hue that turns, film grain at 12 fps.

Available forAstro 5Astro 6Astro 7staticserverwith or without TailwindAll 125 →
02Motion theme

Five spring presets, switched with one attribute and no JavaScript.

No component hard-codes a curve. Pick a preset and every reveal, tab, dialog and tilt on this page retunes. The switch is a CSS :has() on the root, and consumers set data-ma-preset on <html>.

The tokens →
stiffness: 1218damping: 70settles in: 290 ms--ma-ease: linear(…)html[data-ma-preset="snap"]
stiffness: 305damping: 33settles in: 450 ms--ma-ease: linear(…)html[data-ma-preset="ui"]
stiffness: 110damping: 20settles in: 760 ms--ma-ease: linear(…)html[data-ma-preset="gentle"]
stiffness: 622damping: 17settles in: 840 ms--ma-ease: linear(…)html[data-ma-preset="lively"]
stiffness: 43damping: 13settles in: 1390 ms--ma-ease: linear(…)html[data-ma-preset="ambient"]
03Measured

Switching effects on adds no JavaScript.

The counter reads the bytes this page actually loaded for the library, from the Performance API. Every switch adds an effect and adds nothing to it, because these are CSS with a shared runtime underneath (1.9 kB raw).

How it is measured →

library JavaScript on this page

3.7 kB raw

runtime + Reveal + Tilt, read live from the Performance API

primitives
125
at 0 B
83
own script
3233.0 kB raw in all

From a React library, the same effects run in a React island. React and ReactDOM cost 67 kB gzip and Motion for React 41 kB gzip, both measured on /compare/react/. React Bits' Aurora adds OGL, whose whole package is 33 kB gzip on Bundlephobia. The table.

split

Split on the server, revealed in view.

aurora
rotate

Ship less, nothing, CSS to the browser.

type

$ every byte, measured

reveal
  • once
  • stagger
  • scrub
  • reduced
marquee
revealsplitrotatetypemarqueeaurora

Six tiles, six switches. Off is a tile with only its name; on adds the effect and not a byte.

04Navigation

Components keep working after every ClientRouter navigation.

Astro bundles a component's script once and never re-runs it after a ClientRouter swap. Every scripted component here binds through one runtime that re-attaches after each navigation, cleans up before it, and never double-binds. This is verified in a real browser on Astro 5, 6 and 7, every release.

Navigate and watch the counter →

this session

1 page views · 0 teardowns · 0 live bindings

Bindings equal the reveal elements on this page; teardowns equal navigations. Nothing accumulates.

This counter is the runtime's own bookkeeping. How it works.

Your GSAP works too

layout script
import { gsapPage } from '@moonarc/core/gsap';

gsapPage(gsap, () => {
  gsap.from('.hero h1', { y: 24, opacity: 0 });
  ScrollTrigger.create({ trigger: '.pinned', pin: true });
}, { scrollTrigger: ScrollTrigger });

The adapters run gsap.context() per page view and revert it before the swap, and keep one Lenis for the life of the document.

05Showcase

Ten components running; nine of them load no JavaScript.

The catalogue →
06UI

UI parts that CSS can now animate.

Accordion, tabs, popover, dialog, carousel, drawer. The browser owns open, close, focus, escape and position, and the motion is @starting-style, allow-discrete, anchor positioning and scroll markers, with the support stated on every card.

The support audit →
Zero JavaScript?

For this one, yes. The browser animates the height.

Keyboard?

Native: Tab, Enter, Space.

One at a time?

details name=, also native.

01

Accordion

Native <details> items whose height animates open and closed, with an optional one-at-a-time rule the browser enforces.

npx astro add moonarc
pnpm astro add moonarc
npx shadcn@latest add …/r/tabs.json
02

Tabs

Tabs with an indicator that slides to the selected one and panels that fade in.

Raw bytes of JavaScript, from a production build, measured again for every change that can move them.

03

Popover

A popover that opens beside its trigger, flips when there is no room, closes on outside click or Escape, and animates in and out.

dialog

Native, animated, zero script.

Escape, backdrop click and focus are the browser's. The scale and the blur are @starting-style and allow-discrete.

04

Dialog

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.

One
Two
Three
Four
Five
05

Carousel

A scroll-snap strip with previous/next buttons and dot markers that the browser generates and keeps in sync.

drawer

Drag it down.

Follows the finger; on release, distance or velocity decides. Grab it mid-flight and it obeys.

06

Drawer

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.

07Sections · Pro

Whole sections, composed from the same parts.

108 sections built from the free primitives, with the timings that read well and the cost of each printed. The demos are never gated; the source and the install command are.

What Pro is for →

Field Hero

Pro

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.

newly · Chrome 125 · Firefox 128 · Safari 17loadpointer

Terminal Hero

Pro

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.

Chrome 116 · not Firefox · Safari 18load

Feature Atlas

Pro

Lays out features as a bento grid: one slab split by 1 px hairlines, with the page ground showing through the gaps.

every browserscroll

Free

$0/yr

MIT, forever

  • 125 primitives, no account, no token
  • Runtime, GSAP and Lenis adapters
  • Public shadcn registry
  • MCP server
Set up in five minutes

Pro

$129/yr

One person, billed yearly

  • 108 sections and 11 GPU effects, demos never gated
  • Every template: Waitlist, Launch, Agentic, Studio, Agency, Atelier, Gather, Creator, Endpoint, Homescreen, Estate, Practice, and Stay
  • audit_motion and measure_budget, locally and in CI
  • compose_section with a total cost
  • New components monthly, dated changelog
  • Email support within 2 working days
Not open yet: see the plan

Team

$349/yr

Up to 10 people, one invoice

  • Everything in Pro, for the whole team
  • One key for the team, locally and in CI
  • Move up from Pro at any time
  • More than 10 people: email us
Talk to us

Pricing Cards

Pro

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.

newly · Chrome 125 · Firefox 128 · Safari 16.4scrollclick

Stats Row

Pro

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.

newly · Chrome 91 · Firefox 128 · Safari 17scroll

Questions people actually ask

Short answers. The long ones are in the docs.

Is it really zero JS?

For 83 of 125, yes, measured from a build.

Does it survive View Transitions?

Yes, verified on Astro 5, 6 and 7.

Do I need Tailwind?

No.

FAQ

Pro

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 <details>.

newly · Chrome 131 · Firefox 143 · Safari 18.4scrollclick

Steps / Timeline

Pro

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.

Chrome 115 · not Firefox · Safari 26scroll
Release

Endpoint, Homescreen, Estate, Practice and Stay, templates for developer products, mobile apps, estate agents, practices and places to stay, and thirty sections

Endpoint, a template for a product with an HTTP API: a console on the home page that sends a request and streams the response back with its status, its time and its region, an API reference written at build from your OpenAPI document, a quickstart and four guides, usage pricing with a slider, a status page, the regions on a map, a changelog with a feed, search and a contact page for sales.

Blog Grid

Pro

Shows blog posts as cards, with the first post featured across two columns.

newly · Chrome 111 · Firefox 144 · Safari 18scrollhoverclick
08Replaces

Coming from React Bits, Aceternity, Magic UI?

Each primitive names what it replaces. Click a library to see exactly which of your components map to one here, and what the byte delta is.

The migration table →
Aceternity44
  • Accordion
  • Animated Beam
  • Aurora Background
  • Avatar Stack
  • Border Beam
  • Card Stack
  • +38 more
Magic UI43
  • Animated Beam
  • Animated List
  • Arrow Button
  • Avatar Stack
  • Border Beam
  • Browser Frame
  • +37 more
React Bits42
  • Animated List
  • Aurora Background
  • Border Beam
  • Bubble Text
  • Card Stack
  • Carousel
  • +36 more
shadcn / Radix28
  • Accordion
  • Animated Select
  • Avatar Stack
  • Carousel
  • Check Draw
  • Code Tabs
  • +22 more
Framer Motion12
  • Animated List
  • Filter Grid
  • Lightbox
  • Motif
  • Page Transition
  • Pill Nav
  • +6 more
GSAP8
  • Card Stack
  • Fill Text
  • Horizontal Scroll
  • Magnetic
  • Parallax
  • Scroll Scrub
  • +2 more
09Developer tools

Tools for your build, your agent and your CI.

Docs →
10Updates

The latest changelog entry.

Changelog →

2026-10-09 · 0.1.2 (unreleased): Endpoint, Homescreen, Estate, Practice and Stay, templates for developer products, mobile apps, estate agents, practices and places to stay, and thirty sections

125 primitives, 83 of them at zero bytes.

Endpoint, a template for a product with an HTTP API: a console on the home page that sends a request and streams the response back with its status, its time and its region, an API reference written at build from your OpenAPI document, a quickstart and four guides, usage pricing with a slider, a status page, the regions on a map, a changelog with a feed, search and a contact page for sales. Six kinds of product from one source (an email API, serverless Postgres, a search API, feature flags, a media API and a log API), six palettes, three of them dark, and three type pairings, each one line of config.

JavaScript on this page: 43.1 kB raw, 19.7 kB gzip, Astro's router included.

Start

$ npx astro add moonarc

Set upComponents