"use client"; import { cn } from "@/lib/utils"; import React, { useEffect, useState } from "react"; export const InfiniteMovingCards = ({ items, direction = "left", speed = "fast", pauseOnHover = true, className, }: { items: { quote: string; name: string; title: string; }[]; direction?: "left" | "right"; speed?: "fast" | "normal" | "slow"; pauseOnHover?: boolean; className?: string; }) => { const containerRef = React.useRef(null); const scrollerRef = React.useRef(null); useEffect(() => { addAnimation(); }, []); const [start, setStart] = useState(false); function addAnimation() { if (containerRef.current && scrollerRef.current) { const scrollerContent = Array.from(scrollerRef.current.children); scrollerContent.forEach((item) => { const duplicatedItem = item.cloneNode(true); if (scrollerRef.current) { scrollerRef.current.appendChild(duplicatedItem); } }); getDirection(); getSpeed(); setStart(true); } } const getDirection = () => { if (containerRef.current) { if (direction === "left") { containerRef.current.style.setProperty( "--animation-direction", "forwards", ); } else { containerRef.current.style.setProperty( "--animation-direction", "reverse", ); } } }; const getSpeed = () => { if (containerRef.current) { if (speed === "fast") { containerRef.current.style.setProperty("--animation-duration", "20s"); } else if (speed === "normal") { containerRef.current.style.setProperty("--animation-duration", "40s"); } else { containerRef.current.style.setProperty("--animation-duration", "80s"); } } }; return (

{item.quote}
{item.name} {item.title}

); };

Infinite Moving Cards

Instalação