Day 1: I Asked an AI to Loop Seven Dashboard Windows Forever

Day one of getting an AI agent to loop seven dashboard windows forever, using nothing but a written brief.

The finished frame. Seven windows, one continuous loop, rendered from the brief below.

Context & Who It’s For

This is Day 1 of a small log I’m keeping while I build motion graphics with Heramotion, a tool that turns a written brief into a finished animation through an AI agent. Today’s clip: seven browser-style windows drifting on a black background, each running its own charts, gauges, and a small AI chat panel in the middle.

If you sell motion loops or overlay graphics on Adobe Stock, Envato, or Pond5, this genre earns its keep. Tech, SaaS, and AI-themed b-roll fills a lot of listings right now, and a dashboard cluster fits almost anything about data or software. The full 15-second loop is on YouTube:

The Problem

Seven windows sounds simple until you count what each one does at once. Bubbles arrive in a chat panel. Charts redraw. Bars rise and fall. Donuts fill and empty. A gauge needle sweeps while a percentage counts in step with it. Map markers pulse. Dash rows that stand in for text brighten and dim. Pill tags flicker down a column. The whole cluster floats and tilts, front windows drifting further than the ones behind.

None of that can repeat on the same beat, or the loop reads as one mechanical pulse instead of a live interface. Every motion also has to land back at its starting point at the fifteen-second mark, so the clip plays forever with no visible seam. Keyframing that by hand eats a full day before you touch color.

What Actually Makes It Work

One agent, one pass, eleven motion behaviors running at once.

One brief, one agent session. Heramotion’s Create tab turns a written brief into a working HTML and GSAP composition in one run, no timeline, no manual keyframes. The 85-line brief behind this clip reads more like a spec sheet than a prompt. Every window, every chart type, every motion gets its own line.

Steering mid-run. If a window drifts far enough to cover a neighbor’s title bar, you can type a correction into the running session instead of starting over.

Renders that repeat exactly. The same brief produces the same output every time, so a brief that works today still works next week for a close variation.

Continuation for the next round. Once a composition passes, reopen it and ask for a new palette or chart layout, without redoing the structural work that already earned its checkmarks.

Get Microstock Insights’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

A style guide that grows with you. Rate a finished piece, thumbs up or down with a short note, and Heramotion folds that note into a standing set of preferences. Day 2’s brief starts from what Day 1 got right.

Why It Matters

None of this shows up in the final clip, and that’s the point. Buyers see seven windows breathing on their own, each on its own clock. A loop where every chart redraws in lockstep looks like a template. One where each part runs offset from the rest looks like a real product doing real work, the difference between a clip that gets used and one that gets scrolled past.

How To Apply It

1. Open a free Heramotion Demo session first. It runs on Claude Code alone, caps at 1080p and 8 seconds, and costs nothing.
2. Write the brief as a spec, not a mood. Name the background color in hex, name every element, and say where it sits in the frame.
3. List every animation as its own numbered behavior, with its own easing. “Bars rise and fall independently at staggered intervals” beats “bars animate.”
4. Say the loop math out loud. Each motion needs a whole number of cycles, and the camera needs to return to its start.
5. Pick an engine in the Create tab. Claude Code, Kimi Code, and OpenCode each spawn their own CLI. Agent Motion runs in-app on one API key across roughly 190 models.
6. Watch the render, then rate it. A short note on what to fix carries into your next brief on its own.
7. Send the clip to the queue for a ZIP preview or a full ProRes master, then let the app write the title and keywords before export.

Creative Directions

Same skeleton, different frame and fewer panels.

• Vertical crop. Stack three or four windows top to bottom for a 9:16 feed instead of a 16:9 background loop.
• Fewer windows, more space. Drop the count and widen the gaps, for buyers who want to lay their own text over the empty margins.
• A different industry skin. Swap the chart types for a security dashboard, a logistics tracker, or a crypto ticker, same eleven motion rules underneath.
• Dark and light pairs. Render the same brief once on black, once on a light background, so one clip fits two listing moods.

Real Brief Example

Here’s the actual brief, pasted as written, no edits:

