> ## Documentation Index
> Fetch the complete documentation index at: https://docs.open-animate.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart

> Your agent's first video is 60 seconds away

<Steps>
  ## Scaffold

  ```bash theme={null}
  npx oanim init my-video
  cd my-video
  ```

  Creates a project with `@oanim/core` — animation presets, transitions, components, and design tokens pre-configured.

  ## Compose

  Your agent writes `src/MyComp.tsx`:

  ```tsx theme={null}
  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>
    );
  };
  ```

  ## Preview

  ```bash theme={null}
  npx remotion studio
  ```

  Opens a live preview at `localhost:3000` with timeline scrubbing.

  ## Render

  ```bash theme={null}
  npx oanim render
  ```

  Outputs `out/MyComp.mp4`. Override with flags:

  ```bash theme={null}
  npx oanim render --fps 60 --res 3840x2160 --codec h265
  ```

  ## Generate and use media (optional)

  ```bash theme={null}
  npx oanim login
  npx oanim assets gen-image --prompt "dark abstract gradient, purple and blue" --out public/bg.png
  ```

  Then use in your composition:

  ```tsx theme={null}
  import { Img, staticFile } from 'remotion';

  <Img
    src={staticFile('bg.png')}
    style={{ width: '100%', height: '100%', objectFit: 'cover' }}
  />
  ```

  You can also generate video and audio — see the [Working with Media](/guides/media) guide.
</Steps>

## Next steps

<CardGroup cols={2}>
  <Card title="Templates" href="/templates">
    5 pre-built compositions to start from.
  </Card>

  <Card title="Animation Presets" href="/core/element-animations">
    8 animations, 7 springs, 5 easings.
  </Card>

  <Card title="Working with Media" href="/guides/media">
    Generate images, video, and audio with AI.
  </Card>

  <Card title="Composition Patterns" href="/guides/composition-patterns">
    Multi-scene architecture and layering.
  </Card>
</CardGroup>