# Dim Progress
URL: https://remocn.dev/docs/captions/components/caption-dim-progress

The whole phrase sits on screen dimmed and each word brightens the moment it is spoken, with no motion at all

- Install: `npx shadcn@latest add @remocn/caption-dim-progress`
- Vibe: clean
- Natural length: transcript-driven

## Installation

```bash
npx shadcn@latest add @remocn/caption-dim-progress
```

## Usage

`CaptionDimProgress` shows the whole page at once with every upcoming word
dimmed. As the voice reaches a word it brightens to full strength and stays
there, so the bright part of the line is always what has been said. Nothing
moves and nothing changes colour, which keeps the captions calm over busy
footage. The component renders only the text block, so place it inside your own
`AbsoluteFill` — see [Positioning](/docs/captions/getting-started/positioning).

```tsx
import { AbsoluteFill } from "remotion";
import { CaptionDimProgress } from "@/components/remocn/caption-dim-progress";
import captions from "./captions.json";

export const MyScene = () => (
  <AbsoluteFill
    style={{
      justifyContent: "flex-end",
      alignItems: "center",
      paddingBottom: 108,
      paddingInline: 192,
    }}
  >
    <CaptionDimProgress captions={captions} dimOpacity={0.35} />
  </AbsoluteFill>
);
```

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `captions` | `Caption[]` | `—` | The timed transcript, in the `Caption` shape from `@remotion/captions`. Times are relative to the start of the surrounding `Sequence`. |
| `combineTokensWithinMilliseconds` | `number` | `1200` | How much speech one page may span before the next word starts a new page. Pages also break at the end of a sentence and on any pause of at least `holdMs` (300 ms minimum). |
| `holdMs` | `number` | `600` | How long a page stays after its last word when the next page is not already due. It fades out at the end of the hold. |
| `dimOpacity` | `number` | `0.35` | Opacity of words the voice has not reached yet. Each word brightens to full over about 90ms as it is spoken. |
| `fontSize` | `number` | `64` | Font size in pixels. |
| `fontWeight` | `number` | `800` | Font weight. The font itself is inherited. |
| `color` | `string` | `"#ffffff"` | Text colour, the same for spoken and upcoming words. |
| `shadow` | `boolean` | `true` | A tight text shadow that keeps the caption legible over bright footage. |
| `className` | `string` | `—` | Classes for the text block — width, font family, `uppercase`. |

## Use when
- Captions have to be read rather than watched — tutorials, explainers, accessibility-first edits where nothing should move.
- You want the viewer to read ahead while still seeing exactly where the voice is, without a colour or an animation competing with the footage.

## Don't use when
- You want the position of the voice to feel physical, filling through each word at speaking pace — use `caption-karaoke`.
- You want a coloured marker that travels from word to word — use `caption-underline` or `caption-highlight-box`.
- The phrase should stay completely static, with no per-word change at all — use `caption-subtitle`.