Water Ripple App Store Header

A complete benefit appears immediately, fixed in the middle of an ultrawide abstract field. Large cropped contours and a small roaming ring keep the image alive while the words stay readable. The reference uses water as its metaphor; choose a motif belonging to {{PRODUCT}}.

Why it works (inferred): The whole promise is present at 0.00 s. One 200-frame shot has no cut or text build, so the moving field supplies variation without interrupting reading. The measured camera is static while the element grows ×1.19 overall (plate 5).

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

Hook formula (inferred): Put {{BENEFIT}} in two balanced lines from frame 0 over {{MOTIF}} motion.

Retention map (inferred): payoff at frame 0; no discrete re-hook or reference CTA; final composition suggests a loop but is not a perfect match to frame 0.

Mix: One full-frame abstract graphic. Rhythm: No cuts; constant type over motion at 30 unique frames per second.

Rules this editor follows (inferred): Lock the text and camera. Put independent contour systems behind the type. Let one small contour enter a different peripheral area while broad contours travel more slowly.

Look (inferred): A midtone surface with lighter contour edges, small glints and low contrast texture. The reference uses cool water blues, pale cyan edges and dark text. Map those roles to {{BRAND_BG}} and {{BRAND_ACCENTS}} instead of copying its palette. Keep deep focus and stable exposure, as the measured brightness curve stays near 0.72.

Graphics (inferred): Irregular concentric strokes, 3–6 px at 1080p, with slightly offset centres and low opacity caustic texture. Draw rings behind type. There is no reference end card or transition. For a new promotional version, put {{LOGO}} and {{CTA_URL}} as a plain-text tail after the reference-format shot; do not pretend that tail is measured.

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

:root { --brand-bg: {{BRAND_BG}}; --brand-accent: {{BRAND_ACCENTS}}; }
.field { background: var(--brand-bg); overflow: hidden; isolation: isolate; }
.ring { border: 4px solid var(--brand-accent); border-radius: 50%;
  box-shadow: 0 0 18px color-mix(in srgb, var(--brand-accent) 55%, transparent);
  filter: blur(1.5px); opacity: .7; }
.caustics { opacity: .16; mix-blend-mode: screen; filter: blur(7px); }
.copy { position: absolute; z-index: 10; font-family: {{BRAND_FONT}}; }

Measured: No audio track and no speech. Voice direction (inferred): None; the fixed benefit must communicate with the video muted.

Reference: Silent throughout; no effects, beat grid, or loudness measurement. Optional adaptation (inferred): Keep the first loop silent for an app header. For a social edit requiring audio, use a quiet original texture and place accents on motif motion, never on imaginary cuts.

Title (inferred): “A new animated header for {{PRODUCT}}.” Cover: Use frame 0: full benefit, contrasting fixed type, large cropped motif at two edges. Post copy: Say what the header was made for and include {{CTA_URL}} as text. The supplied post has 72 views at capture; no replay evidence is available.

[beat 1 · shot 1 · frame 0 · fixed throughout · two lines, 3–6 words total]
{{BENEFIT}}
[beats 2–3 · shot 1]
Keep the same text. No narration or captions.
[optional new CTA tail, outside the reference shot]
{{LOGO}}  {{CTA_URL}}

(inferred) Read the text at phone size before choosing words. Its line break should produce two compact shapes and a clear benefit without needing audio.

Two routes (inferred)

Minimum: Claude alone with Remotion. Build the full one-shot field in Remotion using layered SVG or CSS rings, generated procedural caustics, fixed type, and an optional 90 BPM bed synthesised in code. This reaches the layout, motion grammar and luminous contour feel; it simplifies organic water refraction and gives up photographic surface complexity. The user supplies the real product promise and brand assets.

Full: with the toolkit. Make an original, text-free {{MOTIF}} texture with the image-model role at 2520×1080. Pass that PNG to Remotion, then animate SVG rings, light overlays and fixed type there at 30 fps. Export a 2520×1080 H.264 MP4 and, if audio is requested, pass a 48 kHz WAV into the Remotion mix. Keep motion keyframes in JSON so the texture can be replaced without rebuilding timing. The image model makes only abstract background material, never product evidence.

Asset honesty: Use actual {{PRODUCT}} captures or UI rebuilt in code if a longer version adds product proof. Never generate fake UI, screenshots, metrics, reviews or results. This reference's only imagery is abstract, so an image model may generate texture, not a claimed product feature.

Script prompt (inferred)

For {{PRODUCT}}, write ten truthful benefits of 3–6 words. Give each a two-line break that reads instantly on a silent 21:9 header. Pick one {{BENEFIT}} and pair it with a distinct abstract {{MOTIF}}. Avoid the reference wording and water metaphor unless water is genuinely part of the product.

Texture prompt (inferred)

