Hover Photo Link List

Feature305: Hover Photo Link List

A ruled list where every row is a link and hovering one fades a pinned photograph in beside it.

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

Base UI flavor

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

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

Quick start

The installed file exports feature305Demo alongside the block: the exact props behind the preview above. Spread it to get a working hover Photo Link List in one line.

import { Feature305, feature305Demo } from "@/components/beste/block/feature305";

export default function Page() {
  return <Feature305 {...feature305Demo} />;
}

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

import { Feature305 } from "@/components/beste/block/feature305";

export default function Page() {
  return (
    <Feature305
      eyebrow="Choose a practitioner"
      heading="Hover a name. See the room they work in."
      button={ label: "Meet everyone", href: "/people", tone: "outline" }
      rows={[
        {
          title: "Agnes Obel",
          description: "Individual therapy, grief and the years after a loss.",
          href: "/people/agnes",
          image: { src: "/people/agnes-room.jpg", alt: "A corner room with a low bookshelf" },
        },
      ]}
    />
  );
}

Props

type Row = {
  title: string;
  description: string;
  href: string;
  image: Image;
};

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

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

Behavior notes

• The active row is tracked on the list item's onMouseEnter and on the link's onFocus, so keyboard travel swaps the photograph exactly as the cursor does.
• Resting titles sit at half opacity and the active one at full, which points at the current row without moving anything.
• The photograph is keyed on the active index inside AnimatePresence, so each swap cross-fades rather than cutting.
• The pinned panel is hidden lg:block: on narrow screens the list stands on its own instead of shipping a photograph nobody can see beside it.
• The first row is active on load, so the panel is never empty before the first hover.
• Photos clear from blur(24px) on decode, with a complete check for cached files.