Someone is on the sofa, phone in one hand, scrolling past an article. Between two paragraphs sits an orange backpack under a grey film, with a small hand icon wiggling on top. They drag a thumb across it. The film flakes away, the real product shows up underneath, and a button appears.
That took about four seconds. Building it so those four seconds feel effortless on every phone took a lot more. This is a walk through what happens inside one of these playable ads, from the first byte to the final tap.
The scene this whole article is about: a phone, a thumb, and four seconds to get it right.
One canvas, not twenty layouts
The first decision is the least glamorous and the most important: every creative is designed on a single 320 × 480 canvas.
It is tempting to design a separate layout for each screen. In practice that multiplies the work and the bugs. A fixed canvas means the designer controls every pixel, the animation timings never drift, and QA tests one composition instead of a dozen.
The canvas is then scaled to whatever space it is given, with one rule: compare how many times the canvas fits across the screen and how many times it fits down, and keep the smaller number. That guarantees the creative always fits, whichever side of the screen is tighter. On a portrait phone the width decides. On a desktop or a phone turned sideways, the height decides. The leftover space becomes a neutral background.
One detail matters a lot here. The scale has to be recomputed whenever the space changes, and on mobile that happens far more often than you would think. Rotating the phone is the obvious case. The less obvious one is the browser’s address bar sliding away as you scroll, which changes the height of the screen. The creative watches its own frame and refits the instant it changes size.
A creative that is two pixels too tall gets clipped. A creative that is clipped looks broken. Fitting is not a nice-to-have.
Weight is a feature
An ad competes with the page around it. If it loads slowly, the reader has already scrolled past. If it is heavy, it eats into the publisher’s performance budget and nobody wants to run it.
So the budget comes first, and the design fits inside it:
- Two images, not twenty. The scratch card needs exactly two pictures: the product under its film and the product revealed. The frame, the button and the layout are CSS.
- No UI framework. The interaction logic is plain JavaScript. A small animation library drives the hint, and that is the only dependency.
- Poster first, motion later. The first thing on screen is a still image. Heavier assets such as video loops only load once the ad is actually visible.
This is also how industry guidance from the IAB frames it: keep the initial load small, defer the rest, and never start sound without a tap.
Why does nothing happen until someone is looking?
A page can easily hold ten creatives, and most of them are off-screen most of the time. Animating all of them would drain the battery and stutter the scroll.
The fix is to let the browser tell us when something is worth running. Browsers can report when an element enters or leaves the screen, without the page having to check constantly. When at least 40 percent of the creative is on screen, it comes to life. When it leaves, it goes back to sleep. The same signal is what drives viewability measurement, so the ad is only “seen” when it is genuinely seen.
The scratch itself
What the browser actually gets: a finger moving across glass, many times a second.
Here is the fun part. The film is a drawing surface laid over the product photo. Each time a finger moves, we paint a soft brush stroke onto it, but with a twist: the brush is set to erase instead of paint. So instead of adding colour, every stroke punches a hole in the film and the photo underneath shows through. It is the digital version of a coin on a lottery ticket.
A few small details separate a scratch that feels right from one that feels cheap:
- Claim the gesture. The scratch area tells the browser that touches inside it belong to the ad. Without that, the browser thinks the thumb is trying to scroll the page, and the scratch fights the scroll.
- Fill the gaps. Fingers move faster than the screen refreshes. If you only stamp the brush at each sample point, a quick swipe leaves a dotted line. Stamping it at every pixel along the path between the previous point and the current one keeps the stroke continuous.
- Know when to stop. Nobody wants to scratch every last pixel. After each stroke we measure how much of the film is gone. Past a set percentage, the rest clears on its own and the payoff appears.
A hint, not an instruction
People do not read instructions inside ads. They do respond to motion that suggests a gesture. A hand icon that drifts left and right says “drag me” in any language, and disappears the moment the reader touches the canvas. The creative should explain itself in under a second, for reasons we go into in why people play with ads they would normally ignore.
How does fullscreen work on mobile without surprises?
When someone opens a creative to explore it, we give it the whole screen on a phone. That sounds simple, but it comes with a short checklist:
- Size the viewer to the space the browser really leaves visible, so its bar never covers the bottom of the creative.
- Lock the page behind it so a swipe never scrolls the article instead.
- Keep clear of the notch and the home indicator.
- Keep every button at least 44 pixels tall, the size of a fingertip.
- Only apply hover effects on devices that can actually hover, so cards do not stay stuck in their hover state after a tap.
What it adds up to
None of these techniques is exotic. A fixed canvas, a one-line scaling rule, an observer, a composite operation, a handful of CSS properties. The craft is in putting them together so the person on the sofa never notices any of it. For the bigger picture of where this format fits, our overview of rich media advertising covers the other shapes a creative like this can take, and our piece on dynamic creative optimization covers how the same canvas can show a different product to each viewer.
They just drag a thumb, see the backpack, and smile. That is the whole point.
FAQ
What makes an ad “playable”?
A playable ad responds to a touch or click rather than just sitting still. Scratching, flipping, sliding or swiping all count, as long as the gesture reveals something and the ad reacts to it in real time.
Why use a fixed canvas instead of a responsive layout?
A fixed canvas keeps one composition to design, animate and test, then scales it to fit whatever screen it lands on. A responsive layout would multiply the number of versions to build and the number of ways the animation could break.
Do playable ads slow down the page they appear on?
Not if they are built with a tight weight budget. Two images instead of twenty, plain JavaScript instead of a UI framework, and heavier assets deferred until the ad is actually visible keep the initial load small.
What happens if the interaction does not run smoothly on an older phone?
The animation only starts once the browser reports that the creative is on screen, which limits how much is running at once. The poster image underneath is still a complete ad on its own, so a slower device still shows something coherent even if the animation itself is modest.
Do playable ads need sound or written instructions?
No. A small moving hint, like a hand icon suggesting a drag, is enough to communicate the gesture. Sound should never start without a tap, in line with IAB guidance on rich media.
How Arago helps
Creative is built around exactly the kind of playable experience described above: Scratch, Flip 3D, Reveal, Slider and Carousel formats, all designed on the same 320 x 480 canvas and personalised per viewer with the product, offer and nearest store. It launches together with the DSP at no extra cost: free, no designer, no fee per ad, no limit on how many you run. The showcase has each format to try.
