DESIGN.md@examples/ui-acme-trips git:20261010.35e230aA

Immutable. This exact content never changes and is served at /api/v1/blob/6b3531ab20fe4014.

# Design: ui-acme-trips

The spec `src/film.html` was built from. Boxes, sizes and output pixels are the values `render.mjs layout` measured; times are on the 120 BPM grid.

## Canvas and device

- 1080 x 1080, 60 fps, 12.000 s = 720 frames, hold loop.
- Live area 104 to 976 on both axes (margin 104). Baseline unit 8 px for the callouts and the lockup.
- Tempo 120 BPM: beat 0.5 s, 16th 0.125 s, bar 2 s. Every action starts on a 16th.
- Device: a phone, screen 360 x 760 units at scale 1 (a unit is a pixel at rest), centre (392, 540): the body spans 200 to 584 by 148 to 932, the screen 212 to 572 by 160 to 920. Screen radius 46, bezel 12, body `ink` with a 2 px `edge` outline, side buttons, a camera dot. A soft `shade` shadow, blur 40, 30 down.
- Callouts in the right column, 656 to 937: 72 px clear of the phone.

## Palette

| Role | Hex | Used for | Contrast on its backdrop |
|---|---|---|---|
| bg | #EEF1F6 | the film's background | |
| ink | #0E1116 | callouts, the lockup name, UI titles, the phone body, the toast | 16.70:1 on bg, 18.91:1 on paper |
| paper | #FFFFFF | screens, trip titles on `deep`, the Save label, the toast label | 12.35:1 on deep, 5.74:1 on brand, 18.91:1 on ink |
| line | #DCE1E8 | skeleton bars | |
| muted | #5A6272 | the small print | 5.42:1 on bg |
| brand | #2356F0 | the Save button, the icon tile, leader dots, the domain, the saved label | 5.07:1 on bg, 4.76:1 on tint |
| tint | #E2EAFE | the saved state, the avatar | |
| sky, haze, deep | #BCD7FF, #8DB3EE, #15326B | the trip pictures: one blue hue, light to dark | |
| sun, roof, sand | #FFC247, #E1623A, #F6E4C4 | the pictures' warm accents; the toast's tick (11.76:1 on ink) | |
| shade, edge | #C3CCD8, #39404C | the phone's shadow and outline | |

The only crossfade is the Save button, brand to tint (one hue). Scrims, the ripple and the finger are ink or paper at partial opacity.

## Type roles

| Role | Face | Sizes | Use |
|---|---|---|---|
| ui | Inter 600 | 24 to 26 units | the avatar's initials (24 px), Save / Saved (26 px), the toast (24 px), the clock (16, chrome) |
| display | Inter Tight 800 | 32 to 40 units on screen; cap 52 (70.8 px) for callouts; cap 72 (98 px) for the lockup | trip titles (32 px in the list, 36 px on the Lisbon screen), "Trips" (40 px), callouts, ACME TRIPS |
| mono | IBM Plex Mono 500 | 34 and 24 px | EXAMPLE.COM (+60 tracking), the small print (+20) |

Callouts take `space: 80` (Inter Tight closes word spaces at display sizes) and a `T.` pair of -30.

## Screens

### trips

| Layer | Type | Box (x, y, w, h) | Paint | Notes |
|---|---|---|---|---|
| TRIPS | text | baseline 112, x 24 | display 40, ink on paper | cap top 83 |
| ME | avatar | 280, 68, 56, 56 | tint, initials AK in brand | 24 px initials |
| KYOTO | card | 20, 140, 320, 256 | the Kyoto picture at 8/9 | radius 24 |
| LISBON | card | 20, 416, 320, 256 | the Lisbon picture at 8/9 | the expand source |
| OSLO | card | 20, 692, 320, 256 | the Oslo picture at 8/9 | |
| (bar) | rect, fixed | 0, 0, 360, 50 | paper | the list scrolls under the status bar |

Each picture is 360 x 288 units: a sky, a 72-unit sun, hills or roofs, and an 80-unit `deep` band at the bottom carrying the city's name (display 36, paper, baseline 262). Content height 972 units; the scroll of 184 keeps inside it (0 to 212).

### lisbon

| Layer | Type | Box (x, y, w, h) | Paint | Notes |
|---|---|---|---|---|
| HERO | image | 0, 0, 360, 288 | the Lisbon picture at 1 | the list card is this, at 8/9 |
| BACK | button | 16, 54, 48, 48 | paper, back chevron in ink | |
| meta | icon + bars | 24, 314 and 184, 314 | calendar and pin in brand, bars in line | |
| paragraph | bars | 24, 376, 312 wide, 3 lines | line | |
| plan rows | rect + bars | 24, 480 and 24, 564 (64 x 64) | sand, sky; bars in line | |
| SAVE | button | 24, 660, 312, 64 | brand, bookmark + "Save" in paper; state `saved`: tint, check + "Saved" in brand | |
| TOAST | toast | 82, 60, 196, 60 | ink, tick in sun + "Saved" in paper | drops from above the screen |

## Script

