Compositions
Core Primitives
Transitions
Typography
Customize
120
4
1
Installation
$ pnpm dlx shadcn@latest add @framecn/infinite-marquee
Usage
import { InfiniteMarquee } from "@/components/framecn/infinite-marquee";<InfiniteMarquee />API Reference
InfiniteMarquee
| Prop | Type | Default |
|---|---|---|
text | string | "ship · build · animate · " |
fontSize | number | 120 |
color | string | "#171717" |
fontWeight | number | 900 |
pixelsPerFrame | number | 4 |
stroke | boolean | false |
strokeColor | string | "#171717" |
background | string | "#fafafa" |
speed | number | 1 |
fps | number | 30 |
durationInFrames | number | 300 |
width | number | 1280 |
height | number | 720 |
className | string | - |
Notes
Uses CSS transform for performance
The marquee uses CSS transforms for smooth scrolling. The text is duplicated to create the infinite loop effect.
May cause layout shift on resize
The marquee calculates width based on initial render. If the container resizes, you may need to force a re-render.