This is a submission for the MLH x DEV Writing Challenge
Every sprint, developers stare at thousands of lines of diffs, cryptic commit logs, and passive-aggressive review comments. Reviewing massive pull requests is mentally exhausting.
During this MLH Hackathon, our team asked a question: What if every dramatic Git conflict, midnight hotfix, and architecture feud was automatically adapted into a dynamic comic drama short?
Meet GitDrama — an open-source tool and CI/CD workflow that ingests GitHub PR diffs and discussion threads, transforms technical tension into a 3-act narrative script, and renders a 30-to-45-second animated comic short directly via code.
- What I Built GitDrama bridges software engineering workflows with procedural video synthesis. Instead of static screenshot generators, it dynamically maps software conflicts into an episodic comic storyboard.
Core Capabilities:
Automated Conflict & Sentiment Analysis: Connects with GitHub via REST/GraphQL API to parse AST diffs, changed files, and discussion threads.
Dramaturgical Script Engine: Analyzes PR arguments (e.g., tabs vs. spaces, race conditions, breaking API changes) and outputs a structured comic storyboard featuring archetypal characters (The Over-optimistic Junior, The Cynical Architect, and The Panic-driven PM).
Procedural Motion Comic Renderer: Powered by Remotion (React-based video framework), rendering dynamic camera zooms, manga-style speedlines, bouncing speech bubbles, and retro sound cues in code.
GitHub Action Integration: Runs on pull request closure or on-demand via comment trigger, generating a lightweight MP4/GIF summary attached directly to the PR timeline.
- Tools and Technologies Frontend & Rendering Engine: React 19, TypeScript, Tailwind CSS, Remotion Backend & Workflow: Node.js, Express, @octokit/rest (GitHub REST/GraphQL API), GitHub Actions SDK AI & Structured Output: OpenAI API / Anthropic API with strict Zod schema enforcement Audio & Visual FX: Web Audio API, Canvas API
- How It Works Architectural Overview: GitHub PR / Commit: Webhook or Action triggers upon PR event. Octokit API & Diff Parser: Extracts modified code lines, commit messages, and review comment threads. Structured Prompt Pipeline (Zod Schema): Translates technical conflict into a deterministic JSON storyboard with cast, panels, camera cues, and expressions. Remotion Composition Engine: Uses React state and frame interpolation to render anime speedlines, speech bubble springs, and camera shake. Output Delivery: Compiles into high-definition MP4 or an optimized GIF posted back to the PR comments. Key Implementation: Storyboard Schema
- What I Learned
Deterministic Video vs. Non-
deterministic AI: Early on, freeform LLM prompts broke our video timeline due to unexpected sentence lengths. Enforcing Zod Schema Validation with structured function calling made the rendering pipeline 100% resilient.
Video as Code (Video = f(frame)): Remotion fundamentally shifted our perspective on video processing. Controlling CSS transitions, camera physics, and canvas animations strictly through mathematical frame functions eliminated complex timeline sync bugs.
Prompt Engineering for Engineering Humor: Teaching an AI to balance technical jargon with punchy comic timing requires strict system prompt guardrails. Highlighting real diff metrics made the drama relatable. - What's Next? Custom Pixel-Art Avatars: Allowing engineering teams to map GitHub contributors to customized 8-bit avatars. Audio Synthesis: Integrating Web Speech API with cartoon pitch filters for authentic voice acting. Slack & Discord Bot: Streaming morning standup comic digests directly into team channels.
- Community Question What is the single most chaotic pull request or merge conflict you've ever dealt with? Drop your favorite war story in the comments below!
Top comments (1)
来讨论吧