Shadow Sweep Text

Installation

$ pnpm dlx shadcn@latest add @remocn/shadow-sweep-text

Usage

ShadowSweepText keeps the text at constant opacity for the complete cycle. Frames 0–23 move a directional mask and a broad Gaussian shadow field to the right, uncovering the line without exposing a rectangular layer. After a three-frame hold, the same paired motion returns from the left and covers the line by frame 36. Independently, the text eases 96 pixels up and 16 pixels left across the shot.

The component paints its own near-black violet background. That field and the slightly darker shadow are part of the animation rather than preview chrome, so the installed result matches the customizer without requiring a separate backdrop.

// src/Root.tsx
import { Composition } from "remotion";
import { ShadowSweepText } from "@/components/remocn/shadow-sweep-text";
 
const ShadowSweepTextScene = () => (
  <ShadowSweepText text="are abandoned" />
);
 
export const RemotionRoot = () => (
  <Composition
    id="ShadowSweepText"
    component={ShadowSweepTextScene}
    durationInFrames={37}
    fps={30}
    width={1280}
    height={720}
  />
);

Tuning The Shadow

backgroundColor fills the canvas. By default, shadowColor inherits that same color, so the radial field is visible over the letters without becoming a separate black shape on the blue field. It still fades to transparency horizontally and vertically. Reducing shadowSoftness makes the reveal feel like a hard wipe, while increasing it leaves more of each glyph partially covered.

<ShadowSweepText
  text="built for motion"
  backgroundColor="#030012"
  shadowColor="#030012"
  shadowSoftness={130}
  rise={96}
  driftLeft={16}
/>

Props