Infinite Marquee
Infinite Marquee text animation for Remotion.
PrimitiveAdvanced
$ npx remotion-ui@latest add infinite-marqueeText that scrolls forever, in either direction, at speed pixels per frame. The preview above runs three bands: two faded ones travelling opposite ways, and a third with fade={0} so the difference is visible in a single still.
The whole job is the wrap. The track holds identical copies of the text, each carrying its own trailing gap, so every copy occupies exactly one tile; shifting the track by one tile lands each copy where its neighbour stood, which is the same picture. That shift is written as a percentage of the track rather than a measured pixel count, so a font that measures differently than it renders changes the speed slightly and can never make the wrap jump.
fade softens both edges, as a fraction of the visible band (0.08 by default), so at 960px wide the outer 77px on each side ramps to nothing and no letter ever terminates against the frame. Set it to 0 for a hard edge.
The loop is one copy of the text wide and seamless by construction: the shift is a percentage of the track, so a mismeasured font changes the speed but can never make the wrap jump.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/primitives/infinite-marquee- Use when: frame-level motion primitives and reusable animation wrappers.
- Customize: text, speed, direction, fade, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
import { InfiniteMarquee } from "@/remotion/primitives/infinite-marquee";
<InfiniteMarquee text="Scrolling band" speed={2} direction="left" fade={0.08} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| text* | string | - | Marquee copy. |
| speed | number | 2 | Pixels travelled per frame. |
| direction | "left" | "right" | "left" | Which way the text travels. |
| fade | number | 0.08 | Width of the fade at each edge as a fraction of the visible band. 0 gives a hard edge; capped at 0.45 so the two fades cannot meet. |
| fontSize | number | - | Overrides the width-scaled default (56 at 1080p). |
| color | string | "#f4f4f5" | Text colour. |
| fontWeight | number | 600 | Text weight. |
| gap | number | 48 | Space between one copy of the text and the next, in px. |