# altrice generator kit

All output is real vector SVG (flat filled compound paths: no filters, no images, no CSS).

## How the geometry works
The mark is a 3D model: 21 slabs (merged from the 39 quads in your `3d.stl`, which are coplanar halves),
all parallel to one plane, stacked at different depths. A perspective camera fitted to your original SVG
projects them (median error 0.07 units on a 171-unit mark; see `source/`). Each slab has real thickness
along the plate normal, so the side faces (the black bars) come from the geometry, not a screen-space offset.
Stripes are drawn in each plate's own plane and mapped through the camera, so they foreshorten correctly.
Occlusion is exact polygon boolean math, back to front.

## 1. Browser tool (no install, works offline)
Open `altrice-generator.html`. It opens on the exact logo. "Reset to the logo" returns there.
- plain faces: the logo itself. Untick for bands.
- Dazzle 0-3, ground (paper / solid ink / camouflage / none), seed with prev/next/random.
- Slip: slides plates along their long axis. 0 = the exact plate layout.
- Thickness: slab thickness along the plate normal (default 0.0233 = your model).
- Perspective: 1 = the logo's camera, 0 = parallel, up to 2.5. Yaw / Pitch turn the view (+-45 deg; past about 17 deg
  the camera can pass edge-on to the plates, so expect extreme shapes).
- Canvas presets (18x24 in poster, Letter, A4, business card ...), mark size and offset, colors.
- Download SVG, copy SVG, 12-seed contact sheet. The recipe box holds the exact settings as JSON; paste one back and press Enter.

## 2. Command line (Node 18+)
    node altrice-gen.mjs --seed 1 --plain --slip 0 --out logo.svg          # the exact logo
    node altrice-gen.mjs --seed 34 --dazzle 2 --out a.svg
    node altrice-gen.mjs --seed 100..131 --outdir out/                      # batch, one SVG per seed
    node altrice-gen.mjs --seed 7 --w 18 --h 24 --unit in --ground ink --out poster.svg
    node altrice-gen.mjs --seed 12 --yaw 20 --pitch -12 --persp 1.4 --out turned.svg
    node altrice-gen.mjs --help
Same seed + same flags = identical file. Seed code is shown as ALT-XXXX.

## 3. Using the SVGs
Layers (ids): paper/ground, ground-ink, faces, ink. Open in Illustrator, Affinity, Inkscape or Figma.
Colors are plain hex RGB (--ink, --paper): set spot / CMYK in your layout app.
PDF: `inkscape f.svg --export-type=pdf`, or Illustrator Save As PDF.

## 4. Social and video frames
13 frames, each sized for the platform with the mark fitted inside that platform's safe area:

| id | size | |
|---|---|---|
| yt-banner | 2560x1440 | channel banner; mark in the 1546x423 all-devices zone |
| yt-thumb | 1280x720 | clear of the timestamp badge |
| yt-video / yt-video-4k | 1920x1080 / 3840x2160 | title-safe 90% |
| yt-short | 1080x1920 | vertical-video safe zone |
| yt-avatar | 800x800 | circle crop |
| ig-square / ig-portrait | 1080x1080 / 1080x1350 | portrait also marks the 3:4 profile-grid crop |
| ig-story / ig-reel | 1080x1920 | story: top and bottom 250 clear; reel: caption stack and buttons clear |
| ig-avatar | 1080x1080 | circle crop |
| tt-video | 1080x1920 | top bar, caption stack and right-hand buttons clear |
| tt-avatar | 720x720 | circle crop |

CLI:

    node altrice-gen.mjs --list-frames
    node altrice-gen.mjs --seed 34 --frame yt-thumb --out thumb.svg
    node altrice-gen.mjs --seed 34 --frames all --guides --outdir frames/        # all 13
    node altrice-gen.mjs --seed 34 --frames instagram --ground dz --outdir ig/   # one platform (youtube | instagram | tiktok)
    node altrice-gen.mjs --seed 34 --frame yt-banner --bleed 1.8 --ground dz --out banner.svg   # mark scaled up, cropped hard

Browser tool: pick a frame in the Canvas preset list, or press "All social + video frames (.zip)" to download all 13 for the current seed and look.

- `--guides` / "add safe-zone guides" adds a hidden layer named `safe-zones` (pink dashed = safe areas and UI-overlay zones, blue = trim). Turn it on in Illustrator or Inkscape to check placement, then delete it before export.
- Anything that bleeds past the frame is clipped to the trim, so the files hold no geometry off the canvas.
- Video: these are stills. For a sequence, vary the seed (`--seed 1..240 --frame tt-video --outdir seq/`) or the view (`--yaw`, `--pitch`), rasterize the SVGs (Inkscape, or `rsvg-convert`) and assemble with ffmpeg.
- Platforms change their safe areas and UI from time to time. These values are the commonly published ones; check the current guidance before a campaign.

## marks/
`altrice-original.svg` is your supplied artwork; `logo.svg` and `wordmark.svg` are copies recolored to #15151A.

## source/
`3d.stl`, `2D.ai` (your files), `model.json` (plates, basis and fitted camera), and the fitting scripts.

## Hosting

Upload the folder to any static host over HTTPS; `index.html` is the landing page. No backend needed.

## Motion templates: lower third, intro, outro (`altrice-motion.html`)

Open `altrice-motion.html` in a browser (works offline). Three templates, each in 16:9, 9:16, 1:1 and 4:5:

- **Lower third (chyron):** paper chip with the animated 'a', ink name bar, paper title bar, optional 'altrice' wordmark, camouflage end-cap. Plates slide in along their own axes, hold, then slide out. Transparent background.
- **Intro:** the 'a' assembles plate by plate, wordmark and headline/subline reveal. Ground: solid ink, paper or camouflage.
- **Outro / end screen:** lockup, call to action, handle, URL. Optional dashed placeholder slots (16:9) for end-screen video cards.

Edit the text fields, wordmark on/off, seed (changes the camouflage), dazzle level, ground, colors, hold time, frame rate. The mark is re-projected from your STL/AI geometry every frame, so it is true vector in motion.

**Export**
- *PNG sequence (.zip)*: one PNG per frame at full resolution. The lower third has real alpha. Import as an image sequence at the frame rate you chose (Premiere, After Effects, Resolve, Final Cut).
- *Record video*: real-time capture (MP4 or WebM depending on browser). Opaque only.
- *This frame as SVG*: the current frame as vector (text is live, so install Bricolage Grotesque and DM Mono or convert to outlines).

**Live (OBS, CasparCG, vMix):** add the page as a browser source (transparent background). Use the URL shown under "Live" in the tool, e.g. `altrice-motion.html?t=lower&ar=16x9&name=Ada&title=Host&live=1`. The page exposes `play()`, `stop()` and `update({...})`. With `live=1` it animates in and holds; call `stop()` to animate out.

`samples/video/` has rendered examples (lower thirds as VP9 WebM with alpha, intros and outros as H.264 MP4).