Make a 15-second ANIMATED cluster of floating dashboard windows on pure
black, seamlessly loopable. This must be in continuous motion from first
frame to last. Generic interface — no logos, no brand marks.
BACKGROUND:
Pure flat black (#000000) filling the entire frame, with absolutely no
gradient, vignette, texture, or lightening of any kind.
THE WINDOWS:
Seven rounded-rectangle browser-style windows float at varied depths and
scales, arranged in a loose cluster across the frame. Each window has a solid
WHITE body (#FFFFFF) with a slightly greyed title bar across its top holding
three small circles at the left and a short rounded address field beside
them. Content sits on white, so all text, axes and gridlines are near-black
(#1F1F1F) or mid grey, and charts carry bright accent fills.
Windows overlap one another in a deliberate layered stack, nearer windows
partially covering those behind — this is intentional depth, not a defect.
But every window's title bar and its primary chart must stay fully visible
and unobscured; only the empty margins of a window may be covered. No
window's key content is ever hidden behind another.
The cluster stays within a 5% safe margin from the frame edges.
WINDOW CONTENTS, roughly left to right and back to front:
- UPPER CENTRE-LEFT: a mountain-range area chart with two overlapping filled
  ridges in coral and cyan, rows of short dashes beside it, and small stat
  tiles beneath.
- UPPER RIGHT (furthest back, slightly smaller): a triangular funnel chart in
  stepped bands, beside a smooth area chart.
- LEFT: a candlestick-style bar chart in coral and cyan, a thick donut ring
  beside it, and horizontal progress bars below.
- LOWER LEFT: a small processor-chip outline glyph with the letters "AI"
  inside it, beside a vertical bar chart in white and amber.
- CENTRE (largest, nearest camera): the assistant panel. On its left, a large
  bordered tile containing the letters "AI" in bold amber, with two short
  status lines of dashes beneath it. On its right, a conversation column:
  alternating rows of small robot-head glyphs with rounded message bubbles
  beside them, and small circular avatar glyphs on the opposite side, the
  bubbles filled with rows of short dashes. Along the bottom, a rounded input
  field outline with a send-arrow glyph at its right end.
- RIGHT: a world map drawn as a dotted landmass with several ring markers on
  it, a pie chart above, a semicircular gauge with a needle, and a smooth
  multi-band area chart below.
- LOWER RIGHT (nearest, front): a thick donut ring with the letters "AI"
  centred inside it, a dense vertical bar chart beside it, four small circular
  gauges in a row beneath, and a column of rounded pill-shaped tags in cyan
  and amber.
TEXT TREATMENT: readable text is limited to the letters "AI" where specified
and a single percentage figure in one gauge. Everything else that would be
text is rendered as ABSTRACT ROWS OF SHORT HORIZONTAL DASHES of varying
length — a deliberate graphical stand-in, language-neutral. Do not write
words, labels, headings, or lorem ipsum anywhere. The percentage must match
the gauge it sits in and never exceed 100%.
PALETTE: pure black (#000000), white (#FFFFFF), near-black (#1F1F1F) for
text, hot coral (#F2603C), bright cyan (#3BB0E8), warm amber (#F5A623), deep
blue (#1B5FA8), green (#3D9970). No purple, no violet.
REQUIRED CONTINUOUS ANIMATION — all running simultaneously, each completing a
whole number of cycles across the 15 seconds so the loop is seamless:
1. THE CONVERSATION (the centrepiece): in the centre panel, message bubbles
   arrive one at a time from alternating sides, each sliding in and settling,
   the column scrolling gently upward to make room. Before each bubble
   arrives, a three-dot typing indicator pulses briefly in its place. The
   sequence cycles cleanly so the column returns to its starting state.
2. AREA AND LINE CHARTS: each curve redraws itself left to right over several
   seconds, then undulates gently, the charts offset from one another so they
   never redraw in unison.
3. BAR CHARTS: bars rise and fall independently at staggered intervals,
   adding and removing whole segments rather than sliding smoothly.
4. DONUTS AND PIE: each ring's arc fills and empties on its own cycle length,
   rotating slowly, no two in unison.
5. GAUGES: needles sweep slowly across their arcs and back, the percentage
   figure counting in step with its own gauge so the two never disagree.
6. MAP MARKERS: the ring markers pulse outward one at a time in a repeating
   sequence, each sending a brief expanding ring.
7. DASH ROWS: individual rows brighten and dim at staggered offsets, some
   briefly extending or retracting in length.
8. PILL TAGS: the coloured tags flicker brighter one at a time in a slow
   travelling sequence down their column.
9. WINDOW FLOAT: each window drifts with a slow independent bob and a few
   degrees of tilt, offset in phase so no two move in unison, and never far
   enough to cover a neighbour's title bar or primary chart.
10. PARALLAX: nearer, larger windows drift further than the smaller ones
    behind them.
11. CAMERA: a very slow continuous drift that returns exactly to its starting
    position at the end of the 15 seconds.
Easing: `power3.out` on bubbles arriving and chart redraws, `power2.inOut` on
the floating drift, gauges and brightness cycles, constant linear speed on the
donut rotations. No glitch, no distortion, no flicker. Crisp, clean, modern
AI-analytics mood.

Pitfalls & Fixes

• Windows cover each other’s key content. Write a hard rule into the brief: only empty margins may be covered, never a title bar or a primary chart.
• The agent writes real words where dashes belong. State it directly: text-like areas render as abstract dash rows, no lorem ipsum, no labels.
• Everything animates in unison and looks robotic. Every motion line needs its own offset language: “staggered,” “no two in unison,” “on its own cycle length.”
• The palette drifts toward purple or violet. Name the palette in hex and say plainly what’s excluded, not just what’s included.

Case Mini

A brief that just says “animate the charts and let the windows float” gives the agent room to sync every motion to the same clock, seven windows breathing in lockstep. The brief above spells out staggering for every single behavior instead: bars, donuts, gauges, dash rows, pill tags, all offset on purpose. Same seven windows, same seven charts. One version looks like a loading screen. The other looks alive.

Wrap-Up

Day 1’s lesson: the brief carries the weight a timeline used to carry. Spell out every element, every motion, and the loop math, and the agent has almost nothing left to guess. Tomorrow I’m trying a different genre. Want to build your own version of today’s clip? Start with the free Demo, then move to Alpha Access once you’re ready for the full engine lineup and 8K export.

Keywords

motion graphics, AI animation, dashboard UI, microstock, Adobe Stock, GSAP, Heramotion, stock video, AI agent, seamless loop, prompt engineering, video generation

Try It Yourself

Today’s render, sitting inside Heramotion’s own queue.

Heramotion is still in Alpha. Expect rough edges and the occasional bug. It’s $14.99 right now, and the price goes up once it reaches a stable release. You’ll also need your own API key, so the price above doesn’t cover usage.

Get Alpha Access here: Download Alpha

Want to try the workflow first, free? Heramotion Demo runs on Claude Code alone, capped at 1080p and 8 seconds. It’s an early build too, Windows and Mac only.

Try the free Demo here: Download Demo