Waveforms

Waveforms are Waveband's in-slot HTML5 attention formats: sixteen named treatments you generate in Creative Studio and traffic as ordinary html5 creatives (standard iframe tags). Each unit is real markup with CSS motion and native interaction (carousels, video, flip, expand, wipe, hotspots, ticker): not a static JPG, and not page-takeover JavaScript. Previews below are live iframes from the same renderer that ships to the exchange.

Marketing gallery: /features/waveforms. Console: /app/studio. There is no separate Waveform API type: Studio writes normal html5 creatives.

In-slot vs page-owned inventory

Waveforms render inside the ad slot. Page skins, adhesion bars, in-image overlays, and true interstitials require publisher SDKs or curated inventory deals: they are not a Studio toggle. For premium display packaging on the growth suite, use Peak Display (below) and attach your own PMP deals from the deal library.

Full catalog

Story & motion

Ripple

Frames that cycle through a story inside the ad slot.

  • When to use: Multi-beat stories or product walkthroughs that need more than one still.
  • Required assets: slideImageUrls
  • Sizes: 300×250, 300×600, 970×250
  • Trafficking: Needs 2-3 https slide images. Cycles in-slot; no external scripts.

Surge

Muted motion video with a poster and clear CTA.

  • When to use: When you have a short muted video and want motion without leaving display.
  • Required assets: videoUrl, posterUrl
  • Sizes: 300×250, 300×600, 970×250
  • Trafficking: Muted autoplay video + poster; exchange iframe policies still apply.

Wake

A soft-motion brand moment that holds attention longer than a still.

  • When to use: Brand moments that should feel alive but stay lighter than full video.
  • Required assets: motionImageUrl
  • Sizes: 300×250, 300×600, 970×250
  • Trafficking: One motion-capable image URL (https).

Crest

Cinematic large-canvas brand presence with sparse type.

  • When to use: Premium homepage or brand flights on large canvases (billboard / half-page).
  • Required assets: heroImageUrl
  • Sizes: 970×250, 300×600
  • Trafficking: Hero image on 970×250 or 300×600; keep type sparse.

Reel

A horizontal filmstrip of panels that advances through the story.

  • When to use: Horizontal narrative panels: lookbooks, steps, or sequential offers.
  • Required assets: slideImageUrls
  • Sizes: 300×250, 970×250
  • Trafficking: 3-5 https panels; advances horizontally inside the slot.

Reveal & expand

Bloom

Opens more of the story inside the ad slot on tap.

  • When to use: When tap-to-reveal more copy beats a second landing page hop.
  • Required assets: expandBody
  • Sizes: 300×250, 300×600
  • Trafficking: Expand body is plain text (HTML-escaped); expands in-slot only.

Swell

A tall in-slot reveal built for half-page attention.

  • When to use: Tall placements where a deeper in-slot story earns the height.
  • Required assets: expandBody, heroImageUrl
  • Sizes: 300×600
  • Trafficking: Expand body + hero; half-page only.

Helix

Flips to a second face with a different message or offer.

  • When to use: Two-sided messages (feature ↔ offer, problem ↔ proof).
  • Required assets: flipFrontUrl, flipBackUrl
  • Sizes: 300×250, 300×600
  • Trafficking: Front and back https images.

Split

Before and after: two states of the same story.

  • When to use: Before/after, old/new, or contrast storytelling.
  • Required assets: beforeImageUrl, afterImageUrl
  • Sizes: 300×250, 300×600, 970×250
  • Trafficking: Before and after https images.

Beacon

Hotspots reveal more detail without leaving the page.

  • When to use: Product detail without leaving the page: hotspots on a hero.
  • Required assets: heroImageUrl, hotspots
  • Sizes: 300×250, 300×600, 970×250
  • Trafficking: Hero image + hotspot labels/positions from Studio.

Offer & urgency

Prism

