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.