Echo Stack

$ pnpm dlx shadcn@latest add @remocn/echo-stack

Usage

// src/Root.tsx
import { AbsoluteFill, Composition } from "remotion";
import { EchoStack } from "@/components/remocn/echo-stack";
 
const Beat = () => (
  <AbsoluteFill style={{ backgroundColor: "#0a0a0a" }}>
    <EchoStack text="Bold." />
  </AbsoluteFill>
);
 
export const RemotionRoot = () => (
  <Composition
    id="EchoStack"
    component={Beat}
    durationInFrames={120}
    fps={30}
    width={1280}
    height={720}
  />
);

The word focuses in over 14 frames. From frame 8 the echoes unfold out of it: the column starts compressed and opens to its full pitch by frame 26. After that the column keeps scrolling one row every cycle frames in direction, and loops without a seam. Echoes are hidden while they pass behind the word and fade out toward the edges, so only about echoes rows show on each side.

The echo outline is built from the filled glyphs with an SVG filter rather than a text stroke. Variable fonts keep overlapping contours inside letters like M and K, and a text stroke draws them. The component paints no background and centers the word in its parent. Sizes scale with height / 720.