# remotion-dev/template-prompt-to-motion-graphics-saas architecture

> Architecture diagram of the GitHub repository remotion-dev/template-prompt-to-motion-graphics-saas, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-10). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/remotion-dev/template-prompt-to-motion-graphics-saas
- Repository: https://github.com/remotion-dev/template-prompt-to-motion-graphics-saas

## Overview

This is a prompt-to-motion-graphics web app: a user submits a prompt (optionally with images), the system validates it, selects relevant skills, generates Remotion code, sanitizes and compiles it, then shows an editable live preview. Users can also render and download video through Remotion Lambda, with progress recovery. The README documents the generation stages; sampled source confirms compilation, preview, and Lambda streaming. Some UI-to-API wiring is not excerpted, so those links rely on documented workflow rather than claims of inspected call sites.

Main entry points: [`src/app/generate/page.tsx`](https://github.com/remotion-dev/template-prompt-to-motion-graphics-saas/blob/main/src/app/generate/page.tsx) (Generation workspace), [`src/components/LandingPageInput.tsx`](https://github.com/remotion-dev/template-prompt-to-motion-graphics-saas/blob/main/src/components/LandingPageInput.tsx) (Prompt entry), [`src/hooks/useGenerationApi.ts`](https://github.com/remotion-dev/template-prompt-to-motion-graphics-saas/blob/main/src/hooks/useGenerationApi.ts) (Generation API), [`src/app/api/generate/route.ts`](https://github.com/remotion-dev/template-prompt-to-motion-graphics-saas/blob/main/src/app/api/generate/route.ts) (Prompt validation and generation)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["Prompt and conversation"]
  node_landing["Prompt entry"]
  node_attachments["Image attachments"]
  node_generatepage["Generation workspace<br/>[page.tsx]"]
  node_conversation["Conversation state"]
  node_chat["Chat sidebar<br/>[ChatSidebar.tsx]"]
end

subgraph group_generation["Generation pipeline"]
  node_generationapi["Generation API"]
  node_generationroute["Prompt validation and generation<br/>[route.ts]"]
  node_skills["Skill selection and guidance<br/>[index.ts]"]
  node_sanitization["Response sanitization"]
end

subgraph group_preview["Editing and preview"]
  node_editor["Code editor<br/>[CodeEditor.tsx]"]
  node_compiler["Babel compiler<br/>[compiler.ts]"]
  node_animationstate["Animation state"]
  node_dynamiccomp["Dynamic component<br/>[DynamicComp.tsx]"]
  node_player["Live Remotion preview<br/>[index.tsx]"]
end

subgraph group_rendering["Video rendering"]
  node_rendercontrols["Render controls<br/>[index.tsx]"]
  node_renderhook["Render client<br/>[use-rendering.ts]"]
  node_renderroute["Lambda render endpoint<br/>[route.ts]"]
  node_progressroute["Render progress recovery<br/>[route.ts]"]
end

node_user(("User"))
node_lambda(("Remotion Lambda"))

node_user -->|"enters prompt"| node_landing
node_landing -->|"adds images"| node_attachments
node_landing -->|"opens generation"| node_generatepage
node_generatepage -->|"shows conversation"| node_chat
node_generatepage -->|"tracks messages"| node_conversation
node_chat -.->|"submits prompt"| node_generationapi
node_generationapi -.->|"requests generation"| node_generationroute
node_generationroute -->|"loads skills"| node_skills
node_generationroute -->|"cleans response"| node_sanitization
node_generationapi -->|"sanitizes response"| node_sanitization
node_generatepage -->|"presents code"| node_editor
node_generatepage -->|"tracks animation"| node_animationstate
node_animationstate -->|"compiles code"| node_compiler
node_dynamiccomp -->|"compiles component"| node_compiler
node_generatepage -->|"shows preview"| node_player
node_player -->|"renders controls"| node_rendercontrols
node_rendercontrols -->|"starts render"| node_renderhook
node_renderhook -.->|"streams render request"| node_renderroute
node_renderroute -->|"renders video"| node_lambda
node_renderhook -->|"recovers progress"| node_progressroute
node_progressroute -.->|"reads progress"| node_lambda

click node_landing "https://github.com/remotion-dev/template-prompt-to-motion-graphics-saas/blob/main/src/components/LandingPageInput.tsx"
click node_attachments "https://github.com/remotion-dev/template-prompt-to-motion-graphics-saas/blob/main/src/hooks/useImageAttachments.ts"
click node_generatepage "https://github.com/remotion-dev/template-prompt-to-motion-graphics-saas/blob/main/src/app/generate/page.tsx"
click node_conversation "https://github.com/remotion-dev/template-prompt-to-motion-graphics-saas/blob/main/src/hooks/useConversationState.ts"
click node_chat "https://github.com/remotion-dev/template-prompt-to-motion-graphics-saas/blob/main/src/components/ChatSidebar/ChatSidebar.tsx"
click node_generationapi "https://github.com/remotion-dev/template-prompt-to-motion-graphics-saas/blob/main/src/hooks/useGenerationApi.ts"
click node_generationroute "https://github.com/remotion-dev/template-prompt-to-motion-graphics-saas/blob/main/src/app/api/generate/route.ts"
click node_skills "https://github.com/remotion-dev/template-prompt-to-motion-graphics-saas/blob/main/src/skills/index.ts"
click node_sanitization "https://github.com/remotion-dev/template-prompt-to-motion-graphics-saas/blob/main/src/helpers/sanitize-response.ts"
click node_editor "https://github.com/remotion-dev/template-prompt-to-motion-graphics-saas/blob/main/src/components/CodeEditor/CodeEditor.tsx"
click node_compiler "https://github.com/remotion-dev/template-prompt-to-motion-graphics-saas/blob/main/src/remotion/compiler.ts"
click node_animationstate "https://github.com/remotion-dev/template-prompt-to-motion-graphics-saas/blob/main/src/hooks/useAnimationState.ts"
click node_dynamiccomp "https://github.com/remotion-dev/template-prompt-to-motion-graphics-saas/blob/main/src/remotion/DynamicComp.tsx"
click node_player "https://github.com/remotion-dev/template-prompt-to-motion-graphics-saas/blob/main/src/components/AnimationPlayer/index.tsx"
click node_rendercontrols "https://github.com/remotion-dev/template-prompt-to-motion-graphics-saas/blob/main/src/components/AnimationPlayer/RenderControls/index.tsx"
click node_renderhook "https://github.com/remotion-dev/template-prompt-to-motion-graphics-saas/blob/main/src/helpers/use-rendering.ts"
click node_renderroute "https://github.com/remotion-dev/template-prompt-to-motion-graphics-saas/blob/main/src/app/api/lambda/render/route.ts"
click node_progressroute "https://github.com/remotion-dev/template-prompt-to-motion-graphics-saas/blob/main/src/app/api/lambda/progress/route.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_landing,node_attachments,node_generatepage,node_conversation,node_chat,node_user toneBlue
class node_generationapi,node_generationroute,node_skills,node_sanitization toneAmber
class node_editor,node_compiler,node_animationstate,node_dynamiccomp,node_player toneMint
class node_rendercontrols,node_renderhook,node_renderroute,node_progressroute toneRose
class node_lambda toneIndigo
```

## Components

### Prompt and conversation

- [Prompt entry](https://github.com/remotion-dev/template-prompt-to-motion-graphics-saas/blob/main/src/components/LandingPageInput.tsx): `src/components/LandingPageInput.tsx`
- [Image attachments](https://github.com/remotion-dev/template-prompt-to-motion-graphics-saas/blob/main/src/hooks/useImageAttachments.ts): `src/hooks/useImageAttachments.ts`
- [Generation workspace](https://github.com/remotion-dev/template-prompt-to-motion-graphics-saas/blob/main/src/app/generate/page.tsx): `src/app/generate/page.tsx`
- [Conversation state](https://github.com/remotion-dev/template-prompt-to-motion-graphics-saas/blob/main/src/hooks/useConversationState.ts): `src/hooks/useConversationState.ts`
- [Chat sidebar](https://github.com/remotion-dev/template-prompt-to-motion-graphics-saas/blob/main/src/components/ChatSidebar/ChatSidebar.tsx): `src/components/ChatSidebar/ChatSidebar.tsx`

### Generation pipeline

- [Generation API](https://github.com/remotion-dev/template-prompt-to-motion-graphics-saas/blob/main/src/hooks/useGenerationApi.ts): `src/hooks/useGenerationApi.ts`
- [Prompt validation and generation](https://github.com/remotion-dev/template-prompt-to-motion-graphics-saas/blob/main/src/app/api/generate/route.ts): `src/app/api/generate/route.ts`
- [Skill selection and guidance](https://github.com/remotion-dev/template-prompt-to-motion-graphics-saas/blob/main/src/skills/index.ts): `src/skills/index.ts`
- [Response sanitization](https://github.com/remotion-dev/template-prompt-to-motion-graphics-saas/blob/main/src/helpers/sanitize-response.ts): `src/helpers/sanitize-response.ts`

### Editing and preview

- [Code editor](https://github.com/remotion-dev/template-prompt-to-motion-graphics-saas/blob/main/src/components/CodeEditor/CodeEditor.tsx): `src/components/CodeEditor/CodeEditor.tsx`
- [Babel compiler](https://github.com/remotion-dev/template-prompt-to-motion-graphics-saas/blob/main/src/remotion/compiler.ts): `src/remotion/compiler.ts`
- [Animation state](https://github.com/remotion-dev/template-prompt-to-motion-graphics-saas/blob/main/src/hooks/useAnimationState.ts): `src/hooks/useAnimationState.ts`
- [Dynamic component](https://github.com/remotion-dev/template-prompt-to-motion-graphics-saas/blob/main/src/remotion/DynamicComp.tsx): `src/remotion/DynamicComp.tsx`
- [Live Remotion preview](https://github.com/remotion-dev/template-prompt-to-motion-graphics-saas/blob/main/src/components/AnimationPlayer/index.tsx): `src/components/AnimationPlayer/index.tsx`

### Video rendering

- [Render controls](https://github.com/remotion-dev/template-prompt-to-motion-graphics-saas/blob/main/src/components/AnimationPlayer/RenderControls/index.tsx): `src/components/AnimationPlayer/RenderControls/index.tsx`
- [Render client](https://github.com/remotion-dev/template-prompt-to-motion-graphics-saas/blob/main/src/helpers/use-rendering.ts): `src/helpers/use-rendering.ts`
- [Lambda render endpoint](https://github.com/remotion-dev/template-prompt-to-motion-graphics-saas/blob/main/src/app/api/lambda/render/route.ts): `src/app/api/lambda/render/route.ts`
- [Render progress recovery](https://github.com/remotion-dev/template-prompt-to-motion-graphics-saas/blob/main/src/app/api/lambda/progress/route.ts): `src/app/api/lambda/progress/route.ts`

### Other components

- **User**
- **Remotion Lambda**

## Connections

- User → Prompt entry: enters prompt (evidence: `README.md`)
- Prompt entry → Image attachments: adds images (evidence: `src/components/LandingPageInput.tsx`)
- Prompt entry → Generation workspace: opens generation
- Generation workspace → Chat sidebar: shows conversation (evidence: `src/app/generate/page.tsx`)
- Generation workspace → Conversation state: tracks messages (evidence: `src/app/generate/page.tsx`)
- Chat sidebar → Generation API: submits prompt
- Generation API → Prompt validation and generation: requests generation
- Prompt validation and generation → Skill selection and guidance: loads skills (evidence: `src/app/api/generate/route.ts`)
- Prompt validation and generation → Response sanitization: cleans response (evidence: `README.md`)
- Generation API → Response sanitization: sanitizes response (evidence: `src/hooks/useGenerationApi.ts`)
- Generation workspace → Code editor: presents code (evidence: `src/app/generate/page.tsx`)
- Generation workspace → Animation state: tracks animation (evidence: `src/app/generate/page.tsx`)
- Animation state → Babel compiler: compiles code (evidence: `src/hooks/useAnimationState.ts`)
- Dynamic component → Babel compiler: compiles component (evidence: `src/remotion/DynamicComp.tsx`)
- Generation workspace → Live Remotion preview: shows preview (evidence: `src/app/generate/page.tsx`)
- Live Remotion preview → Render controls: renders controls (evidence: `src/components/AnimationPlayer/index.tsx`)
- Render controls → Render client: starts render (evidence: `src/components/AnimationPlayer/RenderControls/index.tsx`)
- Render client → Lambda render endpoint: streams render request
- Lambda render endpoint → Remotion Lambda: renders video (evidence: `src/app/api/lambda/render/route.ts`)
- Render client → Render progress recovery: recovers progress (evidence: `README.md`)
- Render progress recovery → Remotion Lambda: reads progress