memi-design Remotion Video
Use this Note when the output should be a React-coded video project. Prefer a real Remotion scaffold over static storyboard prose when Studio is asked to preview, render, or hand off a video.
Current Workflow
- Create a project with
package.json,remotion.config.ts,src/index.ts,src/Root.tsx, and a storyboard module. - Preview with
npx remotion studio src/index.ts. - Render with
npx remotion render src/index.ts <composition-id> <output>. - For backend rendering, use Remotion's renderer APIs only after the project has a stable composition id, width, height, fps, duration, and props schema.
Scaffold Rules
- Keep the default composition id stable:
MemoireVideo. - Store generated projects under
.memoire/videos/<id>. - Put the render output under
.memoire/videos/<id>/dist/<id>.mp4. - Use React and Remotion primitives for timeline logic; avoid ad hoc DOM timers.
- Include
prefers-reduced-motionor low-motion alternates when the output will also be embedded in the Studio UI.
Quality Bar
- Every scene has a purpose: hook, proof, product action, result, CTA.
- Use transform and opacity for core motion.
- Reserve camera-like motion for product explanation, not decoration.
- Verify text fits 16:9 and 9:16 crops before rendering social variants.