Photo Tiles

Feature291: Photo Tiles

Four photo tiles, each one a whole link: a photograph drifting behind a gradient with a serif title, a line of context and an arrow that lifts on hover.

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

Base UI flavor

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

This installs the block to components/beste/block/feature291.tsx plus the button22 sliding-marker pill and the text1 word stagger it uses.

Quick start

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

import { Feature291, feature291Demo } from "@/components/beste/block/feature291";

export default function Page() {
  return <Feature291 {...feature291Demo} />;
}

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

import { Feature291 } from "@/components/beste/block/feature291";

export default function Page() {
  return (
    <Feature291
      eyebrow="Four rooms"
      heading="Choose the room that fits the season."
      button={{ label: "Not sure? Ask us", href: "/contact", tone: "outline" }}
      tiles={[
        {
          title: "The front room",
          description: "Individual therapy, weekly.",
          href: "/therapy",
          image: { src: "/rooms/bench.jpg", alt: "A sunlit room with a low timber bench" },
        },
      ]}
    />
  );
}

Props

type Tile = {
  title: string;
  description: string;
  href: string;
  image: { src: string; alt: string };
};

type ActionButton = {
  label: string;
  href: string;
  tone?: "primary" | "light" | "dark" | "outline";
};

Behavior notes

• The whole tile is one Link, so the entire photograph is the hit target and the arrow is decoration inside it rather than a second destination.
• Each tile stacks its photograph, a gradient and its copy on negative z-indices inside an isolate context, which keeps those layers behind the text without escaping into the section around them.
• The gradient runs from-foreground/75 at the foot to fully transparent at the top, so the title stays readable while the upper two thirds of the photograph are left alone.
• Every tile owns its own scroll listener and drifts -8% to 8% against a 1.18 scale, so the four do not move together.
• Entry delay alternates on index % 2, so a row of two arrives a beat apart instead of the stagger growing down the grid.
• Photos clear from blur(24px) on decode, with a complete check on mount for cached files.
• The arrow lifts only under motion-safe:, so the hover affordance is dropped for reduced motion while the tile stays clickable.