Marquee

marquee-1779394643137.tsx

'use client'
const ITEMS = ['⚛️ React','🔷 TypeScript','💨 Tailwind','▲ Next.js','🔶 Prisma','🐘 PostgreSQL','🤖 OpenAI','🚀 Vercel','🐳 Docker','⚡ Vite']

export default function Marquee({ items = ITEMS, speed = 30, pauseOnHover = true }) {
  return (
    <div style={{ overflow:'hidden', position:'relative', padding:'12px 0' }}>
      <div style={{
        display:'flex',
        animation: 'marquee ' + speed + 's linear infinite',
      }}
        onMouseEnter={e => pauseOnHover && (e.currentTarget.style.animationPlayState='paused')}
        onMouseLeave={e => e.currentTarget.style.animationPlayState='running'}
      >
        {[...items, ...items, ...items].map((item, i) => (
          <div key={i} style={{
            flexShrink:0, padding:'8px 20px', marginRight:'12px',
            background:'#fff', border:'1px solid #e2e8f0', borderRadius:'9999px',
            fontSize:'14px', fontWeight:600, color:'#374151', whiteSpace:'nowrap',
            boxShadow:'0 1px 4px rgba(0,0,0,0.06)',
          }}>{item}</div>
        ))}
      </div>
      <style>{'@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-33.333%)}}'}</style>
    </div>
  )
}

Component info

CategoryAnimations

Frameworkreact

TierFREE

Copies0

About

Infinite scrolling marquee with logos, text or any content

More from Animations

'use client'
import { useState, useEffect } from 'react'

const STRINGS = ['Build faster.', 'Ship better.', 'Design smarter.', 'Scale effortlessly.']

export default function TypingAnimation({ strings = STRINGS, speed = 80, pause = 1500 }) {
  const

TypingAnimation

Animations

'use client'
export default function PulseIndicator({
  label = 'Live',
  color = '#10b981',
  size = 12,
  rings = 2,
}) {
  return (
    <div style={{ display:'flex', alignItems:'center', gap:'10px' }}>
      <div style={{ position:'relative', widt

PulseIndicator

Animations

'use client'
import { useState } from 'react'

function Shimmer({ w = '100%', h = '16px', r = '6px' }) {
  return (
    <div style={{
      width:w, height:h, borderRadius:r,
      background:'linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%

ShimmerCard

Animations

'use client'
export default function GradientText({
  text = 'Empire UI',
  size = '48px',
  gradient = 'linear-gradient(90deg, #6d28d9, #2563eb, #0891b2, #10b981, #6d28d9)',
}) {
  return (
    <div>
      <style>{'@keyframes flow{0%{background-posi

GradientText

Animations