Six-step payment progress header

A single locked canvas turns a finite goal into a compact progress interface, then a benefit line and brand mark. The viewer watches the same milestone states propagate through list checks, ring arc and central amount.

Why it works (inferred):

• The headline is legible before the dashboard appears in the first 1.5 s.
• The continuous shot has no cuts, yet the internal progress states give the eye fresh work through about 8.5 s (plate 4).
• The spacious benefit and mark separate outcome from identity near 11 s and 13.5 s in the sheets.

Tools you'll need: Remotion for motion graphics · Remotion or any video editor · Claude alone: yes

Hook formula (inferred): {{GOAL}} → finite {{MILESTONES}} → live progress. Why it holds (inferred): One readable subject precedes the denser interface; the heading becomes part of the interface instead of disappearing.

Retention map (inferred): re-hooks through changing row states in beat 2 · payoff in beat 3 · identity in beat 4 · hard stop.

Mix: one continuous designed UI scene. Rhythm: camera remains visually locked while elements change; no cut boundary occurs.

Rules this editor follows (inferred):

• Keep a stable dark field and move interface layers, not the viewpoint.
• Couple each check, ring increment and central number to one progress variable.
• Leave a clear visual reset before beat 3 and another before beat 4.

• Look (inferred): almost black {{BRAND_BG}}, slightly lighter cards, pale text, one vivid role from {{BRAND_ACCENTS}}. The reference uses a navy field and green completion signal.
• Graphics and overlays (inferred): six translucent rounded rows; circular stroke with bright completed arc; one small icon tile; restrained confetti only at completion in the sheets.
• Transitions (inferred): transforms and opacity changes within shot 1, with no camera cut.
• Branding and end card (inferred): centered {{LOGO}} with {{CTA_URL}} in plain text; keep the field quiet.

      0s         10s
mean  ▃▂▃▃▃▃▃▃▃▃ ▃▂▂▂▂▂▂
p95   ▅▄▄▄▄▄▅▅▆▇ ▆▃▃▃▃▃▃

