"use client"; import * as React from "react"; import { TextLoop } from "@/components/ui/text-loop"; import { Variants } from "framer-motion"; export function BasicDemo() { return (

{[ "How can I assist you today?", "Generate a logo", "Create a component", "Draw a diagram", ].map((text) => ( {text} ))}

); } export function CustomIntervalDemo() { return (

Beautiful templates for {["Designers", "Design Engineers", "Developers"].map((text) => ( {text} ))}

); } export function CustomAnimationDemo() { const [currentIndex, setCurrentIndex] = React.useState(0); const motionVariants: Variants = { initial: { y: 20, opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: currentIndex % 2 === 0 ? -20 : 20, opacity: 0 }, }; return (

{[ "La Trinité, Martinique", "A Little Lost・Arthur Russell" ].map((text) => ( {text} ))}

); } export const demos = [ { name: "Basic", description: "Basic text loop with default settings", component: BasicDemo, }, { name: "Custom Interval", description: "Text loop with faster transition speed", component: CustomIntervalDemo, }, { name: "Custom Animation", description: "Text loop with vertical slide animation", component: CustomAnimationDemo, }, ];