Capability Marquee Hero

Hero141: Capability Marquee Hero

Full-bleed hero with a badge, giant display heading, short description, and outline CTA stacked over a dark-scrim background photo, closed by a continuously scrolling horizontal marquee of capability tag pills that pauses the moment the pointer enters the section.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/hero141?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/hero141?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/hero141.tsx, the badge7 and button12 components it uses for the eyebrow label and CTA button, and its dependencies.

Quick start

The installed file exports hero141Demo alongside the block: the exact props behind the preview above. Spread it to get a working hero in one line.

import { Hero141, hero141Demo } from "@/components/beste/block/hero141";

export default function Page() {
  return <Hero141 {...hero141Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Hero141 } from "@/components/beste/block/hero141";

export default function Page() {
  return (
    <Hero141
      badge={{ label: "Studio Auralis" }}
      heading="Quiet, exact."
      description="A monochrome practice for brands that prefer restraint over noise."
      backgroundImage={{
        src: "https://images.unsplash.com/photo-1725354282080-cf7e4b7325bc?w=1920&h=1200&fit=crop",
        alt: "Folded paper architecture in soft grey light",
      }}
      button={{ label: "Start a project", href: "https://beste.co" }}
      tags={[
        { label: "Brand systems", href: "https://beste.co" },
        { label: "Editorial design", href: "https://beste.co" },
        { label: "Art direction", href: "https://beste.co" },
      ]}
    />
  );
}

Props

type Tag = { label: string; href: string };

Behavior notes

• The marquee track is tags duplicated end to end ([...tags, ...tags]), which is what makes the loop read as seamless; the duplicated second half is marked aria-hidden and tabIndex={-1} so it never shows up in the tab order or to screen readers.
• Scrolling is a hand-written CSS @keyframes block (hero141-marquee, defined in a scoped <style jsx> tag) that translates the track from 0 to -50% over 38 seconds, linear and infinite.
• Hovering anywhere in the section pauses the whole marquee at once via group-hover/hero141:[animation-play-state:paused]; there is no per-pill hover pause.
• The track's left and right edges fade to transparent through a mask-image: linear-gradient(...), so pills entering or leaving the visible strip soften out instead of clipping hard.
• The badge, heading, description, and button block sits above the marquee in its own constrained max-w-7xl column, while the marquee itself runs full width with no side padding, so it visually bleeds to both edges of the viewport.