Infinite Marquee

Installation

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

Usage

// 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}
  />
);

Props

Prop	Type	Default	Description
`text`	`string`	`"ship · build · animate · "`	Text repeated across the marquee. Include trailing whitespace or punctuation for spacing.
`fontSize`	`number`	`120`	Font size in pixels
`color`	`string`	`"#171717"`	Text color when `stroke` is false
`fontWeight`	`number`	`900`	CSS font-weight
`pixelsPerFrame`	`number`	`4`	Horizontal scroll speed in pixels per frame
`stroke`	`boolean`	`false`	Render outlined text via `-webkit-text-stroke` instead of filled
`strokeColor`	`string`	`"#171717"`	Stroke color used when `stroke` is true
`background`	`string`	`"#fafafa"`	Background color of the root container
`speed`	`number`	`1`	Playback speed multiplier
`className`	`string`	—	Optional className passed to the translating row