App Store Preview With an Animated Expense Timeline

(inferred) A complete phone storefront is present in frame one. Tiny events animate around a large symbol in its header; the screen then scrolls to make product feature cards the payoff. The device, not a narrator or a cut sequence, carries the story.

Why it works

• The listing and action button are visible at 0.00 s, so context needs no setup.
• The continuous shot permits a close look at the moving header without losing the storefront frame.
• The scroll makes the lower cards prominent around 10.8–12.1 s; there are no cuts to interrupt the scan.

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

Hook formula (inferred): completed storefront + one moving proof of {{FEATURE}}. Why it holds (inferred): The white ring is a visual anchor while the small chips change; the app listing stays recognizable.

Retention map (inferred): visual renewal around 6 s and 10.8 s · payoff after the scroll · action button appears from opening · hard stop.

Mix: one designed phone shot, no live action. Rhythm: no cuts; internal UI and phone scale do the editing.

Rules this editor follows (inferred):

• Keep the phone's outer axis stable; move nested screen layers.
• Use a large central mark to organize small event chips.
• Keep the cards visible before and after the scroll so the reveal feels continuous.

• Look (inferred): warm pale field, high-contrast device bezel, bright header, clean white listing. The reference uses orange and a white ring; substitute {{BRAND_BG}}, {{BRAND_ACCENTS}}, and {{LOGO}} by role.
• Graphics and overlays (inferred): fine timeline rule, small round nodes, pill event chips, two screenshot cards. Keep all actual product surfaces from {{UI_ASSETS}} or code.
• Transitions (inferred): internal translation and scale, with no cut or fade.
• Branding and end (inferred): no separate end card is measured. Make the settled listing serve as the final card, with {{LOGO}} in the product icon and {{CTA_URL}} as plain text inside the composition if a link must appear.

      0s         10s
mean  ▆▆▆▆▆▆▆▆▆▇ ▇▇▇▇▇▇
p95   ██████████ ██████

