Typewriter effect in Remotion

A typewriter effect in Remotion is text.slice(0, count), where count comes from the frame number through interpolate(). Ease the count instead of typing at a constant rate, keep the caret solid while it types, and blink it only once the line is done.

The minimum

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

export const Typewriter = ({ text }: { text: string }) => {
  const frame = useCurrentFrame();
  const start = 10;
  const end = start + text.length * 2; // ~15 characters a second at 30fps

  const count = Math.floor(
    interpolate(frame, [start, end], [0, text.length], {
      extrapolateLeft: "clamp",
      extrapolateRight: "clamp",
    }),
  );

  return (
    <AbsoluteFill style={{ alignItems: "center", justifyContent: "center" }}>
      <p style={{ fontSize: 64, fontFamily: "monospace", whiteSpace: "pre" }}>
        {text.slice(0, count)}
        <span style={{ opacity: 1 }}>▍</span>
      </p>
    </AbsoluteFill>
  );
};

Two details that matter:

• Math.floor, then slice. A character is either there or it is not. Do not fade letters in; a half-transparent glyph reads as a rendering fault.
• whiteSpace: "pre". Without it, a trailing space collapses and the caret jumps back a character every time a word ends.

Make the rate human

Nobody types at a constant rate. Measured on a real recording, typing accelerates through the first word and settles over the last few characters — an ease-in-out sine fits it closely. Pass that as the easing:

import { Easing, interpolate } from "remotion";

const count = Math.floor(
  interpolate(frame, [start, end], [0, text.length], {
    easing: Easing.inOut(Easing.sin),
    extrapolateLeft: "clamp",
    extrapolateRight: "clamp",
  }),
);

A bonus of the eased count: any length of copy finishes in the same window, so a longer line does not push the rest of your timeline back.

The caret: solid while typing, blinking when idle

const blinkOn = Math.floor((frame - end) / 15) % 2 === 0; // half a second at 30fps
const caretOpacity = frame < end || blinkOn ? 1 : 0;

A caret that blinks mid-word makes the whole line look like it is flickering. Operating systems hold it solid while keys are pressed; do the same. And compute the blink from the frame — a CSS @keyframes blink runs on wall-clock time, and a render does not.

If the camera follows the text

Pin a camera to the character count and it lurches once per keystroke. Pin it to the continuous curve underneath — the same interpolate() without the Math.floor — and it glides, while the caret hops onto its mark each frame.

Ready-made typing components

snapcn has three components built on this, each installed as source:

npx shadcn@latest add @snapcn/type-morph

For a terminal rather than a headline, see terminal and code-typing animation in Remotion.

Next: kinetic typography in Remotion.

FAQ