# Gradient Scale Cut Text
URL: https://remocn.dev/docs/typography/gradient-scale-cut-text

An oversized gradient reveal snaps to a compact blurred line that settles into focus

- Install: `npx shadcn@latest add @remocn/gradient-scale-cut-text`
- Vibe: premium
- Natural length: 36f @ 30fps

## Installation

```bash
npx 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.

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

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

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` | `string` | `"Introducing"` | Single-line text shared by both scale phases |
| `giantFontSize` | `number` | `520` | Font size before the hard cut |
| `compactFontSize` | `number` | `132` | Font size after the hard cut |
| `fontWeight` | `number` | `700` | Shared CSS font-weight |
| `gradientStart` | `string` | `"#f04a14"` | Color at the left edge of the revealed text |
| `gradientEnd` | `string` | `"#f3f1f1"` | Color across the right portion of the revealed text |
| `ghostColor` | `string` | `"#170b0a"` | Color of the text ahead of the reveal boundary |
| `backgroundColor` | `string` | `"#000000"` | Full-frame background color |
| `anchorOffsetX` | `number` | `-16` | Compact line offset from the frame center |
| `giantTravel` | `number` | `400` | Leftward travel before the cut |
| `settleTravel` | `number` | `160` | Compact entrance distance before it stops at the anchor |
| `cutFrame` | `number` | `13` | First frame that renders the compact layer |
| `revealSoftness` | `number` | `14` | Width of the soft mask boundary as a percentage of the text box |
| `compactBlur` | `number` | `12` | Starting blur after the cut in pixels |
| `speed` | `number` | `1` | Playback speed multiplier |
| `className` | `string` | — | Optional className passed to the full-frame root |

## Use when
- A title should begin at an imposing scale and resolve through a deliberately abrupt editorial cut.
- A gradient reveal needs to continue coherently across two very different framings.
- A compact product-introduction beat needs more force than a continuous scale-down animation.

## Don't use when
- The scale change must feel continuous — use `scale-down-fade` or `zoom-words`.
- The text should remain one size while a gradient passes over it — use `shimmer-sweep`.
- The background must remain transparent because the unrevealed ghost relies on a black field.