# Hatch Shade
URL: https://remocn.dev/docs/numbers/hatch-shade

A serif number is shaded in with pen-drawn hatch lines in three passes, then outlined and captioned.

- Install: `npx shadcn@latest add @remocn/hatch-shade`
- Vibe: paper
- Natural length: 128f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/hatch-shade
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { HatchShade } from "@/components/remocn/hatch-shade";

const HatchShadeScene = () => <HatchShade value="24" caption="new components, drawn for launch week" />;

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

A serif number is drawn in with pen-stroke hatch lines in three passes - two crossing passes in ink, then a copper pass - before a crisp outline appears and the caption fades in. Pass `value` as a string and `caption`. It ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `value` | `string` | `"24"` | The number to shade in, as a string. |
| `caption` | `string` | `"new components, drawn for launch week"` | Caption that fades in below. |
| `accent` | `string` | `"#3B5BFD"` | Accent color for the copper pass. |
| `speed` | `number` | `1` | Playback speed multiplier. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette. |

## Use when
- An editorial or paper-craft stat where the number should look engraved rather than typed.
- A quiet, premium beat on a copper plate with a caption fading in last.
- A count-free figure, such as a number of new components, that deserves a drawn-in reveal.

## Don't use when
- The number should be woven from threads - use `thread-weave`.
- A single-stroke handwritten figure is the look - use `single-stroke`.
- You want pixel tiles painting the figure - use `raster-paint`.