Focus Rail

Galleries 1.1K

About

A 3D, drag-and-swipe carousel with depth, autoplay, and animated context panel, designed for showcasing rich visual stories in a single, immersive focus rail.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Focus Rail to your project and fits it to your theme.

Code

How Focus Rail is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { FocusRail, type FocusRailItem } from "@/components/ui/focus-rail";

const DEMO_ITEMS: FocusRailItem[] = [
  {
    id: 1,
    title: "Neon Tokyo",
    description: "Experience the vibrant nightlife and illuminated streets of Shinjuku.",
    meta: "Urban • Travel",
    imageSrc: "https://cdn.21st.dev/assets/mirror/68/68712e27f10a30a88af172db291f37dbbb7140282a7fd76545a4025799744046.jpg",
    href: "#tokyo",
  },
  {
    id: 2,
    title: "Nordic Silence",
    description: "Minimalist architecture meeting the raw beauty of the Icelandic coast.",
    meta: "Design • Nature",
    imageSrc: "https://cdn.21st.dev/assets/mirror/b1/b1056f82a7169ee3110c20ad0f55d8fe313cf05d408dd1148b03892861b832f3.jpg",
    href: "#nordic",
  },
  {
    id: 3,
    title: "Sahara Echoes",
    description: "Wandering through the timeless dunes under an endless golden sun.",
    meta: "Adventure • Heat",
    imageSrc: "https://cdn.21st.dev/assets/mirror/6e/6eabf58e20300c14c5edd04c929f28b9cf52f674dbcd4e446a65202a8b3612be.jpg",
    href: "#sahara",
  },
  {
    id: 4,
    title: "Cyber Future",
    description: "A glimpse into a technological singularity where AI meets humanity.",
    meta: "Tech • AI",
    imageSrc: "https://cdn.21st.dev/assets/mirror/04/04317050d5634dbf548aceb20722931ba147462e619a97fb3ec6dc29d4c26592.jpg",
    href: "#cyber",
  },
  {
    id: 5,
    title: "Deep Ocean",
    description: "The crushing pressure and alien beauty of the Mariana Trench.",
    meta: "Science • Deep",
    imageSrc: "https://cdn.21st.dev/assets/mirror/d6/d6fad4c2ccd2824293c138ae9700d278ab58cf42a40a813ed6a9772a7b904e30.jpg",
    href: "#ocean",
  },
];

export default function DemoOne() {
  return (<main className="min-h-screen overflow-x-hidden w-full bg-neutral-950 flex flex-col items-center justify-center py-20">
      {/* Title */}
      <div className="mb-12 text-center">
        <h1 className="text-4xl font-bold text-white mb-2">Featured Stories</h1>
        <p className="text-neutral-400">Navigate the rail to explore selected works.</p>
      </div>

      {/* The Component */}
      <FocusRail 
        items={DEMO_ITEMS} 
        autoPlay={false} 
        loop={true} 
      />
    </main>);
}