'use client'; import { motion } from 'motion/react'; import { useState } from 'react'; import { cn } from '@/lib/utils'; interface TechLogoLoopProps { speed?: number; className?: string; } type TechLogo = { id: string; label: string; Icon: React.FC>; }; const ReactLogo: TechLogo['Icon'] = (props) => ( ); const NextLogo: TechLogo['Icon'] = (props) => ( ); const TailwindLogo: TechLogo['Icon'] = (props) => ( ); const TSLogo: TechLogo['Icon'] = (props) => ( ); const NodeLogo: TechLogo['Icon'] = (props) => ( ); const PrismaLogo: TechLogo['Icon'] = (props) => ( ); const PostgresLogo: TechLogo['Icon'] = (props) => ( ); const GitHubLogo: TechLogo['Icon'] = (props) => ( ); const logos: TechLogo[] = [ { id: 'react', label: 'React', Icon: ReactLogo }, { id: 'next', label: 'Next.js', Icon: NextLogo }, { id: 'tailwind', label: 'Tailwind', Icon: TailwindLogo }, { id: 'ts', label: 'TypeScript', Icon: TSLogo }, { id: 'node', label: 'Node.js', Icon: NodeLogo }, { id: 'prisma', label: 'Prisma', Icon: PrismaLogo }, { id: 'postgres', label: 'PostgreSQL', Icon: PostgresLogo }, { id: 'github', label: 'GitHub', Icon: GitHubLogo }, ]; export default function TechLogoLoop({ speed = 8, className, }: TechLogoLoopProps) { const loopLogos = [...logos, ...logos]; return ( <>

{loopLogos.map((tech, i) => ( {tech.label} ))}

{/* local keyframes + hover pause */} ); }

Logo Loop

Installation

Usage