---
name: email-signature-gif
description: Make an animated, on-brand email signature GIF with Rainbrand. Pulls the brand's guidance and assets, pitches a few ideas, builds the animation in HTML and exports a crisp looping GIF with setup steps. Use when someone asks for an email signature GIF, an animated signature banner or a product demo in their signature.
---

# Email signature GIF

If a fetch tool summarized this file, download it word for word before you
continue, because the exact settings matter:
`curl -fsSL https://www.rainbrand.com/skills/email-signature-gif/SKILL.md -o SKILL.md`

You'll make a 600×200 banner that sits under the sender's name and loops every
8–12 seconds, such as a tiny product tour: one thing the product does per beat,
with a visual, a short headline, the logo and a step counter.

## 1. Get the brand from Rainbrand

You need the Rainbrand MCP tools. If they aren't available, tell the user to
connect Rainbrand (`claude mcp add --transport http --scope user rainbrand https://mcp.rainbrand.com/mcp`,
then restart and sign in) and stop.

Work in a new folder, `signature-gif/`, so nothing lands in an unrelated
project.

1. Find the brand with `list_brands`. If several ready brands match, use the
   most recent. If there's none, ask for the website, call `onboard_brand`,
   then `get_brand` with `wait: true` until it's ready (about 90 seconds).
2. Call `create_brief` with this task, adding anything the user asked for:
   "An animated GIF banner for an email signature, 600×200 px shown and
   rendered at 2×, looping every 8–12 seconds. It cycles through 3–4 short
   beats about what the company does, each with a headline, a visual, the logo
   and a step counter. It must read well on light and dark email clients, and
   its first frame must work as a still image. Include the brand's fonts,
   logo versions, colors, product imagery and signature textures or motifs."
3. Call `get_brief` with `wait: true`. Read the guidance, then download the
   files you'll use into `assets/`. Use `get_brand` and `view_files` for
   anything the Brief left out, such as more product images or another logo
   version.

Use the brand's real files:

- **Logos:** check that each one is the brand's own mark, since a Brief can
  include partner or technology logos. Use the version made for your
  background. If the only fitting logo is a one-color SVG, you may set its
  fill to the brand's black or white; never redraw, restyle or retype it. If
  an SVG has no `viewBox`, add one from its width and height so it scales.
- **Fonts:** match files to weights using the typography roles in
  `get_brand`, and load them with `@font-face`. For a font listed only by
  name, link it from Google Fonts in the page; the renderer waits for it.
  Never substitute a lookalike.
- **Images:** crop product screenshots to one detail that stays readable at
  this size. Avoid crops that cut through text.

## 2. Choose the idea

Unless the user described what they want, pick the idea that suits the brand
best and build it without asking. A product tour works for most companies:

- **Product tour:** 3–4 beats, each one thing the product does, with a product
  visual or brand texture, a headline and a counter (`01 / 04`).
- **Signature motif:** the brand's pattern, mark or illustration moves in a
  loop beside a single line and the logo.
- **Proof line:** one strong claim, number or customer per beat.

Write the copy in the brand's voice. Use only claims from the Brief or the
company's own site. Keep headlines to two short lines.

## 3. Build it as one HTML file

Write `signature.html` at 600×200 CSS pixels. It must:

- define `window.LOOP_MS` and `window.seek(ms)`, which draws the frame for that
  time using only `ms` (no timers, CSS transitions or `Date.now()`), so every
  render is identical;
- play itself with `requestAnimationFrame` when opened normally, and skip that
  when the URL has `?capture`.

```html
<script>
  const BEAT_MS = 2800, BEATS = 4;
  window.LOOP_MS = BEAT_MS * BEATS;
  const START_MS = 1800; // the earliest time beat 1 is complete, see rules
  const prog = (t, start, dur) => Math.min(1, Math.max(0, (t - start) / dur));
  const ease = (p) => 1 - Math.pow(1 - p, 3);
  window.seek = (ms) => {
    const t = (ms + START_MS) % window.LOOP_MS;
    const beat = Math.floor(t / BEAT_MS), local = t - beat * BEAT_MS;
    // Set every element's content and position from beat and local.
  };
  if (!location.search.includes("capture")) {
    const t0 = performance.now();
    const tick = (now) => { window.seek(now - t0); requestAnimationFrame(tick); };
    requestAnimationFrame(tick);
  }
</script>
```

