HTML5CSS animationSVGpostMessageIAB sizes
Controls
- Replay restarts all six banners in the same frame; the strip shows the loop and the seconds
- Pause freezes every banner and its end-frame timer
- Backups swaps each banner for its static backup image
- Click a banner to see the clickTag it would open
- On a phone, pick one size from the list; wide units scale down and say so
Works in current Chrome, Safari and Firefox; plain HTML, CSS and SVG in sandboxed iframes, no WebGL. Respects the reduced-motion setting: every banner shows its end frame and the replay goes straight to it. Unofficial concept ad, not affiliated with or endorsed by Nike, Inc.; Nike and the Swoosh are trademarks of Nike, Inc.; the Air Velocity model and the prices are illustrative.
How it’s built
How it's built
- Six standalone HTML5 ad packages (970×250, 728×90, 320×50, 300×250, 300×600, 160×600), one folder each under
public/lab/ads/banner-set/ (bb, lb, mb, mr, hp, ws). The folders are deliberately not named after the size: EasyList, used by uBlock Origin, AdBlock and Brave, blocks any URL containing /728x90/ or /160x600/, which left the leaderboard and skyscraper as black boxes for visitors with an ad blocker. Each is a single index.html with inline CSS, inline SVG and about 1.5 KB of vanilla JavaScript, plus a backup.jpg of its end frame (rendered by the generator from the package file itself). No framework and no font requests: Anton (display) and Barlow Condensed Bold (labels), both SIL OFL, are subset to the glyphs the banners use (about 8 and 11 KB woff2, in scripts/ads/fonts/) and inlined as data URLs; no external requests, relative paths only, so any ad server can host the folder as is. - Every package declares
<meta name="ad.size">, a global var clickTag (overridable with a ?clickTag= query, the way ad servers pass the tracking URL) and a full-size click area that calls window.open(clickTag). - Each size is its own composition, not a scaled copy: the billboard runs headline, shoe and price burst left to right; the leaderboard and mobile banner run the story in one line with the tagline replacing the hook; the medium rectangle and half page stack it; the skyscraper stacks it narrow and tilts the shoe.
- The story is one 5 s CSS timeline on
transform and opacity only, looped three times: the Run the Night hook, the shoe flying in with speed streaks, a tilt and a shine sweep across the upper, a colourway switch from Volt to Crimson (two stacked SVG shoes cross-fading, the glow behind changes with them), the price starburst bursting in, a blinking 48-hours urgency line, then Just do it. and the Shop now button with its own shine. At 15 s a script swaps to a static end frame, the common display-network limit. - The sneaker is a Nike-style runner drawn by hand in SVG on a grid where the shoe is 100 long (toe right): outsole with lugs and toe spring, a sculpted midsole with the heel stack about twice the forefoot and an Air window under the heel, a heel overlay with a reflective strip and pull tab, a padded collar with the far collar showing inside, a tongue, an eyestay with metal eyelets and flat crossed laces, mesh on the vamp only, a mudguard round the toe and the Swoosh from under the laces back to the heel, plus a soft floor shadow.
- A frame that loads but never posts its ready message is reloaded once, so a half-written or stale file cannot leave a black box.
- Every animation runs with
animation-delay: var(--d), so the page can seek a frame to any time. The page talks to the frames with postMessage: Replay restarts all six at 0, Pause freezes the CSS animations and the end-frame timer, and any frame that scrolls into view or is shown again by the size filter is re-seeked to the shared clock (browsers throttle off-screen sandboxed frames, which used to leave the tall units out of sync or blank on phones). Under reduced motion the page and the banners themselves go straight to the end frame. Inside the Lab a click posts a message to the page instead of opening a tab, which shows the toast with the clickTag URL. - Frames use
sandbox="allow-scripts allow-popups", so a banner cannot touch the page, read its storage or navigate it. npm run ads (scripts/build-ads.mjs) measures every package (raw and gzip, all files including the backup), checks for the clickTag, the size meta and external URLs, fails above 150 KB and writes manifest.json; the spec slugs under each frame read that file. The packages are generated by scripts/ads/banner-set.mjs (one source for the shoe art, timeline and six layouts) and are about 60 to 100 KB each including the backup. The proof sheet itself uses Archivo (condensed via its width axis) for headings and controls and IBM Plex Mono for the spec slugs, loaded with next/font inside this experiment only.- Unofficial concept (spec) campaign, not affiliated with or endorsed by Nike, Inc. Nike and the Swoosh are trademarks of Nike, Inc. The Air Velocity model name, the campaign lines (apart from the Just Do It tagline) and the prices are illustrative.
