Tider's Animated App Store Header

A centered device shows a recognizable product listing immediately. Only its clipped feature banner rearranges; the stable listing makes the motion read as a product promise.

Why it works (inferred): The product identity and action are visible at frame 0. A single shot holds the viewing frame for 359 frames while the banner offers fresh shapes. The measured 0.91 mean luma keeps the small device legible against a bright field.

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

Hook formula (inferred): complete {{PRODUCT}} listing + animated {{FEATURE}} banner. Why it holds: the product stays anchored while only the banner asks for attention.

Retention map (inferred): banner rearrangements supply the visual refresh; the product is the payoff from the start. The reference ends without a separate call to action or fade.

Mix: one straight-on device composition. Rhythm: the camera holds; there are no cuts or continuous-shot boundaries.

Rules this editor follows (inferred): keep the device, icon, action and body copy registered to one coordinate system. Animate only tiles clipped to the upper banner.

Look (inferred): bright near-white ground, thin dark device rim, shallow gray contact shadow, flat saturated artwork. Map the background and tile palette to {{BRAND_BG}} and {{BRAND_ACCENTS}}; the reference values are evidence in the measured table.

Graphics and overlays (inferred): make modular tiles with simple symbols, clip them below the device glass, and move tile groups independently. No full-frame transition. The reference has no end card; for a new version, a plain text {{LOGO}} plus {{CTA_URL}} can sit inside the listing's lower area during the final hold without replacing the shot.

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

