OPUS 5.5 MOTION GRAPHICS: 16 PROMPTS
Joon Ahn · AI Topia · getaitopia.io

What these are: one prompt per tile on motion-board.html. Each one copies a single tile into its own file,
effect.html, and swaps in your words and colours. Expect a round or two of small fixes.

How to use them:
  1. Unzip the kit. You get a folder called aitopia-motion-kit with the board, these prompts and the guide.
  2. Open Terminal, type cd and a space, drag the folder in and press Enter. Type claude and press Enter.
     Use /model to pick Opus 5.5. Claude Code must be installed and signed in first.
  3. Pick a tile below and copy its prompt. Fill in the square brackets.
  4. Paste it into Claude Code. When it finishes, double-click effect.html and watch it loop.

Shortcut: open motion-board.html?tile=7 in your browser to see tile 07 on its own, full size.


### INTERFACES: SHOW YOUR AI DOING THE WORK ###

=== 01 PROMPT → POST ===
How you could use it: You show what your AI tool writes from one prompt, on a landing page or in a launch post.

Open motion-board.html and copy tile 01, "Prompt → post" (a prompt, "Write a hook about AI CMOs", typed into an AI box that then grows a LinkedIn post card underneath), into effect.html: that tile alone, scaled up, same motion and 8-second loop. Keep the embedded fonts and every "example" label on demo numbers. Then change only the words and colours. Words: [e.g. our prompt "Draft a welcome email" and the email it writes]. Colours: [two hex codes, or keep AI Topia Electric Blue #292DEB with Ember #F2A65A].

=== 02 CHAT → ANSWER ===
How you could use it: You demo your assistant or chatbot answering a question your customers really ask.

Open motion-board.html and copy tile 02, "Chat → answer" (the question "Which post drove the most leads?" answered by an AI CMO reply with a mini bar chart), into effect.html: that tile alone, scaled up, same motion and 8-second loop. Keep the embedded fonts and every "example" label on demo numbers. Then change only the words and colours. Words: [e.g. "Which plan should I pick?" answered with "Pro, it covers 4 channels"]. Colours: [two hex codes, or keep AI Topia Electric Blue #292DEB with Ember #F2A65A].

=== 03 TOGGLE → PRICING ===
How you could use it: You push the annual plan on a pricing page, an offer email or a Black Friday post.

Open motion-board.html and copy tile 03, "Toggle → pricing" (a Monthly to Yearly toggle that rolls the Pro price from $49 to $39 and pops a "Save 20%" pill), into effect.html: that tile alone, scaled up, same motion and 8-second loop. Keep the embedded fonts and every "example" label on demo numbers. Then change only the words and colours. Words: [e.g. our "Growth" plan, $99 to $79, "Save 2 months"]. Colours: [two hex codes, or keep AI Topia Electric Blue #292DEB with Ember #F2A65A].

=== 04 CALENDAR → FILLED ===
How you could use it: You show your weekly posting plan, or what a client gets from you every week.

Open motion-board.html and copy tile 04, "Calendar → filled" (seven content blocks (Reel, Post, Short, Email, Post, Live, Recap) dropping into a week grid), into effect.html: that tile alone, scaled up, same motion and 8-second loop. Keep the embedded fonts and every "example" label on demo numbers. Then change only the words and colours. Words: [e.g. Mon to Sun: Podcast, Clip, Post, Newsletter, Clip, Live, Recap]. Colours: [two hex codes, or keep AI Topia Electric Blue #292DEB with Ember #F2A65A].

### DATA: MAKE A NUMBER LAND ###

=== 05 STAT → COUNT-UP ===
How you could use it: You lead a case study or results post with the one number that matters.

Open motion-board.html and copy tile 05, "Stat → count-up" (a big "+312%" organic reach number counting up over a blue underline), into effect.html: that tile alone, scaled up, same motion and 8-second loop. Keep the embedded fonts and every "example" label on demo numbers. Then change only the words and colours. Words: [e.g. "+48 booked calls" in 30 days]. Colours: [two hex codes, or keep AI Topia Electric Blue #292DEB with Ember #F2A65A].

=== 06 BAR → RACE ===
How you could use it: You show which channel won the month in a client report or a results post.

Open motion-board.html and copy tile 06, "Bar → race" (four channels (LinkedIn, YouTube, Email, X) racing, with LinkedIn overtaking YouTube), into effect.html: that tile alone, scaled up, same motion and 8-second loop. Keep the embedded fonts and every "example" label on demo numbers. Then change only the words and colours. Words: [e.g. Instagram, TikTok, Newsletter and Podcast with our real lead counts]. Colours: [two hex codes, or keep AI Topia Electric Blue #292DEB with Ember #F2A65A].

=== 07 FUNNEL → FILL ===
How you could use it: You explain your funnel in a sales deck, a Skool lesson or a "how I get clients" post.

Open motion-board.html and copy tile 07, "Funnel → fill" (a Views, Leads, Calls, Clients funnel filling stage by stage while the numbers count up), into effect.html: that tile alone, scaled up, same motion and 8-second loop. Keep the embedded fonts and every "example" label on demo numbers. Then change only the words and colours. Words: [e.g. Visitors, Sign-ups, Trials, Customers with our last-quarter figures]. Colours: [two hex codes, or keep AI Topia Electric Blue #292DEB with Ember #F2A65A].

=== 08 DONUT → SWEEP ===
How you could use it: You show where time or budget goes before and after automation.

Open motion-board.html and copy tile 08, "Donut → sweep" (a donut sweeping to 22 hours saved a week, split into Writing, Editing, Research and Posting), into effect.html: that tile alone, scaled up, same motion and 8-second loop. Keep the embedded fonts and every "example" label on demo numbers. Then change only the words and colours. Words: [e.g. monthly ad budget split across Meta, Google, YouTube and Creators]. Colours: [two hex codes, or keep AI Topia Electric Blue #292DEB with Ember #F2A65A].

### TYPE: MAKE THE WORDS MOVE ###

=== 09 WORD → SWAP ===
How you could use it: You open a reel or a hero section with a line that keeps changing its ending.

Open motion-board.html and copy tile 09, "Word → swap" ("AI writes your" with the last word rolling through posts, scripts, emails and landing on "strategy."), into effect.html: that tile alone, scaled up, same motion and 8-second loop. Keep the embedded fonts and every "example" label on demo numbers. Then change only the words and colours. Words: [e.g. "We automate your" invoices, onboarding, reporting, growth.]. Colours: [two hex codes, or keep AI Topia Electric Blue #292DEB with Ember #F2A65A].

=== 10 SCRAMBLE → DECODE ===
How you could use it: You reveal a product name, a new offer or the keyword of a launch.

Open motion-board.html and copy tile 10, "Scramble → decode" (random glyphs decoding letter by letter into "AI CMO", then a tagline fading in), into effect.html: that tile alone, scaled up, same motion and 8-second loop. Keep the embedded fonts and every "example" label on demo numbers. Then change only the words and colours. Words: [e.g. our product name, with tagline "Launching Monday"]. Colours: [two hex codes, or keep AI Topia Electric Blue #292DEB with Ember #F2A65A].

=== 11 STRIKE → HIGHLIGHT ===
How you could use it: You land a before and after positioning line for an ad or a carousel cover.

Open motion-board.html and copy tile 11, "Strike → highlight" ("Stop paying an agency $8k a month." struck through, then "Hire an AI CMO." highlighted in ember), into effect.html: that tile alone, scaled up, same motion and 8-second loop. Keep the embedded fonts and every "example" label on demo numbers. Then change only the words and colours. Words: [e.g. strike "Posting every day by hand." highlight "Let the system post."]. Colours: [two hex codes, or keep AI Topia Electric Blue #292DEB with Ember #F2A65A].

=== 12 SPLIT → REVEAL ===
How you could use it: You open a series, a challenge or a launch week with a title card.

Open motion-board.html and copy tile 12, "Split → reveal" (the word "SHIP" splitting open to reveal a blue band that reads "DAILY, WITH AI"), into effect.html: that tile alone, scaled up, same motion and 8-second loop. Keep the embedded fonts and every "example" label on demo numbers. Then change only the words and colours. Words: [e.g. "BUILD" opening to reveal "30 DAYS, IN PUBLIC"]. Colours: [two hex codes, or keep AI Topia Electric Blue #292DEB with Ember #F2A65A].

### SYSTEMS: EXPLAIN HOW THINGS CONNECT ###

=== 13 AGENT → ORBIT ===
How you could use it: You explain a multi-agent setup, your team, or the services around one core offer.

Open motion-board.html and copy tile 13, "Agent → orbit" (four agents (SEO, Content, Ads, Email) flying out to orbit an AI CMO hub, with pulses running along the links), into effect.html: that tile alone, scaled up, same motion and 8-second loop. Keep the embedded fonts and every "example" label on demo numbers. Then change only the words and colours. Words: [e.g. hub "Coach" with Calls, Community, Course and Templates]. Colours: [two hex codes, or keep AI Topia Electric Blue #292DEB with Ember #F2A65A].

=== 14 PIPELINE → FLOW ===
How you could use it: You show your process or workflow in four steps.

Open motion-board.html and copy tile 14, "Pipeline → flow" (a path drawing Idea to Script to Video to Post, each step lighting up, then "One idea, fully shipped."), into effect.html: that tile alone, scaled up, same motion and 8-second loop. Keep the embedded fonts and every "example" label on demo numbers. Then change only the words and colours. Words: [e.g. Record, Transcribe, Clip, Publish]. Colours: [two hex codes, or keep AI Topia Electric Blue #292DEB with Ember #F2A65A].

=== 15 STACK → BUILD ===
How you could use it: You explain the layers of your offer, your tech stack or your framework.

Open motion-board.html and copy tile 15, "Stack → build" (four layers (Data, Strategy, Content, Distribution) dropping in to build an AI CMO stack), into effect.html: that tile alone, scaled up, same motion and 8-second loop. Keep the embedded fonts and every "example" label on demo numbers. Then change only the words and colours. Words: [e.g. Offer, Audience, Content, Sales]. Colours: [two hex codes, or keep AI Topia Electric Blue #292DEB with Ember #F2A65A].

=== 16 LOGO → LOCKUP ===
How you could use it: You close a reel, a video or a launch post with your mark.

Open motion-board.html and copy tile 16, "Logo → lockup" (scattered dots flying in to form the AI Topia ring-and-A mark, then the wordmark and URL), into effect.html: that tile alone, scaled up, same motion and 8-second loop. Keep the embedded fonts and every "example" label on demo numbers. Then change only the words and colours. Words: [e.g. our brand name, our initial inside the ring, and our website]. Colours: [two hex codes, or keep AI Topia Electric Blue #292DEB with Ember #F2A65A].

=== WHEN IT IS CLOSE BUT NOT RIGHT ===
Name one thing at a time. It gets you there faster, and Claude stops changing the motion you liked.

effect.html is close. Fix one thing only: [what looks wrong, e.g. the headline runs past its box at 3 seconds]. Keep the motion, the timing and the loop exactly as they are. Tell me what you changed.

=== WHEN YOU NEED A VIDEO ===
HTML plays in a browser. LinkedIn, Instagram and YouTube want an MP4.

Record one full 8-second loop of effect.html as a 1080x1080 MP4 at 30 fps. Before you install anything, tell me what you need and wait for my OK. Use window.seek(t) in the file to step through each frame so the video is smooth.

---
Follow me on YT: https://www.youtube.com/@joonahn_ai
Book a call: https://calendly.com/joon-getaitopia/30min
