Library / Hero sections

Rack Focus free

A layered hero that pulls focus like a camera: a blurry foreground melts away as the headline snaps sharp.

Customize

The headline

Background picture address

The strongest blur (px)

How long the focus pull takes (ms)

Let the cursor height rack the focus

Code

import RackFocus from './RackFocus';

<RackFocus />

Checking your access…

Dependencies: none

hero blur film intro

More in Hero sections

Wordmark MirageA huge wordmark on a desert horizon with a heat-mirage reflection that shimmers harder as the cursor nears the horizon.
Selection Box IntroThe page looks like it is being designed live: a selection box draws around the headline, a pointer drags a corner and the headline grows to size.
Thermal TouchA picture seen through a heat camera that warms where you hover or touch and slowly cools, then switches itself off to save power.