Aurora Background
BackgroundsAmbient 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.
every browseralways
Call to Action
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.
Live demo
Install every primitive with one command.
102 primitives, each with its JavaScript cost measured.
Set up in five minutesSee them run
npx astro add moonarc
Live, from the library itself, at full size: scroll, hover, navigate away and back. The demo is never gated.
Variants · each row writes the attribute the prop writes; the section's own CSS answers
tone
density
align
Measured
JavaScript of its own
0 B
Uses Magnetic and the shared runtime (1.9 kB raw, once per site) and Reveal. With those included: 3.6 kB raw.
CSS 15.4 kB raw including the base tokens. Measured from a production build, and again in CI for every change that can move it.
Browser support
Baseline · widely available
Chrome 120 · Firefox 49 · Safari 14; needs bg-clip-text.
Install Pro
The demo above is never gated; the source is. With a key in components.json (see account), the registry serves it like any other item:
npx shadcn@latest add @moonarc-pro/cta-section---
import CtaSection from '@/components/moonarc/pro/CtaSection.astro';
---
<CtaSection
headline="Add motion to your Astro site"
copy="One command installs every primitive, with no runtime."
primary={{ href: '/setup/', label: 'Set up in five minutes' }}
secondary={{ href: '/components/', label: 'See every component live' }}
command="npx astro add moonarc"
/>Without a key the registry answers 401 with an upgrade message. Everything this section composes is free: aurora, noise, shiny-text, reveal, magnetic, typewriter.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
headline | string | none | Headline; shines every 4 s. |
copy | string | none | Supporting copy. |
primary | { href, label } | none | Primary action, magnetic. |
secondary | { href, label } | none | Secondary action. |
command | string | none | A command typed under the actions. |
tone | 'surface' | 'muted' | 'ink' | 'brand' | 'brand' | The ground: the page surface, a muted band, an always-dark ink panel, or a deep brand panel. Each paints --background, --ma-tone-muted (over --muted, with a --border hairline), --ma-tone-ink or --ma-tone-brand (over --primary) with the matching text. With theme.css, a painted tone also re-declares --card, --border, --input and --ring inside the section, so cards and fields follow the ground. Decoration is strongest on brand. |
density | 'compact' | 'cozy' | 'roomy' | 'cozy' | Block padding ×0.8 / ×1 / ×1.25 through --ma-density. |
align | 'start' | 'center' | 'center' | Text alignment inside the panel. |
Theming and overrides
The section reads the theme contract (shadcn's variable names with the base tokens as fallback), so a pasted theme or one --ma-brand recolours it. Its class names are the override surface and stay stable; a named slot replaces the matching prop with your own markup.
Classes
.ma-aurora.ma-cta.ma-cta__actions.ma-cta__aside.ma-cta__command.ma-cta__copy.ma-cta__eyebrow.ma-cta__headline.ma-cta__inner.ma-cta__primary.ma-cta__secondary.ma-noise
Slots
slot="eyebrow"slot="headline"slot="copy"slot="actions"slot="aside"
Reduced motion
Fades in without scale; the aurora and grain hold still; no shine, no magnet; the command is shown at once.
With ClientRouter
Inherits every part; nothing to wire.
Why it is built this way
- The panel scales from 0.98. A closing section should settle into place, and a larger change such as 0.9 reads as an entrance.
- Aurora at 0.5 with grain at 0.12 gives the panel texture without competing with the headline.
- The headline shines once every 4 s over an aurora that drifts across 18 s: two speeds, so the shine reads as the accent and the aurora as ground.
Replaces: CTA sections (Tailwind Plus) · CTA (shadcnblocks). See the migration table.
Related
Magnetic
PointerA button or icon is pulled toward the cursor while it is nearby and springs back when it leaves.
every browserpointerhover
Noise
BackgroundsFilm grain over a gradient or image, blended and flickering at 12 fps.
every browseralways
Typewriter
TextTypes a string one character at a time in any font, with a caret that stays solid while typing and blinks once idle.
Chrome 116 · not Firefox · Safari 18load
Also: view transitions · how costs are measured · browser support · accessibility policy · five-minute setup · MCP for agents · this page as Markdown