Remotion Rule: Lottie

What it is

Remotion Rule: Lottie is a skill rule that activates automatically when working with Lottie animations in a Remotion project. It provides the coding patterns and API knowledge needed to embed Lottie JSON animations into programmatic video.

This rule targets developers using Remotion for video generation who want to add Lottie animations (motion graphics, icons, transitions) without manually reading the Lottie integration docs each time.

How it saves time or tokens

The rule injects the correct Remotion-Lottie API patterns into the AI agent context automatically. Instead of the agent searching docs or guessing the API, it knows the exact component props, animation timing hooks, and frame synchronization patterns. Token estimate per use is approximately 500 tokens.

How to use

1. Install the Remotion skills collection:

npx skills add remotion-dev/skills

1. The Lottie rule activates automatically when the agent detects Lottie-related work in a Remotion project.

1. Use @remotion/lottie components in your Remotion composition.

Example

import { Lottie, useLottie } from '@remotion/lottie';
import { useCurrentFrame, useVideoConfig } from 'remotion';
import animationData from './animation.json';

const MyAnimation: React.FC = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const animation = useLottie({ animationData });

  if (!animation) return null;

  return (
    <Lottie
      animationData={animation}
      playbackRate={1}
      style={{ width: 400, height: 400 }}
    />
  );
};

Related on TokRepo

• Coding Tools -- Developer frameworks and coding skills
• Video Tools -- Video creation and editing tools

Common pitfalls

• Lottie JSON files can be large. Optimize them with tools like lottie-compress or bodymovin settings to reduce bundle size.
• Frame synchronization between Remotion and Lottie requires matching fps settings. Mismatched frame rates cause animation speed issues.
• Not all Lottie features are supported by the web renderer. Complex After Effects expressions may not render correctly.