| Beat | Time (s) | Action | Notes |
|---|---|---|---|
| 0.25 | 0.125 | the phone rises | from dy 1160, LIFT (lands 0.45) |
| 1 | 0.500 | finger in | from below right to (214, 628) on the Lisbon card, MOVE |
| 2 | 1.000 | scroll 184 | the finger drags 156 up; the content settles on SCROLL (lands 1.46) |
| 3 | 1.500 | PLAN IT. in | leader to the Lisbon card |
| 4.5 | 2.250 | move to Lisbon | lands 2.56 |
| 5.25 | 2.625 | tap Lisbon | press, ripple, release a 16th later |
| 5.5 | 2.750 | PLAN IT. out | |
| 5.75 | 2.875 | expand into lisbon | EXPAND lands 3.24; the list dims |
| 6.25 | 3.125 | finger out | |
| 7 | 3.500 | SEE IT. in | leader to the picture's band |
| 9.5 | 4.750 | SEE IT. out; finger in to Save | lands 5.06 |
| 10.25 | 5.125 | focus on Save | z 1.36, placed 72 % down the frame; ZOOM lands 5.72 |
| 11.5 | 5.750 | tap Save | after the zoom lands |
| 11.75 | 5.875 | Save becomes Saved | brand to tint on FADE |
| 12.25 | 6.125 | finger out | uncovers "Saved" |
| 13.25 | 6.625 | camera back to rest | lands 7.22 |
| 13.5 | 6.750 | toast opens | TOAST lands 6.91 |
| 14.25 | 7.125 | SAVE IT. in | leader to the toast |
| 17 | 8.500 | SAVE IT. out; toast closes | |
| 17.5 | 8.750 | the phone drops away | to dy 1160, DROP |

## Callouts

| Id | Words | Position (x, baseline) | Box | Names | In to out (s) |
|---|---|---|---|---|---|
| PLAN | PLAN IT. | 656, 528 | 656, 477 to 937, 529 | the Lisbon card at (0.9, 0.42) | 1.50 to 2.75 |
| SEE | SEE IT. | 656, 424 | 656, 372 to 881, 425 | the Lisbon picture's band at (0.9, 0.82) | 3.50 to 4.75 |
| KEEP | SAVE IT. | 656, 280 | 656, 228 to 936, 281 | the toast at (0.88, 0.5) | 7.13 to 8.50 |

Each baseline puts the cap-height middle level with its target, so the leaders run level.

## Lockup and loop seam

| Element | Size | Position | Colour | Enter |
|---|---|---|---|---|
| ICON | 184 x 184, radius 44, a paper plane of three paths | 448, 348 | brand; plane paper, tint, haze | 8.875, from scale 0, POP |
| NAME | ACME TRIPS, cap 72 (98 px), tracking -10 | centred, baseline 656 | ink | 9.125, from +48 and blur 10, LAND, 32nds |
| URL | EXAMPLE.COM, mono 34, +60 | centred, baseline 736 | brand | typed from 9.5 |
| DEMO | DEMO COPY, FICTIONAL PRODUCT, mono 24, +20 | centred, baseline 880 | muted | typed from 9.75 |

- Frame 0 is the lockup at rest. It leaves at 0.00 (up 56 and out, EXIT, a 32nd between layers) behind the rising phone.
- The phone waits at dy 1160 before it rises and leaves to the same place, so neither it nor its shadow shows at frame 0 or at the end (the `device seam` check).
- The last change is at 10.475 s (the icon's POP settling); loopcheck finds the last 98 frames identical to frame 0.

## Formats

The positions above are the 1:1 base. `FILM.formats` patches the two other ratios (engine.md, Formats); `poster-9x16.png` and `poster-16x9.png` are their frames at 4.25 s.

| Format | Device | Callouts | Other changes | Composition |
|---|---|---|---|---|
| 9:16, 1080 x 1920 | centre (540, 580), mapped to (540, 1000); scale 1.6: 233 to 847 by 373 to 1627 | cap 64, centred at x 540, baseline 248 from the top (pin t); leaders drop straight down. PLAN names the Kyoto card at (0.62, 0.5), since a leader to Lisbon would cross Kyoto; SEE the picture at (0.6, 0.5); KEEP the toast | enters from and leaves to dy 1760; the zoom places Save 78 % down the frame; the lockup grows (icon scale 1.25, name cap 88, domain 40) | 2 % top to bottom, 0 % left to right |
| 16:9, 1920 x 1080 | x 460, mapped to 880: 688 to 1072 by 148 to 932, scale 1 | cap 60 at x 720, mapped to 1140, 68 px clear of the phone; leaders left, level | none: the lockup and the zoom stay centred | 0 % top to bottom, 2 % left to right |

At both formats the stills critique passes all 59 checks with no warning, and loopcheck finds every difference 0. The square is untouched by all this: the engine skips every format map at the base format, so the 1:1 stills are byte-identical to the template's before `formats` existed.

## Checks

- Stills critique: 59 checks, all pass (text size, contrast against each text's own backdrop, overflow, collisions, words, leaders, clearance, callout overlap, the zoom's framing, taps, the crossfade, the device seam, palette roles, the loop tail, composition). Palette gate: 15 accent frames, no mixed ink.
- Loopcheck: every maximum channel difference 0; the last 98 frames equal frame 0.
- Verify: H.264 High, yuv420p, 1080 x 1080, 60/1, 720 frames, 12.000 s, BT.709 tags, faststart; decoded frame 0 at 44.7 dB PSNR against the canvas; the background decodes to (237.0, 241.0, 247.0) for #EEF1F6 (238, 241, 246).
- mp4frames: 19 review frames decoded, lowest PSNR 42.5 dB (the tap on Lisbon, frame 164).
- Files: `ui-acme-trips.mp4` 1.43 MB, `preview.gif` 1.54 MB (480 px, 240 frames), `poster.png` (4.25 s), `ui-acme-trips.html` 277 KB. The full render took about 3 minutes on an 8-core Mac, alongside two other renders; at most 15 subframes a frame (the phone rising and dropping).