Recorded Companion Band

Feature272: Recorded Companion Band

A wide photographic band with a scrim, floating a live video card in the middle of it, over three hairline notes that state how the recordings are made and what ships with them.

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

Base UI flavor

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

This installs the block to components/beste/block/feature272.tsx, the badge6 component used for the eyebrow, and the media25 piece that floats in the band (installed to components/beste/piece/media25.tsx).

Quick start

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

import { Feature272, feature272Demo } from "@/components/beste/block/feature272";

export default function WatchPage() {
  return <Feature272 {...feature272Demo} />;
}

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

import { Feature272 } from "@/components/beste/block/feature272";
import { Media25 } from "@/components/beste/piece/media25";

export default function WatchPage() {
  return (
    <Feature272
      eyebrow="Watch instead"
      heading="Every guide has a version you can watch"
      description="The same argument, recorded in one take, with the working file on screen."
      image={{ src: "/studio/desk.jpg", alt: "Desk lit for a screen recording" }}
      media={
        <Media25
          thumbnail={{ src: "/covers/estimate.jpg", alt: "An estimate on screen" }}
          title="Writing an estimate you can defend"
          meta="Guide, chapter three"
          duration="6:12"
        />
      }
      notes={[
        { title: "One take, no edit", description: "Mistakes stay in." },
        { title: "Written version first", description: "The essay is always published before the recording." },
      ]}
    />
  );
}

Props

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

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

Behavior notes

• media is a slot, not a fixed component. The demo fills it with media25, but anything you pass renders in the same place and keeps the band's own scrim behind it.
• The band only renders when media is passed, so the photograph never appears as an empty picture with nothing on it.
• The wrapper is relative. Without that the absolutely positioned image would escape and cover the whole section.
• The scrim is a flat bg-foreground/50 between the photograph and the card, which is what keeps a light asset legible on a light picture.
• The band is a fixed h-80, rising to md:h-96, so the asset inside it stays the same size whatever the copy above does.