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.
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>);
}