Regulated display unit

Why this one is invented

The regulated display work I have actually shipped belongs to the brands that paid for it, so none of it is on this site. This unit reproduces the anatomy of one under a name that does not exist — VELTRIVA® (obelacitinib), Northmere Therapeutics. The molecule, the efficacy figure and every line of safety copy are invented, and the unit says so on its own face. The engineering is not invented.

The problem with 300 × 250

Two hundred and fifty pixels of height, and a regulated brand needs all of this inside them: a positioning line, an efficacy claim, a brand lockup, a call to action, and Important Safety Information that a reader can actually read.

The safety copy is the part that decides everything else. It is reproduced verbatim from the approved label — it cannot be summarised, reordered or truncated to fit, which rules out every technique that would normally make text fit a small box. So the box accommodates the copy: the ISI takes the bottom 96 pixels permanently, and the creative gets what is left.

That is not a compromise imposed on the design. It is the brief.

What I built

The safety section scrolls inside the unit on a hand-built scroller: auto-scroll that starts after a five-second dwell and stops the instant a pointer enters the copy, a draggable thumb, and a position indicator that stays visible. Native overflow scrollbars are either invisible or eat a fifth of the readable width at this size, and medical-legal review needs to see scroll position to sign off — so the scrollbar is reimplemented rather than styled.

The creative runs three frames on a single labelled GSAP timeline. When review comes back asking to hold frame two a beat longer — and it always does — that is one number, not a re-choreography. The efficacy figure counts up rather than appearing, which buys about a second of attention on a number that would otherwise be skipped.

Four click destinations are wired separately: the brand site, the Prescribing Information, the Medication Guide and FDA MedWatch. Each gets its own clickTag so the ad server can report on them independently. The exit area covers the creative only — clicking the safety copy must never navigate someone away mid-sentence.

What it took

Zero raster assets. The gradients, the glow and the brand lockup are CSS, which is why the whole unit is 86 KB including the animation library, and why it stays sharp on any display.

The unit boots through the DoubleClick Studio Enabler when one is present, waiting for its INIT and VISIBLE events so a unit served below the fold does not burn its animation before anyone sees it. With no Enabler — a standalone preview, or this page — it starts on load instead. One file, both environments.

And it respects prefers-reduced-motion by resolving straight to the end frame: the one the approved copy signs off on. An ad that ignores that setting is an ad that fails the person it was made for.