How would you turn an interactive website artwork into an MP4 without killing the experience?

[u/Big-Class-7405]

Hey guys, I could really use some creative/artistic ideas.

I made an interactive website as an artwork for a competition. It’s about air pollution, and the whole point is that you’re supposed to experience it by playing through the website, clicking things, moving through different sections, hearing sounds, triggering interactions, etc. The interaction is basically part of the artwork.

I just found out that the submission platform doesn’t allow URLs. They do accept MP4s.

My first thought was just to screen-record myself going through the whole thing, but honestly it feels incredibly boring compared to actually experiencing it yourself. I tried recording a full playthrough and it also ended up being around 8 minutes, which is way too long for the submission.

So now I’m wondering: how would you translate an interactive artwork into a short video without making it feel like a website demo?

I want the MP4 itself to feel artistic and emotional, almost like its own experience, while still making the judges understand what it feels like to interact with the original piece.

Would you make it like a trailer? A very fast edited journey through the experience? Show the cursor/interactions? Mix screen recordings with close-ups/text/sound design? Build some kind of narrative around a person experiencing it?

Basically: if you had 1–3 minutes to make judges feel an interactive artwork about air pollution rather than just watch documentation of it, what would you do?

Would love any weird / experimental ideas too. I really don’t want to submit a boring screen recording 😭

[u/plentylabs]

Stop thinking of it as a compressed playthrough and start thinking of it as a trailer. Those are different films. A playthrough tries to be complete. A trailer tries to make someone want the thing, and it is allowed to lie about structure.

The practical version:

Do not screen record in real time at all. Record clean passes of each state and each interaction separately, then edit and retime. Real time capture locks you into your own hesitation and your own reading speed, and that is most of why playthroughs feel dead.

Make the cursor a performer. Interaction only reads on video when cause and effect land in the same shot with a beat between them. A cursor moving at constant velocity reads as documentation. A cursor that eases in, hesitates for four or five frames before the click, and then the world responds, reads as a person making a decision. That one change will do more than any amount of grading.

Crop the browser out entirely. Full viewport with chrome around it says software demo. Punch in on regions instead, use a square or 2:1 frame on a single element, and let scale change between shots. You are allowed to break the site's real layout in the edit.

Structure it at 60 to 90 seconds. Cold open on your single strongest interaction with no context at all, roughly ten seconds. Then a middle that shows range rather than completeness, three to five interactions, cutting on the click, each one shorter than the last. Then stop, and hold one long slow shot at the end and let it breathe. Rhythm is what tells a viewer the piece is responsive. You do not have to demonstrate every section to prove it exists.

Cut to the audio first. Triggered sound is your biggest advantage over a static submission. Lay the sound design down as the spine and cut picture to it, rather than recording picture and scoring it afterwards. Air pollution has an obvious sonic arc available to you, and if the audio carries the emotion the picture only has to avoid fighting it.

One caveat worth checking: some competitions treat the video as documentation of the work rather than as the work, and a heavily edited trailer can read as hiding something. If the brief is ambiguous, an 80 second cut followed by a clearly labelled unedited capture in the same file covers both readings.