Skip to content

IrisSectionsCorolla Beacon

Nine petals. One way in.

A launch hero where the artwork does the pointing. Every seam in the glass runs to the eye, and the eye holds your one call to action.

field

Corolla Beacon

Every seam in corolla is a straight line into its eye, so this hero puts its one call to action there. The headline runs through the eye: the first half on the left petal's black face, the button in the eye, the second half on the right petal's. The eye is held a little wider than the reference's so the button fits between the tips.

The copy sits only where the glass is black. A petal's rims leave the eye at fixed angles whatever the size of the frame, so the headline hugs the eye on its axis and the lines under it step outward, the way the seams open, and none of it crosses a lit rim.

The button rides the eye. When the eye leans toward your cursor, or drifts on its own, the button moves with it and never slips off. Come near it and the petals draw back and their tips light up round it. Tab to it and the same happens, so the keyboard gets what the pointer gets. On a phone the flower stands portrait, as the reference does, with the eye high and the copy under it. With reduced motion you get the still frame and the button in it.

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

  • background
  • two-column
  • launch
  • pointer-driven
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