# Notes Wall (Moonarc)

Kind words from readers, listeners or students, pinned up as notes: each a card in one of the palette's tints with a strip of tape across its top, tilted a little by its words (the same tilt on every build), the quote and who wrote it with where they are. The notes fall into columns that fill top to bottom, so notes of any length hang without gaps. As they scroll in they settle into place, rising from a little lower and more askew on a view timeline; where there is none, or under reduced motion, they hang still. Zero JavaScript.

- Pro block. Install: `npx shadcn@latest add @moonarc-pro/notes-wall` (license key required)
- Tier B · category section · trigger scroll
- Readout: `<NotesWall notes={[{ quote, who, where }]} />`
- Browser support: limited (Chrome 115 · not Firefox · Safari 26); elsewhere: the notes hang still at their tilt where there is no view timeline (Firefox); without container units the wall stays one column
- Measured cost: 0 B JS (CSS 10.0 kB raw)
- Page: https://moonarc.dev/components/notes-wall/

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `notes` | `{ quote: string; who: string; where?: string; block?: 1 | 2 | 3 | 4 | 5 }[]` | none | The notes, in order. who is a name, or a role in a sample ("Reader since 2023"); where is where they are or what they do, under the name; block is the note's tint (the first four in turn when unset). The tilt is hashed from the quote. |
| `eyebrow` | `string` | none | A short line above the heading. Slot "eyebrow" wins. |
| `headline` | `string` | none | The heading. Slot "headline" wins and may hold an <em>, set in the emphasis face and colour. |
| `copy` | `string` | none | A line under the heading. |
| `level` | `2 | 3` | `2` | Heading level of the section's heading. |
| `tone` | `'surface' | 'muted' | 'ink' | 'brand'` | `unset (paints nothing)` | The section's ground; the notes keep their blocks on every tone. |
| `density` | `'compact' | 'cozy' | 'roomy'` | `'cozy'` | Block padding ×0.8 / ×1 / ×1.25 through --ma-density. |

## Usage

```astro
---
import NotesWall from '@/components/moonarc/pro/NotesWall.astro';
---
<NotesWall
  eyebrow="Kind words"
  notes={[
    { quote: 'The only email I read the minute it arrives.', who: 'Reader since 2023', where: 'Lisbon' },
    { quote: 'I finished the course in a week and sold my first print the week after.', who: 'A student', where: 'Illustrator' },
    { quote: 'Short, specific and never padded.', who: 'A listener' },
  ]}
>
  <span slot="headline">What readers <em>write back</em></span>
</NotesWall>
```

## Reduced motion

The notes hang still at their tilt, without settling in.

## With ClientRouter

CSS only; nothing to rebind.

## Craft

- Each note's tilt is hashed from its words, in steps of 0.55 degrees up to 2.2 either way, so a wall keeps its look between builds and two notes seldom lean alike.
- The wall is CSS columns with notes that do not break across them, so cards of any length pack top to bottom without gaps or a masonry script, and the order on the screen is the order in the page.
- The tape is a translucent strip of the page background tilted against the note, so it reads as tape on any tint and in dark mode.
- Each note settles on its own view timeline and is in place a third of the way across the screen. Scrolling back reverses it, and where there is no view timeline the notes simply hang.

## Replaces

- Testimonial walls (Tailwind Plus, Magic UI)
- Embedded review walls (Senja, Testimonial.to)

## Source

Pro block. The source is served by the license-gated registry: `npx shadcn@latest add @moonarc-pro/notes-wall` with a key in components.json (https://moonarc.dev/account/).