Auto Intro

Turn any code repo into a polished 45–60s intro video, locally. AutoIntro reads your project, recreates its UI as animated motion-graphics, and renders with Remotion — no screen recording, no uploads.

Comment

Inspiration

Every hackathon team ships a great project but scrambles to make a demo video at the deadline — and many submissions are CLIs, SDKs, or APIs with no obvious UI to record. A repo, though, is always there and fully describes the project. So we asked: what if you could generate a polished intro video straight from the code, locally, in one command?

What it does

Point AutoIntro at a local repo and it produces a 45–60s intro video (.mp4):

  • Reads the repo — identity, problem, features, tech stack, and how it's used (CLI / SDK / web app / API / mobile).
  • Extracts its design — palette, fonts, brand — so the video looks like your product.
  • Writes a Project Brief you review & edit before anything renders (accuracy gate that also saves tokens).
  • Directs a storyboard with Gemini and recreates the UI as animated vector motion-graphics (no flaky screen recording) — terminal flows for CLIs, code snippets for SDKs, request/response for APIs, dashboards for analytics.
  • Renders locally with Remotion. Nothing is uploaded; only the LLM calls leave your machine.

How we built it

TypeScript end-to-end. A local Fastify server + single-page web UI drives the flow; the pipeline is analyze → inspect design → component inventory → brief (approval gate) → direct → render. Gemini (@google/genai) does triage + story direction against a zod-validated Storyboard contract; a 42-primitive animated UI-kit (built in React/Remotion, themed per project) recreates the product's interface; Remotion renders the frames to MP4. Shiki powers code scenes, lucide + simple-icons provide vector icons (no emoji).

Challenges we ran into

  • Determinism in Remotion — every animation had to be driven by frame number (no Date/random).
  • Not crashing on LLM output — malformed director props could abort an entire render; we added defensive defaults + React error boundaries so a bad element degrades to blank instead of killing the video.
  • Accuracy — early versions invented npx install commands and fake URLs. We added deterministic usageType detection, nullable install/links (never invented), a conditional CTA, and the human brief-gate.
  • Real-world palettes — shadcn light themes set surface == background and a near-black accent; we sanitize extracted palettes so panels and accents stay legible and vivid.
  • Transient Gemini 503s — added retry with backoff.

Accomplishments that we're proud of

  • Goes from a cold repo to a themed, on-brand intro video with zero manual editing — verified on real projects (a CLI, an SDK analytics platform, a recruitment web app, a todo app).
  • A reusable 42-primitive motion-graphics kit + a story engine that adapts the narrative to each project type.
  • Local-first & private (nothing uploaded), 319 passing tests, crash-safe rendering.

What we learned

Grounding the LLM with deterministic facts + a human-reviewed brief beats letting the model "guess" — it's more accurate and cheaper. And recreating UI as vector graphics is far more controllable (and often better looking) than recording real screens.

What's next for AutoIntro

Background music & SFX, more visual themes, vertical/social export formats, richer per-element color, optional 3D/camera moves, and publishing to npm so anyone can npx auto-intro.

Built With

Share this project:

Updates