Animated expense-tracker App Store header

A fixed mobile marketplace page lends instant product context while its small header cycles through compact proofs of the app. The viewer sees one quiet, continuous demonstration, ending on a brand lockup inside the same header.

Why it works (inferred): the page is recognizable at frame 0; the proof changes within shot 1 while the listing stays anchored; the ending names the product without adding a new scene. The measured frame luma stays near 0.91, so the tiny moving graphics carry the change.

Tools you'll need: Remotion for motion graphics · screen recordings of the product · Claude alone: partly

Hook formula (inferred): {{PRODUCT}} listing + concise benefit + small real data chips. Why it holds: the stable listing makes the changing header legible; the graphic carries the story without narration.

Retention map (inferred): internal re-hooks at beats 2, 3 and 4; payoff at beat 5. The sheets suggest successive new header pictures near 2, 4, 6 and 8 s; the measurement says one continuous shot and lists no discrete change boundaries. These are approximate visual phases, not cuts.

Mix: one locked screen capture. Rhythm: the outer page remains static while the header changes within shot 1. There is no measured camera pan, zoom or cut.

Rules this editor follows (inferred)

• Keep the page, icon, product name, rating row and lower product panel fixed while animating only a clipped header layer.
• Make each proof readable before replacing it; avoid moving the capture itself.

Look (inferred): pale near-white page, subtly cool header, small white cards, restrained tinted chips and crisp dark type. The reference's colours in the measured palette are evidence of roles; substitute {{BRAND_BG}} and {{BRAND_ACCENTS}}. Graphics: simple charts and rounded cards with shallow shadow. Transitions: internal header replacements only. Branding: put {{LOGO}} in the final header lockup and {{CTA_URL}} as small readable text within that header before the hard stop; avoid marketplace badges.

      0s
mean  ██████████
p95   ██████████

:root { --brand-bg: {{BRAND_BG}}; --brand-accent: {{BRAND_ACCENTS}}; --ink: #222; }
.page { background: var(--brand-bg); color: var(--ink); }
.header { overflow: hidden; background: color-mix(in srgb, var(--brand-bg) 92%, var(--brand-accent)); }
.proof-card { background: color-mix(in srgb, var(--brand-bg) 96%, white); border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); border-radius: 20px; box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.chip { border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.05); }

Measured: no speech. Voice direction (inferred): no voice; the picture carries it. Required words must be readable at phone size without a sound track.

Music (inferred): the reference is effectively silent. For a new version, use a quiet original electronic bed only if the channel calls for sound; let the visuals remain clear when muted. Effects: no audible reference hits to copy. Space: keep ample room around beats 2–5; do not invent cue-locked cuts.

▁▁▁▁▁▁▁▁▁▁

Title (inferred): {{PRODUCT}}: {{BENEFIT}} in a moving header. Cover: fixed product listing with one legible header proof, not a collage. Post copy: one benefit sentence plus {{CTA_URL}}. Audience signals: the post had 9 views at capture, too little to infer performance.

[beat 1 · shot 1 · on-screen ≤5 words] {{BENEFIT}}
[beat 2 · shot 1 · on-screen ≤4 words] {{METRIC_LABEL}} + a real, authorized value
[beat 3 · shot 1 · on-screen ≤4 words] {{FEATURE}}
[beat 4 · shot 1 · on-screen ≤4 words] {{INSIGHT}}
[beat 5 · shot 1] {{LOGO}} · {{CTA_URL}}

(inferred) No spoken line or caption track. Keep proof labels short enough to read in their header phases; the outer listing supplies persistent product context.

Two routes (inferred)

Minimum: Remotion. Build the complete listing and animated header in JSX/CSS/SVG at 1080×2344, 60.155 fps. Claude can code and render it, and synthesize the optional quiet bed. This simplifies the genuine marketplace context into a brand-neutral listing; it gives up the exact texture and credibility of a real capture. User supplies real product data, logo and UI assets.

Full: screen recording → Remotion. Capture a real, authorized {{PRODUCT}} listing/UI as a clean 1080×2344 PNG or ProRes frame sequence at 60.155 fps. Pass that capture to Remotion as the fixed base; pass a transparent 1080×2344 PNG sequence of the designed header animation, or its JSX source, at the same fps. Render an optional original music WAV at 48 kHz and hand it to Remotion; export H.264 MP4 at 1080×2344 and 60.155 fps. Preserve the page crop across every frame.

Asset honesty: use real product captures or UI rebuilt in code. Never generated product UI, invented screenshots, fake metrics, fake reviews or fake outputs. In this film the lower listing and every header figure must refer to the same {{PRODUCT}}.

