Kinetic typography in Remotion

Kinetic typography in Remotion is a sequence of short shots: each line or word gets a fixed run of frames, moves a little inside it, and cuts to the next. The energy comes from the cuts and the rhythm, not from long tweens. Build it with <Series>, drive every value from useCurrentFrame(), and keep holds regular.

Three principles

Cut, don't crossfade. A crossfade between two lines puts both on screen at half opacity — for a few frames the viewer reads neither. A cut is instant and reads as intent. Inside a shot, move; between shots, cut.

One thing is biggest. Each beat has one word that matters. Make it the largest thing in the frame, or the last to arrive, or the only one in colour — not all three, and never on two words at once.

Keep a beat. Give shots regular lengths — say 36 or 48 frames at 30fps — and break the pattern once, on purpose, for the line that matters. Irregular holds read as a mistake; one broken rhythm reads as emphasis.

A punchy word-scale cut, in code

Each word punches up from a third of its size over a few frames, then pushes slowly forward until the cut:

import { AbsoluteFill, Easing, interpolate, Series, useCurrentFrame } from "remotion";

const Punch = ({ word }: { word: string }) => {
  const frame = useCurrentFrame();
  const punch = interpolate(frame, [0, 5], [0.33, 1], {
    easing: Easing.out(Easing.cubic),
    extrapolateRight: "clamp",
  });
  const push = 1 + frame * 0.003; // a slow drift toward the viewer

  return (
    <AbsoluteFill style={{ alignItems: "center", justifyContent: "center" }}>
      <h1
        style={{
          fontSize: 140,
          fontWeight: 800,
          textRendering: "geometricPrecision",
          transform: `scale(${punch * push})`,
        }}
      >
        {word}
      </h1>
    </AbsoluteFill>
  );
};

export const Titles = () => (
  <Series>
    {["Build.", "Ship.", "Show it."].map((word) => (
      <Series.Sequence key={word} durationInFrames={24}>
        <Punch word={word} />
      </Series.Sequence>
    ))}
  </Series>
);

Why these choices:

• Five frames for the punch, cubic ease-out. A quint or expo ease-out spends its last frames moving less than a pixel each; on a 30fps clock that reads as a freeze before the push starts.
• textRendering: "geometricPrecision". Scaling text re-hints the letter stems every frame and the letterforms visibly shake. This turns that off.
• No transition between sequences. <Series> cuts when a sequence ends — exactly what you want.

For a multi-word line, pivot the scale on the baseline rather than the centre; see how to animate text in Remotion for why that removes the "stuck" look on scaled type.

Ready-made kinetic type

snapcn's text components are built on these rules, installed as source:

Punch Lines takes the whole script as one string — | starts a card, / starts a line inside it:

import { PunchLines } from "@/components/snap-cn/punch-lines";

<PunchLines script="Ready-made scenes / for Remotion. | One command. Own it. | snapcn." />;

Its durationInFrames is the sum of holds, and punchLinesDuration(script, holds) is exported so the composition length follows the script.

Next: typewriter effect in Remotion.

FAQ