Linked Setting Tiles

Usecase58: Linked Setting Tiles

Six photographic tiles, every one a whole link with its photograph drifting behind a gradient.

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

Base UI flavor

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

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

Quick start

The installed file exports usecase58Demo alongside the block: the exact props behind the preview above. Spread it to get a working linked Setting Tiles in one line.

import { Usecase58, usecase58Demo } from "@/components/beste/block/usecase58";

export default function Page() {
  return <Usecase58 {...usecase58Demo} />;
}

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

import { Usecase58 } from "@/components/beste/block/usecase58";

export default function Page() {
  return (
    <Usecase58
      eyebrow="Where the work lands"
      heading="Six settings, six pages."
      button={ label: "Ask about your setting", href: "/contact", tone: "outline" }
      tiles={[
        {
          title: "Hospitals",
          description: "Shift patterns and the debrief that never happened.",
          meta: "Evening hours",
          href: "/settings/hospitals",
          image: { src: "/settings/hospital.jpg", alt: "A corridor at dusk" },
        },
      ]}
    />
  );
}

Props

type Tile = {
  title: string;
  description: string;
  meta?: string;
  href: string;
  image: Image;
};

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

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

Behavior notes

• Each tile stacks its photograph and gradient on negative z-indices inside an isolate context, so those layers stay behind the copy without escaping the tile.
• The gradient runs from-foreground/80 at the foot to transparent at the top, so the meta line and title stay readable while the upper photograph is left alone.
• Copy on the photograph uses the fixed text-background token rather than a theme colour, because the surface underneath is a photograph rather than a themed fill.
• meta sits above the title inside the scrim, which keeps it legible where a caption under the tile would fall onto the page background.
• Every tile owns its own scroll listener and drifts -8% to 8% against a 1.18 scale.
• Entry delay is index % 3, so each row of three arrives together rather than the stagger growing down six tiles.