Hero269: Folded Poster Hero

A full-bleed hero over the fold-gradient component: a sunset gradient printed across accordion pleats that breathe open and closed fills the frame. The copy sits on the left over a soft veil with a primary Arrow Pill and an underline link.

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

Base UI flavor

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

This installs the block to components/beste/block/hero269.tsx plus the fold-gradient background and the button23 and button2 buttons it uses.

Quick start

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

import { Hero269, hero269Demo } from "@/components/beste/block/hero269";

export default function Page() {
  return <Hero269 {...hero269Demo} />;
}

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

import { Hero269 } from "@/components/beste/block/hero269";

export default function Page() {
  return (
    <Hero269
      eyebrow="Fold & Press, an independent print fair in Lisbon"
      heading="Paper, pressed and folded by hand."
      description="Three days of risograph, letterpress and zines from 120 small studios."
      buttons={[
        { label: "Get a day pass", href: "/tickets" },
        { label: "See the exhibitors", href: "/exhibitors" },
      ]}
      fold={{
        colors: ["#ff6b4a", "#ffb35c", "#f7e2c2", "#8fc1ff", "#5b6cff"],
        baseColor: "var(--background)",
        folds: 11,
        depth: 0.6,
      }}
    />
  );
}

Props

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

Behavior notes

• A veil in the background token fades from the left edge to clear at three quarters of the width, so the copy stays readable while the right side shows the folds in full.
• The section uses bg-background and the demo passes var(--background) as fold.baseColor, so the pleats fold in out of the page color on load and the ground, copy and buttons follow the theme; the sunset palette stays fixed.
• With interactive on, the pleats under the cursor ease open and the light leans toward it.
• The gradient pauses through an IntersectionObserver and on hidden tabs and respects prefers-reduced-motion: the copy then appears without its rise.