FREE · 12 ANIMATION PROMPTS
By Abi Odedeyi · CodeFreeIQ
12 moving charts Claude will build for your business
Bar races of what sells, your revenue counting itself up, invoice gauges, the funnel. One complete prompt per chart, no design tool, no code.
By Abi Odedeyi · CodeFreeIQ🎬
One prompt per chart
Every prompt is complete. Swap the brackets for your numbers, paste, done.
🧾
Your data, moving
Sales races, revenue counters, invoice gauges, the funnel. Charts about YOUR week.
📌
Feed-ready
Includes the GIF trick that makes them play on LinkedIn as images.
Get all 12 prompts
Pop your details in and they unlock right here.
No spam. Unsubscribe anytime.
How these work
Each prompt below is complete. Swap the [BRACKETS] for your numbers, paste it into Claude, and ask it to show the page. Expand the preview and it plays. To post it: screen-record the preview, convert to GIF, and upload with the PHOTO button on LinkedIn (a GIF counts as an image there). On Instagram, use the video as an MP4.
01 · What actually sells
Make me an animated HTML page, 1080 x 1350, in my brand colours [YOUR COLOURS], that loops every 4 seconds. Show an animated bar chart race of these products and their sales this month: [PRODUCT: NUMBER, one per line]. Bars grow from zero to their values, the biggest seller lands on top. Label it in plain English. No libraries, just CSS animation.
02 · The month's number
Make me an animated HTML page, 1080 x 1350, in my brand colours [YOUR COLOURS], that loops every 4 seconds. Show a revenue counter that counts up from 0 to [NUMBER] with a pound sign, big monospace digits on a dark card, with the caption 'revenue, counting itself up'. Label it in plain English. No libraries, just CSS animation.
03 · The quarter
Make me an animated HTML page, 1080 x 1350, in my brand colours [YOUR COLOURS], that loops every 4 seconds. Show a progress ring that fills to [PERCENT]% of my quarterly target, thick rust-coloured stroke, the percentage in the middle. Label it in plain English. No libraries, just CSS animation.
04 · Who owes you
Make me an animated HTML page, 1080 x 1350, in my brand colours [YOUR COLOURS], that loops every 4 seconds. Show three vertical gauges filling to my unpaid invoice totals at 30, 60 and 90 days: [THREE NUMBERS]. Make the 90-day one a warning colour. Label it in plain English. No libraries, just CSS animation.
05 · Where deals die
Make me an animated HTML page, 1080 x 1350, in my brand colours [YOUR COLOURS], that loops every 4 seconds. Show a funnel of four bars sliding in one after another: [LEADS] leads, [CALLS] calls, [PROPOSALS] proposals, [WON] won. Each narrower than the last. Label it in plain English. No libraries, just CSS animation.
06 · The follow-up
Make me an animated HTML page, 1080 x 1350, in my brand colours [YOUR COLOURS], that loops every 4 seconds. Show a typewriter effect that types out this subject line character by character: '[YOUR SUBJECT LINE]', in a bordered input box. Label it in plain English. No libraries, just CSS animation.
07 · Your busiest hours
Make me an animated HTML page, 1080 x 1350, in my brand colours [YOUR COLOURS], that loops every 4 seconds. Show a 7-column heatmap of my week where these cells light up in sequence from pale to deep: [DAYS/HOURS AND INTENSITY]. Label columns Mon to Sun. Label it in plain English. No libraries, just CSS animation.
08 · Admin, before and after
Make me an animated HTML page, 1080 x 1350, in my brand colours [YOUR COLOURS], that loops every 4 seconds. Show a before/after crossfade: '[X] hours' fades out and '[Y] hours' fades in, with captions 'admin each week, before' and 'after the handover'. Never show both at once. Label it in plain English. No libraries, just CSS animation.
09 · The growth line
Make me an animated HTML page, 1080 x 1350, in my brand colours [YOUR COLOURS], that loops every 4 seconds. Show a line chart of [YOUR METRIC] that draws itself left to right along these points: [NUMBERS], with a dot that pops in at the end. Label it in plain English. No libraries, just CSS animation.
10 · The 3 leaks
Make me an animated HTML page, 1080 x 1350, in my brand colours [YOUR COLOURS], that loops every 4 seconds. Show three list rows that reveal one after another, half a second apart: [THREE ITEMS]. Dashed borders become solid as each reveals. Label it in plain English. No libraries, just CSS animation.
11 · Comment to call
Make me an animated HTML page, 1080 x 1350, in my brand colours [YOUR COLOURS], that loops every 4 seconds. Show a dot that travels along a curved dotted path past four labelled stops: comment, DM, email, call. The dot pauses briefly at the last stop. Label it in plain English. No libraries, just CSS animation.
12 · Posts on time
Make me an animated HTML page, 1080 x 1350, in my brand colours [YOUR COLOURS], that loops every 4 seconds. Show three pulsing rings labelled with my posting times: [TIMES]. Each ring pulses on its own beat. Label it in plain English. No libraries, just CSS animation.
The one rule: check every number on the chart before it goes anywhere public. It animates whatever you type, right or wrong, and your name is on it.