Hero255: Counter Columns Hero

A split hero with a large headline, an intro, an Arrow Pill and an underline link on the left and, on the right, a counter-columns wall of photographic prints tipped back in perspective whose tall columns drift endlessly in opposite directions, pushed by page scroll, slowed by hover and leaning toward the cursor.

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

Base UI flavor

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

This installs the block to components/beste/block/hero255.tsx plus the counter-columns component and the button23 and button2 buttons it uses.

Quick start

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

import { Hero255, hero255Demo } from "@/components/beste/block/hero255";

export default function Page() {
  return <Hero255 {...hero255Demo} />;
}

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

import { Hero255 } from "@/components/beste/block/hero255";

export default function Page() {
  return (
    <Hero255
      eyebrow="Fieldwork, an editorial studio for fashion and culture"
      heading="Pictures people keep."
      description="Art direction, photography and print for brands that would rather be looked at than scrolled past."
      buttons={[
        { label: "Start a project", href: "/contact" },
        { label: "See the work", href: "/work" },
      ]}
      wall={{
        images: [
          {
            src: "https://images.unsplash.com/photo-1509631179647-0177331693ae?w=900&q=80",
            alt: "A model in wide striped trousers leaning on a teal wall",
          },
          {
            src: "https://images.unsplash.com/photo-1485968579580-b6d095142e6e?w=900&q=80",
            alt: "A woman in a dark check coat walking down a city street",
          },
          {
            src: "https://images.unsplash.com/photo-1490750967868-88aa4486c946?w=900&q=80",
            alt: "Orange poppies against a clear blue sky",
          },
        ],
        columns: 3,
        tilt: 0.6,
        gap: 16,
        fade: 0.16,
      }}
    />
  );
}

Props

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

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

Behavior notes

• The wall only renders when wall is set with at least one image; fewer images than the columns need are repeated, and the loop closes without a visible jump at any size.
• From md the wall is absolutely placed over the right 56% of the section, full height, with a 128px gradient from the background color softening its inner edge; the copy is capped at 40% of the width.
• On phones the wall becomes a band at least 26rem tall under the copy and shows at most two columns.
• With interactive on, page scroll pushes the columns and the push eases away, hovering slows the wall almost to a stop, and the plane leans toward the cursor.
• With reduced motion the component shows a still, staggered wall and the copy and wall skip their fade-in.
• The section is at least 640px or the viewport minus 78px tall and centers the copy vertically from md.