Open Source This may be one of the few non-technical Skills on the market written for technical personnel. If it’s helpful, please like and repost to support!

Capture Your Code History as a Personal Short Film - git-story-film Skill

Most of my followers are programmers, so this skill is written for you—or more accurately, for us.

Those who maintain code repositories always have a ready-made Git documentary on hand: the first commit, the first release, the busiest day, a midnight rollback, a rename, a migration, tens of thousands of stars. Yet all of this lies buried in git log, and newcomers only see the README.

git-story-film is a creative skill produced while promoting Raven. You give it a GitHub link, and Opus 5.5 acts as the director: sifting through thousands of commits to find story-worthy facts, assigning a protagonist to your project, choosing a visual style, and finally delivering a roughly two-minute hand-drawn animated short film to you.

What you’ll get:

• A 4K, 60fps MP4 with a music score synthesized in real-time from code;
• One-click generation, single continuous take, yet with source code modifiable—not some flashy AI slop;
• First-person subtitles from the protagonist, speaking to anyone hearing about the project for the first time;
• Authentic dates, commit hashes, and commit counts on screen—each commit becomes a bead, a lamp, or a leaf in the visuals;
• A Studio page viewable in the browser, plus the entire film’s source code.

This skill doesn’t just generate a film for you—it lets you act as a true director, helping you outline, storyboard, and script in advance. At each step, it pauses to show you something, and only proceeds when you give the nod.

First, Watch the Final Films: Four Repositories, Four Growth Stories

The same method yields four completely different films. The director first understands the product, then decides how your project “grows” visually.

Raven: Flying Always to the Right

Since Raven is a bird, I designed it hatching from an egg on paper, moving rightward along a timeline branch in one continuous take. Each commit is a shiny bead on the branch; when passing an important commit, the art style shifts—pencil, ink, Riso print, silk screen, blueprint. 128 seconds, bilingual (Chinese and English).

Video here

Hyrule Coder @hylarucoder · Sep 24 Translated from Chinese Show original Made a product story video using Opus 5.5!

Back in July last year, I wanted to do something similar, but was limited by large model capabilities and couldn’t pull it off—never thought we’d progress to this level so soon!

If last year’s me saw this, I’d be Show more 2:08 225 10 418K

CC Switch: A Switchboard Wall That Grows Ever Larger

CC Switch’s design is an old-fashioned telephone switchboard wall growing from left to right: each commit lights a lamp, each release pins a brass plaque. The protagonist, a little spark, emerges from the official logo’s starburst; each AI coding tool integrated adds another ray of light. On release day, as dawn breaks, the entire wall rises from paper into 3D. 2 minutes 7 seconds.

Hyrule Coder @hylarucoder · Sep 26 Translated from Chinese Show original git-story-film — Skill Open Source Trailer: just fill in your GitHub repository to generate your project’s story.

For example, the story of cc-switch @Jason_Young12319978 10K

Cherry Studio: A Tree Growing Upward from Underground

Cherry Studio is also one of my AI启蒙老师 (enlightenment teachers). The concept is a cherry tree; the camera only moves upward. Each commit is a leaf, each new feature a flower, each official release a cherry. Every time a new contributor joins, a bee flies in. The data foundation was rewritten over 373 days—shown underground as “changing roots.” 2 minutes 13 seconds.

Hyrule Coder @hylarucoder · 14h Translated from Chinese Show original Open Source Preview: git-story-film skill

Your code repository also hides a two-minute film: the first commit, the first version, the busiest day. Give git-story-film a link, and let it tell the story to someone hearing about it for the first time.

The fourth video is cherry Show more 632 85.7K

LobeHub: A Brain Hole Growing in Place

My favorite part of LobeHub is its “brain hole” design (the logo’s conceptual depth). The protagonist, Lobe, stays in place while the “brain hole” above its head grows larger; the camera only pulls back. Each commit is a spark flying into the brain hole, each rollback is a popping bubble, each GitHub star is a star—82,834 in total. 2 minutes 5 seconds.

Hyrule Coder @hylarucoder · Sep 26 Translated from Chinese Show original The third video produced by Opus 5.5 & Raven & git-story-film skill

Open Source Countdown: 1 Day

cc @lobehub @arvin17x 😜 @evermind

Quote Hyrule Coder @hylarucoder · Sep 26 2:07 Translated from Chinese git-story-film — Skill Open Source Trailer: just fill in your GitHub repository to generate your project’s story.

For example, the story of cc-switch @Jason_Young123 141 112.7K

The Seven-Step Video Method: Using Raven as an Example

