# Infinite Marquee
URL: https://remocn.dev/docs/typography/infinite-marquee

A continuously scrolling horizontal text strip that loops seamlessly

- Install: `npx shadcn@latest add @remocn/infinite-marquee`
- Vibe: clean
- Natural length: 180f @ 30fps

## Installation

```bash
npx 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>
```

## 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 |
| `speed` | `number` | `1` | Playback speed multiplier |
| `className` | `string` | — | Optional className passed to the translating row |

## Use when
- A scene needs ambient motion in the background or as a decorative band between sections.
- Looping brand words, feature names, or a tagline should scroll continuously without a defined start/end.
- A ticker-style lower-third or full-bleed text treatment is required for the full clip duration.

## Don't use when
- The text should enter, hold, then exit — that is a reveal animation, not a ticker; use `blur-out-up` or `mask-reveal-up` instead.
- You need 3D perspective depth on the scrolling strip — use `perspective-marquee` for a tilted, depth-of-field version.
- The marquee should stop or snap to a specific word — this component loops forever with no hold state; compose a `Sequence` with a static slide instead.