# Per Character Rise
URL: https://remocn.dev/docs/typography/per-character-rise

Letters slide up from below with no blur - crisp and kinetic

- Install: `npx shadcn@latest add @remocn/per-character-rise`
- Vibe: clean
- Natural length: 60f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/per-character-rise
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { PerCharacterRise } from "@/components/remocn/per-character-rise";

const PerCharacterRiseScene = () => (
  <PerCharacterRise text="One more thing." distance={32} fontSize={72} />
);

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

### With Backdrop

The component renders transparent — supply the background via `Backdrop`. It ships single-theme; edit the copied file to re-theme colors.

Pair with `Backdrop` to place the text inside a full-frame fill with a rounded, shadowed content frame:

```tsx
import { Composition } from "remotion";
import { PerCharacterRise } from "@/components/remocn/per-character-rise";
import { Backdrop } from "@/components/remocn/backdrop";

const PerCharacterRiseScene = () => (
  <Backdrop fill={{ type: "color", value: "#ffffff" }}>
    <PerCharacterRise text="One more thing." distance={32} fontSize={72} />
  </Backdrop>
);

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

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` (required) | `string` | — | The text to reveal |
| `distance` | `number` | `32` | Vertical travel in pixels each character rises from. Animates to 0. |
| `fontSize` | `number` | `72` | Font size in pixels |
| `fontWeight` | `number` | `600` | CSS font-weight |
| `color` | `string` | `"#171717"` | Text color (any valid CSS color) |
| `className` | `string` | — | Optional className passed to the underlying span |

## Use when
- A short word or phrase needs a crisp, sharp character-by-character entrance with even, readable stagger.
- The tone is clean and precise — no blur, no dramatic staircase, just steady letters rising into position.
- A heading needs more kinetic energy than `micro-scale-fade` but less theatrical drama than `bottom-up-letters`.

## Don't use when
- You want a dramatic staircase effect where each letter visibly lags the previous — use `bottom-up-letters` for the pronounced, wide-gap stagger instead.
- The text is multiple lines and should reveal line-by-line — use `mask-reveal-up` (upward, masked) or `line-by-line-slide` (directional) for line-level reveals.
- The reveal should include blur or atmospheric softness — use `focus-blur-resolve` (blurred entrance) or `blur-out-up` (blurred exit) when sharpness is not the goal.