# Ruler Align
URL: https://remocn.dev/docs/typography/ruler-align

A ruler slides under a messy line of text and straightens its letters onto the edge.

- Install: `npx shadcn@latest add @remocn/ruler-align`
- Vibe: clean
- Natural length: 151f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/ruler-align
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { RulerAlign } from "@/components/remocn/ruler-align";

const RulerAlignScene = () => <RulerAlign text="Made to measure." accent="#3B5BFD" />;

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

The letters appear scattered at uneven heights, a ruler slides in beneath them, levels, then lifts so high letters drop onto its edge. Two taps then nudge the spacing tight. Pass `text` for your own line; letters without descenders sit best on the edge. It takes a `theme` prop and ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` | `string` | `"Made to measure."` | The line the ruler straightens. Letters without descenders sit best on the edge. |
| `accent` | `string` | `"#3B5BFD"` | The ruler's straight edge. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark ground; the component ships both. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |

## Use when
- A message about precision, polish or alignment where messy text snaps into order.
- A before-and-after beat where scattered letters get fixed by a tool in frame.
- A tagline whose punchline is that everything is now measured and lined up.

## Don't use when
- You only need letter spacing to tighten, not baseline fixing - use `kerning-snap`.
- The line should simply appear, with no gag - use `staggered-fade-up`.
- The text should arrive as if being typed - use `typewriter`.