Script prompt (inferred)

Write five short header states for {{PRODUCT}}: {{BENEFIT}}, a real {{METRIC_LABEL}}, {{FEATURE}}, {{INSIGHT}}, then {{LOGO}} with {{CTA_URL}}. Keep each state short enough for the measured header box and 22 px phone cap minimum. Use only verified product values.

Motion prompt (inferred)

Build the fixed marketplace listing and animate only a clipped header layer. Use {{BRAND_FONT}}, {{BRAND_BG}}, {{BRAND_ACCENTS}}. Follow shot 1 and the beat phases in plate 4. Render at source cadence; keep the outer page pixel-stable.

How it's built (inferred)

Signature move: a changing header inside a locked page. Shot 1 spans frames 0–581; camera scale remains ×1.000 and pan remains zero (plate 5). Separate a fixed capture/base page from a header overlay clipped to the top panel. Keep status bar and lower listing above or outside that mask so animation never shakes the page. Build chart lines as SVG paths, bars as transform-origin:bottom rectangles, donut as a stroked SVG circle; use 12–24 f ease-out cubic-bezier(.2,.8,.2,1) for entrances and 12 f opacity overlaps for internal replacements. These are construction targets, not measured transition lengths. Render every frame on ones at 60.155 fps; use 180° shutter simulation only on moving cards, never blur page text. Avoid fractional-pixel movement in the listing.

Internal handoffs. The sheets suggest header-picture changes near frames 120, 240, 360 and 480; the measurement identifies no cuts or discrete step-change boundaries. Treat these as approximate design anchors inside shot 1. At each, crossfade only the clipped header layer over 12 f, leaving the outside page unchanged. At beat 2 animate the amount in roughly 18 f; at beat 3 draw both trend paths over roughly 24 f; at beat 4 draw the donut over roughly 24 f. Beat 5 resolves to {{LOGO}} with {{CTA_URL}} beneath it. No measured end fade: end on the visible page state.

Build order

1. Build the fixed shot 1 page with real {{PRODUCT}} data and a bounded header mask.
2. Implement beats 1–5 as header components and tune internal handoffs against the labelled sheet tiles.
3. Apply the plate 6 type scale and material card; verify every required word meets the phone minimum.
4. Add the optional plate 8 bed; render shot 1 as one continuous export, then inspect hook, each beat anchor and final frame.

• Output is 1080×2344 at 60.155 fps, 582 frames, with no cuts or closing fade.
• Fixed page registration drifts by no more than 1 px between beat anchors.
• Header animation stays inside its mask; no card covers the product title or lower section.
• Every required word has cap height ≥22 px at 1080-wide delivery; smaller details are decorative.
• Beat 5 shows {{LOGO}} and readable {{CTA_URL}} as text before frame 581.
• If sound is added for X, target −14 LUFS integrated and true peak ≤−1 dBTP; mute playback still works.
• All values, charts and screenshots match real {{PRODUCT}} evidence; reference identity is absent.

Brand slots

What this film avoids (inferred): voiceover, people, stock footage, cutaway scenes, feature-list slides, dramatic camera moves and audible hit effects.

Brand-distance warning (inferred): copying the pale storefront, blue action pill, handwritten icon shape, expense-chip arrangement and exact finance figures together would read as the reference. Change the visual proof vocabulary first: use your own data category and chart form.

Adapt the aspect (inferred)

• 16:9: Re-lay out as a two-column frame: listing on one side, enlarged header states on the other; a centre crop loses too many measured boxes. Use ≥38 px cap for required text and keep title/CTA clear of platform overlays.
• 9:16: Centre-crop the 59:128 source, then move the one lost top box inside; keep required cap ≥22 px and keep the CTA above the lower platform controls and below top UI.
• 1:1: Re-lay out the header over a shortened listing rather than cropping; keep icon/title and one proof panel, use ≥22 px cap, and place CTA away from lower/right platform controls.

Adapt the length (inferred)

• 15 s: Keep all five beats within shot 1; give the proofs more reading space without adding holds to the outer page.
• 30 s: Add verified product examples inside beats 2–4 while preserving the contained-header grammar; keep beat 5 concise.
• 60 s: Introduce new verified proof phases within shot 1, with distinct labels and visuals; do not simply slow the original chart builds or stretch the final lockup.

The creator's signature (don't copy): Fineyo name, logo shape, exact finance figures, copy and palette. The transferable format: a static listing that frames a sequence of small, legible proof animations in its header.

Source: https://x.com/fineyoapp/status/2116956566108971124 · measured with timeline v2 on 2026-11-04 · (measured) = read off the film; (inferred) = construction reading