Photo Band Feature

Feature279: Photo Band Feature

A tall photographic panel with the heading and a pale pill sitting at its foot, then three ruled points printed underneath on the page itself.

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

Base UI flavor

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

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

Quick start

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

import { Feature279, feature279Demo } from "@/components/beste/block/feature279";

export default function Page() {
  return <Feature279 {...feature279Demo} />;
}

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

import { Feature279 } from "@/components/beste/block/feature279";

export default function Page() {
  return (
    <Feature279
      eyebrow="Online sessions"
      heading="The room comes to you. The quiet comes with it."
      button={{ label: "Book an online session", href: "/online", tone: "light" }}
      image={{ src: "/photos/valley.jpg", alt: "A wide green valley under soft evening light" }}
      points={[
        { title: "Same practitioner, same hour", description: "Online sessions are not a second tier." },
        { title: "A link, nothing to install", description: "One private link that works in any browser." },
        { title: "Recorded nowhere", description: "Video is never stored, by us or by the tools we use." },
      ]}
    />
  );
}

Props

type Point = {
  title: string;
  description: string;
};

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

Behavior notes

• The panel keeps its ink background whether or not an image is given, so dropping image leaves a solid dark card with grain over it rather than an empty frame.
• The gradient is weighted to the foot (from-foreground/85 up to foreground/10), because that is where the copy sits; the top of the photograph stays almost untouched.
• The panel grows by min-h rather than an aspect ratio, 28rem on a phone and 36rem from md, so a long heading pushes it taller instead of being cropped.
• The heading takes an explicit delay={0.3} so it follows the eyebrow rather than arriving with it, and the button waits until 0.5.
• The photograph drifts -14% to 14% against a 1.3 scale, and clears from blur(24px) on decode with a complete check on mount for cached files.
• The points sit outside the panel on the page surface, each with its own border-t and a small dot, so they read as footnotes to the panel rather than as part of it.
• The grain filter's id comes from useId, so two grain surfaces on one page cannot collide on a global SVG id.