Counter Scrolling Image Bands

Gallery7: Counter Scrolling Image Bands

Two bands of photographs drifting in opposite directions behind a centred heading, fading out at both edges. Hovering pauses the drift; opening a frame brings up a framed viewer on a mount rather than a full-screen overlay.

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

Base UI flavor

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

This installs the block to components/beste/block/gallery7.tsx plus the badge7 eyebrow it uses.

Quick start

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

import { Gallery7, gallery7Demo } from "@/components/beste/block/gallery7";

export default function Page() {
  return <Gallery7 {...gallery7Demo} />;
}

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

import { Gallery7 } from "@/components/beste/block/gallery7";

export default function Page() {
  return (
    <Gallery7
      badge={{ label: "Rolling archive" }}
      heading="Nine years of frames, still moving."
      description="The archive runs in both directions."
      topRow={[
        { src: "/archive/table.jpg", alt: "Long table mid-review", caption: "The long table", meta: "Rotterdam, March" },
        { src: "/archive/facade.jpg", alt: "Facade under a flat sky", caption: "Facade", meta: "Rotterdam, April" },
      ]}
      bottomRow={[
        { src: "/archive/stair.jpg", alt: "Stairwell at midday", caption: "Stairwell", meta: "Rotterdam, April" },
        { src: "/archive/prints.jpg", alt: "Prints on a wall", caption: "Prints on the wall", meta: "Studio, January" },
      ]}
      labels={{
        openLabel: "Open this frame",
        closeLabel: "Close the frame",
        previousLabel: "Previous frame",
        nextLabel: "Next frame",
        counterSeparator: "of",
      }}
    />
  );
}

Props

type MarqueeImage = {
  src: string;
  alt: string;
  caption: string;
  meta: string;
};

type Gallery7Labels = {
  openLabel?: string;
  closeLabel?: string;
  previousLabel?: string;
  nextLabel?: string;
  counterSeparator?: string;
};

Behavior notes

• Each band renders its frames twice and translates by exactly half its width, which is what makes the loop seamless rather than snapping back at the end.
• The two bands use different durations (40 and 46 seconds) and opposite keyframes, so they never fall into step with each other.
• Hovering anywhere over the bands pauses both, through a named group (group/gallery7) and [animation-play-state:paused], so a frame can be read before it is clicked.
• Clicks map back to the original index with a modulo, so pressing a frame in the duplicated half opens the same picture as its twin.
• Both bands share one index space (top row then bottom row), so the viewer walks the whole archive rather than stopping at the end of a band.
• The viewer is a mount rather than a full-screen panel: a max-w-4xl card on bg-background over a bg-foreground/80 scrim, with the caption and controls on the mount itself.
• Edge gradients on both sides fade the bands into the page, and they are pointer-events-none so they never swallow a click on the frame underneath.
• Setting lightbox={false} disables every frame button and switches the cursor back to default, leaving the bands as a moving wall.