:root { --brand-bg: {{BRAND_BG}}; --brand-accent: {{BRAND_ACCENTS}}; }
.stage { background: var(--brand-bg); }
.phone { border: 5px solid #161616; border-radius: 56px; box-shadow: 0 20px 28px rgba(0,0,0,.20), 0 4px 7px rgba(0,0,0,.10); overflow: hidden; }
.screen { background: #fff; overflow: hidden; border-radius: 49px; }
.hero { background: var(--brand-accent); }
.chip { background: #fff; border: 1px solid rgba(0,0,0,.12); border-radius: 999px; box-shadow: 0 2px 5px rgba(0,0,0,.13); }
.card { background: var(--brand-accent); border-radius: 14px; }

Measured: no audio track and no speech. Voice direction (inferred): no voice; the picture and genuine UI explain the product.

• Music (inferred): keep silent for the closest remake. An optional original bed can add gentle momentum while remaining secondary to picture changes.
• Sound effects (inferred): optional soft chip ticks and a restrained scroll swish; no measured audio cues exist.
• Silence and space: the reference is silent throughout.

• Title (inferred): “New preview for {{PRODUCT}}” or a similarly plain artifact title.
• Cover (inferred): centered phone, active header and storefront action visible; no extra slogan.
• Post copy (inferred): one sentence about the new preview, then {{CTA_URL}}.
• Audience signals: 206 views at capture; no replay or comment-content evidence is available.

(inferred) Picture-led, with no spoken lines. Write only truthful UI copy. Use these word budgets so the moving labels remain scan-friendly.

[beat 1 · shot 1] {{PRODUCT}}: 2–5 words; descriptor: 3–6; action: 1–2.
[beat 2 · shot 1] {{EVENT}}: one specific event label and one short value; legibility ≥22 px cap if essential.
[beat 3 · shot 1] Repeat the product title; no new claim.
[beat 4 · shot 1] {{FEATURE}}: two distinct card headlines, 3–6 words each.
[beat 5 · shot 1] One supporting result line, 6–10 words; {{CTA_URL}} as text if required.

Two routes (inferred)

Minimum: Claude alone. Build the full 1080×1920, 30 fps film in Remotion: CSS phone, clipped listing, animated header, genuine {{PRODUCT}} UI recreated from supplied {{UI_ASSETS}}, and optional synthesized music. This gets the timing and most of the visual grammar; it simplifies the hardware reflections and gives up native storefront fidelity unless actual captures are supplied.

Full: with the toolkit. Prepare verified {{UI_ASSETS}} as PNG at 1080×1920. Build the phone, hero and cards in Remotion; pass camera and element keyframes as JSON at 30 fps into the main composition. Export a 1080×1920 PNG sequence with alpha from any separately built UI module, then composite in Remotion. If adding sound, supply a 48 kHz WAV with a click track aligned to the chosen cue frames; remove the click on final export. Remotion renders H.264 MP4 at 30 fps.

Asset honesty: real product captures or UI rebuilt in code; if unavailable, make a clearly labelled type tile. Never invent screenshots, metrics, reviews or outputs. The two feature cards must show actual {{FEATURE}} states.

Script prompt

Write concise storefront UI copy for {{PRODUCT}} demonstrating {{FEATURE}} through one truthful {{EVENT}}. Provide a 2–5 word listing title, short descriptor, two distinct 3–6 word card headlines and one supporting result line. Keep the film silent. Use {{BRAND_FONT}}, {{BRAND_BG}}, {{BRAND_ACCENTS}} and {{LOGO}} only as supplied brand assets. All claims must match {{UI_ASSETS}}.

Music prompt (optional, inferred): original quiet 90 BPM D-major electronic bed; cues at the chosen scroll frames; no voice.

How it's built (inferred)

The signature move is the screen-contained scroll, not a cut. Put a rigid phone bezel above a clipped screen; inside, stack hero, listing, rating row, cards and supporting copy in one scroll container. Begin the scroll around frame 323 and settle near frame 363 (about 40 f), translating content upward with cubic-bezier(.22,1,.36,1); let the card headlines rise with their parent layer. The v1 facts mark picture changes near 10.75 and 11.8 s, but the v2 timing block measures no discrete internal change, so treat these as phases of continuous screen movement. Keep the action button inside the screen hierarchy so it tracks the page; avoid sliding the entire phone.

For beat 2, scale the phone layer, not the camera: the measured camera in plate 5 is effectively static (×1.0083 over the shot), while the sheets show a much larger apparent push toward the header. Animate a CSS transform from 1 to about 1.45 between frames 90–195, then back toward 1 by frame 300, with cubic-bezier(.22,1,.36,1). Treat 1.45 as a sheet-based visual estimate, not a measured camera value. Keep the ring and chips in the nested hero so they retain their positions relative to the screen. Animate chip translation on ones, with 18-frame eased glides and 8-frame opacity changes; use a 180-degree shutter equivalent (about 1/60 s at 30 fps) or 2–4 subframe samples. Clip every moving layer to the screen radius; a scale on the whole canvas will also enlarge the backdrop and ruin the trick.

(inferred) The sheets suggest a brief return from the lower-page view toward the header around 13.0–13.5 s; the measurement says one continuous shot with no cut. Implement it as a reverse screen translation over about 15 f. The sheets then show small event-chip changes to the last frame; keep them as in-screen motion. The reference has no closing fade.

Build order

1. Build beat 1's full storefront and phone shell from {{UI_ASSETS}} or code.
2. Animate beat 2's nested hero and apparent phone push; restore the wider view for beat 3.
3. Animate beat 4's masked scroll and beat 5's readable state; add the late reverse translation visible in the sheets.
4. Render on ones at 30 fps. Add optional original audio only after the silent picture works.

• One shot spans frames 0–479; no visible cuts or closing fade.
• Screen scroll begins around frame 323 and settles near frame 363 without moving the bezel.
• Phone stays centered while its apparent scale changes; measured camera remains effectively static.
• Every essential word has ≥22 px cap height at 1080×1920; decorative microcopy is not relied on.
• Any optional accent lands within ±1 frame of its selected cue; no reference cue is claimed.
• If audio is added for X, integrated level is around −14 LUFS and true peak ≤−1 dBTP; a silent export has no audio stream.
• {{UI_ASSETS}} depicts real product states and all card claims are verifiable.

Brand slots

What this film avoids:

• Voiceover, presenter, stock footage, cut montage, subtitle captions, feature-list slate, separate logo outro, QR code and store badges.

Brand-distance warning (inferred): An orange hero, white ring, black ring icon and finance-event chips together would read as the reference. Replace the central symbol with {{LOGO}} and reshape the hero timeline around your own product interaction.

Adapt the aspect (inferred):

• 16:9: Re-lay out at 1920×1080; a centre crop loses most of the top and bottom. Put the device at one side, place feature cards beside it, and keep essential type ≥38 px cap outside platform title and control safe zones.
• 1:1: Re-lay out at 1080×1080; raise the listing and spread the cards beside or below the phone. Keep essential type ≥22 px cap and leave edge room for platform controls.

Adapt the length (inferred):

• 15 s: Keep all five beats and shorten the scalable intervals; preserve the scroll and final scan.
• 30 s: Keep the same shot grammar; add a second verified event before the feature reveal and more card reading time.
• 60 s: Add genuine product states and new internal beats, rather than stretching the original holds; retain the continuous device axis.

The creator's signature (don't copy): the ring icon, orange finance palette, exact transaction amounts and feature copy. The transferable format (do copy): complete storefront first, nested header motion, screen-contained scroll, readable feature proof.

Source: https://x.com/13doots/status/2117190209645559935 · measured with dissect 1.1 and timeline v2 on 2026-11-04 · (measured) = film data · (inferred) = construction reading