After writing about the making of Fizzy told through git commits, I wanted to see the design evolution with my own eyes. Reading about “Let’s try bubbles” and “Rename bubbles => cards” is one thing. Watching the interface transform over 18 months is another.
So I got to work: I went through each day of commits in the Fizzy repository, got the application to a bootable state, seeded the database, and took a screenshot. Then I stitched those screenshots together into a flipbook-style video.
Here’s the final result - I hope you enjoy it! Read on below for details about the process and the backing music.
The Process
The Fizzy repository has 8,152 commits spanning from June 2024 to November 2025. I extracted the git SHA of the last commit from each day, excluding dependabot commits - a good proxy for the state of the app at the end of each work day.
With that list I then copied the Fizzy source into dated folders and checked out the corresponding SHA for each. I then wrote and ran a sanity check script to ensure the right Ruby versions were installed, that bundle install worked, and that database migrations and seeds completed successfully.
Once each folder was ready, the screenshot process began:
- Boot the application
- Use Playwright to log in and navigate to the correct page
- Capture the screenshot
I worked in batches of 10 checkpoints at a time to verify I was capturing the right page, since routes changed throughout the project’s history.
Not every checkpoint was bootable. Schema migrations sometimes broke older seeds. Gems changed. Dependencies shifted—including private gems I didn’t have access to. Some checkpoints required manual fixes to get the application running. But persistence paid off - I captured all the screenshots to show the visual journey from “splats on a windshield” (the original playful blob metaphor) to the polished kanban board that shipped.
The Music
As I watched the completed flipbook, it lacked any backing music—kinda boring! I remembered Jason Fried mentioning on the Fizzy livestream demo that if you hold Shift while dragging a card to another column, Fizzy plays a little sound—a different one per column.
So I did what anyone making a flipbook out of git history screenshots in 2025 would do: I asked Claude to stitch those original sound files from the repo into a soundtrack. Because what else would you use to score a Fizzy flipbook besides Fizzy’s own sound files?
Here is how that went down
Rob: Tell me about the audio files in this repo
Claude: There are 30 MP3 audio files in public/audio/, organized by instrument:
- banjo/ - 6 files (B3, C3, D4, E3, Fsharp4, G3)
- harpsichord/ - 6 files (same notes)
- mandolin/ - 6 files (same notes)
- piano/ - 6 files (same notes)
- vibes/ - 6 files (same notes)
These appear to be musical note samples, likely used for notification sounds or some kind of audio feedback feature in the app.
Rob: From these notes is it possible to make a tune? (not asking you to, just whether the notes themselves are condusive to any sort of melodic arrangement?)
Claude: Yes, these notes are well-suited for creating melodies. Here's why:
The notes available: C3, D4, E3, F#4, G3, B3
This is essentially a G major pentatonic scale (with some octave displacement):
- G, B, C, D, E, F# → all notes from G major, missing only A
Why it works melodically:
- Pentatonic foundation - Pentatonic scales are inherently melodic and almost impossible to make sound "wrong." They're used across virtually all musical cultures.
- No dissonant intervals - There are no half-step clashes. Any combination of these notes will sound consonant together.
- Strong tonal center - G3 provides a natural "home" note, with B3 and D4 forming a G major triad.
- Range - Spanning from C3 to F#4 (about an octave and a half) gives enough range for interesting melodic contour.
Limitations:
- Only 6 notes, so extended melodies might feel repetitive
- The octave jumps (C3 vs D4, E3 vs F#4) could make smooth stepwise motion tricky
- No A note, which limits some common melodic patterns
But for short jingles, notification sounds, or simple tunes - absolutely workable. You could easily create something pleasant and recognizable with these.
Rob: and with the variations in instruments I take it it would be possible to make it pretty interesting
Claude: Exactly. With 5 distinct timbres (banjo, harpsichord, mandolin, piano, vibes), you could:
Layer and contrast:
- Use piano or vibes for a main melody line
- Add harpsichord for ornamentation or counterpoint
- Bring in banjo or mandolin for rhythmic texture
Create call-and-response:
- Piano plays a phrase, vibes answer
- Or trade off between the plucked strings (banjo/mandolin) and the keyboard instruments
Build dynamics:
- Start sparse with a single instrument
- Layer in others for a fuller sound
- Drop back down for resolution
Evoke different moods:
- Vibes alone = mellow, dreamy
- Harpsichord = baroque, playful
- Banjo = folksy, upbeat
- Piano = neutral, versatile
- Mandolin = bright, energetic
The instruments also share similar attack characteristics (plucked/struck, quick decay) so they'd blend well together without clashing sonically.
Rob: well I want to make a background track for a demo video of this application. it is composed of screenshots of the application as it evolved over time. And then stitched into a flipbook with a 2 second gap between shots. Is this something you can work with and compose a tune with these files?
Claude: That sounds like a fun project! Yes, I can work with this.
To compose something appropriate, I need a few details:
- How many screenshots/frames are there? (This tells me the total duration - frames × 2 seconds)
- What's the overall vibe you're going for?
- Upbeat and celebratory (look how far we've come!)
- Calm and reflective (a journey through time)
- Playful and quirky
- Professional/polished
- What format do you need the output in?
- A single combined audio file (I'd need to use ffmpeg or similar to stitch the samples)
- A script/sequence that describes what plays when (for you to assemble)
- Something else?
- Any preference on lead instrument? Piano tends to be the safest "neutral" choice, but if you have a vibe in mind, let me know.
Once I know the duration and mood, I can sketch out a melodic sequence that evolves over the timeline - maybe starting simple and building as the app matures in the screenshots.
Rob: a single combined audio file. about 2 minutes long. dramatic would be good but starting off slow tempo and then building into a fast crescendo. reminiscent of early computer demos
Claude: Love it. Early computer demo scene vibes - think Amiga/C64 era, building from sparse arpeggios to a frenetic finale.
Let me check if ffmpeg is available and explore the audio files a bit more...
From there, Claude ensured ffmpeg was installed and got to work. We iterated a few times - “vibe music produced” - until it sounded right. A really fun way to bring some life to what would have otherwise been a silent flipbook.
What Stands Out
Watching the design evolve frame by frame reveals things the commit history can only hint at:
Epicenter design. You can see epicenter design in action—a philosophy that’s been at the core of 37signals’ process for decades. The team started with the most essential elements (the grouping of bubbles/cards) and built outward from there. Navigation, chrome, and secondary features came later. The flipbook shows this progression clearly: core functionality first, polish second.
The color exploration. Early versions experimented with bold, vibrant colors. The palette refined over time into something more subdued and professional while retaining the signature fun style 37signals applications are known for.
Layout density. The interface started sparse and grew more information-dense as features accumulated, then simplified again in the later months.
The bubble-to-card transition. You can see the playful, organic blob shapes gradually give way to more structured rectangular cards. The whimsy of the early windshield metaphor fades into the pragmatism of a task management tool.
Typography and spacing. Subtle but constant. Every few frames you notice tighter line heights, adjusted padding, refined font weights. The polish accumulated through hundreds of small commits.
Animation. You can’t see the subtle hover animations in a flipbook of static screenshots, but the team experimented with movement and texture throughout development. Here are a few examples:
This kind of archaeology is only possible because 37signals kept the full git history intact. Most companies would have squashed or rebased this history into oblivion before open-sourcing. The fact that they didn’t is a gift to anyone curious about how software really gets made.
Let me know if you try something similar with another codebase. The process is time-consuming but oddly satisfying.