Type Wall

$ pnpm dlx shadcn@latest add @remocn/type-wall

Usage

// 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.