# Prompt Hero (Moonarc)

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.

- Pro block. Install: `npx shadcn@latest add @moonarc-pro/hero-prompt` (license key required)
- Tier A · category section · trigger load
- Readout: `<HeroPrompt headline="…" placeholders={[…]} examples={[…]} status="Ready">`
- Browser support: newly (Chrome 123 · Firefox 152 · Safari 26.2); elsewhere: without field-sizing the box keeps its rows and a resize handle; without registered properties the example tasks cross-fade in place
- Measured cost: 0 B JS of its own · uses PromptInputSubmitOnEnter + runtime (with dependencies 2.0 kB raw; CSS 26.8 kB raw)
- Page: https://moonarc.dev/components/hero-prompt/

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `headline` | `string` | none | The headline; eight words or fewer read best. The headline slot wins over it. |
| `label` | `string` | none | The small line above the headline, in the monospace face and sentence case. The label slot wins over it. |
| `lead` | `string` | none | The paragraph under the headline. The copy slot wins over it. |
| `placeholders` | `string[]` | `['Describe a task']` | Example tasks for the placeholder line, up to three. With two or more, the line cycles through them once (4.8 s at most) and settles on the first, which is also the textarea's own placeholder. |
| `status` | `string` | none | The status line under the box while the agent is ready. A highlight sweeps it twice, then it rests. |
| `examples` | `{ label, href }[]` | none | Example tasks under the box, up to four: links to a demo page with the task's slug (/demo/?task=refactor), never the typed text. |
| `examplesLabel` | `string` | `'Try'` | The word before the examples, which also names their list. |
| `action` | `string` | `'/demo/'` | Where the form goes. The default is a demo page. |
| `method` | `'get' | 'post'` | `'get'` | The form's method. |
| `name` | `string` | none | The textarea's name. Unset, it has none and the form sends no text, so a typed prompt never lands in a URL. Set it, with an action of your own, to send the prompt to your app. |
| `promptLabel` | `string` | `'Describe a task'` | Accessible name of the textarea. |
| `sendLabel` | `string` | `'Run'` | Visually hidden name of the send button. |
| `rows` | `number` | `3` | Rows the box shows when empty; it grows with its text to eight. |
| `glow` | `boolean` | `false` | A soft light from the accent behind the box. |
| `orb` | `boolean` | `false` | The Orb behind the box, still and dimmed, hidden from screen readers. Wins over glow: one depth cue at most. |
| `level` | `1 | 2` | `1` | Heading level of the headline: 1 on the page's own hero, 2 under another h1 (a demo). |
| `tone` | `'surface' | 'muted' | 'ink' | 'brand'` | `unset (paints nothing)` | The ground: the page surface, a muted band, an always-dark ink panel, or a deep brand panel. With theme.css the box and the examples take the tone's card, and their text and edge the tone's text. |
| `density` | `'compact' | 'cozy' | 'roomy'` | `'cozy'` | Block padding and the gap above the box ×0.8 / ×1 / ×1.25 through --ma-density. |
| `align` | `'center' | 'start'` | `'center'` | Alignment of the label, the headline, the lead and the examples. |

## Usage

```astro
---
import HeroPrompt from '@/components/moonarc/pro/HeroPrompt.astro';
---
<!-- a demo form: it goes to /demo/ and sends no text. Give it a name and an action of your own to wire it to your app -->
<HeroPrompt
  label="Release 2.1"
  headline="Hand the failing build to an agent"
  lead="Describe the task. The agent reads the logs, changes the code and asks before it merges."
  placeholders={['Fix the failing checkout test', 'Update the lockfile', 'Explain why main is red']}
  status="Ready · 3 repositories connected"
  examples={[
    { label: 'Fix a failing test', href: '/demo/?task=fix-test' },
    { label: 'Update dependencies', href: '/demo/?task=update-deps' },
  ]}
  action="/demo/"
  glow
/>
```

## Reduced motion

The first example stands still as the textarea's placeholder: no cycle, no blinking caret and no sweep on the status line.

## With ClientRouter

CSS only, and PromptInput's Enter script rebinds through the shared runtime; a new page restarts the cycle.

## Craft

- The cycle runs once and comes back to the first example, which is the textarea's own placeholder: after five seconds nothing moves, and reduced motion shows the same line with no motion at all.
- The cycling line is drawn over the textarea where its placeholder would be and takes no pointer; the textarea's own placeholder is made transparent through PromptInput's --ma-prompt-placeholder token while the line is drawn, and both give way to typed text.
- The accent is only on what is live: the caret, the status dot and the sweep. The send button stays in the text colour.
- A demo form sends nothing: no name on the textarea, method="get" to a page. A reader who types a secret into a demo never finds it in the address bar or a server log.

## Replaces

- Hero with AI input (Lovable style)
- PlaceholdersAndVanishInput hero (Aceternity)

## Source

Pro block. The source is served by the license-gated registry: `npx shadcn@latest add @moonarc-pro/hero-prompt` with a key in components.json (https://moonarc.dev/account/). Everything it composes is free: prompt-input, rotating-text, shiny-text, orb.