Hero 222 - Full-height hero with variable type and crosshair

Pro

A near full-viewport hero with photo backdrop, mono chapter label, variable-font headline tied to cursor movement, crosshair overlays, and text CTA strip.

Shadcn Hero 222 block

Component data

ID
hero222
Access
pro
Created
May 4, 2025
Type
block
Libraries
Radix UI, Base UI, React Aria
Figma

Hero 222 block design & features

Hero222 is a photography-forward hero built with Shadcn UI primitives and Fancy variable-font text: the main stage is a tall container over a still image, with a small mono kicker, a huge headline whose weight and slant react to cursor position, and live x/y readouts in one corner. A horizontal crosshair and square track the pointer through the headline block. A simple text button with arrow anchors the bottom.

Mix-blend modes invert the typography against the photograph, and thin vertical and horizontal guides follow the cursor for a techy studio feel. Motion is light: the headline block animates in on first paint.

The look is experimental and confident, closer to a fashion or automotive launch page than a default marketing starter. You need a strong background photo and one short headline phrase to carry the layout.

The block stays one column; the crosshair math assumes desktop hover. Touch users still see the headline and CTA without the precision overlay.