# dearcc assets and animations

start with `gallery/index.html`, served over http. all editable originals are in `source/`. these are the complete assets and animation studies from the gameplan onboarding project, plus a runnable react example.

| folder | what it is |
| --- | --- |
| `source/selected-onboarding/` | chosen hello, crew, and peekaboo flow. original react, svg pixel groups, keyframes, shell, and theme. |
| `source/prototypes/avatar-options/` | ten original mascot motions. `selected.html` shows the selected study. |
| `source/prototypes/avatar-lab/` | twenty further mascot motion studies. |
| `source/prototypes/onboarding-animated/` | fifteen first-round animated flows. the gallery is in `onboarding-ideas/`. |
| `source/prototypes/onboarding-fable-v2/` | eight later animated flows. numbered html files hold the scenes, with shared css and js. |
| `source/prototypes/opening-options/` | ten opening screen alternatives. |
| `source/prototypes/onboarding.html` | early standalone onboarding flow. |
| `source/prototypes/onboarding-ideas/` | first-round gallery, concept descriptions, and review notes. |
| `assets/` | all project public assets: inter font, icon sheet, favicon, portrait, and social image. mascot svgs also sit beside their animation code. |
| `react-example/` | isolated, runnable version of the chosen onboarding. |
| `gallery/` | ready-to-serve gallery with every study and the saved compiled demo. |

## preview

```sh
python3 -m http.server 8080 --directory gallery
```

open http://localhost:8080. for the react example, use node 22.12 or later, then run `npm ci` and `npm run dev` inside `react-example`. `npm run build` checks types and builds it.

## notes for the integrating agent

`catalog.json` maps every study file to its title. `manifest.json` lists all files and hashes. choose a study before porting it. the chosen react flow is the default starting point, and the other sets are alternatives.

preserve the mascot svg pixel groups, scoped keyframes, and reduced motion rules. reuse your app's shell and tokens. the original theme has global styles, so don't import it blindly into another app. the original `@ui` import is changed to a relative import only in the runnable example.

the standalone study scripts replace `document.body`. embed them in an iframe, or port scene data and markup into react with refs and listener cleanup. wire final links to your real intake routes. forms in the gallery are demos and do not submit. shortlists stay in browser storage. `gallery/saved/` is compiled reference code, not the source to integrate.