Games Bucket List Neon App Header

A wide product header asks one personal question beside a luminous product emblem. A dim contextual mosaic establishes the category while a tiny arc animation makes the otherwise stable composition feel live.

Why it works (inferred): The full question appears at frame 0 and its measured text boxes persist to 7.77 s. The single shot has no cut or brightness rise, so attention stays on the words and ring. The measured background mean luma of 0.08 leaves room for bright type and accents.

Tools you'll need: Remotion for motion graphics · an image model (GPT Image, Midjourney) · Claude alone: partly

Hook formula (inferred): A short viewer question about {{PRODUCT}}, paired with a glowing emblem. Why it holds (inferred): Nothing must be decoded after frame 0; the arc shifts add a small reason to keep looking.

Retention map (inferred): no re-hook or delayed payoff; no measured in-video CTA; end returns to the same composition for a loop.

Mix: One graphic header shot. Rhythm: No cut, reframe, or measured internal change.

Rules this editor follows (inferred): Keep the question, emblem centre and background fixed. Let only the arc segments shift locally; their movement does not imply a camera move.

Look (inferred): A near-black contextual mosaic carries muted colour pools; sharp type and neon ring sit above it. The reference uses purple, teal and green highlights; replace these with {{BRAND_BG}} and {{BRAND_ACCENTS}} by role. Graphics: Four short luminous arcs orbit {{LOGO}}; keep the centre fixed. Transitions: none. Branding: The reference has no separate end card. For a new film needing a CTA, place {{LOGO}} and {{CTA_URL}} as restrained text within the same composition, with no scene change.

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

:root { --brand-bg: {{BRAND_BG}}; --brand-accent: {{BRAND_ACCENTS}}; }
.header { background: var(--brand-bg); overflow: hidden; }
.tiles { transform: rotate(-12deg) scale(1.2); filter: blur(10px) brightness(.34) saturate(.65); }
.haze { background: radial-gradient(circle at 30% 55%, color-mix(in srgb,var(--brand-accent) 28%,transparent),transparent 38%), radial-gradient(circle at 75% 35%,color-mix(in srgb,var(--brand-accent) 16%,transparent),transparent 35%); }
.ring { border-radius: 50%; filter: drop-shadow(0 0 20px color-mix(in srgb,var(--brand-accent) 65%,transparent)); }
.emblem { border-radius: 18px; box-shadow: 0 0 24px color-mix(in srgb,var(--brand-accent) 35%,transparent); }

Measured: No speech and no audio track. Voice direction (inferred): None; let the visual question carry the message.

Music (inferred): Silence matches the reference. If a platform or brand needs sound, use an optional quiet original synth bed with no hit pretending to mark a cut. Sound effects: none. Silence and space: no reveal drop.

Title (inferred): “A quieter header for {{PRODUCT}}.” Cover: use frame 0, with question and emblem legible together. Post copy: Ask which of the static and animated treatments reads better; include {{CTA_URL}} as plain text. Audience signals: The post had 115 views at capture; no retention map is available.

[beat 1 · shot 1 · picture-led; 5–7 on-screen words, two lines, present at frame 0]
{{QUESTION_LINE_1}}
{{QUESTION_LINE_2}}
[optional persistent text CTA in your new version]
{{LOGO}} · {{CTA_URL}}

Two routes (inferred)

Minimum: Claude alone. Remotion with CSS 3D transforms, layered tiles, masked blur and a glow pass builds the header end to end; Claude can synthesize the optional music bed. Supply your real {{LOGO}} and any real contextual images. Simplify tiles to abstract category shapes if assets are unavailable; this gives up recognizable real imagery.

Full: with the toolkit. Make or license category imagery, or create abstract background art with an image model; supply real product assets. Hand a 2520×1080 PNG background to Remotion. Remotion builds the typography, arc masks and glow at 30 fps; send its 2520×1080 H.264 render to the edit/master stage. If sound is requested, pass an original 48 kHz WAV and click track to the render, then master to the plate 8 target.

