Hero 220 - Full-viewport hero with video-filled wordmark

Pro

A near fullscreen hero with low opacity landscape backdrop, motion fade on mount, and oversized MagicUI video text spelling the main word in Playfair.

Shadcn Hero 220 block

Component Data

  • ID:hero220
  • Access:pro
  • Created:May 4, 2025
  • Type:block

Hero 220 block design & features

Hero220 is a shadcn/ui hero that behaves like a title card: the section stretches toward a full small viewport height with upper bounds so tall monitors do not sprawl forever. A photographic landscape sits as a low-opacity full-bleed backdrop, while the foreground centers a motion wrapper around MagicUI VideoText that maps looping footage into huge Playfair letterforms.

The layout is intentionally sparse so the wordmark dominates; there is no secondary copy or CTA in the default component, only atmosphere. The mount animation scales the text container from slightly enlarged to resting size over a short ease.

It reads as cinematic branding rather than conversion-heavy marketing. Complexity is moderate: you need suitable footage and a short literal string that still reads when filled with video.

Because the hero is height locked, surrounding pages should plan spacing so the knockout type does not collide with navigation chrome on short laptops.