:root { --brand-bg: {{BRAND_BG}}; --brand-accent: {{BRAND_ACCENTS}}; }
.stage { background: radial-gradient(circle at 88% 5%, color-mix(in srgb, var(--brand-accent) 10%, var(--brand-bg)), var(--brand-bg) 50%); }
.row { border-radius: 16px; background: color-mix(in srgb, white 8%, var(--brand-bg)); border: 1px solid color-mix(in srgb, white 8%, transparent); box-shadow: 0 8px 24px #0004; }
.icon-tile { border-radius: 20px; backdrop-filter: blur(12px); }
.ring { filter: drop-shadow(0 0 18px color-mix(in srgb, var(--brand-accent) 45%, transparent)); }

Measured: no speech detected; the v1 transcript contains only nonverbal fragments. Voice direction (inferred): no voice; the picture carries the explanation. Keep written labels short and correctly shaped for {{LANGUAGE}}.

• Music (inferred): restrained tonal electronic pulse with a gradual first build, lighter middle and fuller resolution under beats 2–4.
• Sound effects (inferred): soft click at the opening cue and completion ticks; reserve stronger hits for the cue sheet's frame 246/250 and frame 397.
• Silence and space (inferred): no vocal layer; leave the benefit line free of sharp transients.

▄█▅▇▄▄▆▄█▇ ▇▄▁▆▁▁▁

• Title (inferred): {{PRODUCT}}: {{GOAL}} in progress.
• Cover / thumbnail (inferred): oversized {{GOAL}} and one icon tile on {{BRAND_BG}}, with ample empty field.
• Post copy (inferred): one sentence naming the goal, then {{CTA_URL}}.
• Audience signals: 263 views at capture; no replay graph or comment contents supplied.

[beat 1 · shot 1 · short title] {{GOAL}}
[beat 1 · finite count] {{MILESTONES}}
[beat 2 · six short row labels and values] {{MILESTONES}}
[beat 2 · central changing value] {{METRIC}}
[beat 3 · one short benefit sentence] {{BENEFIT}}
[beat 4 · identity and text CTA] {{LOGO}} · {{CTA_URL}}

Direction (inferred): picture-led, with no narration or subtitles. Keep each required on-screen phrase at the plate 6 phone minimum and state updates readable between changes.

Two routes (inferred)

Minimum: Claude alone. Remotion builds the whole piece as SVG and CSS, including layered cards, arc, number tween, blur and synthesized music via Web Audio rendered to WAV. It reaches the main motion and layout quickly; it gives up the source's fine confetti and nuanced mix texture. Supply real {{PRODUCT}} data and {{LOGO}}.

Full: with the toolkit. Write the UI and motion in Remotion, export camera and element keyframes as JSON at 30 fps, render the 2520×1080 frame sequence, then finish the edit and original music/effects in Remotion or an editor. Pass 2520×1080 PNG frames with alpha for the foreground UI and a 48 kHz WAV with click track to the final edit; export 30 fps H.264 MP4. This flat UI film needs no Blender.

Asset honesty: real product captures or your own UI rebuilt in code; where no image exists, a type tile says it plainly. Never generated product UI, invented screenshots, fake metrics, fake reviews or fake outputs. For this film, milestone amounts and completion states must come from credible {{PRODUCT}} data or be clearly labelled illustrative.

Script prompt (inferred):

Write original on-screen copy for a wordless, picture-led progress header for {{PRODUCT}} in {{LANGUAGE}}. Supply a short {{GOAL}}, six credible {{MILESTONES}}, a changing {{METRIC}}, and one compact {{BENEFIT}} sentence. Use the same data for each row check, ring increment and value. Keep essential text readable at 50 px cap in a 2520×1080 frame. End with {{LOGO}} and {{CTA_URL}} as text. Avoid the reference's wording, amounts and identity.

Music prompt (inferred): “Original C-major 99.38 BPM electronic pulse, filtered opening, six light completion ticks, gentle resolve, no vocals.”

How it's built (inferred)

The signature move is the title becoming a dashboard header while the rows and ring enter. Keep the camera fixed; put the heading, icon, rows and ring on separate layers. The measured element track in plate 5 gives 0.13–0.67 s scale-up (×1.31), 1.00–1.80 s scale-down (×0.30 with +28.6% x and −43.9% y image travel), and 2.20–2.67 s small roll (−1.2°). The tracker follows a changing region, so its aggregate ×0.65 is a hint, not a camera zoom. Drive the hero-to-header transform over frames 30–54 with cubic-bezier(.2,.8,.2,1); reveal the list with staggered masks while the ring starts from an empty track. The sheets show a clear UI build even where the tracker calls the scene static.

Use one integer completion state to update row icons, central number and SVG stroke-dashoffset; interpolate the arc between states with cubic-bezier(.33,0,.2,1). The timeline sheets show sequential checks through beat 2 and confetti near 8.5–10 s. Fade the completed UI's opacity into the benefit line around beat 3, then replace that line with the identity card around beat 4; both changes occur inside shot 1, with no cut. The measurements do not give exact transition frame counts for these later changes, so use 12-frame opacity overlaps as a build choice and keep the source's no-fade-to-black ending. Animate on ones at 30 fps; use 2 subframe samples for fast transforms and a 180° shutter equivalent. Test RTL glyph shaping and prevent digit changes from shifting the ring's center.

Build order

1. Make the 2520×1080, 30 fps background and brand tokens.
2. Set beat 1 type, then build the title-to-header transform of shot 1.
3. Build beat 2 rows, ring and number from one state array.
4. Add beat 3 and beat 4 typography and internal opacity handoffs.
5. Synthesize the original cue-aligned bed, mix it, render and inspect phone-size readability.

• One continuous shot and zero hard cuts, matching plate 4.
• Primary transform follows the measured shot 1 element segments in plate 5 within ±1 frame at the stated boundaries.
• Row checks, ring fraction and {{METRIC}} agree at each completion state.
• Required type is at least 50 px cap at 2520×1080; 16:9, 9:16 and 1:1 use plate 15 minima.
• Cues align to the JSON frames within ±1 frame; use tracked beats, not a constant formula.
• X export measures about −14 LUFS integrated, true peak ≤ −1 dBTP.
• End card remains visible to the hard stop; no fade to black.
• No reference colours, exact logo, copy or music remain.

Brand slots

What this film avoids (inferred): no voiceover, stock footage, feature list, device frame or fake results. Keep the visual proof in the synchronized states.

Brand-distance warning (inferred): a car-payment example with the reference's navy/green pairing and matching Arabic closing line would read as its brand. Change the goal domain first, then map the colours and copy to {{PRODUCT}}.

Adapt the aspect (inferred):

• 16:9: Centre-crop the 21:9 sides to 1920×1080, losing 11.9% each side; move the affected interface element inward, keep essential type ≥38 px cap, and reserve bottom/right platform UI margins.
• 9:16: Re-lay out at 1080×1920: stack heading, list and ring vertically, then center the end card; keep essential type ≥22 px cap and clear top and bottom app controls.
• 1:1: Re-lay out at 1080×1080: put rows above or beside a reduced ring inside the center square; keep essential type ≥22 px cap and clear the lower caption overlay.

Adapt the length (inferred):

• 15 s: Keep all four beats; tighten beat 2's intervals while preserving the signature transform and identity hold.
• 30 s: Keep beats 1, 3 and 4 concise; add fresh, meaningful milestones in beat 2.
• 60 s: Add new goal chapters with their own verified data; do not stretch static holds or replay the same six checks.

The creator's signature (don't copy): exact mark, car-installment copy, values, palette and music. The transferable format (do copy): finite-goal title, transformation into synchronized progress UI, concise benefit and calm end card.

Source: https://x.com/o_labib/status/2117372151384662283 · measured with dissect 1.1 and timeline v2 on 2026-11-04 · (measured) = read off the film · (inferred) = our reading