# Feature Rows (Moonarc)

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.

- Pro block. Install: `npx shadcn@latest add @moonarc-pro/feature-rows` (license key required)
- Tier B · category section · trigger scroll
- Readout: `<FeatureRows rows={[…]}> <X slot="visual-0" />`
- Browser support: limited (Chrome 115 · not Firefox · Safari 26); elsewhere: visuals sit in place; the copy still reveals (Firefox)
- Measured cost: 0 B JS of its own · uses Reveal + runtime (with dependencies 3.0 kB raw; CSS 11.6 kB raw)
- Page: https://moonarc.dev/components/feature-rows/

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `rows` | `{ kicker?, title, body, href? }[]` | none | Rows, alternating sides. Put the visual in slot="visual-{index}". |
| `media` | `'right' | 'left' | 'none'` | `alternating` | Side of the visuals: alternating by default, or every visual right or left; none drops them. |
| `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. 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 and the gap between rows ×0.8 / ×1 / ×1.25 through --ma-density. |

## Usage

```astro
---
import FeatureRows from '@/components/moonarc/pro/FeatureRows.astro';
---
<FeatureRows rows={[
  { kicker: '01', title: 'Survives navigation', body: 'Every scripted component rebinds after each swap.', href: { href: '/docs/view-transitions/', label: 'How' } },
  { kicker: '02', title: 'Measured in a real build', body: 'A fixture build per component.' },
]}>
  <img slot="visual-0" src="/nav.png" alt="" />
  <img slot="visual-1" src="/budget.png" alt="" />
</FeatureRows>
```

## Reduced motion

Copy fades in place; visuals are static.

## With ClientRouter

Inherits Reveal and ScrollScrub; nothing to wire.

## Craft

- Copy reveals from the side it sits on, so left rows enter from the left and right rows from the right, so the motion matches the layout.
- The visual is scrubbed, not triggered: it arrives at the pace the reader scrolls, and settles by 35% of its passage.
- Rows are 6 rem apart; alternation needs air or it reads as a zigzag.

## Replaces

- Feature sections with screenshots (Tailwind Plus)
- StickyScroll reveal (Aceternity)

## Source

Pro block. The source is served by the license-gated registry: `npx shadcn@latest add @moonarc-pro/feature-rows` with a key in components.json (https://moonarc.dev/account/). Everything it composes is free: scroll-scrub, reveal.