I broke the film into seven parts—not arbitrarily, but because Cao Zhi composed a poem in seven steps (not really). On September 24, 2026, when making Raven, this workflow didn’t exist yet: I made the entire film first, then refined it while reviewing. The first 4K render was at 11 AM; the storyboard with subtitles wasn’t ready until 3 PM. That day, I started 13 4K renders and aborted or crashed 5 midway. Afterward, I systematically organized everything into a seven-step SOP, pausing at each step to show you.

Step 1 · Outline: Decide What Story to Tell

First, open Claude Code or Raven, paste your code repository link, and use this skill. Note: if using Claude Code, you must use /effort max.

“Use the git-story-film skill, read [repo], help me design a film.”

You’ll see an OUTLINE.md: one-sentence summary of the entire film, the format and why, the protagonist, the subtitle’s narrative voice, four-sentence arc (introduction, development, twist, resolution), what the audience should remember after watching, and the real numbers backing the film.

Raven’s first version was a cumulative commit line chart in a night sky—data accurate but no story. I wanted “a black raven’s perspective,” “cartoonish, big eyes,” and “from hatching to flight, always moving left-to-right.” So the outline stipulated the film’s iron rule: one continuous take, only moving right.

Step 2 · Protagonist: Expressions and Movements

You’ll see a character sheet: 6 to 12 expressions, key poses for walking, jumping, flying, how they look in each art style, and whether they’re recognizable when scaled down.

Raven’s sheet included a pencil-drawn hatchling with curious, sparkling, skeptical, and dizzy expressions; an inked adult with surprised, proud, focused, and wing-spread poses. The protagonist is fixed here—every subsequent shot uses the same code to draw it.

Step 3 · Full Outline: Each Beat Tied to a Real Commit

You’ll see a complete two-minute outline: scenes, art style per scene and why; each beat’s timing, visuals, function, and corresponding commit; ending; and claims to verify.

Raven’s video changed most at this step. I added many detail adjustments: “Need to introduce features, otherwise people won’t know what Raven offers.” So the top-right date became a feature card; runtime grew from 90 seconds to 2 minutes; the second half tied four built-in Agents to a concrete delegation: “Research three competitors, write a data-scraping script, monitor overnight, then make a PPT.” I also verified facts: Raven’s preset doesn’t have ChatGPT, but Codex; the self-evolution score was labeled “illustrative.”

Step 4 · Storyboard: Preview the First 30 Seconds

Then preview the storyboard: a keyframe per shot for the first 30 seconds, drawn using the film’s own character and scene code, with time, subtitles, and corresponding commit noted beside. These 30 seconds set the tone, pacing, and art style—everything follows from there.

Step 5 · Detailed Production: Bringing the Entire Film to Life

Write the remaining shots, animate the whole film, and synthesize the score using code. I was impressed by how well Opus 5.5 handled sound effects and simple music. When encountering new expressions or movements, it first updates the character sheet for your review. After completion, self-check: extract all frames into a grid to scan the rhythm and composition at a glance.

Here I used a “two clocks” strategy: Claude defaults to 24fps for writing, but in scenes with slightly faster movement, many details become blurry. So I modified the engine code: camera, background, and text run at 60fps, while character poses still change 12 to 24 times per second—separating smoothness from hand-drawn feel.

Step 6 · Studio: Watch the Whole Film in a Browser

Before final rendering, open the film for preview. The top shows visuals; below is a draggable timeline with a colored band per scene and a numbered grid per shot—drag to any position to pause, with music playing from that point. Further down are storyboard images for each shot, drawn in real-time from the current code. This step doesn’t render 4K 60fps.

If you feel the AI needs your taste injected and details adjusted, you’ll love the flexibility this skill preserves.

Below is the Studio for LobeHub’s film.

Step 7 · Final Film: 4K60

When you’re sure it’s ready to render, simply tell Claude Code / Raven to proceed. The agent opens a browser and draws while sending frames directly to ffmpeg—4-way parallel, avoiding hundreds of GB of images on disk. At delivery, the director reports duration, resolution, and file size, fully decodes the video, then spot-checks frames. The end card is by default frame 0—players and feeds use it as the cover, a detail suggested by Raven’s user.

Underlying Design Principles

The seven steps are just the surface. What truly makes the film “feel like this repository” are these eight rules.

1. Director, not generator. Claude makes three decisions: which data to use, what story to tell, and which art style. You only watch, nod, and give feedback. At each step’s end, you have something tangible in hand.

2. Changes are cheapest on paper, most expensive at 4K. Editing an outline takes seconds; re-rendering 4K takes minutes. So no MP4 until Studio is approved. Even if you say “just finish it,” the director will pause at Studio for your review before rendering.

3. One-to-one mapping: one commit equals one element. Visual elements correspond directly to git events: one commit, one bead; one release, one plaque; one rollback, one setback. Daily beads reflect actual commit counts. Each symbol represents one data type: LobeHub’s stars are stars, commits are sparks. This way, the film is this repository’s story—not a renamed template.