Asset honesty: Use real {{PRODUCT}} captures or a truthful UI rebuilt in code; never generated product UI, invented screenshots, fake metrics, fake reviews or fake outputs. In this film the tile field may be abstract, but recognizable covers must be owned or licensed.

Script prompt

Write ten original five-to-seven-word viewer questions for {{PRODUCT}}. Break each into two short lines. Preserve the measured two-line layout, but avoid the reference wording. Return the clearest option for a mobile preview and justify its line break.

Background prompt (inferred): “Make a 21:9 abstract, dark category mosaic for {{PRODUCT}}, low contrast and soft, with clear central space for two lines of {{BRAND_FONT}} and a luminous {{LOGO}}. Use {{BRAND_BG}} and {{BRAND_ACCENTS}}; no text, logo, app screen or recognizable copyrighted cover.”

How it's built (inferred)

Signature move: segmented-arc drift. Build four thick conic-gradient or SVG arc masks on separate layers outside the fixed emblem. Rotate the arc group slowly across frames 0–239, with a 0–240 normalized linear cycle and exactly matching first/loop states; use cubic-bezier(0.45,0,0.55,1) for a tiny glow breath, not a global camera move. The tiles, question and emblem centre stay locked. The sheets suggest the coloured arc positions shift between 0:00 and 0:07.5; the measurement says the camera is static and records no internal picture change. Sample the arc animation on ones at 30 fps; use no motion blur on type and at most 2 px directional blur on arcs. Avoid a large sweep: it will turn the quiet header into a loading spinner. There are no measured cuts, hand-offs, focus pulls or fades to construct.

Build order

1. For beat 1, lay out the 2520×1080 dark tile field and haze.
2. Set the two question lines in {{BRAND_FONT}} at the plate 6 boxes; add the real {{LOGO}} in the ring.
3. Animate only the segmented arcs, render shot 1, and inspect the first and last frames for a clean loop.
4. Add {{CTA_URL}} as persistent text if the new use needs an in-video CTA; export with the chosen sound treatment.

• One 240-frame shot at 30 fps, no cut or fade.
• Question present at frame 0; measured text remains through 7.77 s.
• Each required word is ≥50 px cap at 2520×1080; adapted sizes meet plate 15 minimums.
• Foreground centre and text boxes hold within 1% of frame; only arc masks move.
• Mean luma stays near the plate 6 curve without an invented brightness ramp.
• Silent export contains no audible samples; audible variant hits −14 LUFS for X and ≤−1 dBTP.
• No reference font, palette, logo, copy, imagery or music remains.

Brand slots

What this film avoids (inferred): voiceover, product tour, feature list, UI chrome, stock presenter, scene cuts and a delayed reveal.

Brand-distance warning (inferred): A game-cover mosaic, the same question and a green-violet circular icon together would read as the original brand. Change the question and contextual mosaic first.

Adapt the aspect (inferred):

• 16:9: Centre crop to 1920×1080, losing 11.9% at each side; both measured text boxes survive. Keep words ≥38 px cap and clear platform side overlays.
• 9:16: Re-lay out: stack question above ring in the central column; a centre crop loses both text boxes. Deliver 1080×1920, cap ≥22 px, with text clear of top account UI and bottom controls.
• 1:1: Centre crop to 1080×1080; both text boxes survive, but check breathing room around ring. Cap ≥22 px and keep CTA clear of bottom feed controls.

Adapt the length (inferred):

• 15 s: Keep beat 1 as a fixed identity opening; add a new product-proof beat and a text CTA outside the reference shot.
• 30 s: Keep beat 1 fixed, add real proof and a concise second question, then a separate CTA.
• 60 s: Keep beat 1 fixed; add new proof, explanation and use-case beats, rather than stretching the quiet hold.

The creator's signature (don't copy): the particular game-cover selection, question, palette and app emblem. The transferable format (do copy): a concise question beside one glowing product focal point over dim category context.

Source: https://x.com/HildelPete32806/status/2117208796749517274 · measured with dissect 1.1 and timeline v2 on 2026-11-04.