# Thank-You Notes — template
A small system for designing personalised thank-you notes (or any short
1080×1080 personalised card). Each note is data + a template choice; the
templates handle the layout. Open `Thank You Notes.html` in a browser to see
the deck. Open `Export Notes.html` to download individual PNGs (2160×2160).
## Folder layout
```
.
├── Thank You Notes.html # main deck — design canvas with all notes
├── Export Notes.html # PNG exporter (single + ZIP-of-all)
├── components/
│ ├── thank-you.jsx # the 4 templates (T1–T4) + App
│ ├── notes.jsx # YOUR DATA — edit this
│ ├── design-canvas.jsx # generic pan/zoom canvas (don't edit)
│ └── tweaks-panel.jsx # generic tweaks panel (don't edit)
└── photos/ # drop guest photos here (you create this)
├── alex-1.png
├── alex-2.png
└── …
```
## How a note is structured
Every note in `components/notes.jsx` looks like this:
```js
{
id: "alex", // unique slug — also drives photo filenames
template: 1, // 1 | 2 | 3 | 4 — see "Templates" below
greet: "Alex", // the big headline ("Dear ___,")
eyebrow: "A thank you note · 12 · IV · MMXXVI",
body: [ // each string = one paragraph
"Hey — thanks so much for coming.",
"It really meant a lot.",
],
photos: ["alex-1.png", "alex-2.png"], // 1 or 2; first is "primary"
}
```
## Templates
Pick the template based on photo count + orientations:
| # | Layout | Best for |
|---|-------------------------------------|------------------------------|
| 1 | Text left · photo right (tall) | 1 portrait, OR 2 portraits side-by-side, OR portrait + landscape (P+L stack on the right) |
| 2 | Photo left (full-height) · text right | 1 portrait |
| 3 | Photo on top · text below | 1 landscape (full-bleed top), OR 2 landscapes (split) |
| 4 | "THANK YOU" headline + photos | Bold cover-style — uses a big "THANK YOU" word |
Auto-detection of "two portraits" lives in `notes.jsx` via the `PHOTO_ORIENT`
registry — register every photo's orientation there:
```js
const PHOTO_ORIENT = {
"alex-1": "portrait", // 0.75 ratio
"alex-2": "landscape", // 1.33 ratio
// …
};
```
If both photos for a 2-photo note are tagged `portrait`, T1 / T2 / T3 will
automatically lay them out side-by-side instead of stacked.
## Photo cropping (object-position)
If a photo's face/subject is getting cropped (e.g. heads cut off the top in a
square frame), add it to `PHOTO_POS`:
```js
const PHOTO_POS = {
"alex-2": "center top", // anchor the photo to the top
"muffin-1": "center bottom",
};
```
Default is `center` (centred crop). Values are valid CSS `object-position`
keywords or percentages.
## Adding a new note — checklist
1. Drop the photo(s) into `photos/`. Name them `<id>-1.png`, `<id>-2.png`.
2. Open `components/notes.jsx`.
3. Add an entry to `PHOTO_ORIENT` for each photo (`"portrait"` or `"landscape"`).
4. If a photo crops badly, add it to `PHOTO_POS`.
5. Add an entry to the `NOTES` array. Pick a `template` based on photo count + orientation (see table above).
6. If the photo files don't follow the `<id>-N.png` convention, override
in `PHOTO_REGISTRY`:
```js
const PHOTO_REGISTRY = {
alex: ["IMG_1234.jpg", "IMG_5678.jpg"], // direct filenames
};
```
7. Open `Thank You Notes.html` in your browser to verify.
## Tweaks (per-note text fine-tuning)
The deck has a "Tweaks" panel (toggle from the toolbar in the preview if you're
running in Anthropic's design tool, or it's just on by default in plain
browsers). Each note exposes:
- **Body size** — px
- **Line-height** — multiplier
- **Paragraph gap** — px between paragraphs
- **Vertical align** — top / middle / bottom
Defaults live in `TPL_DEFAULTS` near the top of `thank-you.jsx`. Change them
there if you want to shift every note of a given template.
## Exporting PNGs
Open `Export Notes.html`. You get:
- Per-card "Download" → one PNG
- "Download all (ZIP)" → all 16 in `thank-you-notes.zip`
Each PNG is 2160×2160 (2× retina from the 1080 design). For digital sharing —
Instagram, WhatsApp, email, AirDrop. Bump `PIXEL_SCALE` in `Export Notes.html`
to 3 if you need 3240×3240.
## Tips for prompting Claude Code
When using Claude Code in this folder:
- "Read CLAUDE.md, then add a note for `<name>` to `notes.jsx` — text follows."
- Always provide: the recipient's name, body text (2-4 short paragraphs is
ideal), photo filenames, and photo orientations.
- Claude will pick a template; tell it which one if you have a preference.
## Tech notes
- React 18 + Babel-standalone (in-browser JSX). No build step.
- Each `<script type="text/babel">` shares global scope — that's why
`notes.jsx` exports onto `window` and `thank-you.jsx` reads `window.NOTES`.
- The design canvas is a generic component (`components/design-canvas.jsx`).
It saves order/labels to `.design-canvas.state.json` only when running in
Anthropic's design tool — in a plain browser, that's a no-op fetch.
- Fonts come from Google Fonts via `<link>` in the HTML head.
Have fun. Don't write smug eyebrow lines.