Tracking In

Text 118

About

Letter-spacing collapses and blur clears with a springy entrance.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Tracking In to your project and fits it to your theme.

Code

How Tracking In is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { Player } from "@remotion/player";
import { TrackingIn } from "@/components/ui/tracking-in";

const settings = {
  startTracking: 0.5,
  startBlur: 12,
  fontSize: 96,
  speed: 1,
  color: "#171717",
};

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };

  return (
    <div className="h-screen w-screen">
      <Player
        component={TrackingIn}
        inputProps={{
          text: "Tracking In",
          startTracking: s.startTracking,
          startBlur: s.startBlur,
          fontSize: s.fontSize,
          speed: s.speed,
          color: s.color,
        }}
        durationInFrames={90}
        compositionWidth={1280}
        compositionHeight={720}
        fps={30}
        loop
        autoPlay
        style={{ width: "100%", height: "100%" }}
      />
    </div>
  );
}