Skip to content

1440 × 900

Corolla Beacon

A launch hero over corolla where the artwork does the pointing: every seam runs to the eye, the button sits in it, and the headline runs through it.

Preview only — the code isn’t included

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.

Details

Kind
Hero
Stack
React · TypeScript
Licence
Free
Added
26 Sep 2026
Tags
background, two-column, launch, pointer-driven

Its light

  • 51%
  • 21%
  • 16%
  • 8%
  • 4%

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