Remotion vs Framer Motion

Short answer: they do different jobs. Motion (formerly Framer Motion) animates your app's UI live in the browser. Remotion renders React components into a video file. Motion's animations run on real time, so they do not render correctly inside Remotion — in a video, every value has to come from the frame number.

Side by side

Why Motion does not work inside a Remotion render

This looks fine in the Remotion Player:

import { motion } from "motion/react";

// Don't: runs on wall-clock time, not on the video's frame.
export const Title = () => (
  <motion.h1 initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }}>
    Ship faster
  </motion.h1>
);

Then you render, and it is wrong. A Remotion render does not play the video: it opens the page, jumps to a frame, takes a screenshot, and does that for every frame — across several browser tabs, in any order. Motion's animation starts when the element mounts and advances with real time, so each screenshot catches it at whatever moment the tab happened to be at. Remotion's docs call this out: animations not driven by useCurrentFrame(), such as CSS transitions, cause flickering in renders.

The Remotion version reads the frame instead:

import { interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";

export const Title = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const enter = spring({ frame, fps, config: { damping: 200 } });

  return (
    <h1
      style={{
        opacity: enter,
        transform: `translateY(${interpolate(enter, [0, 1], [20, 0])}px)`,
      }}
    >
      Ship faster
    </h1>
  );
};

A spring with damping: 200 settles without overshoot, and frame 45 is always the same picture, on any machine.

When you want both

Most product sites use both, for different things:

• Motion on the site. Hover states, menus, page transitions, scroll reveals — anything that responds to the person using it.
• Remotion for the video. The launch video, the demo on the landing page, the clip for X. Embed it with @remotion/player or export an MP4.

If a design exists as a Motion animation and you want it in a video, port the values, not the code: the durations, the spring stiffness, the offsets. Then drive them from useCurrentFrame().

Skip the porting

snapcn's components are written from scratch on Remotion's frame clock, so they render exactly as they preview. Text animations, prompts, device frames:

npx shadcn@latest add @snapcn/text-build

See how to animate text in Remotion for the rules that keep scaled type from juddering in a render.

Next: Remotion vs Motion Canvas.

FAQ