Path Ride

$ pnpm dlx shadcn@latest add @remocn/path-ride

Usage

// src/Root.tsx
import { AbsoluteFill, Composition } from "remotion";
import { PathRide } from "@/components/remocn/path-ride";
 
const Tagline = () => (
  <AbsoluteFill style={{ backgroundColor: "#ff4d1a" }}>
    <PathRide
      text="Follow the line"
      color="#111111"
      lineColor="#fafafa"
      path="M 120 560 C 360 120 560 120 640 360 S 920 600 1160 160"
    />
  </AbsoluteFill>
);
 
export const RemotionRoot = () => (
  <Composition
    id="PathRide"
    component={Tagline}
    durationInFrames={96}
    fps={30}
    width={1280}
    height={720}
  />
);

The line draws along path over 40 frames with a dot at its head. The text trails the head, last letter first, and every letter stands on the curve, turned to its tangent and lifted clear of the line. Letters fade in over their first half-em on the curve.

From frame 50 the curve pulls taut: every point of the path moves toward a straight baseline, where arc length maps one to one onto x, so the text keeps its spacing while the line and the letters straighten together. The line then erases from its tail, and by frame 70 the text rests alone, centered on the frame.

path is an SVG path in a 1280×720 reference frame, centered and scaled to the composition; positions are sampled along it once. Letter widths and the baseline are measured from the loaded font. Sizes scale with height / 720.