Brand consistency starts with a small, explicit asset package. This guide uses the open-source Claude Motion toolkit and Remotion’s asset conventions. The same preparation helps when editing a HyperFrames project, but React imports and staticFile are Remotion instructions, not commands for this site’s editor.
Create an asset manifest the agent can follow
Gather an approved logo, a light and dark variant when available, the exact font files, a short palette, and the screenshots you are permitted to publish. Record each filename, intended role, source, and usage permission in a plain document beside the project. Add the current product name and approved call to action. Label placeholders clearly. Ask the agent to list files it actually found before implementation. This avoids a familiar failure: a convincing mockup that silently swaps the real logo or invents an interface the product does not have.
Use stable local paths
In a Remotion project, place shared assets under public, for example public/assets/logo.png and public/assets/dashboard.png. Refer to them through staticFile with paths relative to public. Keep names short and consistent in case; a filename that works on one computer can fail elsewhere if capitalization differs. Prefer locally supplied, authorized files to temporary image links that may expire. Do not put access tokens in a URL or send a private customer screenshot to a public asset host merely to make rendering convenient.
Inspect transparency and cropping before animation
Open the logo on both light and dark backgrounds. A white rectangle may be part of the image rather than a rendering bug; transparent padding can also make the visible mark look unexpectedly small. Preserve the logo’s aspect ratio and approved clear space. Decide whether each photograph should fill its box or fit entirely inside it; the former may crop meaningful content. Request one still frame for each asset before adding motion. Check fine strokes at the intended phone viewing size, not just while zoomed in on a desktop.
Load the actual font and test every script
Remotion documents local font loading through @remotion/fonts. Use the provided font family and real weight, and ensure loading finishes before measuring or rendering text. Confirm the font permission covers your intended use and retain its license record. A Latin font may not contain Chinese, Japanese, or Korean glyphs, so define and review an appropriate fallback instead of assuming every language looks identical. Test the longest headline, punctuation, numbers, and accented letters. When translation changes line breaks, revise the layout before reducing every language to an unreadably small size.
Give a precise brand prompt and review the export
Use the prompt below to specify your brand requirements. After approval, inspect the actual MP4 for substituted fonts, cropped logos, color shifts, or missing images. Keep the source assets, manifest, font information, and final output together. This site’s editable downloads can support further local work, but a general brand upload or automatic brand-kit import should not be assumed.
Use the supplied logo without redrawing it. Use the approved cream background, charcoal text, and green accent only for the key action. Load the supplied font files. Keep screenshots proportional and unchanged. Show a still frame containing the logo, longest headline, and screenshot before animating.Your next step
Give the agent real files and explicit rules, then review them in the exported video. A correct asset inventory is more reliable than asking for something that merely feels “on brand.”
Explore the workspaceSources & further reading
References link to original documentation and creators. Product availability can change; check the linked source before subscribing or installing.
- Importing assetsRemotion
- Using fontsRemotion
- Visual review loopwhaleyxbt
- Claude Motion Skills public CLIClaude Motion Skills