Studio Reel Hero

Hero116: Studio Reel Hero

Editorial split hero with copy, a CTA and a stat row on one side and two vertical image marquees scrolling in opposite directions on the other. The marquee columns interleave the supplied images (even indexes in one column, odd in the other) rather than splitting the list in half.

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/hero116?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/hero116.tsx, the badge6 component it uses for the eyebrow label, the button1 component it uses for the CTA pill, and their dependencies.

Quick start

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

import { Hero116, hero116Demo } from "@/components/beste/block/hero116";

export default function Page() {
  return <Hero116 {...hero116Demo} />;
}

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

import { Hero116 } from "@/components/beste/block/hero116";

export default function Page() {
  return (
    <Hero116
      label="Northwind Studio"
      heading="Brand work that <strong>keeps compounding.</strong>"
      description="An independent practice crafting identities, sites and launch films."
      button={{ label: "See the reel", href: "https://beste.co" }}
      stats={[
        { value: "80+", label: "Brands shipped" },
        { value: "6x", label: "Avg. launch lift" },
      ]}
      images={[
        {
          src: "https://images.unsplash.com/photo-1558655146-9f40138edfeb?w=600&h=800&fit=crop",
          alt: "Brand layout pinned to a studio desk",
        },
        {
          src: "https://images.unsplash.com/photo-1561070791-2526d30994b5?w=600&h=800&fit=crop",
          alt: "Designer sketching wireframes",
        },
        {
          src: "https://images.unsplash.com/photo-1626785774573-4b799315345d?w=600&h=800&fit=crop",
          alt: "Moodboard with color swatches",
        },
        {
          src: "https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=600&h=800&fit=crop",
          alt: "Developer building an interface",
        },
      ]}
    />
  );
}

Props

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

type StatItem = {
  value: string;
  label: string;
};

type ImageItem = {
  src: string;
  alt: string;
};

Behavior notes

• images is split by index parity, not in half: even indexes go to the left column, odd indexes to the right, so consecutive images interleave between columns rather than one column getting the first N images.
• Each column is internally duplicated ([...column, ...column]) and animated with a scoped styled-jsx keyframe (hero116-scroll) that translates it from 0 to -50%; because the two halves are identical, the loop point is seamless. The left column runs 30s linear, the right column runs 34s linear in reverse, and the right column is offset with -mt-16 so the two never line up.
• Hovering the marquee area (group/hero116) pauses both columns via animation-play-state: paused on [data-hero116-col]; the animation is disabled outright under prefers-reduced-motion: reduce.
• Duplicate tiles (the second half of each column's track) are marked aria-hidden="true" with an empty alt, so screen readers only announce each image once.
• Top and bottom edge fades (bg-gradient-to-b/to-t from background to transparent) mask where the marquee tiles enter and exit the visible area.