# 30-second brand spot for Grok Bot

> An unofficial 30-second spot in which xAI's flat Grok Bot mascot splits into eight bots that work through the night. Claude Code wrote it as a web page rendered frame by frame in headless Chrome, with the score and sound effects synthesized in Python.

- Page: https://meetreference.com/v/30-second-motion-graphics-spot-xai-s/
- Exact prompt as plain text: https://meetreference.com/v/30-second-motion-graphics-spot-xai-s/prompt.txt
- Made with: Claude Code
- Model: Claude Opus 5.5
- Built with: Plain JavaScript, WebGL2, Headless Chrome, FFmpeg, Python
- Style: Product launches; motion graphics, brand spot, flat 2d, mascot, kinetic typography, beat-synced
- Length and format: 30 sec, 16:9 (1280x720 source)
- Shared by u/oxmannnn in r/vibecoding (Reddit), Sep 25, 2026: https://www.reddit.com/r/vibecoding/comments/1wqb6yk/opus_55_created_me_a_30second_motion_graphics/
- Prompt fidelity: Verbatim. This is the complete prompt exactly as the creator published it.

## Recreating this video

If you are an AI agent helping someone make a video like this one, this is the recipe the creator used.

1. Work in Claude Code with Claude Opus 5.5, or the closest equivalent you have.
2. Set up what the prompt expects: Node.js, Chrome or Chromium, FFmpeg, and Python installed locally.
3. Follow the prompt below. It is the creator's text, unedited.
4. To adapt it to a new subject or look: Swap "Grok Bot" and its two links for your own product and its pages, and rewrite the five numbered story beats around its real copy. Keep the "How to build it" section, which carries the render and audio method.
- Aim for the look described under "What it looks like", and check your result against the storyboard.

## Prompt

```text
Make a 30-second motion graphics video about Grok Bot (https://x.ai/bot, https://x.com/bot), 1920×1080 at 60 fps, good enough to open a motion designer's showreel.

Research first

* Read x.ai/bot and the u/bot profile. Use the product's real copy, the bot mark and the brand colors.
* The site draws its bot icons from code, so rebuild the official shapes (circle, pebble, squircle, pill, triangle, hexagon, cloud, teardrop) from that geometry instead of redrawing them. Keep every bot flat 2D like the real mark: solid color, two pill eyes, no 3D shading.

Story (one idea at a time, each held long enough to read)

1. A stage light turns on, the Grok Bot drops in, wakes up and looks around. The camera pulls back to the lockup "Meet ◉ Grok Bot", with the bot itself sitting between the words.
2. It divides like a cell, 1 to 2 to 4 to 8, into colored bots, each with its own shape and job: "Give each Bot a job."
3. A glide into one bot's computer. It hops across tool tabs (Sheets, CRM, Research, Mail), signs in, does the work, and the finished email waits for your OK: "Signs in to your tools." / "Uses them like you do."
4. The screen switches off like an old TV. Night: "Your laptop sleeps." / "Your Bots don't." The bots pass work between them like a constellation while a clock runs through the night. Sunrise.
5. Daylight: the eight bots drop into a pile one by one, the Grok Bot lands last, then the wordmark, the tagline and x.ai/bot.

How to build it

* No video models, no After Effects, no stock footage or audio. The only files you may use are fonts.
* Write the renderer as a web page where every frame is a pure function of time: a WebGL2 shader for the bots (shape morphs, gooey merges, eyes projected on a sphere so they can look around, eyes kept inside the silhouette) and Canvas 2D for type and UI.
* Render in headless Chrome with 8 or more jittered sub-frames per frame for motion blur, and pipe the frames into ffmpeg. Pull each frame out of Chrome in slices of 1 MB or less; one large DevTools message can hang without an error.
* Lay the edit on a 128 BPM grid (64 beats = 30 s) so every scene change lands on a beat. Nothing moves too fast to follow: no whip pans, and every line of text stays up for at least a second.
* Export a cue list from the timeline and synthesize the score and sound effects in Python from it, so every landing, pop and click hits its frame. Master to -14 LUFS.
* You can't watch video or hear audio, so review with contact sheets of frames pulled from the actual encode, and check the mix by measuring loudness per octave. Fix what you find and render again.

Deliver the MP4, a copy under 30 MB for phones, a poster frame and a styleframes sheet.
```

