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

With background

API Reference

Prop Name	Prop Type	Required	Default
children	`React.ReactNode` ǀ `string`	No	-
innerClassName	`string`	No	-
withBackground	`boolean`	No	`false`
animationDurationInSeconds	`string`	No	-
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.