oanim init

oanim init [name]

my-video/
├── src/
│   ├── index.ts        # Remotion entry point
│   ├── Root.tsx         # Remotion root with Composition
│   └── MyComp.tsx       # Starter component using @oanim/core
├── public/              # Static assets directory
├── animate.json         # Render configuration
├── package.json         # Dependencies
└── tsconfig.json        # TypeScript config

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,
          textAlign: 'center',
        }}>
          Hello, oanim
        </div>
      </SafeArea>
    </AbsoluteFill>
  );
};

{
  "name": "My Video",
  "compositionId": "MyComp",
  "render": {
    "fps": 30,
    "width": 1920,
    "height": 1080,
    "codec": "h264",
    "crf": 18
  },
  "props": {}
}

cd my-video

# Preview in browser
npx remotion studio

# Render to MP4
npx oanim render