A rack of square covers with the perspective reversed. The centre card sits square to the viewer while the ones beside it swing their outer edges forward, so the rack opens toward you instead of folding away. Drag it and the caption underneath follows.
// This is a file with a demo for your component
// That's what users will see in the preview
// Create new files in this directory to add more demos
"use client";
import { CoverflowCarousel } from "@/components/ui/coverflow-carousel";
const R2 = "https://pub-940ccf6255b54fa799a9b01050e6c227.r2.dev/stock-images";
const UNSPLASH = (id: string) =>
`https://images.unsplash.com/photo-${id}?w=640&h=640&fit=crop&q=70&auto=format`;
const SLIDES = [
{
src: `${R2}/767d99bb371a54d0d36751e8cecae43c.jpg`,
alt: "Diver silhouetted inside a sunset seascape shaped like a profile",
title: "Tidewater",
subtitle: "Long Player",
meta: [
{ label: "Year", value: "2019" },
{ label: "Producer", value: "Ada Ferrow" },
{ label: "Length", value: "3:42" },
],
},
{
src: `${R2}/821d815affa6496c39cbdeeec7a84603.jpg`,
alt: "Double-exposure portrait blended with a city skyline at dusk",
title: "Nightshift",
subtitle: "Long Player",
meta: [
{ label: "Year", value: "2021" },
{ label: "Producer", value: "Kell Mora" },
{ label: "Length", value: "4:08" },
],
},
{
src: `${R2}/937438c560ada1c83317f2c11b3454b0.jpg`,
alt: "Motion-blurred side-profile portrait against a deep orange backdrop",
title: "Overexposed",
subtitle: "Single",
meta: [
{ label: "Year", value: "2018" },
{ label: "Producer", value: "Juno Vale" },
{ label: "Length", value: "2:57" },
],
},
{
src: `${R2}/98f89cb9994f5c382ab964062c4039db.jpg`,
alt: "Figure holding a racket that dissolves into a swirling cloud at dusk",
title: "Slow Bloom",
subtitle: "EP",
meta: [
{ label: "Year", value: "2022" },
{ label: "Producer", value: "Rue Alcott" },
{ label: "Length", value: "3:15" },
],
},
{
src: `${R2}/ddcbee38be8b7274e19e132d7ab35b53.jpg`,
alt: "Hand gesture with a cutout of a bird flying through the fingers",
title: "Open Palm",
subtitle: "Single",
meta: [
{ label: "Year", value: "2020" },
{ label: "Producer", value: "Ada Ferrow" },
{ label: "Length", value: "3:01" },
],
},
{
src: UNSPLASH("1470071459604-3b5ec3a7fe05"),
alt: "Fog rolling through a forested valley at first light",
title: "Low Country",
subtitle: "Long Player",
meta: [
{ label: "Year", value: "2017" },
{ label: "Producer", value: "Sim Oyo" },
{ label: "Length", value: "5:20" },
],
},
{
src: UNSPLASH("1500534314209-a25ddb2bd429"),
alt: "Sunlit dune ridge under a hard blue sky",
title: "Dry Season",
subtitle: "EP",
meta: [
{ label: "Year", value: "2016" },
{ label: "Producer", value: "Juno Vale" },
{ label: "Length", value: "2:44" },
],
},
{
src: UNSPLASH("1441974231531-c6227db76b6e"),
alt: "Sunlight breaking through a dense stand of trees",
title: "Understory",
subtitle: "Single",
meta: [
{ label: "Year", value: "2023" },
{ label: "Producer", value: "Kell Mora" },
{ label: "Length", value: "3:38" },
],
},
{
src: UNSPLASH("1493246507139-91e8fad9978e"),
alt: "Pastel abstract of coloured smoke against a pale ground",
title: "Paper Lantern",
subtitle: "Single",
meta: [
{ label: "Year", value: "2021" },
{ label: "Producer", value: "Rue Alcott" },
{ label: "Length", value: "2:19" },
],
},
{
src: UNSPLASH("1501785888041-af3ef285b470"),
alt: "Mountain lake mirroring a ridgeline at dusk",
title: "Still Water",
subtitle: "Long Player",
meta: [
{ label: "Year", value: "2015" },
{ label: "Producer", value: "Ada Ferrow" },
{ label: "Length", value: "4:51" },
],
},
{
src: UNSPLASH("1465101162946-4377e57745c3"),
alt: "Long exposure of light trails over a dark landscape",
title: "Third Rail",
subtitle: "EP",
meta: [
{ label: "Year", value: "2024" },
{ label: "Producer", value: "Sim Oyo" },
{ label: "Length", value: "3:07" },
],
},
{
src: UNSPLASH("1519681393784-d120267933ba"),
alt: "Snow-covered peak lit by a cold morning sun",
title: "Undertow",
subtitle: "Single",
meta: [
{ label: "Year", value: "2020" },
{ label: "Producer", value: "Juno Vale" },
{ label: "Length", value: "3:29" },
],
},
];
// ONLY DEFAULT EXPORT WILL BE TREATED AS A DEMO
export default function DemoOne() {
return (
<div className="w-full overflow-hidden bg-background py-6">
<CoverflowCarousel slides={SLIDES} showCaption />
</div>
);
}
Part of Ruixen UI — browse the full library on 21st.dev.