# Outline Fill Track Text
URL: https://remocn.dev/docs/typography/outline-fill-track-text

A rising lead word gives way to an outlined value that fills as one continuous track moves left

- Install: `npx shadcn@latest add @remocn/outline-fill-track-text`
- Vibe: premium
- Natural length: 80f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/outline-fill-track-text
```

## Usage

`OutlineFillTrackText` places the lead and value on one measured horizontal
track. The lead rises through a soft violet-black field, holds briefly, then
the whole track travels left. The value enters as a thin outline while a
separate filled duplicate is uncovered from left to right. Neither text layer
animates its opacity.

The track begins moving slowly as the lead settles. At frame 34 the value is
cut into view with the fill already crossing the `1`, matching the abrupt handoff
in the reference instead of exposing a stray piece of outline at the frame edge.

The default 80-frame cycle ends on the large filled value. It deliberately does
not include an exit, so the result can hold for the remainder of a scene or cut
directly into the next composition.

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { OutlineFillTrackText } from "@/components/remocn/outline-fill-track-text";

const OutlineFillTrackTextScene = () => (
  <OutlineFillTrackText leadText="Keep" valueText="100%" />
);

export const RemotionRoot = () => (
  <Composition
    id="OutlineFillTrackText"
    component={OutlineFillTrackTextScene}
    durationInFrames={80}
    fps={30}
    width={1280}
    height={720}
  />
);
```

### Controlling The Track

With `trackDistance={0}`, the component measures both strings and derives the
distance between their centers. `wordGap` controls the actual empty space
between their glyph boxes. A value that fits the composition stops on the
measured anchor. When it is wider than the available frame, the component adds
the exact overflow to the camera travel and leaves its trailing edge at
`endPadding` instead of stopping in the middle of the string.

Set a positive `trackDistance` to override the center-to-center distance. The
long-value overflow is still applied, so the camera continues through the final
visible glyphs. The track uses a symmetric ease-in-out curve: it accelerates
from rest, carries speed through the middle, and decelerates into the hold.

```tsx
<OutlineFillTrackText
  leadText="Save"
  valueText="42%"
  wordGap={180}
  endPadding={96}
  outlineWidth={3}
  fillDuration={38}
  glowColor="#64109a"
/>
```

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `leadText` | `string` | `"Keep"` | Lead copy shown at the beginning of the track |
| `valueText` | `string` | `"1000000000%"` | Outlined value that becomes the final filled text |
| `fontSize` | `number` | `368` | Shared font size in pixels |
| `fontWeight` | `number` | `700` | Shared CSS font-weight |
| `color` | `string` | `"#f4f3f6"` | Lead and value fill color |
| `outlineColor` | `string` | `"#e6e2ed"` | Value outline color |
| `outlineWidth` | `number` | `3` | Value outline width in pixels |
| `backgroundColor` | `string` | `"#030012"` | Full-frame background color |
| `glowColor` | `string` | `"#64109a"` | Diffuse color above the entering lead word |
| `enterOffset` | `number` | `240` | Lead word starting offset below its resting position |
| `trackDistance` | `number` | `0` | Fixed horizontal travel; zero derives it from measured text |
| `anchorOffsetX` | `number` | `-84` | Shared horizontal offset for the lead and final value anchors |
| `wordGap` | `number` | `220` | Gap between lead and value when travel is measured |
| `endPadding` | `number` | `96` | Right-side padding where an overflowing value stops |
| `fillDuration` | `number` | `38` | Duration of the left-to-right fill in frames |
| `speed` | `number` | `1` | Playback speed multiplier |
| `className` | `string` | — | Optional className passed to the full-frame root |

## Use when
- A statement should hand focus from a lead word to a large numeric value in one continuous move.
- An outlined percentage or metric should progressively gain visual weight without fading.
- A dark title beat needs a soft atmospheric entrance followed by a precise graphic fill.

## Don't use when
- The two texts should swap in place — use `value-swap` for a compact replacement.
- The value needs to count numerically — use `rolling-number` or `number-wheel`.
- The background must remain transparent because the entrance field is part of this effect.