Tracking In

Letter-spacing collapses and blur clears with a springy entrance

Installation

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

Usage

// 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}
  />
);

Props

PropTypeDefaultDescription
textrequired
stringThe text to animate
startTracking
number0.5Initial letter-spacing in em. Animates down to -0.03em.
startBlur
number12Initial blur radius in pixels. Animates down to 0.
fontSize
number96Font size in pixels
fontWeight
number700CSS font-weight
color
string"#171717"Text color (any valid CSS color)
speed
number1Playback speed multiplier (1 = normal, 2 = twice as fast)
className
stringOptional className passed to the underlying span