Skip to main content
1
Scaffold
2
npx oanim init my-video
cd my-video
3
Creates a project with @oanim/core — animation presets, transitions, components, and design tokens pre-configured.
4
Compose
5
Your agent writes src/MyComp.tsx:
6
import { AbsoluteFill, useCurrentFrame, useVideoConfig } from 'remotion';
import { fadeUp, Background, SafeArea, palettes } from '@oanim/core';

const colors = palettes.dark;

export const MyComp: React.FC = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  return (
    <AbsoluteFill>
      <Background gradient={`linear-gradient(135deg, ${colors.bg}, ${colors.bgAlt})`} />
      <SafeArea style={{ justifyContent: 'center', alignItems: 'center' }}>
        <div style={{
          ...fadeUp({ frame, fps, delay: 0.2 }),
          fontSize: 80,
          fontWeight: 700,
          color: colors.text,
        }}>
          Hello World
        </div>
      </SafeArea>
    </AbsoluteFill>
  );
};
7
Preview
8
npx remotion studio
9
Opens a live preview at localhost:3000 with timeline scrubbing.
10
Render
11
npx oanim render
12
Outputs out/MyComp.mp4. Override with flags:
13
npx oanim render --fps 60 --res 3840x2160 --codec h265
14
Generate and use media (optional)
15
npx oanim login
npx oanim assets gen-image --prompt "dark abstract gradient, purple and blue" --out public/bg.png
16
Then use in your composition:
17
import { Img, staticFile } from 'remotion';

<Img
  src={staticFile('bg.png')}
  style={{ width: '100%', height: '100%', objectFit: 'cover' }}
/>
18
You can also generate video and audio — see the Working with Media guide.

​
Next steps

Templates

5 pre-built compositions to start from.

Animation Presets

8 animations, 7 springs, 5 easings.

Working with Media

Generate images, video, and audio with AI.

Composition Patterns

Multi-scene architecture and layering.