Raven’s busiest day: 137 commits, so 137 beads fall on screen.

4. One film, one camera grammar. A journey only moves right, never cutting; growth stays in place, camera pulling back; Cherry Studio’s tree only grows upward, camera rising likewise. Stick to this, and the film is a coherent story, not a slideshow. Constraints spark ideas: when the camera can’t go underground, the rewrite is shown via an “underground magnifier” and a rising root line—catching up to the treetop becomes the climax.

5. Protagonist grows from the official logo, returns to the logo. CC Switch’s spark was measured from the official icon—13 rays, not 10—so the script was updated. Cherry Studio’s little cherry has leaves and stem forming the logo’s ✓. Signature expressions are used sparingly: Lobe’s tongue-out only appears when returning to the logo at the end.

6. Only tell the truth. Hashes, dates, and counts on screen come from the repository; estimated numbers are marked “estimated.” LobeHub’s star date is estimated from public sites; scripts and raw data remain in the film folder. Capabilities the product lacks aren’t shown: LobeHub has no Slack integration, so Slack doesn’t appear.

7. Two clocks. Positions recalculated every frame at 60fps without skipping; character poses change 12–24 times per second, like hand-drawn animation holding each drawing for one or two frames. Movement is smooth yet hand-drawn, no jitter even at 60fps.

8. Your every piece of feedback becomes a rule for the next film. One-off requests go into long-term memory: end credits with three lines, every date includes the year, tell the story of actual growth, protagonist redrawn from the official logo, signature expressions only at logo moments, star dates estimated from public sites. The next film’s first draft follows these.

Surprises and Mishaps

For instance, during production, Opus 5.5 drew the tongue outside the mouth.

Tongue-out is the official logo’s signature expression. The first draft treated it as the default mouth shape—character sheet, storyboard, and final film were full of it. After correction, Lobe normally smiles with a closed mouth, only sticking out its tongue once at the end when returning to the official logo. Signature expressions should be used sparingly to have impact.

An anecdote: I originally wanted to make a version for Cindy, but Opus 5.5’s drawings were so bad I didn’t dare release them. Worried about being blacklisted by Cindy’s dev team, haha.

For example, Cherry Studio initially used a cat-like形象, and I adjusted it: “I think the protagonist should be a cartoon version of a cherry.”

The first draft’s protagonist was a gardener cat, a nod to the author’s username “Hyper Cat.” I changed it to a cherry. Ten minutes later, the cherry’s three-page character sheet was ready: short leaves, long stem forming the logo’s ✓; the stem hooks branches, so it climbs the tree upward. At the end, three cherries hang below the ✓, exactly the official icon. Character disputes are settled cheapest in Step 2 with drawings.

Some minor tweaks—like adding years to cross-year projects—were made possible thanks to the preview Studio; changes were visible immediately.

Some adjustments were spontaneous: while making CC Switch, “Could this have a 2D-to-3D transition?” The transition turned out unexpectedly smooth. Previously, I’d wanted such effects but lacked the time and budget.

I tied the transition to a real day: the dawn of v3.9.0’s official release. Subtitle: “At dawn, I stepped out of the paper.” The formal transformation becomes plot. This 3D effect was simulated in 2D using perspective—no WebGL.

In the same feedback round, users wanted “user-benefiting perspective” copy. The film’s tagline changed from “Flip it, it’s switched” to “You focus on code, I’ll handle the line.” The fault-tolerance card changed from “Circuit breaker + health check” to “One goes down, switch automatically to the next.” Feature cards state what you get, not the feature name.

How to Start

Three steps to start filming:

• Install: Copy the link below and paste it into your Claude Code to install: github.com/EverMind-AI/Raven/tree/main/skills/git-story-film
• Command: /git-story-film Help me make a video, first draft an outline.
• Follow the seven steps: View one thing at each step, nod or give feedback. You don’t need to know drawing or editing.

Requirements: Node 22+, Google Chrome, ffmpeg, Python 3.8+. Any environment issues aren’t major—let Claude Code help resolve them.

Time: Recent films went from link to 4K final in under three hours. CC Switch took about 2 hours, rendered once; Cherry Studio about 2 hours 45 minutes, rendered two extra times; LobeHub under 3 hours.

Acknowledgments: The drawing and animation engine is adapted from Alexey Fateev’s hand-drawn-canvas-animation (MIT license).

On the day of the first commit, no one knew what it would become. Now, tell your code’s story to someone hearing about it for the first time.

Skill address: https://github.com/EverMind-AI/Raven/blob/main/skills/git-story-film/README.zh-CN.md

Made by @evermind Team

If helpful, please like and share! Truly appreciated!