Outline Fill Track Text

$ pnpm dlx 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.

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

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