Twenty UI component library reveal
A short component-library launch that zooms from a working interface into a broad design board, then shows use cases and the editable file.
By @twentycrm for TwentySource onlineOriginal post ↗
Copies get_blueprint("REF-5315") for Claude. Connect Claude
Why it works
A real interface appears at frame 0, then a continuous pullback makes a larger component board legible by about 2 seconds. The darker step at frame 322 and brighter step at frame 698 separate contextual proof from the editable-resource payoff without a measured cut. A steady 100.02 BPM grid supports the changes while the on-screen claim remains understandable without speech.
Blueprint
15 plates that take the film apart, from its format to a recipe you can run. Claude reads the same plates over MCP.
Plate 01
The format in one breath
A working interface fills the opening, then pulls back into a design library and a large count claim. Contextual examples and a real editable file turn the abstract library into proof.
Why it works
- The real UI is visible at frame 0; the main claim is readable by 1.5 s.
- The pullback exposes breadth without a cut, as plate 5's opening segments show.
- The dark context section and bright editor return make the proof distinct; the measured brightness steps are at frames 322 and 698.
Plate 02
Format card
| Platform · aspect · length | X · 16:9 · 18.60 s · 1280×720 source · 60 fps |
| Pace | One continuous shot, no cuts; internal layout and light changes |
| Script | Music-led; no credible narration; screen copy carries the message |
| Voice | None |
| On screen | Real UI → component board → contextual UI → editable resource → end card |
| Type | Four cap-height levels: 78–86, 53–63, 37–40, 27–31 px; raise essential small text to 38 px |
| Sound | Tonal electronic bed, steady 100.02 BPM; measured −14.3 LUFS |
| Structure | Five beats; resource proof in the final third; end card from about 15.5 s |
Tools you'll need: screen recordings of the product · Remotion for motion graphics · a licensed or generated music track · Claude alone: partly
Frame sheets
Frame by frame
Stills taken at measured moments, each labelled with its time. Claude gets the same sheets over MCP.
Plate 03
The hook, frame by frame (first 3 seconds)
| Time | Picture | On-screen text | Words and sound | What it does |
|---|---|---|---|---|
| 0.00 | Tight crop of a functioning desktop app | Native UI | Instrumental begins | Establishes proof first |
| 0.25–1.25 | The app recedes into a white canvas | Product identity emerges | Riser around frame 60 | Creates spatial curiosity |
| 1.50–3.00 | Board and centered claim resolve | Verified count and benefit | Hits on the measured grid | Turns scale into a promise |
Hook formula (inferred): real {{PRODUCT}} UI → pull back → {{COUNT}} reusable parts.
Why it holds (inferred): The zoom changes the meaning of the first image: it becomes one item in a larger system.
Plate 04
Structure (beat sheet)
| # | Time (s) | Shots | Beat | What happens | Technique |
|---|---|---|---|---|---|
| 1 | 0–1.5 | 1 | UI hook | Working interface recedes | Continuous digital pullback |
| 2 | 1.5–5.3 | 1 | Scale claim | Count and component board fill the canvas | Editorial type among genuine parts |
| 3 | 5.3–11.8 | 1 | Context proof | Darker real workflows show parts in use | Internal reframe and palette step |
| 4 | 11.8–15.5 | 1 | Resource proof | Bright editor view shows the editable file | Layout hand-off inside the shot |
| 5 | 15.5–18.6 | 1 | Ownership | Simple branded end card and command/URL | Type-led resolution |
Retention map (inferred): claim at 1.5 s; visual resets around 5.3 and 11.8 s; end card around 15.5 s. The film ends without a fade to black.
For agents: Shots
The measured data and build specs agents work from. Over MCP they get it all, with the full timeline as JSON.
Shots (measured)
One continuous shot, 18.60 s = 1116 frames at 60 fps. Frames are at 60 fps, first and last inclusive: a shot "33–70 · 38 f" is a Remotion <Sequence from={33} durationInFrames={38}>; at another frame rate, use the seconds.
| # | in–out (s) | frames @60 (first–last · count) | dur (s) | transition in | scales (inferred) |
|---|---|---|---|---|---|
| 1 | 0.00–18.60 | 0–1115 · 1116 f | 18.60 | start | scales |
scales: fixed = keep this shot's length when the film gets longer or shorter · scales = stretch or shrink it with the length · optional = drop it for the 15 s cut.
Measurement notes: S1: 713 text items read; the 40 largest are kept · cue sheet keeps 19 of 40 sound events (all near cuts, then the strongest)
Frame sheets (measured): shots, one labelled frame per shot (labels S<n> m:ss.s; + = just after a change inside the shot) · the full-length timeline, the whole film at fixed steps (labels S<n> m:ss.s f<frame>), 2 pages: call get_frames('2118056653861896668'), or see them on the film page (Pro, or free films).
Plate 05
Shot grammar
Mix: Entirely interface and designed canvas. Rhythm: The single shot changes scale and context rather than cutting.
Rules this editor follows (inferred): Keep the working UI credible at the opening scale. Let the wider board explain the count. Use palette changes only when moving to a new proof context.
At a glance
- Biggest moves: shot 1: pan right, content −54.9% of width over 18.60 s, irregular.
For agents: Camera and motion · Transitions
The measured data and build specs agents work from. Over MCP they get it all, with the full timeline as JSON.
Camera and motion (measured)
Per shot, measured on the frames. "Camera move" names the camera's move; the numbers are the image's motion: pan in % of frame width (x) or height (y) per second, +x = content moves right (so a pan left), +y = content moves down; zoom per second > 1 = content grows (push in). "Over the shot" is the total, with px at 1920×1080. Speed is the move through the shot, about one character per 0.5 s (▁ still → █ its peak), then the peak in % of width per second. Cadence: "ones" = a new picture every frame, "twos" = each picture held two frames. Blur is relative to this film (0 = its sharpest shots, 1 = its blurriest); motion = share of the frame changing, 0–1. "?" = confidence under 0.5: a hint, check the sheets. The labels describe how the image moves, not where a 3D camera went: an object flying toward a still camera can read as a push in.
| # | camera move | pan x · y (%/s) | zoom (/s) | over the shot | ease | speed · peak | cadence | blur | motion | conf |
|---|---|---|---|---|---|---|---|---|---|---|
| 1 | pan right (shake 8.0%/s) | −3.0 · −1.2 | ×1.000 | x −54.8% (−1052 px) · y −22.4% (−242 px) · roll +0.9° | irregular | ▄▂▁▁▄▁▁▁▁▁▁▂▁▂▁▁ · 127%/s | ones | 0.53 | 0.16 | 0.95 |
| ↳ 0.00–0.42 s: complex | −38.3 · −1.6 | ×0.524 | x −16.0% (−306 px) · y −0.6% (−7 px) · ×0.76 scale | ease-in | ||||||
| ↳ 0.42–1.50 s: complex | −21.7 · −15.6 | ×0.529 | x −23.5% (−451 px) · y −16.9% (−182 px) · ×0.50 scale | ease-out | ||||||
| ↳ 1.50–1.92 s: tilt up | +1.5 · +46.9 | ×0.955 | x +0.6% (+12 px) · y +19.6% (+211 px) · ×0.98 scale | ease-out | ||||||
| ↳ 1.92–4.92 s: pull out | −0.1 · −2.8 | ×0.824 | y −8.5% (−91 px) · ×0.56 scale · roll +2.1° | ease-out | ||||||
| ↳ 4.92–5.33 s: push in | +7.5 · +20.0 | ×4.401 | x +3.1% (+60 px) · y +8.3% (+90 px) · ×1.85 scale · roll −1.6° | ease-in | ||||||
| ↳ 5.67–6.17 s: tilt down | −0.1 · −20.2 | ×0.995 | y −10.1% (−109 px) | ease-out |
Focus (measured): shot 1: sharp inside 0 · 0 · 100 · 100, no defocus (deep focus). Box = x · y · w · h % of the frame. In 2D, blur the layers outside the box by that many px; in 3D, set the focus distance on the box and open the aperture until the background blur matches.
Biggest moves: shot 1: pan right, content −54.9% of width over 18.60 s, irregular. Locked-off shots: 0 of 1. Animation cadence: a new picture every frame (on ones): 58.8 unique frames per second of 60 while things move (held-frame share 0.02, 703 moving frames). Match it, or the motion will feel smoother or choppier than the reference.
Transitions (measured)
One continuous shot: no cuts. Changes happen inside the shot (camera, light, layout).
What each shot shows (inferred from the sheets)
| # | Type | Framing | What's on screen | Text / overlay |
|---|---|---|---|---|
| 1 | UI composite | Close app → wide board → contexts → end card | Genuine app, component board, workflows, editable file | Claim, context statements, final URL |
Plate 06
Visual style guide
- Look (inferred): Bright paper-like canvas, fine dividers and dark ink; the context examples move to charcoal before the editor returns to light. Map these roles to
{{BRAND_BG}}and{{BRAND_ACCENTS}}. - Graphics and overlays (inferred): Native UI borders, restrained labels and one large central claim. No decorative sticker layer.
- Transitions (inferred): Continuous transform, masked canvas swaps and brightness changes; no measured cuts.
- Branding and end card (inferred): Place
{{LOGO}}above the name and{{CTA_URL}}as readable text. The reference uses a terminal command; adapt the action to your product.
At a glance
- Type scale (cap px): 78–86 · 53–63 · 37–40 · 27–31 (4 levels).
- Phone minimum: cap height ≥ 2% of frame width = 38 px at 1920×1080
- Whole film (time-weighted):
#F6F6F670% ·#1B1A1A20% ·#3736365% ·#ACAFB54% ·#6076D91%. - Curve facts: average 0.67 · darkest 0.11 at 5.8 s · brightest 0.97 at 4.8 s · sudden changes at 5.25 s (darker by 0.19), 11.75 s (brighter by 0.63).
For agents: Type · Type spec · Palette by shot · Brightness curve · Layout boxes · Material card
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 |
|---|---|---|---|---|---|---|---|
| "@ Home" | 1 | 0.0–1.0 | 27 | 38 | 2.5 | 3 · 42 · 8 · 4 | left, middle (inside 5% of the edge) |
| "• Tasks" | 1 | 0.2–1.5 | 37 | 52 | 3.4 | 5 · 96 · 11 · 4 | left, bottom (inside 5% of the edge) |
| "a EM man open-source" | 1 | 1.5–1.5 | 63 | 89 | 5.8 | 22 · 22 · 46 · 9 | centre, upper |
| "Made of 79" | 1 | 1.5–5.2 | 54 | 76 | 5.0 | 39 · 39 · 22 · 6 | centre, middle |
| "components." | 1 | 1.5–5.2 | 40 | 56 | 3.7 | 38 · 52 · 26 · 7 | centre, middle |
| "Building a Twenty app?" | 1 | 5.8–6.5 | 60 | 85 | 5.6 | 6 · 6 · 48 · 8 | left, top |
| "* Domain" | 1 | 5.8–7.8 | 38 | 54 | 3.5 | 22 · 52 · 9 · 4 | left, middle |
| "9) Employees 1,100" | 1 | 5.8–7.8 | 31 | 44 | 2.9 | 22 · 58 · 17 · 4 | left, lower third |
| "Use the same parts." | 1 | 6.0–6.5 | 54 | 76 | 5.0 | 6 · 16 · 41 · 9 | left, top |
| "Kickoff with Dari® Nov 12" | 1 | 6.2–6.2 | 30 | 42 | 2.8 | 75 · 61 · 22 · 6 | right, lower third (inside 5% of the edge) |
| "Your widget, on every record." | 1 | 7.0–7.5 | 82 | 115 | 7.6 | 6 · 9 · 73 · 11 | centre, top |
| "Your settings, inside Settings." | 1 | 8.0–9.2 | 78 | 110 | 7.2 | 23 · 9 · 72 · 11 | centre, top (inside 5% of the edge) |
| "Your form, in the side panel." | 1 | 9.8–11.5 | 84 | 118 | 7.8 | 25 · 9 · 69 · 12 | centre, top |
| "Open-source Figma too." | 1 | 12.0–15.2 | 53 | 75 | 4.9 | 28 · 8 · 45 · 8 | centre, top |
| "Twenty UI." | 1 | 15.5–18.5 | 80 | 113 | 7.4 | 34 · 42 · 33 · 12 | centre, middle |
| "Now yours." | 1 | 15.5–18.5 | 86 | 121 | 8.0 | 34 · 55 · 32 · 13 | centre, lower third |
| "$ yarn add twenty-u_" | 1 | 16.5–18.5 | 28 | 39 | 2.6 | 32 · 74 · 31 · 4 | centre, lower third |
Type scale (cap px): 78–86 · 53–63 · 37–40 · 27–31 (4 levels).
Left out: 9 reads that are not clean words or were seen in a single frame ("i Companies", "in Linkedin", "© Opportunities"…): 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: "9) Employees 1,100" (31 px, shot 1), "$ yarn add twenty-u_" (28 px, shot 1), "Kickoff with Dari® Nov…" (30 px, shot 1), "* Domain" (38 px, shot 1), "• Tasks" (37 px, shot 1), "@ Home" (27 px, shot 1). Size these up in your version, or treat them as decoration.
Type spec (inferred)
Assume cap height is 0.71 of font size; verify against {{BRAND_FONT}}. Use a static font instance; Libre Baskerville for the light display line and Inter for the sans are free fallbacks only.
| Level | Cap px at 1080p | Font size | Weight · case · tracking | Colour pair | Motion |
|---|---|---|---|---|---|
| Display | 78–86 | 110–121 px | 400/650 · sentence · −0.025em | ink on {{BRAND_BG}} | Opacity and 8 px rise, 12 f, cubic-bezier(.2,.7,.2,1) |
| Claim | 53–63 | 75–89 px | 400/650 · sentence · −0.02em | ink on {{BRAND_BG}} | Reveal over 12 f, same ease |
| UI heading | 37–40 | 54–56 px | 500 · sentence · −0.01em | ink/surface | 6 f opacity; essential words ≥38 px cap |
| UI detail | 27–31 | 38–44 px | 400/500 · native case · 0 | muted ink/surface | Native UI motion; enlarge essential words to ≥38 px cap |
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 | 0.67 · 0.77 | #F6F6F6 70% · #1B1A1A 20% · #373636 5% · #ACAFB5 4% · #6076D9 1% | #FAFAFA ≈6510 K 77% · #939395 ≈6630 K 20% |
Whole film (time-weighted): #F6F6F6 70% · #1B1A1A 20% · #373636 5% · #ACAFB5 4% · #6076D9 1%.
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.67 · darkest 0.11 at 5.8 s · brightest 0.97 at 4.8 s · sudden changes at 5.25 s (darker by 0.19), 11.75 s (brighter by 0.63).
Layout boxes (inferred)
| Element | Shots | Box x · y · w · h (%) | Source · confidence | Notes |
|---|---|---|---|---|
| Central count | 1 | 39 · 39 · 22 · 6 | measured text box · high | Claim |
| Central lower line | 1 | 38 · 52 · 26 · 7 | measured text box · high | Claim |
| Context headline | 1 | 6 · 9 · 73 · 11 | measured text box · high | First dark context |
| Editor proof label | 1 | 28 · 8 · 45 · 8 | measured text box · high | Bright return |
| End-card product line | 1 | 34 · 42 · 33 · 12 | measured text box · high | Replace with {{PRODUCT}} |
| End-card CTA line | 1 | 32 · 74 · 31 · 4 | measured text box · high | Replace with {{CTA_URL}}; enlarge to phone minimum |
End card (inferred): {{BRAND_BG}} field, {{LOGO}} centered above the product line, {{CTA_URL}} in the lower text box; use the measured on-screen window in plate 6, with no fade to black.
Material card (inferred)
:root { --brand-bg: {{BRAND_BG}}; --brand-accent: {{BRAND_ACCENTS}}; --ink: color-mix(in srgb, var(--brand-bg), black 92%); }
.canvas { background: var(--brand-bg); color: var(--ink); }
.ui-panel { background: color-mix(in srgb, var(--brand-bg), white 8%); border: 1px solid color-mix(in srgb, var(--ink), transparent 86%); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.context { background: color-mix(in srgb, var(--ink), black 12%); color: var(--brand-bg); }
No 3D is needed. Keep the UI flat and sharp; the apparent depth comes from scale and layout. Use no backdrop blur, glow or vignette.
Plate 07
Voice and delivery
Measured: No credible speech. The isolated automatic “You” read is inconsistent with the video and is not a narration track.
Voice direction (inferred): No voice; the picture and short text carry it.
Plate 08
Sound design
- Music (inferred): Restrained tonal synth, low pulse and dry percussion. Let the board grow over the pulse; raise energy slightly in the contextual proof and resolve under the end card.
- Sound effects (inferred): Quiet ticks may reinforce the cue frames in the measured grid; avoid a click on every UI item.
- Silence and space (inferred): Keep the track sparse around the claim and final CTA so type remains the focus.
At a glance
- Tempo: 100.02 BPM, confidence 1.00 · first downbeat 1.891 s (bar start confidence 1.00) · beat 0.5999 s · bar of 4 = 2.400 s.
- Key: A minor (confidence 0.49; runner-up F major).
- Loudness of the reference (measured): −14.3 LUFS integrated, true peak −1.0 dBTP, range 2.5 LU. That is how this film was mastered, not a target.
For agents: Sound grid · Original music bed
The measured data and build specs agents work from. Over MCP they get it all, with the full timeline as JSON.
Sound grid (measured)
Tempo: 100.02 BPM, confidence 1.00 · first downbeat 1.891 s (bar start confidence 1.00) · beat 0.5999 s · bar of 4 = 2.400 s.
Beat grid in frames. A constant grid fitted to the music: beat k is at round((first downbeat + k × beat) × fps); round each beat on its own, since adding a rounded beat length drifts.
| per beat | per bar | first downbeat (frame) | downbeats (frame), first 7 | |
|---|---|---|---|---|
| 60 fps (this film) | 35.99 f | 143.98 f | 113 | 113 · 257 · 401 · 545 · 689 · 833 · 977 |
| 30 fps | 18.00 f | 71.99 f | 57 | 57 · 129 · 201 · 273 · 345 · 417 · 489 |
Beats in seconds: 0.091 · 0.691 · 1.291 · 1.891 · 2.491 · 3.091 · 3.691 · 4.291 · 4.890 · 5.490 · 6.090 · 6.690 … (31 in all, audio.tempo.beats in the timeline JSON).
Key: A minor (confidence 0.49; runner-up F major).
Sections (by energy of the whole mix):
| section | time (s) | shots | level (RMS) |
|---|---|---|---|
| steady | 0.0–9.5 | 1 | −13 dB |
| steady | 9.5–15.0 | 1 | −11 dB |
| steady | 15.0–18.6 | 1 | −13 dB |
Energy map (RMS per 1 s, ▁ = −31 dB → █ = −9 dB):
▆▆▆▇▇█▇█▇█ █▇█▇███▅▁
Cue sheet (19 cues: 0 at a cut, 12 on a beat). "On screen" names the picture event the cue hits within ±3 frames (a cut, a jump, a move starting, a line of text appearing, a brightness step), or says there is none:
| t (s) | frame @60 | shot | kind | strength | on screen (±3 f) | on beat |
|---|---|---|---|---|---|---|
| 1.00 | 60 | 1 | riser | 1.00 | no visible event | |
| 2.48 | 149 | 1 | hit | 0.97 | no visible event | ✓ |
| 3.09 | 185 | 1 | click | 1.00 | no visible event | ✓ |
| 3.39 | 203 | 1 | tonal | 0.75 | no visible event | |
| 3.99 | 240 | 1 | tonal | 0.72 | no visible event | |
| 4.27 | 256 | 1 | hit | 0.84 | no visible event | ✓ |
| 5.48 | 329 | 1 | unknown | 0.99 | picture gets darker | ✓ |
| 6.08 | 365 | 1 | unknown | 1.00 | "Use the same parts." appears | ✓ |
| 6.38 | 383 | 1 | tonal | 0.71 | "Kickoff with Dari® Nov…" appears | |
| 6.69 | 401 | 1 | hit | 1.00 | no visible event | ✓ |
| 7.59 | 456 | 1 | tonal | 0.67 | camera pan right starts (shot 1) | |
| 9.08 | 545 | 1 | hit | 1.00 | no visible event | ✓ |
| 9.68 | 581 | 1 | unknown | 0.81 | "Your form, in the…" appears | ✓ |
| 10.59 | 635 | 1 | tonal | 0.71 | no visible event | |
| 10.89 | 653 | 1 | click | 0.90 | no visible event | ✓ |
| 12.08 | 725 | 1 | unknown | 0.76 | "Open-source Figma too." appears | ✓ |
| 13.89 | 833 | 1 | tonal | 1.00 | no visible event | ✓ |
| 14.79 | 887 | 1 | tonal | 0.70 | no visible event | |
| 15.07 | 904 | 1 | hit | 0.70 | no visible event | ✓ |
Loudness of the reference (measured): −14.3 LUFS integrated, true peak −1.0 dBTP, range 2.5 LU. That is how this film was mastered, not a target.
Loudness targets for your version (common practice per platform; the brief overrides them):
| where it plays | integrated | true peak max | note |
|---|---|---|---|
| YouTube | −14 LUFS | −1 dBTP | louder masters are turned down; quieter ones are not turned up |
| X, LinkedIn (this reference) | −14 LUFS | −1 dBTP | no published normalisation: the file plays as mastered |
| TikTok, Reels, Shorts | −14 to −10 LUFS | −1 dBTP | played on phone speakers; short-form is often mastered hotter |
| Website or app (autoplay) | −16 LUFS | −1 dBTP | often starts muted; keep the unmuted level comfortable |
| Broadcast (EBU R128) | −23 LUFS | −1 dBTP | only when the brief asks for it |
Original music bed (inferred)
Write an original A-minor bed at the measured 100.02 BPM. Use a rounded sine bass, muted mallet notes, soft hi-hat and airy pad. Beat 1: pulse and rising filter; beat 2: add mallet; beat 3: stronger low notes under the dark contexts; beat 4: open the pad as the editor returns; beat 5: thin to a two-note resolution. Place accents at frames 149, 256, 329, 365, 581, 725 and 904; follow the JSON for the remaining cue frames. Music-model prompt: “Original minimal A-minor electronic product reveal, 100 BPM, restrained pulse, crisp soft accents, bright resolution, no vocals, no recognizable melody.”
Plate 09
Packaging
- Title (inferred):
{{PRODUCT}}: {{COUNT}} reusable parts, ready to use. - Cover (inferred): Tight real UI crop with one brand accent and the strongest genuine control visible.
- Post copy (inferred): One verified availability sentence plus
{{CTA_URL}}. - Audience signals: The source had about 30.5k views at capture; no replay or comment evidence is supplied.
Plate 10
Script template
Music-led and wordless. Fit text entrances to the cue grid, while giving each essential claim enough display time to read.
[beat 1 · shot 1] Native interface labels only.
[beat 2 · shot 1] “{{COUNT}} reusable parts for {{PRODUCT}}.”
[beat 3 · shot 1] “Use the same parts across {{WORKFLOW}}.”
[beat 4 · shot 1] “Editable source included.”
[beat 5 · shot 1] “{{PRODUCT}}. Make it yours.” / {{CTA_URL}}
Plate 11
Production plan
Two routes (inferred)
Minimum: Claude alone. Remotion with CSS 3D perspective transforms, layered panels, masked blur and a light bloom pass; synthesize the original bed in code. It reproduces the pullback, type and graphic contexts, simplifying the native editor interactions. Supply real {{PRODUCT}} captures or code-rebuilt UI as inputs; Claude alone cannot record a functioning product.
Full: with the toolkit. Capture the real product and editable resource at 2160×1215 or higher, 60 fps; arrange the component board in a design file; pass PNG captures and the board export to Remotion. Pass camera keyframes as JSON, 1920×1080 PNG sequences with alpha where layers need compositing, and a 48 kHz WAV bed plus click track to the final Remotion render at 60 fps. Export H.264 MP4 at 1920×1080.
Asset honesty: Use real captures of {{PRODUCT}} or its UI rebuilt in code; never generated product UI, fake screenshots or fake results. The count {{COUNT}} must match the actual set visible or linked.
Plate 12
Prompts
Script prompt
For {{PRODUCT}}, write five very short on-screen lines for the beats in plate 4. State only verified facts: {{COUNT}} parts and the availability of {{RESOURCE}}. Keep the central claim readable at phone size and let the visuals prove the rest. No narration or subtitles.
Music prompt
Original 100 BPM A-minor instrumental: rounded synth bass, sparse mallet, airy pad, dry soft percussion. Build through the component reveal, add energy for the contextual proof, resolve gently at the end card. No vocals or recognizable melody.
Plate 13
Edit recipe
How it's built (inferred)
Signature move: Put a genuine high-resolution UI capture inside a much larger board precomposed at 2–3× delivery resolution. Animate one parent transform rather than independently scaling labels. Match plate 5's measured opening segments: frames 0–25 scale ×0.76 and travel left; frames 25–90 scale ×0.50 while the board widens; frames 90–115 settle vertically; frames 115–295 continue to ×0.56 with slight roll. Use cubic-bezier(.42,0,.2,1) on entry and (.16,1,.3,1) on settling, keyed to the segment boundaries. Render on ones at 60 fps with 8 subframe samples and a shutter angle around 120°; keep readable UI labels sharp by placing them on a separate overlay layer. A raster screen capture scaled too far will blur, so use a board export at least twice the final size.
Other internal hand-offs: The measured push from 4.92–5.33 s grows ×1.85; use it to cover the swap from board to context by masking the incoming panel behind the outgoing UI region. The darker brightness step is at frame 322: ramp the context background over about 8 f centered on that step, without inserting a cut. The 5.67–6.17 s tilt moves content upward by the amount in plate 5. At frame 698 the brightness rises: reveal the bright editor beneath the dark panel with a sliding mask over about 12 f. The sheets suggest fresh pictures around 8 and 9.8 s; the measurement says one continuous shot, so swap context layers inside the same composition over 8–12 f. The end card emerges through an internal layout swap around 15.5 s and remains visible to the end; no closing fade. Apply the same grid to text entrances, not a global hard cut.
Build order
- Collect genuine UI, workflow and resource captures for beats 1, 3 and 4.
- Build the oversized board for beat 2, then implement the signature transform in shot 1.
- Add masked hand-offs, brightness steps and final type for beats 3–5.
- Add the original WAV, mix and render at 60 fps.
Plate 14
QA checklist
- One continuous shot from frame 0 through 1115, with no hard cuts or closing fade.
- Opening transform matches plate 5's segment endpoints within ±2 frames; picture updates on ones.
- Brightness steps occur at frames 322 and 698 within ±2 frames.
- Essential text is at least 38 px cap at 1920×1080; CTA remains readable on a phone.
- Cue accents land within ±3 frames of the selected frames in plate 8; bed follows 100.02 BPM.
- X or LinkedIn master is near −14 LUFS integrated, true peak ≤ −1 dBTP.
- Every count and editor view is genuine; no reference logo, font, palette, copy or music remains.
Plate 15
Make it yours
Brand slots
| Slot | Replaces in the reference | Notes |
|---|---|---|
{{PRODUCT}} | Product name | Use your real product |
{{BRAND_FONT}} | Editorial and UI typefaces | Supply licensed font |
{{BRAND_BG}} | White and dark fields | Supply background role |
{{BRAND_ACCENTS}} | Blue UI accent | Supply accent role |
{{LOGO}} | End-card mark | Original asset |
{{CTA_URL}} | Terminal install action / post link | Plain readable text |
{{COUNT}} | Reference's component count | Verified number |
{{WORKFLOW}} | Reference's CRM context | Genuine use case |
{{RESOURCE}} | Reference's editable file | Real downloadable artifact |
What this film avoids (inferred): No presenter, voiceover, subtitles, stock footage, simulated metrics or feature-list montage.
Brand-distance warning (inferred): A pale CRM screen, dark settings context, blue accents, serif/sans headline and terminal end card together would read as the original brand. Change the UI context to your own distinctive workflow and visual system.
Adapt the aspect (inferred)
- 9:16: Re-lay out the board vertically; stack the claim above two enlarged UI examples, keep essential caps ≥22 px, and keep CTA clear of top profile and bottom action overlays.
- 1:1: Re-lay out into a compact central board; move side examples below the claim, keep essential caps ≥22 px and leave outer gutters for platform UI.
Adapt the length (inferred)
- 15 s: Keep the pullback and all five beats, compress the contextual proof and editor dwell within shot 1.
- 30 s: Add a second genuine workflow inside beat 3 and more editor interaction in beat 4; retain the hook and end-card proportions.
- 60 s: Add new verified context demonstrations and a closer look at the editable resource; do not merely slow the pullback or prolong the end card.
The creator's signature (don't copy): Reference UI, count, logo, wording, palette and music.
The transferable format (do copy): Genuine interface close-up, continuous pullback to a large system, count claim, contextual proof and editable resource payoff.
Source: https://x.com/twentycrm/status/2118056653861896668 · measured 2026-11-06 · (measured) = read off the film · (inferred) = construction reading
For agents: Aspect conversions · Length cuts
The measured data and build specs agents work from. Over MCP they get it all, with the full timeline as JSON.
Aspect conversions (computed from the measured boxes)
Aspect conversions (computed from the measured boxes): a centre crop of the reference frame, checked against its text boxes and moving elements.
| to | deliver at | a centre crop keeps | measured boxes kept | boxes a crop loses | phone minimum | so |
|---|---|---|---|---|---|---|
| 9:16 | 1080×1920 | middle 31.6% of the width (cut 34.2% each side) | 2 of 17 | "@ Home", "• Tasks", "a EM man open-source", "Building a Twenty app?" … | 22 px cap | re-lay out: a crop loses too much |
| 1:1 | 1080×1080 | middle 56.2% of the width (cut 21.9% each side) | 9 of 17 | "@ Home", "• Tasks", "Building a Twenty app?", "Use the same parts." … | 22 px cap | re-lay out: a crop loses too much |
Length cuts (computed from the scales flags)
Length cuts (computed from the scales flags): frames per shot at 60 fps; fixed shots keep their length, optional shots go first when the cut is shorter, the scaling shots share what is left. Snap each cut to the nearest beat when plate 8 has a steady pulse.
| # | flag | reference (f @60) | 15 s cut | 30 s cut | 60 s cut |
|---|---|---|---|---|---|
| 1 | scales | 1116 | 900 | 1786 | 1786 |
| total | 1116 f · 18.6 s | 900 f · 15.0 s | 1786 f · 29.8 s | 1786 f · 29.8 s + 30.2 s new beats |
60 s: stretching tops out at ×1.6 (29.8 s); add 30.2 s of new beats (more of the scaling beats' pattern with new content), never a longer hold on the fixed shots.
Recipe
One prompt that makes a film like this with Claude. Use the method; make the footage, words and brand your own.
Make an 18.6 s 16:9 film for {{PRODUCT}} in the format of 2118056653861896668 (interface-to-library reveal). Brand: font {{BRAND_FONT}}, background {{BRAND_BG}}, accents {{BRAND_ACCENTS}}, logo {{LOGO}}, call to action {{CTA_URL}}. Use a verified {{COUNT}} and genuine {{WORKFLOW}} and {{RESOURCE}}. First load get_blueprint("2118056653861896668", format: "json") and build to its measured timing and motion. This is a music-led, wordless film: begin with a tight real UI view, pull back to a component board and count claim, show the same parts in a working context, reveal the actual editable resource, then finish on a branded text card. Keep one continuous composition and implement later picture changes as masked layer hand-offs. Set essential words at or above 38 px cap height at 1920×1080. Use brand colours by role, never the reference palette. Capture real {{PRODUCT}} screens and the editor, then animate and composite in Remotion; alternatively use Remotion with CSS 3D throughout if supplied captures cover every proof view. Synthesize an original A-minor bed at 100.02 BPM. Mix for X or LinkedIn near −14 LUFS, true peak at most −1 dBTP. Render 1920×1080, 60 fps, H.264 MP4, about 18.6 s. End with {{LOGO}} plus {{CTA_URL}} as text, no QR code or store badge. Use real captures or code-rebuilt UI, never generated product UI, fake screenshots or results. Do not copy the reference's colours, fonts, logo, slogans or music.Films like this
Tagged figmascreen recordingproduct launchui revealdesign systemcomponent libraryzoom outkinetic type
