# casa-viva

The TresPies spine's advanced-animation stack: scroll-driven narrative, a seeded canvas
generative layer, and spring-feel transitions — zero-build, zero-dependency, and held to
the same hard accessibility gates as every other spine stack.

This directory is a **working example**, not a skeleton: a complete, deployable page
about an invented neighborhood ("Rivergate") walking through five data layers that,
combined, explain something none of them explains alone. Every name, figure, and quote
on the page is placeholder content written for this demo — see "Content is placeholder"
below before reusing any of it.

## What's here

```
casa-viva/
├── index.html          the page — English
├── es/index.html        the page — Spanish mirror
├── 404.html              not-found page — English
├── es/404.html           not-found page — Spanish mirror
├── styles.css            this stack's own CSS (reads tokens/motion, adds nothing new)
├── app.js                this stack's own JS — data, canvas, filter, spring, boot
├── tokens.css            vendored, verbatim — spine/kits/tokens
├── motion.js/.css        vendored, verbatim — spine/kits/motion
├── parametric.js         vendored, verbatim — spine/kits/parametric
├── params-panel.css      vendored, verbatim — spine/kits/parametric
├── site-manifest.json    machine-readable index of sections + items
├── llms.txt              agent-facing summary + links
├── robots.txt, sitemap.xml
├── CLAUDE.md              the agent-facing contract for this stack — read this first
│                          if you're an agent extending it; it has the full fallback-
│                          chain writeup and every judgment call made building this.
└── README.md              this file
```

## When to reach for casa-viva vs. its siblings

| If the page is... | Reach for |
|---|---|
| A simple brochure, contact page, or a handful of static sections with no narrative arc | `casa-estatica` |
| Table-, chart-, or dashboard-shaped — the DATA is the interface, not a decorative layer | `casa-datos` |
| A launch page, a story-driven explainer, or a portfolio piece where the scroll itself is the argument | **casa-viva** (this stack) |

casa-viva costs more than the other two: a canvas render loop to maintain, a
scroll-timeline fallback chain to keep honest, and spring physics tuning. Don't pay
that cost for a page that doesn't need motion to carry meaning.

## How to copy and start

1. Copy this whole directory to your new stack's location. There is nothing to
   `npm install` — every file here is either vendored verbatim or hand-authored, and
   the site runs by opening `index.html` or pointing a static file server at the
   directory.
2. Read `CLAUDE.md` in full before changing anything — it names the build order, the
   four capabilities' fallback chains, and (importantly) several judgment calls made
   against real gate behavior that you should understand before "fixing" them again.
3. Replace the "Rivergate" content: `app.js`'s `SIGNALS` and `FIELDNOTES` arrays, the
   hand-authored prose in `index.html`/`es/index.html`, and `site-manifest.json`'s
   `items[]`, all by the same ids. Update `index.html`'s `#signal-list-fallback` and
   `#fieldnotes-fallback` to match (they're the JS-off content — see CLAUDE.md's build
   order for why they're hand-kept in step with the JS data, not generated from it).
4. Update every `https://casa-viva.example.com` reference (head `<link>` tags,
   `robots.txt`, `sitemap.xml`, `llms.txt`, `site-manifest.json`'s `site.url`, the
   JSON-LD blocks) to your real domain. `example.com` is the IANA-reserved
   documentation domain, used here on purpose so nothing in this template looks like a
   real, live URL.
5. Run the gates until green:
   ```bash
   sh verify.sh
   ```
6. Get a native Spanish review on every `es/` string and every `*Es` field in `app.js`
   before shipping — the Spanish here is natural, bilingual-first placeholder, not a
   substitute for that pass. See `spine/kits/i18n/I18N-RULES.md`.

## Content is placeholder

"Rivergate" is not a real neighborhood. Its tenants' association, every signal
(rent, transit, health, income, community), and all three field notes are invented for
this demo — the field notes are attributed to roles ("a tenant organizer," "a
caseworker"), never named people, and are explicitly labeled illustrative on the page
itself. No client names, no dollar figures, no clinical-license language appear
anywhere in this stack; the firm named throughout is TresPies.

## The four capabilities, briefly

Full fallback-chain detail lives in `CLAUDE.md` — this is the one-line version:

1. **Scroll-driven narrative** — native `animation-timeline` (CSS) where
   `CSS.supports()` confirms it; an IntersectionObserver reveal + a rAF scroll readout
   otherwise; a fully-visible static page if neither runs.
2. **Canvas generative layer** — a seeded Canvas2D "signal field" behind the whole page,
   decorative and `aria-hidden`, backed by an always-present CSS gradient wash.
3. **Spring-feel transitions** — `TPMotion.flip()` re-lays the signal list on a layer
   filter; `TPMotion.spring()` opens/closes each field note's detail.
4. **Reduced motion** — every one of the above resolves to a static, complete page
   under `prefers-reduced-motion: reduce`; nothing is ever stuck invisible or
   mid-transition.