Hero 325 - Fullscreen Screening Hero

Pro

A fullscreen hero with a looping video background, a play-pause control that shows playback progress, and a two-column credits dock for title, speaker, copy, and CTAs.

Shadcn Hero 325 block

Component Data

  • ID:hero325
  • Access:pro
  • Created:Aug 25, 2026
  • Type:block

Hero 325 block design & features

Hero325 is a fullscreen video-first hero built with shadcn/ui. A looping muted preview covers the entire viewport behind a two-column credits dock with badge, headline, speaker byline, promo line, supporting copy, and paired buttons. A circular play-pause control in the corner carries a progress ring and toggles playback on the background video.

The stage is borderless and unframed so the media reads as atmosphere rather than a player chrome. A bottom fade keeps the credits legible. Type stays solid and left-aligned, with the title on one side and the story plus actions on the other.

It feels like a screening room taken to the edge of the viewport. The video carries the first impression and the copy sits as program notes over the picture. Complexity stays moderate: a looping background with progress-aware playback, and a responsive credits dock.

On narrow viewports the credits stack at the bottom of the frame while the play control stays in the top corner.