Marquee

Stable

An infinitely scrolling component for text or elements.

Examples

Basic Usage

SECURITYZERO-TRUSTCYBERENCRYPTIONDEFENSESHIELD
tsx
<Marquee speed="normal" pauseOnHover className="bg-slate-900 border-y border-white/10">
  {words.map((w, i) => (
    <span key={i} className="text-xl font-bold text-slate-400 mx-4">{w}</span>
  ))}
</Marquee>

Vertical Direction

SECURITY
ZERO-TRUST
CYBER
ENCRYPTION
DEFENSE
SHIELD
tsx
<Marquee direction="up" speed="fast" className="h-64">...</Marquee>

API Reference

PropertyDescriptionTypeDefault
directionScroll direction."left" | "right" | "up" | "down""left"
pauseOnHoverPause the animation on hover.booleanfalse
speedSpeed of the animation."slow" | "normal" | "fast""normal"