Scroll-driven image carousel whose title and subtitle wrap two counter-rotating 3D text cylinders behind a centred card.
"use client";
import { useRef } from "react";
import { OrbitTextCarousel } from "@/components/ui/orbit-text-carousel";
const img = (id: string) =>
`https://images.unsplash.com/${id}?w=1200&q=80&auto=format&fit=crop`;
// Accents come from the theme's chart palette, so they re-tint with light and
// dark mode instead of fighting the background.
const SLIDES = [
{
src: img("photo-1763256341193-a6e1b18a534d"),
alt: "Silhouette of a person walking past a glowing blue display at night",
title: "Afterglow",
subtitle: "Walk into the light",
label: "Glow",
accent: "var(--chart-1)",
},
{
src: img("photo-1770076215307-375ef4acc421"),
alt: "Blurred red and blue city lights reflected at night",
title: "Night drive",
subtitle: "Red light blue hour",
label: "Motion",
accent: "var(--chart-2)",
},
{
src: img("photo-1767973419928-11ffdfe630a4"),
alt: "Busy city street at night lined with red neon signs",
title: "Downtown",
subtitle: "Never asleep",
label: "Street",
accent: "var(--chart-3)",
},
{
src: img("photo-1559619081-8fd2cc754ca3"),
alt: "Pink and blue neon tubes running across a ribbed wall",
title: "Voltage",
subtitle: "Lines of light",
label: "Neon",
accent: "var(--chart-4)",
},
{
src: img("photo-1748976213433-d809c77b177a"),
alt: "Silhouette of a person with arms outstretched against an orange sunset",
title: "Daybreak",
subtitle: "Arms wide open",
label: "Dawn",
accent: "var(--chart-5)",
},
];
export default function OrbitTextCarouselDemo() {
const containerRef = useRef<HTMLDivElement>(null);
// Scrolls inside its own panel, so the demo stays one screen tall wherever
// it is embedded. Focusable so the panel can be scrolled from the keyboard.
return (
<div
ref={containerRef}
tabIndex={0}
className="relative h-screen w-full overflow-y-auto overflow-x-hidden bg-background outline-none [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
>
<OrbitTextCarousel slides={SLIDES} container={containerRef} />
</div>
);
}
Part of Ruixen UI — browse the full library on 21st.dev.