Motion Prompts · Logo Animation

Pixel Grid Logo Build

The logo builds from a grid of squares like a retro display.

⏱ 4 seconds

Live preview of the style and timing this prompt aims for. The real output is rendered by Remotion from your own brand values, so details will differ.

Build the logo out of a 48×27 grid of squares (a pixel mosaic) that pops in with staggered random timing (seeded), starting as low-resolution blocks and refining step by step through 3 resolutions (12×7 → 24×14 → 48×27) until the full vector logo replaces them. Use a bold limited palette [#0F172A, #38BDF8, #F472B6, #FBBF24]. End with a small bouncing "[BRAND NAME]" text and a blinking cursor.

Technical requirements: Use Remotion (React) in this folder. Create one composition at 1920x1080, 30 fps, 4 seconds. Put every brand-specific value (name, colours, text, font) in a single props object at the top so I can change them in one place and see it live in Remotion Studio. Use spring() and interpolate() with easing, no CSS keyframe animation. Keep it self-contained (no external assets unless I provide them). When finished, run `npx remotion render` to export an MP4 and tell me the output path.

How to use it

1. In an empty folder run npx create-video@latest and choose the blank template.
2. Open Claude Code there with claude and paste the prompt. Replace every [PLACEHOLDER].
3. Preview with npm run dev, then ask for tweaks in plain language.
4. Claude renders the MP4 with npx remotion render.

Tip: install the Motion brief skill to turn a rough idea into a storyboard and a ready-to-paste prompt.