workspace/.claude/skills/remotion-best-practices/rules/animations.md

name, description, metadata

name	description	metadata
animations	Fundamental animation skills for Remotion	tags animations, transitions, frames, useCurrentFrame

All animations MUST be driven by the useCurrentFrame() hook.
Write animations in seconds and multiply them by the fps value from useVideoConfig().

For eased motion, prefer interpolate with explicit frame ranges and an easing—especially Easing.bezier, which matches CSS cubic-bezier so timing can be shared with web specs and curve editors. See timing.

import { useCurrentFrame, Easing } from "remotion";

export const FadeIn = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const opacity = interpolate(frame, [0, 2 * fps], [0, 1], {
    extrapolateRight: "clamp",
    extrapolateLeft: "clamp",
    easing: Easing.bezier(0.16, 1, 0.3, 1),
  });

  return <div style={{ opacity }}>Hello World!</div>;
};

CSS transitions or animations are FORBIDDEN - they will not render correctly.
Tailwind animation class names are FORBIDDEN - they will not render correctly.