Skip to content

IrisSectionsZephyr Beacon

Launch-hero anatomy, over Zephyr

Give your launch
room to breathe

Open sky in the middle, cloud banks at the edges, and a monarch that follows your cursor and lands on it the moment you stop.

See it in motion

Stop your cursor anywhere. It lands.

field

Zephyr Beacon

The anatomy zephyr was measured from, laid out to the reference's own proportions. The sky is a card set into the page, with the site's nav cut into its top edge as a tab. Under it, in the open middle the cloud banks leave, sit an eyebrow pill, a two-line claim ending on an italic word, two lines of support, a white pill button and a caption. A product frame rises out of the card's bottom edge, half in the sky and half on the page. Every position and size was measured off the reference as a share of its width and is set in container units, so the composition holds at any desktop width; on a phone the type keeps its floor and the layout flows.

The reference's round video button is kept, and made real: it pauses the sky and the butterfly, and plays them again. The butterfly flies over the whole section, copy included, so wherever your cursor stops, over the headline or the button, it lands there.

Honest by construction: the reference's app is full of an invented customer, invented sites and invented revenue, so this frame is a wireframe in the same layout, with no names and no numbers, where your own product shot goes. The nav's links are real ones.

Preview only. This section's code isn't offered to copy.

  • background
  • centered
  • product-shot
  • launch
Family
field
Status
Preview only
Licence
Free

Code

Preview only — this piece’s code isn’t offered to copy.

More sections

Start with a background.

The backgrounds are the most finished corner of the catalogue. Take one and drop it under your own copy.

Browse backgrounds