# Call to Action (Moonarc)

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.

- Pro block. Install: `npx shadcn@latest add @moonarc-pro/cta-section` (license key required)
- Tier B · category section · trigger scroll, pointer
- Readout: `<CtaSection headline="…" primary={{…}}>`
- Browser support: widely (Chrome 120 · Firefox 49 · Safari 14)
- Measured cost: 0 B JS of its own · uses Magnetic + runtime + Reveal (with dependencies 3.6 kB raw; CSS 15.4 kB raw)
- Page: https://moonarc.dev/components/cta-section/

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

## Usage

```astro
---
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"
/>
```

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

## Craft

- 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)

## Source

Pro block. The source is served by the license-gated registry: `npx shadcn@latest add @moonarc-pro/cta-section` with a key in components.json (https://moonarc.dev/account/). Everything it composes is free: aurora, noise, shiny-text, reveal, magnetic, typewriter.