Building an AI-Animated Website Hero From Separate Assets

I had been reading about workflows for making much more ambitious website heroes with AI, where the coding agent is only one part of the process. Rather than asking it to create the whole visual from scratch, you generate the individual pieces elsewhere and give the agent much better material to work with.

I wanted to try the process for myself.

Ballet is certainly not a passion of mine, but I happened to be looking after my niece that day. That made it a good excuse to involve her in a bit of AI learning and build a fictional dance studio hero around her.

The finished page only exists locally. This was a learning project rather than something I intended to deploy, so the important part was understanding the workflow.

Start by making the assets

We began by looking at dance website references and picking out individual things she liked.

Two had a central dancer surrounded by large flowing fabric. Another had the purple, blue and magenta lighting she preferred. I then used a normal photo, no need to be in a ballet dress or dancing, of my niece as the starting reference and generated a stylised dancer in that visual direction.

It was recognisably based on her, but still clearly AI generated. One of the first things she asked was why her hair was so long!

For this experiment that was fine. If accurate identity preservation mattered, I would need another round of work to keep the model much more tightly constrained.

Once we had a hero concept we liked, I generated the environment separately as a clean 16:9 background plate with no dancer or interface.

The aim was to end up with three independent layers:

• the static background;
• the moving dancer;
• real HTML and CSS for the navigation, headline and CTA.

That separation is what gives the coding agent useful components instead of asking it to invent everything.

Turning the dancer into a moving asset

The dancer was isolated from the generated image as a transparent PNG. I initially assumed I could simply give that to Seedance and ask it to animate her.

That did not work.

Seedance treated the transparent area as space it was free to generate into and filled it with its own colourful background.

The solution was much more basic. I opened the isolated dancer in Photopea, placed her over a completely flat cyan background and sent that image to Seedance instead.

The cyan was only there because it could be removed later.

For the animation I used Seedance 2 rather than 2.5. This was an experiment and I did not see much point doubling the cost before I knew whether the workflow would work. The generation cost roughly £2.50.

The prompt kept the job narrow: preserve the dancer, keep the camera fixed, animate a controlled movement and leave the cyan background completely unchanged.

Seedance handled the dancer and flowing fabric surprisingly well.

Removing the background again

The next job was turning that generated video back into a transparent asset.

CapCut made chroma keying the cyan very easy, but I ran into its paid export restrictions. Rather than adding another subscription for one small job, I moved to the open-source editor Shotcut.

(CapCut is good, but so many things want money now for bits that open source tools already cover!)

It wasn't as clean-cut as CapCut but eventually with Shotcut I keyed out the cyan and exported the dancer as a WebM using VP9 with an alpha channel.

The video still had a rectangular canvas, but everything except the dancer and fabric was transparent. That meant it could now sit independently over the background in the browser.

The fiddliest part was actually the loop.

Ballet was not the best movement to choose because ballet naturally contains held poses. Seedance generated a perfectly reasonable dance sequence, but when the dancer paused at the end before the browser restarted the clip it looked more like the webpage had stopped rendering.

Trimming helped, but the better solution was to duplicate the movement, add it to the end of the video, so double the length to around 12 seconds, but then reverse the second half:

forward → reverse → forward → reverse

That created a much smoother continuous hero animation.

Next time I would think about the loop before generating the movement. A continuous spin or another naturally cyclic action would have saved a fair amount of editing afterwards.

Give the coding agent better ingredients

Once the assets were ready, Codex had a relatively simple job.

It received the background image, transparent moving dancer video and the copy required for the page as a prompt. From there it was mainly assembling and positioning the pieces.

It reminded me of building MyTourneyTime. (World Cup Fixtures Tool)

One of the things I learnt during that project was that results improved considerably once I stopped expecting the coding agent to work everything out itself. I compiled the fixture information properly first and gave the agent structured data it could trust. Its job then became building with good inputs rather than trying to discover and interpret everything at once.

This feels like the visual equivalent.

If you give a coding agent the background, moving subject and visual direction you actually want, it is no longer being asked to randomly invent a beautiful homepage. It already has most of the ingredients and can concentrate on turning them into a website.

There is slightly more work upfront, but the potential output is much better.

I deliberately stopped before polishing it

This prototype could have gone considerably further.

I did not change the font styling Codex produced, heavily rethink the positioning or spend time turning the navigation into something I would actually ship. I wanted this exercise to stay focused on the unfamiliar part: generating the background and moving subject separately, then getting them working together in the browser.

If this were heading for production, I would also probably move away from the familiar purple-gradient AI aesthetic. It worked more than well enough here and conveniently helped the dancer blend into the scene, but I would want a more distinctive art direction for a finished site.

The useful lesson was the workflow itself.

Instead of iterating only with the coding agent, you can iterate through different models that specialise in different jobs, prepare the components properly, and then hand those components to the coding agent to assemble.

There's lots of improvements that can be gained from what I've made today, some really simple gains would garner big rewards. But for this today I didn't want to spend any more time touching up.

But the thing to take away is the concept of the process. It's not that tricky and the gains are exponential.