Components
Loading preview...
An infinite scrolling component that can be used to display text, images, or videos. Add the following animations to your tailwind.config.js file: extend: { animation: { marquee: "marquee var(--duration) linear infinite", "marquee-vertical": "marquee-vertical var(--duration) linear infinite", }, keyframes: { marquee: { from: { transform: "translateX(0)" }, to: { transform: "translateX(calc(-100% - var(--gap)))" }, }, "marquee-vertical": { from: { transform: "translateY(0)" }, to: { transform: "translateY(calc(-100% - var(--gap)))" }, }, }, },
npx shadcn@latest add https://21st.dev/r/dillionverma/marqueeimport { cn } from "@/lib/utils";
import { Marquee } from "@/components/ui/marquee";
const reviews = [
{
name: "Jack",
username: "@jack",
body: "I've never seen anything like this before. It's amazing. I love it.",
img: "https://avatar.vercel.sh/jack",
},
{
name: "Jill",
username: "@jill",
body: "I don't know what to say. I'm speechless. This is amazing.",
img: "https://avatar.vercel.sh/jill",
},
{
name: "John",
username: "@john",
body: "I'm at a loss for words. This is amazing. I love it.",
img: "https://avatar.vercel.sh/john",
},
];
const firstRow = reviews.slice(0, reviews.length / 2);
const secondRow = reviews.slice(reviews.length / 2);
const ReviewCard = ({
img,
name,
username,
body,
}: {
img: string;
name: string;
username: string;
body: string;
}) => {
return (
<figure
className={cn(
"relative h-40 w-36 cursor-pointer overflow-hidden rounded-xl border p-4",
// light styles
"border-gray-950/[.1] bg-gray-950/[.01] hover:bg-gray-950/[.05]",
// dark styles
"dark:border-gray-50/[.1] dark:bg-gray-50/[.10] dark:hover:bg-gray-50/[.15]",
)}
>
<div className="flex flex-row items-center gap-2">
<img className="rounded-full" width="32" height="32" alt="" src={img} />
<div className="flex flex-col">
<figcaption className="text-sm font-medium dark:text-white">
{name}
</figcaption>
<p className="text-xs font-medium dark:text-white/40">{username}</p>
</div>
</div>
<blockquote className="mt-2 text-sm">{body}</blockquote>
</figure>
);
};
export function MarqueeDemoVertical() {
return (
<div className="relative flex h-[500px] w-full flex-row items-center justify-center overflow-hidden rounded-lg border bg-background md:shadow-xl">
<Marquee pauseOnHover vertical className="[--duration:20s]">
{firstRow.map((review) => (
<ReviewCard key={review.username} {...review} />
))}
</Marquee>
<Marquee reverse pauseOnHover vertical className="[--duration:20s]">
{secondRow.map((review) => (
<ReviewCard key={review.username} {...review} />
))}
</Marquee>
<div className="pointer-events-none absolute inset-x-0 top-0 h-1/3 bg-gradient-to-b from-white dark:from-background"></div>
<div className="pointer-events-none absolute inset-x-0 bottom-0 h-1/3 bg-gradient-to-t from-white dark:from-background"></div>
</div>
);
}