# Raster Paint
URL: https://remocn.dev/docs/numbers/raster-paint

A pixelated figure is painted tile by tile in warm to blue colors as a scan line crosses it.

- Install: `npx shadcn@latest add @remocn/raster-paint`
- Vibe: playful
- Natural length: 90f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/raster-paint
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { RasterPaint } from "@/components/remocn/raster-paint";

const RasterPaintScene = () => (
  <RasterPaint title="10x" label="Faster renders in remocn 2.0" />
);

export const RemotionRoot = () => (
  <Composition
    id="RasterPaint"
    component={RasterPaintScene}
    durationInFrames={120}
    fps={30}
    width={1280}
    height={720}
  />
);
```

A scan line sweeps down the frame, painting the pixelated figure tile by tile, with a warm to blue gradient trailing behind it. A label fades in once the scan is done. Pass `title` and `label`; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `title` | `string` | `"10x"` | Figure that gets painted, as text. |
| `label` | `string` | `"Faster renders in remocn 2.0"` | Small line that fades in under the figure. |
| `accent` | `string` | `"#3B5BFD"` | Accent color for highlights and small marks. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color theme, "dark" or "light". |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |

## Use when
- A big multiplier such as 10x that should feel like it is being rendered on screen.
- A render-speed or graphics-themed beat.
- A playful stat reveal with a retro raster feel.

## Don't use when
- You need a crisp, clean stat from the first frame — use `compact-stat`.
- The figure should assemble out of loose squares — use `number-mosaic`.
- The reveal should scrub a ruler to a year — use `ruler-scrub`.