HTML5 Ad Design · Motion · Performance Creative

Ads That Move People

Six campaigns. Six brands. Every IAB format from billboard to mobile banner — all hand-coded, all performant, all telling a story in under 150KB.

HTML5 / CSS3 Animation IAB Standards Performance Creative GDN / Programmatic
Scroll

Selected Work

The Units

728 × 90
Apex Running Gear
Leaderboard
Format 728×90 — IAB Leaderboard
Platform GDN, Programmatic
Animation CSS Keyframes, 6s loop
View Isolated

01

Apex Running Gear

728 × 90 — Leaderboard

Minimal, athletic aesthetic built on a dark foundation. The sequence unfolds with deliberate restraint — brand mark, product, headline, CTA — each beat earning its moment.

  • Technique CSS keyframes, type-on effect
  • Loop 6 seconds, infinite
  • Use Case Above-fold editorial placement
300 × 250
Solenne Skincare
Medium Rectangle
Format 300×250 — IAB Med Rectangle
Platform GDN, Social, Programmatic
Animation CSS + JS hover interactivity
View Isolated

02

Solenne Skincare

300 × 250 — Medium Rectangle

Luxury demands patience. This unit moves at the speed of expensive things — slow gradient washes, deliberate reveals, and a CTA that invites rather than demands. Cream and gold palette throughout.

  • Technique CSS transitions, JS hover states
  • Loop 8 seconds, infinite
  • Use Case In-content, sidebar placement
300 × 600
Volta Electric Vehicles
Half Page
Format 300×600 — IAB Half Page
Platform Premium display, Programmatic
Animation SVG stroke + JS counter
View Isolated

03

Volta Electric Vehicles

300 × 600 — Half Page

The tall canvas earns its keep. An SVG car silhouette draws itself into existence, followed by specs that count up in real time — proving the numbers before asking for the reservation.

  • Technique SVG stroke-dashoffset, JS counter
  • Loop 10 seconds, infinite
  • Use Case Sidebar, high-impact takeover
160 × 600
The Meridian Hotel
Wide Skyscraper
Format 160×600 — IAB Skyscraper
Platform Premium editorial, GDN
Animation CSS transitions, eased reveals
View Isolated

04

The Meridian Hotel

160 × 600 — Wide Skyscraper

Vertical storytelling at its most refined. Serif typography stacks word by word against warm gradients — editorial design compressed into a narrow canvas that rewards the scroll.

  • Technique CSS transitions, staggered easing
  • Loop 9 seconds, infinite
  • Use Case Sidebar rail, editorial sites
320 × 100
Dropp Food Delivery
Mobile Banner
Format 320×100 — Mobile Banner
Platform Mobile web, in-app
Animation JS text rotation
View Isolated

05

Dropp Food Delivery

320 × 100 — Mobile Banner

The hardest format to design well. One hundred pixels of height, zero room for waste. Three rotating offers keep the message fresh while the CTA stays persistent — punchy, high-contrast, and built for thumbs.

  • Technique JS-driven text rotation
  • Loop 8 seconds, infinite
  • Use Case Mobile sticky, in-app banner
970 × 250
Kairos Investment Platform
Billboard
Format 970×250 — IAB Billboard
Platform Premium homepage, financial sites
Animation SVG chart + CSS + JS typing
View Isolated

06

Kairos Investment Platform

970 × 250 — Billboard

Data as design. A rising chart line draws itself across the canvas while the headline makes its case — sophisticated, monospace-accented, and built for the audience that reads financial publications.

  • Technique SVG path animation, JS typing
  • Loop 10 seconds, infinite
  • Use Case Homepage takeover, premium display

Approach

How I Build

01

Concept First

Every ad starts with the brand story, not the container. I define the visual language, motion vocabulary, and emotional arc before writing a single line of code. The format informs the choreography — a billboard breathes differently than a mobile banner.

02

Performance by Design

Self-contained units under 150KB with zero external dependencies. I use CSS transforms and opacity for jank-free animation, SVG for resolution independence, and system fonts in production to eliminate load failures. Every byte earns its place.

03

Craft in the Details

Custom easing curves, staggered reveals, intentional timing — the difference between animation that feels mechanical and motion that feels alive. Every line is written by hand, not generated. I respect prefers-reduced-motion, build clean loops, and test across pixel densities.