Tracking In

Letter-spacing collapses and blur clears with a springy entrance

Installation

$ pnpm dlx shadcn@latest add @remocn/tracking-in

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { TrackingIn } from "@/components/remocn/tracking-in";
 
const TrackingInScene = () => (
  <TrackingIn text="REMOCN" startTracking={0.6} startBlur={14} />
);
 
export const RemotionRoot = () => (
  <Composition
    id="TrackingIn"
    component={TrackingInScene}
    durationInFrames={90}
    fps={30}
    width={1280}
    height={720}
  />
);

Props8

Prop	Type	Default
textrequired	string— The text to animate
startTracking	number0.5 Initial letter-spacing in em. Animates down to -0.03em.
startBlur	number12 Initial blur radius in pixels. Animates down to 0.
fontSize	number96 Font size in pixels
fontWeight	number700 CSS font-weight
color	string"#171717" Text color (any valid CSS color)
speed	number1 Playback speed multiplier (1 = normal, 2 = twice as fast)
className	string— Optional className passed to the underlying span

textrequiredstring
The text to animate
startTrackingnumber
Initial letter-spacing in em. Animates down to -0.03em.
Default0.5
startBlurnumber
Initial blur radius in pixels. Animates down to 0.
Default12
fontSizenumber
Font size in pixels
Default96
fontWeightnumber
CSS font-weight
Default700
colorstring
Text color (any valid CSS color)
Default"#171717"
speednumber
Playback speed multiplier (1 = normal, 2 = twice as fast)
Default1
classNamestring
Optional className passed to the underlying span