:root { --brand-bg: {{BRAND_BG}}; --brand-accents: {{BRAND_ACCENTS}}; }
.canvas { background:var(--brand-bg); }
.phone { border:3px solid #292929; border-radius:46px; box-shadow:0 13px 26px rgba(0,0,0,.19), 0 2px 5px rgba(0,0,0,.22); overflow:hidden; }
.glass { background:#fff; border-radius:42px; }
.banner { overflow:hidden; isolation:isolate; }
.tile { border-radius:2px; background:var(--brand-accents); }

Measured: no speech and no audio track. Voice direction (inferred): none; the picture carries the message.

Reference: silent throughout. There are no measured cues, tempo, sections or loudness. Inferred adaptation: keep silence by default. If a platform brief requires audio, make it subordinate to beat 1; use a gentle original bed without implying it was in the reference.

Title (inferred): {{PRODUCT}}: {{FEATURE}} in motion. Cover: use the complete frame at opening, with the product and banner both visible. Post copy: one sentence naming the update, followed by {{CTA_URL}} as text. Audience signals: the captured post had 41 views; there is no evidence of replay or comment behavior.

[beat 1 · shot 1 · picture-led; no spoken words]
Product name: {{PRODUCT}}
Listing proof: authentic {{UI_ASSETS}} that show {{FEATURE}}
Optional adapted final text: {{LOGO}} · {{CTA_URL}}

Keep required text at 22 px cap or larger. The smaller listing copy can remain texture. No captions or phrase timing are needed.

Two routes (inferred)

Minimum: Claude alone. Remotion with CSS 3D perspective only if needed for the phone rim; build the whole film in code, including a synthesized optional music bed. Use actual {{UI_ASSETS}} supplied by the builder, or hand-code an honest listing for {{PRODUCT}}. This simplifies the device reflections and gives up a photographic bezel; it keeps the composition and banner motion.

Full: with the toolkit. Export genuine {{PRODUCT}} listing assets as PNG or SVG at 1080×1440. Remotion builds the device and banner at 60 fps, takes tile positions and camera constants from the timeline JSON, and renders H.264 MP4 at 1080×1440. If audio is requested, pass a 48 kHz WAV with a click track to the Remotion edit, then remove the click for export. There is no Blender handoff.

Asset honesty: use real product captures or your own UI rebuilt in code; if an asset is missing, label a type tile plainly. Never generate product UI, screenshots, metrics, reviews or results. Here, the product listing itself is the proof, so its name, icon and action must belong to {{PRODUCT}}.

Script prompt (inferred)

Write one truthful product-name line and one concise feature line for {{PRODUCT}} showing {{FEATURE}}. Use {{BRAND_FONT}}, {{LOGO}}, and authentic {{UI_ASSETS}}. Keep essential words above the phone minimum. No narration or invented claims.

Motion prompt (inferred)

Build original geometric tiles in {{BRAND_ACCENTS}}. Animate only inside the device banner; preserve the phone and listing registration for beat 1, shot 1. Use continuous 60 fps motion and a clipped mask.

How it's built (inferred)

Signature move: draw the full phone first, then a rounded glass mask and a banner mask inside it. Place a wider mosaic of original tiles under the banner mask. Keyframe tile groups individually from frame 0 to frame 358; keep their artwork fully inside the banner. The measured camera scale stays ×1.000 and pan stays zero (plate 5): motion belongs to the tiles, not the device. Sample positions on every frame (ones), use cubic-bezier(0.42,0,0.58,1) for travel and stagger group starts so the layout changes continuously. Use transform interpolation or 8 sub-frame samples per output frame with a 180° shutter if fast edges strobe. Do not blur the listing. The frame sheets show several tile arrangements, but the Timing facts report no picture change event; treat them as continuous local motion, not cuts or swaps. Keep the last frame bright and visible: the reference has no closing fade.

Gotchas: moving the whole screen makes the listing drift. Allowing tiles beyond the banner mask changes the silhouette. Repeating a branded symbol or palette makes the result read as the original product.

Build order

1. Prepare authentic {{UI_ASSETS}} and define all brand slots for beat 1, shot 1.
2. Compose a locked phone, listing, rim and shadow at the plate 6 boxes.
3. Animate banner tiles on ones inside the mask; leave the measured camera fixed.
4. Add optional text CTA inside the listing, and optional original bed only when requested.
5. Render, inspect frames 0, 180 and 358, and run plate 14 checks.

• One shot only: 359 frames at 60 fps; no cuts or fade.
• Device camera pan is 0 and scale is ×1.000; motion is clipped to the banner.
• The product name and action are visible at frame 0.
• Required words have cap height ≥22 px at 1080×1440; smaller text is decorative.
• Frames 0, 180 and 358 show a stable listing and distinct banner arrangements.
• Silent export has no audio track; if audio is added, meet the plate 8 platform LUFS target and ≤−1 dBTP.
• All logo, UI, tile symbols, colours and copy belong to {{PRODUCT}}.

Brand slots

What this film avoids (inferred): voiceover, stock footage, camera movement, cuts, extra cards, large feature lists, and audio in the reference.

Brand-distance warning (inferred): a black lowercase icon, the same bright tile symbols and the same listing copy together would evoke the reference. Change the tile language to a visual metaphor unique to {{FEATURE}}.

Adapt the aspect (inferred):

• 16:9: re-lay out the phone and listing; a center crop loses top and bottom UI boxes per plate 0. Move required copy into the central band, keep at least 38 px cap, and leave room for platform controls.
• 9:16: a center crop retains the measured boxes, but enlarge the phone and shift adapted CTA text clear of bottom controls; required cap height ≥22 px and keep a safe top and bottom margin for feed UI.
• 1:1: center crop retains the measured boxes; keep the device centered, shift adapted CTA above bottom platform chrome, and retain ≥22 px cap for required words.

Adapt the length (inferred):

• 15 s: keep beat 1 and its signature banner motion; add new original tile arrangements, then a concise CTA inside the existing device.
• 30 s: keep beat 1, add truthful feature examples in new continuous compositions, and end on the adapted text CTA.
• 60 s: build separate feature chapters from real {{UI_ASSETS}}, each with a local banner motif; preserve the locked-phone grammar and give each new chapter a fresh proof point.

The creator's signature (don't copy): reference product name, icon, exact listing, tile symbols and palette. The transferable format: fixed device and listing around a continuous, clipped feature animation.

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