# Infinite Marquee

Endlessly scrolling horizontal text band.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).

## Installation

<TabsTrigger value="cli">Command</TabsTrigger>
<TabsTrigger value="manual">Manual</TabsTrigger>

```bash
npx shadcn@latest add @framecn/infinite-marquee
```

<Step>Copy and paste the following code into your project.</Step>

<Step>Update the import paths to match your project setup.</Step>

## Usage

```tsx
import { InfiniteMarquee } from "@/components/framecn/infinite-marquee";
```

```tsx
<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

  The marquee uses CSS transforms for smooth scrolling. The text is duplicated
  to create the infinite loop effect.

  The marquee calculates width based on initial render. If the container
  resizes, you may need to force a re-render.