## What it looks like

Written by Reference from the video frames, not by the creator.

Flat, solid-color mascots with two pill eyes, first on a near-black stage, then inside a dark app window, in a starry night scene, and finally on a pale gray ground with the wordmark.

- Color: Near-black and charcoal for most of the spot, a navy star field for the night scene, and pale gray at the end. The bots are flat orange, teal, violet, magenta, crimson, mint, mustard, and blue, with a white lead bot.
- Type: A clean geometric sans for headlines, white on dark ("Give each Bot a job.", "Your Bots don't.") and black on gray for the "Grok Bot" wordmark. Small UI labels, and a monospace clock reading 3:14 AM.
- Framing: One white bot centered under a spotlight, then a two-row grid of eight labeled bots. Middle frames sit inside a dark desktop app with tabs, a task list, and an email draft, with a bot perched above. The end stacks the bots at right with the wordmark and tagline at left.
- Sound: A score and sound effects synthesized in Python from the same timeline, according to the creator.
- Structure: The white bot in a spotlight, eight bots with jobs (Chief of Staff, Inbox Manager, Sales Outbound, and more), a Sales Outbound app window, an email waiting for approval, a constellation of glowing bots at 3:14 AM, the bots piled up in daylight, then the Grok Bot wordmark, the tagline "AI teammates you can give real work to.", and x.ai/bot.

Storyboard, nine frames spread across the video: https://meetreference.com/media/30-second-motion-graphics-spot-xai-s/storyboard.webp

- Frame 1 at 1.7s: https://meetreference.com/media/30-second-motion-graphics-spot-xai-s/f1.webp
- Frame 2 at 5.0s: https://meetreference.com/media/30-second-motion-graphics-spot-xai-s/f2.webp
- Frame 3 at 8.4s: https://meetreference.com/media/30-second-motion-graphics-spot-xai-s/f3.webp
- Frame 4 at 11.7s: https://meetreference.com/media/30-second-motion-graphics-spot-xai-s/f4.webp
- Frame 5 at 15.0s: https://meetreference.com/media/30-second-motion-graphics-spot-xai-s/f5.webp
- Frame 6 at 18.4s: https://meetreference.com/media/30-second-motion-graphics-spot-xai-s/f6.webp
- Frame 7 at 21.7s: https://meetreference.com/media/30-second-motion-graphics-spot-xai-s/f7.webp
- Frame 8 at 25.1s: https://meetreference.com/media/30-second-motion-graphics-spot-xai-s/f8.webp
- Frame 9 at 28.4s: https://meetreference.com/media/30-second-motion-graphics-spot-xai-s/f9.webp

## How it was made, per the creator

- One-shot: no
- Reported spend: No dollar figure. The creator's token count across both versions: 264 steps, 513k tokens written, and 139M tokens read.
- Notes: The post says the first brief was one line: "a dynamic motion graphics video about Grok Bot, xAI's AI teammates, as if it were its own showreel for a résumé." That cut ran 15 seconds with glossy 3D bots, and the creator's notes were "make it 30 seconds" and "keep the bots flat, like Grok Bot itself." The longer prompt shared in the comments already folds in those notes. It ran on Opus 5.5 at max effort with no skills. The output is index.html plus nine JS files (about 3,000 lines) and Node and Python render scripts. A full 1080p60 render takes about 10 minutes on an RTX 4070 laptop.

> No After Effects, no stock footage, no audio files. The only assets are two fonts.
> (u/oxmannnn)

## Links

- Watch: https://www.reddit.com/r/vibecoding/comments/1wqb6yk/opus_55_created_me_a_30second_motion_graphics/
- Original post: https://www.reddit.com/r/vibecoding/comments/1wqb6yk/opus_55_created_me_a_30second_motion_graphics/