Hero 286 - Marquee Features Hero With Masked Edges

Pro

Editorial headline plus CTAs in the container, then a full-width muted band with horizontally scrolling hero-feature-icons rows paused on hover and gradient fades masking both sides; optional bordered panorama below.
Shadcn Hero 286 block

Component Data

  • ID:hero286
  • Access:pro
  • Created:May 5, 2026
  • Type:block

Hero 286 block design & features

Hero286 keeps the hero headline and paired CTAs inside the container well. Beneath that, a border-y bg-muted/30 band hosts a kibo-ui marquee of compact inline feature rows (icon, title, clamped description) with no elevated card surface — content sits directly on the muted band. MarqueeFade overlays apply from-background gradients on the left and right so tiles dissolve softly into the page gutter while pauseOnHover keeps long copy readable.

The optional panorama remains centered under the marquee with ring-border lift so imagery still anchors the block after motion.

Uses react-fast-marquee via MarqueeContent autoFill for seamless looping without manual duplication.