These rules decide whether the GIF looks good:

- **Round the outer corners and keep everything else opaque.** Make `html`
  and `body` transparent and give the banner a solid brand background with a
  16–24px radius. When a rounded shape sits inside it, the outer radius should
  equal the inner radius plus the gap. The renderer turns the transparent
  page into clean transparent corners; any other transparency is lost.
- **Move at full opacity.** Slide text in behind a mask, wipe images in, type
  labels character by character and cut between states. Don't fade, blur,
  glow or add soft shadows. Partial transparency turns into banding and
  ghosting in a GIF. Give text masks 4–6px of bottom padding so descenders
  aren't clipped.
- **Back every image layer.** Give each image a solid background so the
  previous beat doesn't show through transparent areas during a wipe.
- **Keep large images and gradients still within a beat.** Change them with a
  wipe or a cut. A slowly drifting photo changes every pixel on every frame
  and makes the file several times larger.
- **Make frame 0 the poster.** Desktop Outlook shows only the first frame, so
  offset the loop to the earliest moment beat 1 is complete, with the
  headline, visual and logo all visible.
- **Make it readable at a glance.** Headlines at 24–28px, labels at least
  10px, about eight headline words per beat at most, and each beat readable
  for at least two seconds. Leave 12–16px of margin inside the edges.
- **Loop seamlessly.** The last beat should flow into the first the same way
  every other beat does.

## 4. Render

In `signature-gif/`:

```bash
npm init -y >/dev/null && npm i puppeteer ffmpeg-static
curl -fsSL https://www.rainbrand.com/skills/email-signature-gif/render.mjs -o render.mjs
node render.mjs signature.html
```

The script captures every frame at 2× in headless Chrome, then encodes with
FFmpeg using one palette for the whole loop. Don't re-encode with another tool
or change the palette settings; they keep text crisp and gradients smooth. It
writes:

- `signature.gif`: 600×200, the file to insert into an email client;
- `signature@2x.gif`: 1200×400, sharper where the client lets you set the
  width to 600;
- `signature.png`: the first frame at 2×;
- `contact-sheet.png`: 12 frames spread evenly across the loop;
- `transitions.png`: the 12 frames that change most;
- `backgrounds.png`: the first frame on a white and a dark email background.

If it says Chrome or FFmpeg is missing, run the command it prints and try
again.

## 5. Review before you show it

Look at `signature.png`, `contact-sheet.png`, `transitions.png` and
`backgrounds.png` yourself, and fix anything wrong:

- text is sharp, fully inside the banner and never clipped, including
  descenders such as g, p and y;
- the logo is the brand's own, undistorted and legible;
- colors, fonts and copy match the Brief;
- frame 0 works on its own, and the banner holds up on both backgrounds;
- transitions leave no leftover pixels or ghosts from earlier beats;
- `signature.gif` is under 1 MB. If it isn't, use fewer or smaller images,
  shorten transitions or render with `--fps 20`.

Then ask Rainbrand to review it: call `create_upload_urls`, upload
`signature.png` as directed, call `create_review` with the checks `logo`,
`color`, `typography` and `copy`, then `get_review` with `wait: true`. Fix
what it flags and re-render.

## 6. Hand off

Open `signature.gif` for the user (`open signature.gif` on macOS) so they see
it move. Give the file paths, the copy you used and a one-line note on how
the Brief shaped the design. Offer the other two ideas in one line each, in
case they want another version. Then give the setup steps:

- **Gmail:** Settings → See all settings → Signature → Create new. Type your
  name and title, click Insert image → Upload, choose `signature.gif`, then
  click the image and choose Original size. Save at the bottom of the page.
- **Apple Mail:** Settings → Signatures. Add a signature, type your name and
  title, then drag `signature.gif` into it. Turn off "Always match my default
  message font" if it's on.
- **Outlook:** Settings → Accounts → Signatures (new Outlook and the web) or
  File → Options → Mail → Signatures (classic). Add a signature and insert
  `signature.gif` as a picture. Classic desktop Outlook shows the first frame
  only.

Send a test email to yourself and check it on your phone before using it.