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
Explore one-time kits from ₹499

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.
01

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.

02

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 files
03

Change 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.

04

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.

05

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.

06

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.