123mkdir my-video && cd my-video
pnpm init
pnpm add egaki vite @vitejs/plugin-react spiceflow

1234567// vite.config.ts
import { defineConfig } from 'vite'
import { video } from 'egaki/vite'

export default defineConfig({
  plugins: [video({ entry: './video.mdx' })],
})

123456789101112131415// tsconfig.json
{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "jsx": "react-jsx",
    "noImplicitAny": false,
    "strict": true,
    "skipLibCheck": true,
    "plugins": [{ "name": "@mdx-js/typescript-plugin" }]
  },
  "mdx": { "checkMdx": true },
  "include": ["**/*.ts", "**/*.tsx", "**/*.d.ts", "**/*.mdx"]
}

12// egaki-env.d.ts
import 'egaki/mdx-components'

12345678910111213141516171819---
fps: 30
---

# Hello duration=3s

<Opacity from={0} to={1} duration={1 * FPS}>
  <div style={{ fontSize: 72, fontWeight: 900, color: 'white' }}>
    Hello World
  </div>
</Opacity>

# Goodbye duration=2s

<TranslateX from={0} to={200} duration={0.5 * FPS}>
  <div style={{ fontSize: 48, color: '#818cf8' }}>
    Bye!
  </div>
</TranslateX>

1npx vite