Gradient Scale Cut Text

Installation

$ pnpm dlx shadcn@latest add @remocn/gradient-scale-cut-text

Usage

GradientScaleCutText begins with an oversized line moving left while a soft mask uncovers a fixed orange-to-white text gradient. On frame 13 it switches to a separate compact layer with no intermediate scale. That layer slides into its final position while clearing its blur, then remains fixed in both position and size as the same reveal continues across the remaining letters. At completion, the soft mask edge travels beyond the text box so the final letter is fully filled rather than left under the reveal fade. The text layers use a descender-safe line box, preventing letters such as g, p, and y from being clipped without moving the baseline.

The two layers never crossfade. Their opacity stays constant, and a discrete visibility condition creates the scale cut between adjacent frames.

// src/Root.tsx
import { Composition } from "remotion";
import { GradientScaleCutText } from "@/components/remocn/gradient-scale-cut-text";
 
const GradientScaleCutTextScene = () => (
  <GradientScaleCutText text="Introducing" />
);
 
export const RemotionRoot = () => (
  <Composition
    id="GradientScaleCutText"
    component={GradientScaleCutTextScene}
    durationInFrames={36}
    fps={30}
    width={1280}
    height={720}
  />
);

Tuning The Cut

cutFrame changes the exact frame where the giant layer is replaced. The gradient reveal remains tied to the full component timeline, so it does not restart after the cut. settleTravel controls the compact entrance distance, anchorOffsetX sets its final position, and compactBlur controls focus.

<GradientScaleCutText
  text="Now shipping"
  cutFrame={13}
  giantTravel={400}
  settleTravel={160}
  compactBlur={12}
  gradientStart="#f04a14"
  gradientEnd="#f3f1f1"
/>

Props