> ## Documentation Index
> Fetch the complete documentation index at: https://docs.rainbrand.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Make an animated email signature GIF

> Use a Rainbrand Brief and the email signature skill with a coding agent to turn a brand into a looping signature GIF.

## Finished result

Each banner loops in about 11 seconds, one beat per thing the company does. Rainbrand supplied the fonts, logos, palette, and imagery; a coding agent wrote the copy and animation and rendered the GIF.

**Rainbrand**

![Rainbrand email 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://mintcdn.com/bloom-100885a1/3BqhKBWsezLkpzWR/images/use-cases/rainbrand-email-signature.gif?s=cbd1f3625c71723b956264f91e55fb5c)

Heat-map windows, numbered steps, and status labels

**Ramp**

![Ramp email signature concept on lime cycling through cards, expenses, approvals, and reporting, each with a product screen and the Ramp wordmark](https://mintcdn.com/bloom-100885a1/3BqhKBWsezLkpzWR/images/use-cases/ramp-email-signature.gif?s=c3c90cacf680974462ed2fd611813b4c)

Lime ground, Lausanne, and product screens

**Supabase**

![Supabase email signature concept on a dark background cycling through database, data APIs, auth, and scale, each with product art and a green second line](https://mintcdn.com/bloom-100885a1/3BqhKBWsezLkpzWR/images/use-cases/supabase-email-signature.gif?s=11caf3975bf1a085b32e4dc9152e25dc)

Dark canvas, green accent, and product art

## How Rainbrand shaped the work

Rainbrand's voice guidance calls for numbered sections, slashes, and status-style cues as accents, which became the `01 // ADD` labels and the `[READY]` progress chip, and its heat-map textures sit inside rounded windows on the grey ground. Ramp's Brief supplied Lausanne, the wordmark, and four product screens; Supabase's supplied the wordmark, Manrope, and the green accent, with product art from its Brand Library.

## What you need

* A coding agent that can run Node.js, such as Claude Code, connected to Rainbrand through MCP.
* A ready brand in Rainbrand, or a website to [create one](https://docs.rainbrand.com/guides/create-brand.md).

## Run it with your agent

> **[Connect Rainbrand to your agent](https://docs.rainbrand.com/mcp/getting-started.md)**
>
> Connect Rainbrand through MCP in your coding environment.

Use this starting prompt:

```text wrap theme={"dark"}
Make an email signature GIF for Acme Inc. (acme.com) using https://www.rainbrand.com/signature.

Reuse the ready Acme brand in Rainbrand, or add it from the website and wait until it's ready. Request a Brief for the banner and build a 600 × 200 loop from its fonts, logos, and imagery. Render it with the skill's script, review the frames against the Brief, and return the GIF with setup steps for my email client. Don't publish anything externally.
```

Replace Acme Inc. and its website with your brand.

## How it worked

**1. Request a Brief for the banner**

[Request a Brief](https://docs.rainbrand.com/guides/request-brief.md) for a 600 × 200 signature banner
and download the fonts, logos, and images it selects. Check that every logo
is the brand's own before using it.

**2. Build the loop as HTML**

The agent picks an idea, usually a short product tour, and writes one beat
per capability. Text slides in behind masks and images wipe in at full
opacity, because fades and soft shadows break up in a GIF. The first frame
is a finished still, since desktop Outlook shows only that frame.

**3. Render and review**

The skill's script captures every frame in headless Chrome and encodes the
loop with FFmpeg, with rounded corners that hold up on light and dark
backgrounds. It also writes sheets of the loop, its transitions, and both
backgrounds for review. These banners came out at 200–310 KB at 600 × 200,
with a sharper 2× file alongside.

## What each system did

* Rainbrand supplied the brand guidance, fonts, logos, and imagery through MCP.
* The coding agent, using Claude Opus 5.5 in these examples, chose the idea, wrote the copy and animation, and reviewed the frames.
* The skill's render script turned the animation into the GIF with headless Chrome and FFmpeg.

## Before you use it

* Send yourself a test email and check it on your phone and in the email clients your recipients use.

The Ramp and Supabase banners are independent concept work, not official or endorsed by Ramp or Supabase.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.