Hero 213 block design & features
Hero213 is a Shadcn UI hero where copy leads and photography follows inside a custom SVG mask: stacked headline with line break, muted supporting paragraph, and a hovering rounded pill of outline icons. The main masked panel cycles portraits on a timer with simple opacity crossfades. A smaller rounded tile offset to the side mirrors the upcoming image for a magazine spread feeling.
Masking is data-driven from an embedded path so the silhouette stays crisp at any width; images remain full bleed inside the mask. Interaction is mostly presentational: icons sit in a soft muted bar and scale slightly at large sizes.
This is a gallery-first hero for teams that want an irregular silhouette instead of a rectangle. Complexity sits in supplying on-brand photography pairs and choosing mask geometry that crops well on both breakpoints.
The floating preview hides on smaller layouts while the central masked field carries the story.