Multi-offer tiles so shoppers browse choices in-unit.

  • When to use: Multi-SKU or multi-offer browsing inside the unit.
  • Required assets: offerItems
  • Sizes: 300×250, 300×600, 970×250
  • Trafficking: Offer tiles (label + optional image) from Studio.

Tide

Urgency with a clear end time for the offer.

  • When to use: Time-bound promos with a clear end (sales, registration windows).
  • Required assets: endsAt
  • Sizes: 300×250, 728×90, 320×50
  • Trafficking: Ends-at datetime drives the countdown display.

Pulse

Draws the eye to the CTA across standard IAB sizes.

  • When to use: Standard IAB sizes that need a stronger CTA pull without heavy media.
  • Required assets: Brand kit + copy only
  • Sizes: 300×250, 728×90, 160×600, 320×50, 300×600, 970×250
  • Trafficking: Copy + brand kit only; works across the full IAB resize matrix.

Current

A scrolling headline ticker for newsy or offer lines.

  • When to use: Newsy headlines, rotating offers, or ticker-style announcements.
  • Required assets: tickerLines
  • Sizes: 728×90, 970×250, 320×50
  • Trafficking: Ticker lines from Studio; best on leaderboard / billboard / mobile.

Composition

Stack

Vertical story beats stacked for tall mobile placements.

  • When to use: Mobile half-pages that read as stacked story beats.
  • Required assets: stackFrames
  • Sizes: 300×600
  • Trafficking: Stacked frames (copy + optional image) for 300×600.

Fathom

Layered depth that feels richer than a flat banner.

  • When to use: Layered depth for brand presence that still fits the slot.
  • Required assets: heroImageUrl
  • Sizes: 300×250, 300×600, 970×250
  • Trafficking: Hero image with layered CSS depth: still one html5 creative.

Skins

Studio skins are Bold (brand-color field) and Clean (light field). Both escape copy into attributes/text nodes: no raw HTML from the brief.

Peak Display

Peak Display is an agency/reseller supply playbook (not a creative type). Applying it creates a sellable display package with brand-safe category excludes (IAB25 / IAB26), a $1,500 budget floor, and creative guidance to prefer large-canvas Waveforms plus deals you attach from your library. It does not ship deal IDs and does not claim page takeovers or guaranteed viewability.

Console: Packages → Playbooks (agency/reseller seats). Tour: Console guide.

Packages playbooks tab with Peak Display supply playbook
Apply Peak Display to create a sellable package; attach PMP deals from your library.

Studio how-to

  1. Open Creative Studio (requires creatives:write).
  2. Choose a Waveform from the grouped picker: the live thumbnail updates immediately.
  3. Fill brand kit, brief/copy, and any required media fields (https URLs only).
  4. Pick allowed sizes for that format and generate: each size becomes an html5 creative.
  5. Attach creatives to a display line item from the campaign screen as usual.
Creative Studio with Crest Waveform and live preview
Same live HTML5 renderer as marketing/docs: CSS/video motion, no scripts.

Limits

  • No JavaScript in tags: motion via CSS, video, and native elements only.
  • https media only: no javascript: or data URLs for slides / video.
  • Delivery is inside exchange iframes; host-page DOM access is not available.
  • Click macros use {{CLICK_URL}}; dimensions sync via a size stub asset (see trafficking notes in docs/trafficking.md).

IAB / LEAN compliance

Tags target the IAB New Ad Portfolio display sizes used in the catalog, LEAN principles (lightweight, AdChoices-friendly, non-invasive), and Coalition for Better Ads rules for muted autoplay video. Shells are exact WxH with overflow:hidden, no border,prefers-reduced-motion, and a clear top-right zone for DAA AdChoices. Automated audit: auditAllWaveforms in packages/core/.../waveforms/compliance.ts.

Live size matrix (every format × every allowed size): /docs/waveforms/lab.

Related

Marketing Waveforms gallery with live format previews
Public gallery at /features/waveforms: live iframe previews you can interact with.
Waveforms · Waveband Docs