# Type Wall
URL: https://remocn.dev/docs/typography/type-wall

Rows of one word fill the frame, run in alternating directions at different speeds in heavy, narrow and outline faces, with an accent band through the middle

- Install: `npx shadcn@latest add @remocn/type-wall`
- Vibe: playful
- Natural length: sustained

## Installation

```bash
npx shadcn@latest add @remocn/type-wall
```

## Usage

```tsx
// src/Root.tsx
import { AbsoluteFill, Composition } from "remotion";
import { TypeWall } from "@/components/remocn/type-wall";

const Wall = () => (
  <AbsoluteFill style={{ backgroundColor: "#2b3bff" }}>
    <TypeWall text="MOTION" accent="#ff4d1a" accentText="#111111" />
  </AbsoluteFill>
);

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

Rows are `fontSize` tall and stack without gaps from the center row outward
until the frame is covered. Faces alternate between heavy Inter, narrow Anton
and outline Inter; Anton is scaled so its capitals match Inter's cap height.
The center row runs on the `accent` band. Neighbors run in opposite
directions, and each row gets its own speed and starting phase from `seed`, so
the wall never lines up into columns.

On the way in, each row wipes open from the side it enters and streams a few
tokens past before it slows to cruise, staggered two frames per row from the
center outward. The band grows from the middle over frames 6 to 20. After
that the wall runs for as long as the sequence lasts.

The wall is the one component of this set that defaults to capitals: the
effect is a wall of type. Each row loops by moving whole tokens, so it never
measures text. The component fills its parent and paints no background
outside the band.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` | `string` | `"MOTION"` | The word repeated in every row |
| `separator` | `string` | `"·"` | Glyph between repeats |
| `fontSize` | `number` | `64` | Row height in reference px at 720p |
| `color` | `string` | `"#fafafa"` | Text and outline color |
| `accent` | `string` | `"#D97757"` | Band behind the center row |
| `accentText` | `string` | `"#0a0a0a"` | Text color on the band |
| `seed` | `number` | `7` | Seed for each row's speed and phase |
| `speed` | `number` | `1` | Timeline speed multiplier |
| `className` | `string` | — | Optional className passed to the wrapper |

## Use when
- A loud full-screen beat for one word, such as a section title, a manifesto word or a transition card.
- A busy, graphic backdrop behind a short overlay that should read as pure energy.
- You want kinetic poster typography that runs for as long as the scene needs.

## Don't use when
- One strip of scrolling text is enough, as a ticker or a separator — use `infinite-marquee`.
- The rows should recede in perspective rather than fill the frame flat — use `perspective-marquee`.
- A single word should stay readable at the center with quieter repeats — use `echo-stack`.