Page UI logo

Landing Page Marquee

This component displays an animated marquee that can loop through images, icons, or text.

Usage

import { LandingMarquee } from '@/components/landing/LandingMarquee';
<LandingMarquee>
  <ChromeIcon className="w-12 h-12 mx-8" />
  <FigmaIcon className="w-12 h-12 mx-8" />
  <GithubIcon className="w-12 h-12 mx-8" />
  <FramerIcon className="w-12 h-12 mx-8" />
  <TwitchIcon className="w-12 h-12 mx-8" />
  <TwitterIcon className="w-12 h-12 mx-8" />
  <GitlabIcon className="w-12 h-12 mx-8" />
  <InstagramIcon className="w-12 h-12 mx-8" />
  <SlackIcon className="w-12 h-12 mx-8" />
</LandingMarquee>

Examples

Animation Direction

With images

John DoeJane DoeAlice DoeBob DoeEve Doe
John DoeJane DoeAlice DoeBob DoeEve Doe
John DoeJane DoeAlice DoeBob DoeEve Doe

With background

API Reference

Prop Name Prop TypeRequiredDefault
children React.ReactNode ǀ stringNo-
innerClassName stringNo-
withBackground booleanNofalse
animationDurationInSeconds stringNo-
animationDirection 'left' ǀ 'right'No-
variant 'primary' ǀ 'secondary'No'primary'

More Examples

For more even more examples, see our Landing Page Component Examples page or see complete landing page examples by Exploring Our Landing Page Templates.