import React, { useRef } from "react" import { motion } from "motion/react" import SimpleMarquee from "@/components/fancy/blocks/simple-marquee" import VerticalCutReveal from "@/components/fancy/text/vertical-cut-reveal" const imgs = [ "https://cdn.cosmos.so/97fd931c-28cc-480f-91a8-cffb635cf832?format=jpeg", "https://cdn.cosmos.so/305a25f2-cc53-4ff3-95a5-6a5ca1517ff8?format=jpeg", "https://cdn.cosmos.so/2a024234-6713-41b2-a2f2-1d5e385ac490?format=jpeg", "https://cdn.cosmos.so/89cc65c1-b0bf-42f6-9afc-4db6678ae652?format=jpeg", "https://cdn.cosmos.so/211e0ca7-4126-4222-9de8-03aeb1e4688e?format=jpeg", "https://cdn.cosmos.so/b7dc0ec1-4b03-42ce-9805-1964d0f49feb?format=jpeg", "https://cdn.cosmos.so/43be3f32-bd6e-4fd1-93c8-d54e0d8196ee?format=jpeg", "https://cdn.cosmos.so/d0d146aa-b49c-48be-8b09-6b7eaf8e836d?format=jpeg", "https://cdn.cosmos.so/e765d51f-8be7-4618-83e2-90c13379b366?format=jpeg", "https://cdn.cosmos.so/c1854fe0-e974-4cb6-8bc4-ffcf1686b9e7?format=jpeg", ] const firstRow = imgs.slice(0, 5) const secondRow = imgs.slice(5) const MarqueeItem = ({ children, index, }: { children: React.ReactNode index: number }) => ( {children} ) export default function SimpleMarqueeDemo() { const container = useRef(null) return (

New Arrivals

{firstRow.map((src, i) => ( ))} {secondRow.map((src, i) => ( ))}

); }

Simple Marquee Drag Demo

Instalação

Dependências

Registry dependencies