Picture Rail Image Gallery – Art Print Shop Hero Section

Heroes 2

About

Picture Rail Image Gallery for React and Tailwind CSS (shadcn/ui): framed prints hanging from a picture rail on steel wires. It is built to make an art print shop or portfolio feel like a real gallery wall, so visitors stop, touch a print and look closer. Use it for art print stores, photo shops, artist portfolios and hero sections. Each frame hangs from its hook as a pendulum with real physics (longer wires swing slower); a hover tilt leans the print toward the pointer, its picture light switches on and the wall dims. Drag a print along the rail to bump its neighbours; click or press Enter to lift it off the wall and turn it to read the gallery label on the back. Items take title, artist, year, image, aspect, frame, mat, drop, tag and details; control the lit print with active and onActiveChange, track the dialog with onOpenChange, relabel it with labels. Roving keyboard focus, an accessible modal, reduced motion and light/dark themes are built in. The included demo hangs eight framed prints and makes no requests beyond image loads. Requires React only, with no animation library.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Picture Rail Image Gallery – Art Print Shop Hero Section to your project and fits it to your theme.

Code

How Picture Rail Image Gallery – Art Print Shop Hero Section is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import PictureRailGallery from "@/components/ui/picture-rail-gallery";
import type { PictureRailItem } from "@/components/ui/picture-rail-gallery";

export const PICTURE_RAIL_PRINTS: PictureRailItem[] = [
  {
    id: "ochre-curve",
    title: "Ochre Curve",
    artist: "Ines Varga",
    year: "2023",
    image: "https://cdn.21st.dev/assets/mirror/44/4445f03ad28d15cefbb28d15bb1b6d50e0d08c78a776fa5969447c794f82a806.jpg",
    aspect: 0.75,
    frame: "black",
    mat: true,
    drop: 0.04,
    tag: "$280",
    details: ["Edition 12/50", "30 × 40 cm", "Archival pigment print", "Signed on the back"],
  },
  {
    id: "spiral-study",
    title: "Spiral Study",
    artist: "Tomas Reyhill",
    year: "2021",
    image: "https://cdn.21st.dev/assets/mirror/25/259c0cebf80f6ec168975130a27ee93400c3f62b13c08f4a75f839f0c4472617.jpg",
    aspect: 4 / 3,
    frame: "white",
    mat: true,
    drop: 0.12,
    tag: "$360",
    details: ["Edition 7/30", "40 × 30 cm", "Silver gelatin print", "Signed on the back"],
  },
  {
    id: "dune-field",
    title: "Dune Field",
    artist: "Ada Lindqvist",
    year: "2024",
    image: "https://cdn.21st.dev/assets/mirror/d8/d81a9b43595ed23c73a955770b69923af9d90ecba76da30395019cb197cde4a8.jpg",
    aspect: 0.75,
    frame: "oak",
    drop: -0.02,
    tag: "$190",
    details: ["Edition 18/75", "30 × 40 cm", "Archival pigment print", "Oak frame, museum glass"],
  },
  {
    id: "rain-study",
    title: "Rain Study No. 4",
    artist: "Elio Brandt",
    year: "2022",
    image: "https://cdn.21st.dev/assets/mirror/6c/6c85d8a9d91f7e39697be27039336ffb8dd489d91171aaaf45aef057b00c2179.jpg",
    aspect: 1,
    frame: "black",
    mat: true,
    drop: 0.16,
    tag: "$140",
    details: ["Edition 25/100", "30 × 30 cm", "Archival pigment print", "Unsigned open study"],
  },
  {
    id: "still-lake",
    title: "Still Lake",
    artist: "Saga Morel",
    year: "2024",
    image: "https://cdn.21st.dev/assets/mirror/59/59ad9130324eb961582ce6ef06326623e6faad4bd2124749697c8f55a27aeb92.jpg",
    aspect: 1.5,
    frame: "oak",
    drop: 0.06,
    tag: "$420",
    details: ["Edition 5/40", "60 × 40 cm", "Archival pigment print", "Signed on the back"],
  },
  {
    id: "concrete-choir",
    title: "Concrete Choir",
    artist: "Pavel Oduya",
    year: "2020",
    image: "https://cdn.21st.dev/assets/mirror/31/31b653f5250dba3fe70f29000e39129e43c431fea5076aeece90cedf21a6ad32.jpg",
    aspect: 0.8,
    frame: "white",
    mat: true,
    drop: 0,
    tag: "$240",
    details: ["Edition 9/50", "40 × 50 cm", "Archival pigment print", "Signed on the back"],
  },
  {
    id: "north-light",
    title: "North Light",
    artist: "Ada Lindqvist",
    year: "2024",
    image: "https://cdn.21st.dev/assets/mirror/e2/e245c0be96e28ea1e85ba0957e8ed182e80f1f79bd9934ee00643816e9447f9a.jpg",
    aspect: 1.5,
    frame: "black",
    drop: 0.1,
    tag: "$620",
    details: ["Edition 3/25", "90 × 60 cm", "Archival pigment print", "Signed and numbered"],
  },
  {
    id: "tide-line",
    title: "Tide Line",
    artist: "Noor Halvorsen",
    year: "2023",
    image: "https://cdn.21st.dev/assets/mirror/b5/b564beac2d0a0dc33cfb14013770897137298e29ff401bbc7cff0e9383b87e14.jpg",
    aspect: 1,
    frame: "oak",
    mat: true,
    drop: 0.03,
    tag: "$310",
    details: ["Edition 14/60", "50 × 50 cm", "Archival pigment print", "Signed on the back"],
  },
];

export default function PictureRailGalleryDemo({ autoplay = true }: { autoplay?: boolean }) {
  return (
    <div data-picture-demo className="flex min-h-svh w-full items-center justify-center bg-background text-foreground">
      <PictureRailGallery
        items={PICTURE_RAIL_PRINTS}
        eyebrow="Print shop · New editions"
        heading="A gallery wall you can rearrange, right on the page."
        caption="Brush along the rail to light a print, slide it, lift it to see the back."
        autoplay={autoplay}
        action={
          <button type="button" className="rounded-full bg-foreground px-5 py-2.5 text-sm font-medium text-background shadow-sm outline-none transition-[transform,box-shadow] hover:-translate-y-px hover:shadow-md focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background motion-reduce:transition-none">
            Browse prints
          </button>
        }
      />
    </div>
  );
}