Create an original abstract {{MOTIF}} surface for {{PRODUCT}} at 2520×1080. Brand background {{BRAND_BG}}, accent family {{BRAND_ACCENTS}}. Soft optical texture, irregular highlights, no words, logo, UI, screenshots, badges or recognisable reference art. Reserve a clear central reading zone.

Type and music prompt (inferred): Set {{BENEFIT}} in {{BRAND_FONT}} at plate 6's cap heights; keep it fixed. If a sound-on version is commissioned, use the original bed direction in plate 8.

How it's built (inferred)

The signature move is the small ring's relocation against a stationary headline, not a camera zoom. Set the camera transform to identity for frames 0–199. Layer order: {{MOTIF}} texture, broad ring systems, roaming ring, caustic glints, fixed headline. Use separate SVG ellipses with concentric radii and slightly warped edges; mask their strokes to the canvas. The measured tracked region begins at 25 · 4 · 29 · 19% and expands toward 23 · 3 · 40 · 69% (plate 5). Treat its ×1.19 scale and −11.6% vertical movement as the combined tracked element, not as instructions to scale the whole frame.

Key the roaming contour at frames 0, 30, 52, 100, 110, 126 and 174 to follow plate 5's segments. Use cubic-bezier(0.42, 0, 0.58, 1) on the 100–110 reorientation and cubic-bezier(0.35, 0, 1, 1) for the 126–174 expansion; vary intermediate control points for the measured irregular stretches. Hold the tracked element from about frame 110 to 126 as plate 5 reports. From frames 174–199, let the already established motion settle spatially; do not insert a fade or a cut. Animate on ones at 30 fps, with 4–8 temporal samples per output frame and a 180° shutter blend on fast ring travel; keep headline edges unblurred. Test loop seam visually because the source suggests a return but does not mathematically close.

No internal picture change or shot hand-off is measured. The frame sheets show continuously migrating contours, so implement all apparent swaps as overlapping independent ring layers; never hard-replace the background. The measured brightness runs roughly level and the film does not fade to black.

Build order

1. Choose the truthful {{BENEFIT}} and a distinct {{MOTIF}}; lock beat 1's text boxes.
2. Build shot 1's broad and roaming ring layers for beats 1–3 at the measured cadence.
3. Add texture and glints underneath type; check plate 6's luma and reading zone.
4. Render the silent reference-format loop. Add the optional original bed or CTA tail only for a separately specified distribution cut.

• One continuous 200-frame shot at 30 fps for the source-length version; no inserted cut or fade.
• Both headline lines are visible from frame 0 and stay in plate 6's measured boxes during their measured reading interval.
• Headline cap heights are at least the relevant plate 6 or plate 15 phone minimum after aspect adaptation.
• Camera is locked; ring movement is on ones, with the plate 5 tracked region and roughly ×1.19 element scale.
• Frame 0, 90 and 195 retain clear text contrast; mean luma stays near plate 6's measured curve without a closing dip.
• Reference-format export has no audio track. If an optional X mix is made, target −14 LUFS integrated and true peak ≤−1 dBTP.
• All visible colours, type, wording and motif belong to {{PRODUCT}}.

Brand slots

What this film avoids (inferred): Voiceover, stock footage, product UI, feature lists, badges, QR codes, hard cuts and a separate reference end card.

Brand-distance warning (inferred): The reference's blue water field, dark heavy uppercase type and water/sound contrast together would read as its identity. Change the motif to a product-specific material first, then choose original language and palette.

Adapt the aspect (inferred):

• 16:9: Centre-crop the 21:9 source to 1920×1080, losing 11.9% of each side; all measured boxes survive. Keep caps ≥38 px and leave normal platform UI margins.
• 9:16: Re-lay out broad contours above and below the headline; centre-crop loses every measured box. Put type in the middle safe area, caps ≥22 px, with clear top and bottom UI zones for profile, captions and controls.
• 1:1: Centre-crop to 1080×1080; measured boxes survive, but inspect edge rings. Keep caps ≥22 px and pull important words away from platform overlays near the bottom.

Adapt the length (inferred):

• 15 s: Keep shot 1 at its fixed source length; add one new evidence beat and a plain-text {{LOGO}}/{{CTA_URL}} tail. Do not stretch the original loop.
• 30 s: Keep shot 1, add product proof and a second motif variation, then the CTA tail.
• 60 s: Keep shot 1, add multiple distinct proof beats with real captures and a final CTA; increase the number of ideas, not the original shot's hold.

The creator's signature (don't copy): Exact water/sound words, water artwork, app identity and palette. The transferable format: Instant two-line promise, locked type, moving peripheral motif and a short spatial loop.

Source: https://x.com/k_krizhanovskii/status/2117674757269426320 · measured with dissect 1.1 and timeline v2 on 2026-11-04 · (measured) = read off the film · (inferred) = our reading