The measured data and build specs agents work from. Over MCP they get it all, with the full timeline as JSON.
Type (measured)
Sizes are cap height (the height of a capital letter) in px at the 1080p deliverable, 1920×1080. Font size ≈ cap ÷ 0.71 for a typical sans (Inter 0.73, Geist 0.71, SF Pro 0.70, Instrument Sans 0.72): check your own font's cap-height ratio. Cap heights are estimated from text-recognition boxes (median error about 11% on real text; text under about 13 px at 1080p and non-Latin scripts are not read). Box = x · y · w · h as % of the frame, from the top-left.
| text | shot | on screen (s) | cap px | ≈ font px | cap % of height | box x·y·w·h % | position |
|---|
| "Create payment link" | 3 | 2.5–4.5 | 82 | 115 | 7.6 | 4 · 10 · 43 · 11 | left, top (inside 5% of the edge) |
| "Product or service" | 3 | 2.8–3.8 | 58 | 82 | 5.4 | 36 · 70 · 33 · 6 | centre, lower third |
| "43.74 → 213.00 (counting)" | 3 | 4.0–4.8 | 167 | 235 | 15.5 | 45 · 44 · 28 · 16 | centre, middle |
| "Bank transfer and 1 more" | 3 | 5.0–6.0 | 45 | 63 | 4.2 | 16 · 18 · 35 · 6 | left, top |
| "Payment methods" | 3 | 5.0–6.0 | 32 | 45 | 3.0 | 16 · 10 · 22 · 6 | left, top |
| "Boom" | 3 | 5.3–6.0 | 49 | 69 | 4.5 | 43 · 55 · 9 · 5 | centre, middle |
| "SHARE YOUR LINK" | 4 | 6.3–9.3 | 60 | 85 | 5.6 | 35 · 39 · 32 · 6 | centre, middle |
| "Copy" | 4 | 6.3–9.3 | 17 | 24 | 1.6 | 36 · 76 · 3 · 2 | centre, lower third |
| "https://wise.com/pay/r/OAFOtpw3VCI1XX8" | 4 | 6.3–6.8 | 37 | 52 | 3.4 | 25 · 53 · 50 · 5 | centre, middle |
| "Give feedback" | 4 | 6.5–9.3 | 21 | 30 | 1.9 | 46 · 85 · 9 · 2 | centre, bottom |
| "Open link" | 4 | 6.5–9.3 | 16 | 23 | 1.5 | 53 · 76 · 6 · 2 | centre, lower third |
| "Create new" | 4 | 6.5–9.3 | 16 | 23 | 1.5 | 62 · 76 · 6 · 2 | right, lower third |
Plus 5 smaller or briefer text items, cap 13–50 px, mostly labels inside interfaces: all in the timeline JSON.
Type scale (cap px): 167 · 76–82 · 58–60 · 45–49 · 32–37 · 21 · 16–17 (7 levels) among the text above.
Left out: 12 reads that are not clean words or were seen in a single frame ("0.00", "INR", "CAD"…): blurred, moving or partly hidden text the recognizer misread. They stay in the timeline JSON, not in the type scale.
Phone minimum: cap height ≥ 2% of frame width = 38 px at 1920×1080. Why: in a phone feed the film fills the screen width, about 390 pt, and 2% of that is 7.8 pt, the cap height of 11 pt text, Apple's smallest recommended text size. Words the viewer must read go at or above it; smaller text can only be decoration. Below it in the reference: "Copy" (17 px, shot 4), "Give feedback" (21 px, shot 4), "Open link" (16 px, shot 4), "Create new" (16 px, shot 4), "O friction" (34 px, shot 4), "Payment methods" (32 px, shot 3) and 2 more above and 4 of the smaller items. Size these up in your version, or treat them as decoration.
Type spec (inferred)
Assume a 0.71 cap-height-to-font-size ratio for {{BRAND_FONT}}; check the actual font. Inter is a free fallback only. The lower three measured levels contain text too small for required reading; raise essential words to the 38 px cap phone minimum.
| Level | Cap px at 1080p | Implied font px | Weight · case · tracking | Colour pair | Motion |
|---|
| Numeric hero | 167 | 235 | 750 · digits · −0.04em | Dark ink on pale surface | Count/reveal in 2 f steps, ease-out cubic-bezier(.18,.8,.25,1) |
| Main heading/close | 76–82 | 107–115 | 700 · mixed or upper · −0.035em | Dark ink on pale surface | Letter build over 8–12 f on twos |
| Action heading | 58–60 | 82–85 | 700 · upper or sentence · −0.02em | {{BRAND_ACCENTS}} on {{BRAND_BG}} | Opacity/scale over 8 f, cubic-bezier(.2,.8,.2,1) |
| Claim/body | 45–49 | 63–69 | 600–700 · sentence · −0.02em | Pale text on {{BRAND_BG}} | Replace a pill word over 6 f, hold on twos |
| Supporting label | 32–37 measured; ≥38 if required | 45–52 measured; ≥54 required | 500–650 · sentence · −0.01em | Dark ink on pale UI or pale on dark | Slide/opacity over 6 f; raise readable copy |
| Small action | 21 measured; ≥38 if required | 30 measured; ≥54 required | 500 · sentence · 0em | Pale on dark | Pop over 4 f; otherwise decorative |
| Micro UI | 16–17 measured; ≥38 if required | 23–24 measured; ≥54 required | 500 · sentence · 0em | Accent on dark or dark on pale | Static icon-label detail; do not rely on it to explain the action |
Palette by shot (measured)
Colours measured on the frames, with their share of the frame; luma 0 = black, 1 = white. These are the reference's brand colours: map them onto {{BRAND_BG}} and {{BRAND_ACCENTS}} by role (background, surface, accent), don't reuse them as the format. Neighbouring shots with the same palette share a row.
| # | luma mean · p95 | colours (share of frame) | highlights (bright pixels) |
|---|
| 1–2 | 0.28 · 0.98 | #0E1208 45% · #233716 16% · #B2F275 16% · #3D6E20 12% · #E4EBDD 11% | #F7FDF4 ≈6370 K 94% |
| 3 | 0.96 · 0.99 | #F5FDF1 90% · #B0F96C 4% · #BFC3BA 3% · #66635F 2% · #B3DC88 1% | #F7FFF3 ≈6340 K 74% · #F8FFF3 ≈6300 K 19% · #F7FDF4 ≈6370 K 7% |
| 4–5 | 0.18 · 0.93 | #0C1106 51% · #1C2D10 26% · #2E5318 14% · #519327 6% · #95A78A 3% | #E4F3DA hue 132° ≈6110 K 44% · #8DD552 hue 128° tinted 42% · hue 130° tinted 13% |
Brightness curve (measured)
Mean luma per 1 s, one character each, grouped in tens; p95 = the bright highlights. Scale: ▁ = 0 (black) → █ = 1.0 (white); luma runs 0–1.
0s 10s
mean ▂▃▆███▄▂▂▂ ▂▂▂▂▄▇██
p95 ▆████████▆ ▄▄▅▅▅███
Curve facts: average 0.48 · darkest 0.08 at 14.2 s · brightest 0.98 at 2.5 s · sudden changes at 2.50 s (brighter by 0.64), 6.25 s (darker by 0.77), 14.50 s (brighter by 0.81).
Layout boxes (inferred)
Coordinates are x · y · w · h in percent of the 16:9 frame, from top left. The measured boxes cover recognized text; art may extend beyond them.
| Element | Shots | Box x · y · w · h (%) | Source · confidence | Notes |
|---|
| Opening control | 1 | 40 · 43 · 19 · 11 | measured element region · high | Ends near 40 · 44 · 19 · 10 |
| Macro glyph/control | 2 | 36 · 39 · 13 · 22 → 6 · 36 · 54 · 28 | measured element region · high | Layer extends beyond crop |
| UI heading | 3 | 4 · 10 · 43 · 11 | measured text box · high | A crop loses it |
| UI field label | 3 | 36 · 70 · 33 · 6 | measured text box · high | Center lower third |
| Numeric result | 3 | 45 · 44 · 28 · 16 | measured text box · high | Largest text |
| Result heading | 4 | 35 · 39 · 32 · 6 | measured text box · high | Over bar |
| Output URL bar text | 4 | 25 · 53 · 50 · 5 | measured text box · high | Give bar additional padding |
| Benefit phrase | 5 | 31 · 46 · 37 · 7 | measured text boxes · high | Include changing central pill |
| Close mark | 6 | 39 · 46 · 24 · 10 | measured text box · high | Mark/word area from reference |
| New CTA text | 6 | 35 · 62 · 30 · 5 | estimate · low | Proposed adaptation beneath mark |
End card (inferred): Use a pale {{BRAND_BG}} inverse surface. Keep {{LOGO}} in the measured close area, and set {{CTA_URL}} below it at ≥38 px cap. Shot 6 spans frames 429–522; preserve its clear final card and hard stop.
Material card (inferred)
:root {
--brand-bg: {{BRAND_BG}};
--brand-accent: {{BRAND_ACCENTS}};
--surface: color-mix(in srgb, var(--brand-bg) 6%, white);
--ink: color-mix(in srgb, var(--brand-bg) 87%, black);
}
.dark-field { background: radial-gradient(ellipse 65% 85% at 80% 10%, color-mix(in srgb, var(--brand-accent) 43%, transparent), transparent 65%), var(--brand-bg); }
.control { border-radius: 999px; background: var(--brand-accent); border: 2px solid color-mix(in srgb, white 35%, var(--brand-accent)); box-shadow: 0 0 28px 7px color-mix(in srgb, var(--brand-accent) 40%, transparent), inset 0 2px 3px #ffffff88; transform-style: preserve-3d; }
.control-rim { transform: translateZ(-10px) translateY(7px); filter: blur(2px); opacity: .42; }
.ui-panel { background: var(--surface); color: var(--ink); border: 2px solid #0003; border-radius: 22px; }
.glint { filter: drop-shadow(0 0 18px #fff9); }
.end-arcs { filter: blur(6px); opacity: .65; }
Use CSS perspective around 900 px for the macro icon, 10 px layered extrusion, 18–28 px bloom glow and a vignette that darkens the outer 20% by about 35%. The reference behaves as layered 2D motion; no physical 3D render is needed. For the closing blur, use plate 5's shot 6 focus region, 0 · 43 · 33 · 57%, and about 6 px blur outside it; keep {{LOGO}} and CTA sharp as separate overlays.