Characters Invade an App Store Header

(inferred) A fixed phone proves the product exists while an illustrated header behaves like a tiny stage. Two waves of original characters enter, gather around a larger central silhouette, and clear without changing the product listing.

Why it works: The listing is present at frame 0; the first central arrival is visible near 3 s and a second near 10 s. The single locked camera in plate 5 makes the small cast movement readable.

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

Hook formula (inferred): show {{PRODUCT}} in a real {{UI_ASSETS}} page; animate {{CHARACTER_SET}} into {{HEADER_WORLD}}.

Retention map (inferred): Beat 3 pays off the first wave; beat 5 repeats with a changed arrangement. The reference has no in-video call to action or fade.

Mix: One fixed composited device shot. Rhythm: Character motion supplies all variation inside shot 1; the plate 4 boundary is start only.

Rules this editor follows (inferred):

• Keep the device, listing, moon and ridge registered; animate character layers behind the foreground ridge.
• Preserve the central faces when testing a narrower phone header crop.

(inferred) Use {{BRAND_BG}} as the outer field, a darker brand surface inside the phone, and {{BRAND_ACCENTS}} for character separation and the header light. The reference uses a dark violet ground and pale moon; those colours are evidence, not required assets. Phone bezel and product UI remain sharp while the scenic hills have soft edges. There is no separate end card in the measured film; for a new version, place {{LOGO}} and {{CTA_URL}} as text below the phone during beat 6 without a cut or fade.

      0s         10s
mean  ▂▂▂▂▂▂▂▂▂▂ ▂▂▂▂▂
p95   ▇██▇▇▇▇███ ▇▇▇▇▇

