--- title: "Animated email signature GIFs with your agent | Rainbrand" description: "Turn a brand into a looping email signature GIF with a coding agent, a Rainbrand Brief and the email signature skill, using its fonts, logos and imagery." url: "https://www.rainbrand.com/use-cases/email-signature-gif/" --- Use cases Email signature GIF # Email signature GIFs from your brand. Your coding agent requests a Brief for the banner, animates it in HTML with the brand's fonts, logos and imagery, and renders a looping GIF. [Get started](https://www.rainbrand.com/auth/sign-in) [Read the guide](https://docs.rainbrand.com/use-cases/email-signature-gif) Rainbrand, Ramp, Supabase · Signature GIF ![Rainbrand's signature banner cycling through Add, Brief, Make and Review, each with a heat-map texture in a rounded window, a two-line headline and the Rainbrand wordmark](https://www.rainbrand.com/use-cases/email-signature-gif/rainbrand.gif)![Ramp's signature banner on lime cycling through cards, expenses, approvals and reporting, each with a product screen and the Ramp wordmark](https://www.rainbrand.com/use-cases/email-signature-gif/ramp.gif)![Supabase's signature banner on a dark background cycling through database, data APIs, auth and scale, each with product art and a green second line](https://www.rainbrand.com/use-cases/email-signature-gif/supabase.gif) 600 × 200 · ABOUT 11 S ## (01) Why use Rainbrand A coding agent can animate a banner, but without the brand's fonts, logos and product images it has to guess. Rainbrand gives it a Brief for the banner, with the brand's fonts, logos, colours and imagery. How it's made ## From a Brief to a looping GIF. Rainbrand · create\_brief Ready Brand: Ramp Task: An animated 600 × 200 email signature banner Returns: Lausanne, the wordmark and 4 product screens 1 Brief ### Plan the banner from a Brief for the task. Ramp · 4 beats 0:11 loop 01 Cards · First frame 02 Expenses 03 Approvals 04 Reporting 2 Build ### Animate it in HTML and render the GIF. Before you use it 5 checks - Frames against the Brief - The brand's own logo - First frame as a still - Light and dark backgrounds - A test email on your phone 3 Check ### Check the frames before you use it. With your agent ## Ask your agent for the banner. Point your coding agent at rainbrand.com/signature. It requests a Brief, builds the loop in HTML, renders the GIF and reviews the frames. [Read the guide](https://docs.rainbrand.com/use-cases/email-signature-gif) 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 an email signature GIF for Ramp (ramp.com) using https://www.rainbrand.com/signature. Build a 600 × 200 loop from the Brief's fonts, logos and imagery, and give me setup steps for my email client. Claude Code `create_brief` Signature banner Claude Code `get_brief` Waiting until it's ready Rainbrand Rainbrand BriefSignature banner Ready Font Lausanne. Logo The Ramp wordmark. Images Product screens from Ramp's brand. 4 screens The Brief is ready. I'll make a short product tour with one beat each for cards, expenses, approvals and reporting, set in Lausanne with the wordmark. I rendered it with the skill's script and checked the frames against the Brief on light and dark backgrounds. I've opened signature.gif so you can see it move. Setup steps for Gmail, Apple Mail and Outlook are below. Illustrated with the Ramp banner from the email signature GIF guide, rendered with the skill's script. 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 signature GIF. Connect Rainbrand to your coding agent, add your brand and point the agent at rainbrand.com/signature. [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). Email signature GIF FAQ ## Asked, answered. [All FAQs](https://www.rainbrand.com/faq/) ### What do I need to make a signature GIF? A coding agent that can run Node.js, such as Claude Code, connected to Rainbrand through MCP, and a ready brand or a website to create one. Then point the agent at rainbrand.com/signature. [Connect Rainbrand to your agent](https://docs.rainbrand.com/mcp/getting-started). ### What does the Brief add to the banner? The Brief selects the fonts, logos, colours and imagery for the banner. Ramp's supplied Lausanne, the wordmark and four product screens. In Rainbrand's own banner, its voice guidance became the numbered labels and the \[READY\] chip. [How Briefs work](https://www.rainbrand.com/briefs/). ### Can I choose what the banner shows? Yes. Describe it in your prompt. Otherwise your agent picks the idea that suits the brand, usually a short product tour with one beat for each thing the company does, and writes the copy in the brand's voice using claims from the Brief or the company's own site. ### Will it work in my email client? The skill gives setup steps for Gmail, Apple Mail and Outlook. Classic desktop Outlook shows only the first frame, so the loop starts on a finished still. The banners in the guide came out at 200 to 310 KB at 600 × 200, with a sharper 2× file alongside. ### How is the banner checked? The render script writes sheets of the loop, its transitions and the first frame on light and dark backgrounds, and your agent reviews them against the Brief. The skill also asks Rainbrand for a [Review](https://www.rainbrand.com/reviews/) of the first frame. Before you use it, send yourself a test email and check it on your phone and in the email clients your recipients use. 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/)