A Flowering App Store Header

A fixed phone listing makes a product legible at once. A field of tiny original marks gradually changes density inside its header, making an abstract product idea visible in one continuous picture.

Why it works

• The listing and header are present from frame 0, so the viewer has context before noticing the marks.
• One measured shot spans all 1110 frames; attention shifts within the composition instead of through cuts.
• The mean luma stays around 0.30 (plate 6), keeping the pale listing a stable reading anchor.

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

Hook formula (inferred): Show {{PRODUCT}} in a real or rebuilt listing while {{MOTIF}} begins to populate its header. Why it holds (inferred): The viewer can understand the product immediately, then look again to detect the slow change.

Retention map (inferred): One continuing visual question; payoff in beat 3; no measured in-video CTA. A new version can place a small text CTA in the final composition without a cut.

Mix: One composited UI shot. Rhythm: No measured camera movement, cut, transition, or discrete picture change. The sheets show many tiny header marks changing within the fixed layout.

Rules this editor follows (inferred):

• Lock the phone, listing, and wordmark; animate only the field.
• Keep marks away from essential text and controls.
• Use irregular stagger rather than a uniform wipe.

• Look (inferred): Dark outer field, dark header surface, light listing, restrained accents. The reference uses near-black and deep green; map those roles to {{BRAND_BG}} and {{BRAND_ACCENTS}}.
• Graphics and overlays (inferred): {{MOTIF}} repeats at small scale with varied rotation, opacity and stagger. {{UI_ASSETS}} supplies the real listing or a faithful code rebuild.
• Transitions: None measured.
• Branding and end card (inferred): The reference has no separate end card. For a new film, reserve a small final text line for {{LOGO}} and {{CTA_URL}} inside the same frame; keep the phone fixed.

      0s         10s        20s
mean  ▃▃▃▃▃▃▃▃▃▃ ▃▃▃▃▃▃▃▃▃▃ ▃▃▃
p95   ██████████ ██████████ ███