:root { --brand-bg: {{BRAND_BG}}; --brand-accent: {{BRAND_ACCENTS}}; }
.frame { background:var(--brand-bg); }
.phone { border:2px solid color-mix(in srgb, white 65%, var(--brand-bg)); border-radius:46px; box-shadow:0 18px 44px #0009, 0 0 18px color-mix(in srgb, var(--brand-accent) 25%, transparent); overflow:hidden; }
.header { position:relative; isolation:isolate; background:radial-gradient(circle at 50% 25%, color-mix(in srgb, white 65%, var(--brand-accent)) 0 7%, transparent 14%), linear-gradient(var(--brand-bg), var(--brand-accent)); }
.hill-back { filter:blur(3px); } .ridge { filter:blur(0.5px); } .character { filter:drop-shadow(0 3px 5px #0008); }

Measured: No speech and no audio track. Voice direction: No voice; the picture carries the sequence.

Measured: Silent throughout. The production default is therefore silence. If a sound-on version is commissioned, use the original bed below and keep every entrance understandable muted.

• Title (inferred): “{{PRODUCT}} animated header in its live product page.”
• Cover (inferred): Show the complete phone with a small cast visible above the ridge; keep product identity legible.
• Post copy (inferred): Share one specific crop lesson, then place {{CTA_URL}} as plain text.
• Audience signals: 103 views at capture; no retention or replay data supplied.

[beat 1 · shot 1] On-screen product name: {{PRODUCT}}.
[beats 2–5 · shot 1] No new narration or captions; listing copy remains fixed.
[beat 6 · shot 1] New-version CTA: {{LOGO}} · {{CTA_URL}} as text.

Two routes (inferred)

Minimum: Remotion with CSS 3D. Build the phone, listing, scenery, masks, layered characters and silent export in one code stack; Claude can synthesize optional music in code. Use supplied {{UI_ASSETS}} and original {{CHARACTER_SET}} drawings. This gives up hand-animated shape nuance and uses simple layered depth.

Full: After Effects → Remotion. Prepare original character art as transparent PNG or SVG at 1080×1350. Animate header layers in After Effects at 30 fps, then pass a 1080×1350 PNG sequence with alpha to Remotion. Remotion composites the real {{UI_ASSETS}}, phone and header, and outputs H.264. Transfer entrance coordinates and easing in JSON; if sound is chosen, pass a 48 kHz WAV and click track to the final edit.

Asset honesty: Use real captures of {{PRODUCT}} or its UI rebuilt in code; if missing, use a plainly labelled type tile. Never fabricate screenshots, ratings, reviews or results. The character designs and scenic header must be original, and faces must survive the phone crop.

Storyboard prompt: “For {{PRODUCT}}, map beats 1–6 onto one locked product page. Design original {{HEADER_WORLD}} and {{CHARACTER_SET}} layers; keep the centre reveal inside the phone header. Use {{BRAND_FONT}}, {{BRAND_BG}}, {{BRAND_ACCENTS}}, {{LOGO}} and real {{UI_ASSETS}}. Output entrance positions and mask order.”

Caption spec: No captions. Required product and {{CTA_URL}} copy meet plate 6's phone minimum. Optional music follows plate 8.

How it's built (inferred)

The signature move is a character rising through a ridge mask while the phone stays fixed. In shot 1, place sky and moon behind far hills, character layers next, then a near ridge above their lower bodies. For beat 2, keyframe each figure from 20–35 px below its resting head position to rest over 12–18 frames; use cubic-bezier(.22,1,.36,1). Stagger entrances, then add 2–4 px idle bob on a 45–60 frame cycle. For beat 3, raise the central silhouette 45–70 px over 18–24 frames with the same curve and a 3 px shadow displacement. Reverse the motion for beat 4; reorder and repeat in beat 5; withdraw in beat 6. Those are construction ranges inferred from sheet tiles, not measured motion values. The camera measurement is static, ×1.000, plate 5; do not scale the whole phone. Animate on ones at 30 fps, with optional two-sample subframe motion blur of 2 px on fast rises only. The cadence measurement in plate 5 says still with low confidence; the sheets visibly show character motion, so do not interpret that label as a frozen header. There are no measured internal step changes, hand-offs or invisible cut boundaries; these are continuous layer movements.

Build order

1. Build shot 1's locked phone and real listing for beat 1; verify the plate 5 focus region.
2. Draw {{HEADER_WORLD}}, foreground mask and transparent {{CHARACTER_SET}}.
3. Animate beats 2–6 in the one shot, preserving the plate 4 boundary and plate 6 brightness character.
4. Add the new-version text CTA in beat 6 and export the chosen sound option.

• One shot, frames 0–449 at 30 fps; zero cuts and no closing fade.
• Whole phone transform stays at scale 1.000 with zero camera pan, per plate 5.
• Every required word is ≥22 px cap at 1080×1350; smaller UI text is decorative.
• Central faces remain inside the phone header after the intended crop.
• Mean brightness stays close to plate 6's 0.11 curve; no invented flash or blackout.
• If audio is added for X, integrated loudness is −14 LUFS and true peak ≤−1 dBTP; silent version has no audio track.
• No reference name, mascot, palette, font, slogan or music remains.

Brand slots

What this film avoids: Voiceover, captions, stock footage, feature list, camera moves, cuts, QR codes and store badges.

Brand-distance warning (inferred): Purple moonlit hills plus the same small cast silhouettes and listing copy would read as the reference. Change the header world first; make its visual logic specific to {{PRODUCT}}.

Adapt the aspect (inferred):

• 16:9: Re-lay out the phone and bottom text; a centre crop loses too much vertical listing. Put the phone at centre and retain readable {{CTA_URL}} within platform safe margins. Required cap text ≥38 px.
• 9:16: Centre crop can retain the measured boxes, then check that character faces stay within the phone header. Keep required text ≥22 px and clear top/bottom platform UI zones.
• 1:1: Centre crop, then move any lost top and bottom listing labels inward. Keep {{CTA_URL}} clear of the bottom platform UI zone and required text ≥22 px.

Adapt the length (inferred):

• 15 s: Keep all six beats in shot 1, with its central reveal intact.
• 30 s: Add fresh character combinations and a second header idea within the same locked shot; retain both central reveals and the reset.
• 60 s: Add new stage states and product-specific character interactions; keep the fixed product proof and avoid stretching static holds.

The creator's signature: Specific game name, icon, cast, moonlit scene, listing and palette. The transferable format: A fixed real product page with masked character entrances, reset and renewed reveal.

Source: https://x.com/_Jabman_/status/2116743224991580519 · timeline v2 · (inferred) = construction reading