Hero 166 - Split hero with crossfading image stacks and demo button

Pro

A two-column hero with headline, Montserrat subhead, rounded demo button with hover lift, and dual columns of animated crossfading image stacks inside an aspect-ratio frame.

Shadcn Hero 166 block

Component Data

  • ID:hero166
  • Access:pro
  • Created:Dec 16, 2024
  • Type:block

Hero 166 block design & features

Hero166 is a split hero built with shadcn/ui pairing a heavy sans headline and relaxed Montserrat-flavored supporting line with a single rounded primary CTA that lifts on hover. The right half is a square aspect-ratio canvas split into two vertical strips; each strip holds stacked frames where multiple images crossfade on long CSS keyframe loops, so the gallery feels alive without user input.

Rounded corners and subtle shadows keep the animated tiles readable. Motion is slow and looping, more ambient than playful.

Highly decorative: the block trades a single static hero photo for staged motion layers, which raises asset count but differentiates from simpler split heroes.

Grid collapses so the typography leads on small screens and the animated collage follows.