:root { --brand-bg: {{BRAND_BG}}; --brand-accent: {{BRAND_ACCENTS}}; }
.stage { background: var(--brand-bg); }
.phone { border: 3px solid rgba(255,255,255,.58); border-radius: 64px; box-shadow: 0 12px 34px rgba(0,0,0,.42); overflow: hidden; }
.header { background: var(--brand-accent); overflow: hidden; }
.listing { background: #fff; color: #111; }
.mark { width: 4px; height: 4px; opacity: var(--mark-opacity); transform: rotate(var(--rotation)) scale(var(--mark-scale)); }

Measured: No speech or audio track. Voice direction (inferred): No voice; the picture carries the idea. Keep product words short enough to read in the fixed listing.

• Music: The reference is silent. Preserve silence for the closest version.
• Sound effects: None measured.
• Silence and space: Complete silence keeps the slow visual change unforced.

• Title (inferred): “{{PRODUCT}} header study: {{MOTIF}} in motion.”
• Cover / thumbnail (inferred): Use the fixed phone composition with a legible listing and mid-density field; no extra headline.
• Post copy (inferred): One sentence about the concept, then {{CTA_URL}} as text.
• Audience signals: 5,221 views and 169 likes at capture; no replay data was supplied.

[beat 1 · shot 1 · on screen] {{PRODUCT}}; one short header wordmark.
[beat 2 · shot 1 · on screen] Keep the same listing; no editorial caption.
[beat 3 · shot 1 · on screen] Keep the same listing; the picture is the payoff.
[beat 4 · shot 1 · on screen] Optional final {{LOGO}} + {{CTA_URL}} text within the fixed layout.

No narration, captions, or spoken word budget. The subtitle should be at least 27 px cap if it carries meaning.

Two routes (inferred)

Minimum: Claude alone. Remotion builds the phone, UI, and procedural {{MOTIF}} field in CSS/Canvas, then synthesises an optional original ambient WAV. It reaches the fixed composition and growth cycle while simplifying the physical phone rim and fine UI texture. The user supplies authentic {{UI_ASSETS}} or product details to rebuild; generated product screenshots are excluded.

Full: with the toolkit. Capture {{UI_ASSETS}} as a 1348×1080 PNG or rebuild the listing in Remotion; draw {{MOTIF}} as SVG, animate its instances in Remotion, composite the phone and render H.264 at 1348×1080 and 49.396 fps. Handoff: capture → Remotion as PNG with alpha at 1348×1080; motion plan → Remotion as JSON keyframes in source frames; optional music → Remotion as stereo WAV with a click track at 80 BPM. No Blender or image model is needed.

Asset honesty: Real product captures or the product's UI rebuilt in code; where none exists, a type tile says so. Never invent product screens, metrics, reviews, or outputs. The reference's tally icon and X-shaped flowers are identity assets; invent a different {{MOTIF}} and use {{LOGO}}.

Script prompt

Write a wordless, picture-led four-phase motion brief for {{PRODUCT}}. Suggest an original {{MOTIF}} tied to the product idea. Keep the listing words brief and readable; supply no narration or editorial captions. Include {{LOGO}} and {{CTA_URL}} as optional final text within the same frame.

Music prompt

Original restrained ambient loop, 80 BPM, C major, soft sine pad and felt keys, slow bloom and decay, no vocals or dramatic hits.

How it's built (inferred)

The signature move is a density change, not a camera push. In shot 1, render a fixed phone and clip a seeded field of {{MOTIF}} instances to the header. Give each instance an individual activation threshold, 8–16 f opacity ramp and scale from 0.65 to 1.0 with cubic-bezier(0.22,1,0.36,1). Raise the active fraction across beat 2, keep the densest state in beat 3, then reverse the thresholds across beat 4. Use per-frame interpolation (on ones) for these small marks; keep positions fixed so the texture does not drift. Avoid motion blur on the text and phone; a 1 px blur on fast mark scale changes is enough.

The phone camera remains static from frame 0 through 1109 (plate 5: ×1.000 and zero pan). The sheets suggest the subtitle switches around 2.3–2.5 s; the measurement records the first subtitle to 2.3 s and the second from 2.5 s, with no detected internal change. Implement this as a 12 f crossfade in the listing layer, without cutting or shifting the phone. The field itself changes incrementally; there is no measured cut, handoff, dip, or closing fade. The last frame should preserve the same composition and brightness role as the first.

Build order

1. Build shot 1's fixed phone and listing from {{UI_ASSETS}} or code; verify plate 6 boxes.
2. Add the seeded {{MOTIF}} field and tune density for beats 1–4 against the sheets.
3. Animate the subtitle layer, then add any optional final {{LOGO}} and {{CTA_URL}} text within shot 1.
4. Export at 1348×1080, 49.396 fps; check plate 14.

• Exactly one shot, frames 0–1109, with no inserted cut or fade.
• Phone silhouette, listing title, and header wordmark stay fixed across the shot.
• All essential text has cap height ≥27 px at 1348×1080; check the new subtitle and CTA.
• Mean luma stays near the measured 0.29–0.30 range; no global brightness pulse.
• Mark density is sparse in beat 1, strongest in beat 3, and lower again in beat 4.
• Silent export has no audio track; if using the optional bed on X, target −14 LUFS and ≤−1 dBTP.
• No reference palette, tally icon, X-flower mark, copy, or music remains.

Brand slots

What this film avoids: Voiceover, presenter, stock footage, feature list, editorial captions, cuts, camera moves, and a separate CTA card.

Brand-distance warning (inferred): A dark green header, tiny X-shaped flowers, tally icon, and original copy together would read as the reference brand. Change the motif first, then use your own palette and logo.

Adapt the aspect (inferred)

• 16:9: Re-lay out at 1920×1080; a centre crop loses the lower listing text and cuts 14.9% from top and bottom. Reduce the phone's vertical occupation, keep its listing visible, and make essential type ≥38 px cap; protect a 10% edge safe zone.
• 9:16: A centre crop keeps all measured text boxes, but scale and reposition the phone for 1080×1920 and keep controls outside top/bottom platform overlays; essential type ≥22 px cap and inside 10% side, 15% top/bottom safe zones.
• 1:1: A centre crop retains all measured text boxes; centre the phone and keep the listing above the bottom UI area. Essential type ≥22 px cap, inside a 10% edge safe zone.

Adapt the length (inferred)

• 15 s: Keep beats 1–4 and the single shot; compress the growth and release phases, while retaining the density peak.
• 30 s: Keep the same four beats; add more independent mark events in beats 2 and 4, not a static hold.
• 60 s: Add a second distinct motif behavior after beat 4, then return to the opening density; keep the phone and listing fixed.

The creator's signature (don't copy): The reference uses a specific product name, tally icon, tiny X-flower concept, dark green palette, and listing copy. The transferable format (do copy): Fixed product context plus one slow, procedural density cycle inside a bounded surface.

Source: https://x.com/itsnotchester/status/2116834831745376443 · measured 2026-11-04 · (measured) = read from film · (inferred) = construction reading