[V0_FILE]typescriptreact:file="marquee.tsx" "use client" import type React from "react" import { useRef, useEffect, useState } from "react" import { cn } from "@/lib/utils" interface MarqueeProps { className?: string children: React.ReactNode pauseOnHover?: boolean direction?: "left" | "right" speed?: "slow" | "normal" | "fast" repeat?: number } export default function Marquee({ children, className, pauseOnHover = true, direction = "left", speed = "normal", repeat = 2, }: MarqueeProps) { const containerRef = useRef(null) const [contentWidth, setContentWidth] = useState(0) const speedMap = { slow: "20s", normal: "15s", fast: "8s", } useEffect(() => { if (containerRef.current) { setContentWidth(containerRef.current.scrollWidth) } }, [children]) return (

{[...Array(repeat)].map((_, i) => (

{children}

))}

) } [V0_FILE]typescriptreact:file="lib/utils.ts" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]typescriptreact:file="demo.tsx" import Marquee from "./marquee" export default function Demo() { return (

Basic Marquee

Welcome to our website • Thanks for visiting • Check out our latest products

Fast Speed, Right Direction

🚀 Flash Sale! 50% Off Everything! Limited Time Only! 🚀

With Icons

{[1, 2, 3, 4, 5, 6].map((i) => (

Item {i}

))}

) }

About

Tags

Share

About

Tags

Share

More from bahrawyx

More Templates Like This

About

Tags

Share

About

Tags

Share

More from bahrawyx

More Templates Like This