AI explainer video source code
Editable source for your explainer workflow.
See the React, TypeScript and Remotion project structure inside Vedika workflow kits. Edit scenes locally, connect your own API keys and render your videos.
- Editable React / TypeScript project
- Guides and setup templates
- Personal and client video use
PRACTICAL WORKFLOW
Find the file that controls your change.
A practical editing map from the kit source. Start with a working copy of your download.
Text, visual structure or motion?
Change content in the project plan before changing reusable components. Starter’s scene renderer chooses a diagram from the scene kind.
- work/<project-id>/plan.json → narration, labels and scene data.
- src/scenes/Scene.tsx → scene layout and diagram selection.
- src/components/Mechanisms.tsx → reusable visual diagrams.
- src/components/Motion.tsx → camera, titles and captions.
Check one edit before exporting
Run these inside 01_SOURCE_CODE after setup. Type checking finds code errors. Studio opens the local preview interface; it does not approve the final film for you.
npm run typecheck
npm run studio- Inspect the exact composition and aspect ratio you plan to export.
- Check your labels at phone size, then listen through the full narration.
What source-code access lets you change
Work with the project files instead of a fixed browser template. In the Remotion source you can edit scene components, timing, text, shapes and motion to fit your story. This requires learning the project structure and reviewing your changes. Buying the kit does not automatically generate a polished film from any prompt.
A map of the included project
These paths are from the Starter source project; higher kits include their additional workflow materials. Open the illustrated setup guide before running commands. Keep the dependency lockfile and make a working copy before experimenting.
OPEN_GUIDES.html Illustrated guide entry
01_SOURCE_CODE/
src/Root.tsx Remotion compositions
src/scenes/Scene.tsx Scene components
src/components/ Reusable visual building blocks
examples/ Structured project examples
tools/setup.mjs Setup script
docs/ Installation and workflow guides
.env.example Placeholder configuration
08_DOCUMENTATION/ Separate documentation filesChange one scene before rebuilding everything
First locate the scene that communicates one part of your explanation. Adjust its text, diagrams and timing, then check the preview at the intended aspect ratio. Validate the TypeScript project after code changes. Render a short preview and watch it before attempting a full export. This makes errors such as clipped labels or missing assets easier to isolate.
Keep code, assets and narration connected
A reliable source project needs the actual assets referenced by its scenes, the approved narration and the settings used to render it. Keep those together in your working project. Store source and license notes for externally obtained images, icons, music or fonts; possession of a kit does not transfer those third-party rights.
Choose the source workflow for your tools
All three kits include the Starter local Remotion project and guides. Pro adds the OpenAI and Google AI workflows; Max adds the advanced production blueprint, 1080p / 60 fps render presets and AWS setup guidance. The prices are ₹499, ₹1,499 and ₹3,499 once. API usage, cloud resources and third-party license costs are separate.
Know what you can share
The kit license permits creating personal and client videos, subject to the rights of any third-party materials you use. It does not permit redistribution or resale of the kit source, templates, guides or packaged assets. Keep real keys out of the files you share. Before purchase, you can inspect a small guide-and-source sample; it contains no video file.
Create with clarity
Understand the workflow before you choose.
Explore editable source, local setup, narration and the separate costs of API usage.