Can AI animate? Yes-ish.

The Brief

We realized our feed needed actual movement. Holeaf already has enough bright brand colours to need a damn chart, so the brief was simple: let them travel, blend, and loop instead of just sitting there politely.

Since we’re more at home building web pages than pretending we know how to use After Effects, the web was our starting point. Between SVGs, CSS keyframes, and WebGL, you can easily hack together looping animations for a social feed. The experiment was to use an AI coding agent to actually build the things, instead of just treating it as a magic 'make it nice' button.

The Reality

The short version: it worked, and we had way more fun than was strictly necessary. Several of the loops were simple enough to hand-code without much drama. The AI just blew through the first pass, organized the code, and made it cheap to throw away a few variations before picking a winner.

It didn't replace the need for actual judgement. We still chose the pace, colours, shapes, and what counted as 'finished enough to post.' One animation (the drips) fought back and took considerably longer than planned. Good lesson, though: a fast start is not the same thing as an easy finish.

We’re using these animations across our Instagram and Facebook & we’re making more.

The Hard Part

Basic animation is simple for a reason. Tell a shape to morph, and the rules are easy to check. Drips sounded just as harmless until they needed to actually look fluid, loop seamlessly, and not behave like coloured chewing gum.

The hard part was getting the AI to understand space. A convincing drip has to stretch, fall, land without a visible jump, and reset without giving away the loop. Since text instructions leave too much room for interpretation, the AI confidently produced plausible code that was visually cursed.

We could have taken the sensible route: draw a few SVG states and morph them with GSAP. Instead, we chose the masochistic WebGL route to see if the agent could handle something requiring actual visual control. A perfectly reasonable decision, as long as you enjoy discovering that 'one quick drip' has strong opinions.

What Actually Worked

The biggest improvement happened away from the keyboard. We sketched a quick storyboard: the starting frame, the direction of travel, the peak of the movement and the frame where the loop returns. Rough drawings were enough. They gave us a shared reference instead of asking a language model to infer motion from adjectives.

Next, we used an image model to generate still-frame references and fed those, plus the scribbles, into the AI. Our prompts got aggressively concrete: strict canvas sizes, exact colours, timing in seconds, and hard rules on what had to loop. For WebGL, we learned to spoon-feed it in stages: draw the base shape, make it move, then mess with distortion.

Keeping the output in a browser meant iteration was wonderfully direct. Tweak, refresh, evaluate. We just made sure to preview it all at mobile size, because a lovely desktop flourish is almost guaranteed to become visual soup in a feed.

The Takeaway

AI is a solid animation tool, provided you hand it a rigid brief and actually inspect the output. It’s great at getting prototypes moving and explaining weird code. It is terrible, however, at deciding if the motion actually feels good. That remains gloriously subjective and pleasantly our problem.

Drawing storyboards sped everything up because it forced us to figure out what we wanted before we started yelling at the AI. It also kept our prompts specific: “stretch the drip for 0.3 seconds” is actionable. Telling an AI to “make it more liquid” just invites creative mischief.

We’ll be making more of these. Some for social, some just because building tiny colourful machines is a wildly good way to spend an afternoon. If you need help turning a weird idea into a working web build, or need a second set of eyes on a rogue AI project, hit up the team at Holeaf.