Echo Stack

A word focuses in at the center while outline copies of it unfold above and below and keep drifting, like the one clear line on a spinning drum

Installation

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

Usage

tsx

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

Props13

Prop	Type	Default
text	string"Bold." The word at the center
fontSize	number170 Font size in reference px at 720p
fontWeight	number800 Font weight
fontFamily	stringInter Font family
color	string"#fafafa" Color of the main word
echoColor	stringsame as color Outline color of the echoes
echoes	number3 Echo rows on each side before they fade out
echoOpacity	number0.35 Opacity of the nearest echo
strokeWidth	number1.5 Echo outline width in reference px
direction	"up" \| "down""up" Which way the column drifts
cycle	number60 Frames for the column to move one row
speed	number1 Timeline speed multiplier
className	string— Optional className passed to the wrapper

textstring
The word at the center
Default"Bold."
fontSizenumber
Font size in reference px at 720p
Default170
fontWeightnumber
Font weight
Default800
fontFamilystring
Font family
DefaultInter
colorstring
Color of the main word
Default"#fafafa"
echoColorstring
Outline color of the echoes
Defaultsame as color
echoesnumber
Echo rows on each side before they fade out
Default3
echoOpacitynumber
Opacity of the nearest echo
Default0.35
strokeWidthnumber
Echo outline width in reference px
Default1.5
direction"up" | "down"
Which way the column drifts
Default"up"
cyclenumber
Frames for the column to move one row
Default60
speednumber
Timeline speed multiplier
Default1
classNamestring
Optional className passed to the wrapper