--- title: "On-brand motion graphics with your agent | Rainbrand" description: "Make motion graphics in code with a coding agent and Rainbrand. A Brief gives it each brand's guidance, fonts, logos and product images to animate." url: "https://www.rainbrand.com/use-cases/motion-graphics/" --- Use cases Motion graphics # Motion graphics built from the brand. Your coding agent animates the brand's real fonts, logos and product images in code, following the guidance in a Brief. [Get started](https://www.rainbrand.com/auth/sign-in) [Read the guide](https://docs.rainbrand.com/use-cases/motion-graphics) Nothing · Motion graphics 15 S · 16:9 · HYPERFRAMES ## (01) Why use Rainbrand A coding agent can animate almost anything, but it doesn't have the brand's fonts, logos or product images, or know how the brand should move and sound. Rainbrand gives it a Brief with the files and the guidance for the story, type, pacing and sound. How it's made ## From a Brief to a rendered film. Rainbrand · create\_brief Ready Brand: Nothing Task: A 15-second motion graphics film, 1920 × 1080 Returns: Guidance and selected assets 1 Brief ### Plan the film from a Brief for the task. HyperFrames 0:15 · 16:9 0:01.5 0:04.5 0:10.0 0:14.0 2 Build ### Build the motion and sound in code. Before you publish 5 checks - Brand fit against the Brief - Product claims and slogans - Finished frames - Sound - Rights to every asset 3 Check ### Check it against the brand before it ships. With your agent ## Ask your agent for the film. Describe the film you want. Your agent requests a Brief, builds the animation and sound in code, then renders and reviews it. [Read the guide](https://docs.rainbrand.com/use-cases/motion-graphics) Works with your favourite agents - [](https://www.rainbrand.com/integrations/claude/) - [](https://www.rainbrand.com/integrations/cursor/) - [](https://www.rainbrand.com/integrations/codex/) - [](https://www.rainbrand.com/integrations/chatgpt/) - [](https://www.rainbrand.com/integrations/) Claude Code Rainbrand connected You Make a 15-second motion graphics film for nothing.tech at 1920 × 1080. Build it in code with Nothing's fonts, logos and product images, add original sound and render it with HyperFrames. Claude Code `create_brief` Nothing film Claude Code `get_brief` Waiting until it's ready The Brief is ready. I'll download the fonts, logos and product images it selected and build the film in HyperFrames. The film is rendered: 15 seconds at 1920 × 1080. It moves from notification noise to Glyph light in Nothing's dot-matrix type, with minimal electronic sound timed to the light. I've checked the frames and the sound. Illustrated with the Nothing film from the motion graphics guide, built in code from the guidance, fonts, logos and product images Rainbrand supplied. More motion graphics ## Made for other brands. The same kind of film for other brands, from the guide and our examples. ### [Tony's Chocolonely](https://docs.rainbrand.com/use-cases/motion-graphics) ![A Tony's Chocolonely bar broken into three uneven pieces on yellow, under Unequal. and Just like the cocoa industry.](https://www.rainbrand.com/_next/image?url=%2Fuse-cases%2Fmotion-graphics%2Ftonys-poster.webp&w=3840&q=75&dpl=dpl_Aqdbbp64DeKYvcbqxtnYuB8uxpjK) A 15-second film on its five sourcing principles, with stamps and pops in Tony's red, blue and yellow. See the guide ### [Gut Oggau](https://www.rainbrand.com/examples/gut-oggau/) ![The eleven drawn faces from Gut Oggau's wine labels, each with its name, above Wines with faces. Find yours.](https://www.rainbrand.com/_next/image?url=%2Fexamples%2Fgut-oggau%2Ffilm%2Fposter.webp&w=3840&q=75&dpl=dpl_Aqdbbp64DeKYvcbqxtnYuB8uxpjK) A 20-second film in which the faces on its wine labels draw themselves, made from a Brief. See the example ### [Extropic](https://www.rainbrand.com/examples/extropic/) ![Extropic's Z1 chip glowing on dark red beside 269,568 pbits on one chip, in eight cores.](https://www.rainbrand.com/_next/image?url=%2Fexamples%2Fextropic%2Foutputs%2Fz1-film-poster.webp&w=3840&q=75&dpl=dpl_Aqdbbp64DeKYvcbqxtnYuB8uxpjK) A 20-second film from one circuit to the cluster Extropic plans for 2027, made from a Brief. See the example Customers ## Teams building with Rainbrand. How companies integrate Rainbrand into their agents and products. [All customer stories](https://www.rainbrand.com/customers/?ref=landing) Revnu > “We use Rainbrand to fetch each customer’s brand and generate accurate, on-brand creative for their ads. It means we don’t have to reinvent that part of the stack ourselves.” George Jefferson Co-founder, Revnu [Read the story: Revnu puts a brand layer inside its AI growth product](https://www.rainbrand.com/customers/revnu/?ref=landing) Letter > “We pushed Rainbrand to production as our default image solution.” Mathew Pregasen Founder and CEO, The Letter Company [Read the story: Letter builds Rainbrand into Letterpress](https://www.rainbrand.com/customers/letter/?ref=landing) The GTM Co-Founder > “I have the ideas, but turning them into great design was always a struggle. Rainbrand makes me feel like the best designer in the world, and I don’t think I’ll need to hire one for the small stuff again.” Shane O’Connor Founder, The GTM Co-Founder [Read the story: The GTM Co-Founder uses one agent across several brands](https://www.rainbrand.com/customers/gtm-cofounder/?ref=landing) ## Make your first motion graphics film. Connect Rainbrand to your coding agent, add a brand and describe the film you want. [Use it with your agents](https://docs.rainbrand.com/mcp/getting-started) [Integrate it with your product](https://docs.rainbrand.com/getting-started/embed-into-your-product) ### ChatGPT + Codex 1. Open the Rainbrand plugin and add it. [Open Rainbrand plugin](https://chatgpt.com/plugins/plugin_asdk_app_6ac6e5030ec88191a88001f6dc0628ca) 2. Connect your Rainbrand account when asked. It works in ChatGPT and in Codex. ### Claude 1. Open the Rainbrand connector in Claude and add it. [Open Rainbrand connector](https://claude.ai/customize/connectors?modal=add-custom-connector&connectorName=Rainbrand&connectorUrl=https%3A%2F%2Fmcp.rainbrand.com%2Fmcp) 2. Select Connect, then sign in to Rainbrand. You can also install the [Rainbrand Skill](https://docs.rainbrand.com/mcp/getting-started#standalone-rainbrand-skill) or the [plugin](https://github.com/rainbrandai/rainbrand-skills/releases/latest/download/rainbrand.claude-plugin.zip). ### Claude Code 1. Add Rainbrand's plugin marketplace in your terminal. ``` claude plugin marketplace add rainbrandai/rainbrand-skills ``` 2. Install the Rainbrand plugin, including its Skill and MCP connection. ``` claude plugin install rainbrand@rainbrand ``` 3. Start a new Claude Code session, then use /mcp to sign in to Rainbrand. You can also [connect with MCP](https://docs.rainbrand.com/mcp/getting-started#claude-code-installation-options) or install the [Rainbrand Skill](https://docs.rainbrand.com/mcp/getting-started#standalone-rainbrand-skill). ### Cursor 1. Add Rainbrand to ~/.cursor/mcp.json. ``` { "mcpServers": { "rainbrand": { "url": "https://mcp.rainbrand.com/mcp" } } } ``` 2. Sign in from the Cursor CLI. ``` agent mcp login rainbrand ``` You can also install the [Rainbrand Skill](https://docs.rainbrand.com/mcp/getting-started#standalone-rainbrand-skill) or the [plugin](https://github.com/rainbrandai/rainbrand-skills/releases/latest/download/rainbrand.cursor-plugin.zip). ### API 1. Create an API key in your account settings, then list your brands. ``` curl https://www.rainbrand.com/api/v1/brands -H "x-api-key: $RAINBRAND_API_KEY" ``` Integrating Rainbrand into your app? [Read the API docs](https://docs.rainbrand.com/api). Motion graphics FAQ ## Asked, answered. [All FAQs](https://www.rainbrand.com/faq/) ### What do I need to make motion graphics? A coding agent connected to Rainbrand through MCP and a ready brand, or sources such as a website to create one. Your agent requests a Brief, builds the animation and sound in code and renders the film. [Connect Rainbrand to your agent](https://docs.rainbrand.com/mcp/getting-started). ### What does the Brief add to the film? The Brief selects the brand guidance and files that matter for the film, such as fonts, logos and product images, so your agent animates the real files. The guidance shapes the story too: Nothing's focus on life without distraction is why its film moves from notification noise to Glyph light. [How Briefs work](https://www.rainbrand.com/briefs/). ### Do I need HyperFrames? No. We used and recommend HyperFrames for rendering and review, but Remotion or a headless browser with FFmpeg also works. Your agent writes the animation as code either way. [What you need](https://docs.rainbrand.com/use-cases/motion-graphics#what-you-need). ### Where does the sound come from? Your agent adds original or properly licensed audio and times the effects to what happens on screen. Nothing's film pairs precise light patterns with minimal electronic sound. Tony's has a warmer, playful score, and feedback on its mix led to fewer, softer typewriter clicks. ### How do I check the film before it goes out? Watch and listen to the finished render against the Brief. Check brand fit, product claims and quoted slogans against approved sources, and confirm you have the rights to every asset for its intended use. To check a frame against the brand, capture it and [request a Review](https://www.rainbrand.com/reviews/). The brand layer for agents. Rainbrand builds and maintains shared brand context for your agents and products. [Get started](https://www.rainbrand.com/auth/sign-in) [Read the docs](https://docs.rainbrand.com/) [View pricing](https://www.rainbrand.com/pricing/)