How remotion-dev/template-prompt-to-motion-graphics-saas works
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: page.tsx Generation workspace · LandingPageInput.tsx Prompt entry · useGenerationApi.ts Generation API · route.ts Prompt validation and generation
Components 20
Prompt and conversation
- Prompt entry
src/components/LandingPageInput.tsx - Image attachments
src/hooks/useImageAttachments.ts - Generation workspace
src/app/generate/page.tsx - Conversation state
src/hooks/useConversationState.ts - Chat sidebar
src/components/ChatSidebar/ChatSidebar.tsx
Generation pipeline
- Generation API
src/hooks/useGenerationApi.ts - Prompt validation and generation
src/app/api/generate/route.ts - Skill selection and guidance
src/skills/index.ts - Response sanitization
src/helpers/sanitize-response.ts
Editing and preview
- Code editor
src/components/CodeEditor/CodeEditor.tsx - Babel compiler
src/remotion/compiler.ts - Animation state
src/hooks/useAnimationState.ts - Dynamic component
src/remotion/DynamicComp.tsx - Live Remotion preview
src/components/AnimationPlayer/index.tsx
Video rendering
- Render controls
src/components/AnimationPlayer/RenderControls/index.tsx - Render client
src/helpers/use-rendering.ts - Lambda render endpoint
src/app/api/lambda/render/route.ts - Render progress recovery
src/app/api/lambda/progress/route.ts
Other components
- User
- Remotion Lambda
Connections 21
- User → Prompt entry: enters prompt
README.md - Prompt entry → Image attachments: adds images
src/components/LandingPageInput.tsx - Prompt entry → Generation workspace: opens generation
- Generation workspace → Chat sidebar: shows conversation
src/app/generate/page.tsx - Generation workspace → Conversation state: tracks messages
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
src/app/api/generate/route.ts - Prompt validation and generation → Response sanitization: cleans response
README.md - Generation API → Response sanitization: sanitizes response
src/hooks/useGenerationApi.ts - Generation workspace → Code editor: presents code
src/app/generate/page.tsx - Generation workspace → Animation state: tracks animation
src/app/generate/page.tsx - Animation state → Babel compiler: compiles code
src/hooks/useAnimationState.ts - Dynamic component → Babel compiler: compiles component
src/remotion/DynamicComp.tsx - Generation workspace → Live Remotion preview: shows preview
src/app/generate/page.tsx - Live Remotion preview → Render controls: renders controls
src/components/AnimationPlayer/index.tsx - Render controls → Render client: starts render
src/components/AnimationPlayer/RenderControls/index.tsx - Render client → Lambda render endpoint: streams render request
- Lambda render endpoint → Remotion Lambda: renders video
src/app/api/lambda/render/route.ts - Render client → Render progress recovery: recovers progress
README.md - Render progress recovery → Remotion Lambda: reads progress