Hero options

1. First Light

Fable 5.2WebGL shader, no library, about 6 KB

The gold letters act as openings with a sun behind the button, so shafts of gold light fan up out of the headline. Moving the pointer drags the sun and every shaft swings with it; hovering the button snaps the light onto it.

For: Most striking of the six, and the body copy is never washed out.

Against: Could read as too much; calmer on phones, where the shafts run nearly vertical.

Open live prototype

2. Solid Gold

Fable 5.2WebGL shader, no library, about 6 KB

The gold headline line and the button become polished, bevelled metal lit by a moving light. The light follows the pointer, or scroll on phones; the button label is inlaid in black.

For: The most literal answer to the ask, and the best button.

Against: One notch from gold WordArt if overdone; swapping real text ink for canvas ink is the most fragile build.

Open live prototype

3. Solar Forge

Gemini CarbonWebGL shader, no library, about 4.5 KB

A soft sunbeam atmosphere behind the copy, molten bevelled gold inside the gold letters, and a magnetic, silky primary button.

For: Carbon's top pick: atmosphere, material and button in one system.

Against: In the still, the glow behind the text looks hazy rather than sunlit; it would need tuning.

Open live prototype

4. Prismatic Foil

Gemini CarbonCSS only, no WebGL, near zero cost

A gold-foil gradient on the letters with a cursor-tracked highlight, plus a magnetic button with a moving spotlight.

For: Crisp native text, nothing to fail, no idle GPU cost.

Against: The quietest of the gold options; more polish than spectacle.

Open live prototype

5. Extruded 3D

Gemini Carbonthree.js, about 170 KB

Real three.js 3D letters in gold with environment lighting that tilt with the pointer.

For: It is what 'three.js text' literally means.

Against: Both designers ranked it last: heavy, the gold looks flat in the still, and 3D letters cannot follow fluid text layout without a visible swap.

Open live prototype

6. Current

Fable 5.2SVG and CSS only

One thin gold line draws itself under the headline, down the margin and around the button, then a pulse of light keeps travelling that route.

For: Elegant and safe; pairs well as the phone version of a louder desktop effect.

Against: Refined rather than mind-blowing.

Open live prototype

Ideas considered but not prototyped

Cover Story: Headline set huge between the mountain and the students, with shoulders overlapping the letters and layers moving at different depths.
Spindrift: Gold dust lifts off the letters like snow off a ridge and streams toward the summit photo; the pointer is a gust.
Wind Tunnel: Hair-thin streamlines flow across the hero, part around each letter and converge on the button.
Liquid Glass: A glass lens rides the pointer and bends the headline and photo; extends the glass navbar into the hero.
Built Live: Named cursors ('intern', 'senior eng') arrive and visibly finish the hero, ending with a review tick.
Mirage: The gold line arrives as heat shimmer and hardens into crisp type.
Agent Swarm: Thousands of gold motes assemble the headline, then lean toward the button.
Gravity Grid: The page grid sags under the button and light pools in the dip.
Summit Film: The photo becomes a short sunrise loop with the headline matted into the sky.
Mascot: The logo robot, animated, watches the pointer and hands over the button.