Teaching web development means watching students grow from their first <html> tag to building complete websites. But that journey happens commit by commit, spread across weeks of work. I wanted a way to actually see that progression—to watch a student’s project evolve from blank page to finished product.
The Problem
When grading student web projects, I’d often find myself clicking through their commit history trying to understand how they got from point A to point B. Did they build incrementally? Did they struggle with CSS for three weeks before it clicked? The git log tells part of the story, but it’s not exactly visual.
I wanted something I could show students at the end of the semester: “Look how far you’ve come.” A timelapse of their work, frame by frame, commit by commit.
The Solution
Traveler generates timelapse videos from any git repository containing HTML files. Point it at a repo, and it walks through every commit from the beginning, takes a screenshot of the webpage at each step, and stitches them together into an MP4 or GIF.
The result is a few seconds of video showing weeks of work—watching a blank page become a styled layout, then gain navigation, then fill with content.
How It Works
The tool uses Playwright to render each commit’s HTML in a headless browser. For each commit, it:
- Checks out that point in history
- Finds the directory with the most HTML files (following where the student is actively working)
- Takes a screenshot
- Moves to the next commit
This means if a student starts in week-01/ and later moves to week-02/, the timelapse follows them automatically. No configuration needed.
Running It
Via GitHub Actions (easiest):
- Fork or use the Traveler repo
- Go to Actions → Generate Timelapse → Run workflow
- Paste any public GitHub repo URL
- Download the artifacts when it finishes
Locally:
npm install
npx playwright install chromium
npm run timelapse -- https://github.com/student/their-repoThe output lands in repos/<repo-name>/ with both an MP4 and a GIF.
Features
- Works with any git repo — Just needs HTML files somewhere in the project
- Automatic directory detection — Follows the largest active directory, no config required
- GitHub Actions integration — Run it on any public repo without cloning locally
- Configurable output — Adjust FPS, resolution, and frame timing
- Dual format output — Get both MP4 (for quality) and GIF (for sharing)
What’s Next
I’m planning to add support for running a local dev server before capturing, which would let this work with React, Vue, or other build-step projects. For now, it’s focused on static HTML—perfect for my intro web development courses.
The code is open source and available on GitHub. If you teach web development or just want to see your own project’s evolution, give it a try.
Leave a Reply