Remotion text animations: 256 free animated text effects, with code

Last updated: November 9, 2026

To make animated text effects in Remotion, every style value of the text (opacity, position, blur, letter spacing) has to be computed from the current frame with useCurrentFrame() and interpolate() or spring(). You split the text into words or letters and offset each one's start frame. Or you install a finished effect: Remocn has 256 free, MIT-licensed text animation components for Remotion, plus 31 caption styles, added with npx shadcn@latest add @remocn/<name>.

Each component is copied into your project as one TypeScript file. There is no runtime package to depend on, and you can edit the source.

How to animate text in Remotion

A word-by-word reveal written by hand looks like this:

import { interpolate, useCurrentFrame } from "remotion";
 
export const WordReveal = ({ text }: { text: string }) => {
  const frame = useCurrentFrame();
 
  return (
    <h1 style={{ fontSize: 96 }}>
      {text.split(" ").map((word, i) => {
        // Each word starts 4 frames after the previous one and takes 12 frames.
        const progress = interpolate(frame - i * 4, [0, 12], [0, 1], {
          extrapolateLeft: "clamp",
          extrapolateRight: "clamp",
        });
        return (
          <span
            key={i}
            style={{
              display: "inline-block",
              marginRight: "0.25em",
              opacity: progress,
              translate: `0 ${(1 - progress) * 20}px`,
            }}
          >
            {word}
          </span>
        );
      })}
    </h1>
  );
};

The same effect from Remocn, followed by a highlighted line:

npx shadcn@latest add @remocn/staggered-fade-up @remocn/marker-highlight

import { AbsoluteFill, Sequence } from "remotion";
import { MarkerHighlight } from "@/components/remocn/marker-highlight";
import { StaggeredFadeUp } from "@/components/remocn/staggered-fade-up";
 
export const Hook = () => (
  <AbsoluteFill>
    <Sequence durationInFrames={90}>
      <StaggeredFadeUp text="Every launch needs a video" staggerDelay={4} />
    </Sequence>
    <Sequence from={90} durationInFrames={90}>
      <MarkerHighlight before="Yours ships " highlight="today" after="." />
    </Sequence>
  </AbsoluteFill>
);

Every component page lists the component's props and its natural length in frames at 30fps. That length is the minimum for its Sequence. Add hold frames on top if the text should stay on screen after it settles.

Remotion text animation pitfalls

These are the mistakes that make text flicker, jump or render differently from the preview. Remocn's text components handle each of them in their source, which you can read after install.

• CSS transitions and keyframes don't render. Remotion renders frames out of order and in parallel, so wall-clock animation never reaches the MP4. None of the typography components uses a CSS transition, animation or @keyframes; every value comes from the frame.
• Math.random() changes on every render. Scrambles and glitches built on it flicker and differ between render threads. None of the components calls Math.random(). The ones with randomness in them, such as matrix-decode, rgb-glitch-text and type-wall, use Remotion's seeded random(), so frame 40 always looks the same.
• The font isn't loaded on the first frame. The text renders in a fallback font, and anything measured from it (line widths, where a highlight or caret sits) is wrong. Most of the components load their font through @remotion/google-fonts, and most of the ones that lay text out by measuring it hold the render with delayRender() until the font has loaded and the measurement is done.
• Unclamped interpolate() keeps going. Without extrapolateRight: "clamp", a fade passes 1 and a slide overshoots its end position. The components clamp their interpolations.
• Timing written in frames breaks at another frame rate. typewriter takes charsPerSecond and converts it with the composition's fps. Almost every component also takes a speed prop that retimes the whole effect without editing its code.
• Spaces collapse when text is split into spans. Splitting per character drops the spaces between words. Per-letter components such as soft-blur-in and typewriter render with white-space: pre, so the spaces stay.

Which Remocn text animation to use

Twenty-one components picked by the job they do. The Typography page lists all 256 text animation components.

For subtitles timed to speech, see the captions section: 31 caption styles that render from a transcript.

Remocn vs Remotion Bits vs snapcn vs hand-rolled

Facts about the other libraries come from their own sites, checked on November 9, 2026.

The options combine. A Remocn component is plain Remotion code in your project, so you can put it next to Remotion Bits primitives or your own effects in the same composition.

Using Remocn text animations from an AI agent

• Agent skill: npx skills add Remocn/remocn. The agent reads the live component index from remocn.dev and picks text effects by their use and avoid notes.
• Plugin for Claude Code and Codex: /plugin install remocn --marketplace Remocn/remocn, then /remocn:video <brief>.
• MCP server: add https://remocn.dev/mcp to any MCP client. No auth. Ask for "a typewriter headline" and search_components returns matching text effects with install commands. See MCP server.
• Plain text: every Typography page in one file at /llms-full/typography.txt, and every component with its use / avoid signal at /llms-components.txt. Any docs URL returns Markdown when you append .md.

FAQ

What's next

• Typography: all 256 text animation components, grouped by category
• Captions: 31 transcript-driven caption styles
• Words on screen: how to write lines people can read in two seconds
• Installation: add Remocn to an existing Remotion project