Infinite Marquee

A continuously scrolling horizontal text strip that loops seamlessly

Installation

$ pnpm dlx shadcn@latest add @remocn/infinite-marquee

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { InfiniteMarquee } from "@/components/remocn/infinite-marquee";
 
const InfiniteMarqueeScene = () => (
  <InfiniteMarquee text="ship · build · animate · " pixelsPerFrame={4} stroke />
);
 
export const RemotionRoot = () => (
  <Composition
    id="InfiniteMarquee"
    component={InfiniteMarqueeScene}
    durationInFrames={180}
    fps={30}
    width={1280}
    height={720}
  />
);

With Backdrop

Renders transparent — supply the background via Backdrop:

tsx

import { Backdrop } from "@/components/remocn/backdrop";
import { InfiniteMarquee } from "@/components/remocn/infinite-marquee";
 
<Backdrop fill={{ type: "color", value: "#fafafa" }}>
  <InfiniteMarquee text="ship · build · animate · " pixelsPerFrame={4} stroke />
</Backdrop>

Props9

Prop	Type	Default
text	string"ship · build · animate · " Text repeated across the marquee. Include trailing whitespace or punctuation for spacing.
fontSize	number120 Font size in pixels
color	string"#171717" Text color when `stroke` is false
fontWeight	number900 CSS font-weight
pixelsPerFrame	number4 Horizontal scroll speed in pixels per frame
stroke	booleanfalse Render outlined text via `-webkit-text-stroke` instead of filled
strokeColor	string"#171717" Stroke color used when `stroke` is true
speed	number1 Playback speed multiplier
className	string— Optional className passed to the translating row

textstring
Text repeated across the marquee. Include trailing whitespace or punctuation for spacing.
Default"ship · build · animate · "
fontSizenumber
Font size in pixels
Default120
colorstring
Text color when `stroke` is false
Default"#171717"
fontWeightnumber
CSS font-weight
Default900
pixelsPerFramenumber
Horizontal scroll speed in pixels per frame
Default4
strokeboolean
Render outlined text via `-webkit-text-stroke` instead of filled
Defaultfalse
strokeColorstring
Stroke color used when `stroke` is true
Default"#171717"
speednumber
Playback speed multiplier
Default1
classNamestring
Optional className passed to the translating row