Felix AnderssonSenior Fullstack Engineer

Montevideo

Résumé
All work

01 / 07

KatArch

A narrated video course on software architecture, built from what the twelve winning teams of the Architecture Katas left in writing.

Role
Solo: research, scripts, animation and frontend
Year
2026
Interface
English and Spanish, light and dark
Visit the website Source

The story

I wanted to learn software architecture from real cases instead of a textbook. The Architecture Katas, presented by Neal Ford and Mark Richards, are a contest where teams design a system from a real request and a jury picks the winner. The course is built from what the twelve winning teams left in writing, and every case in it comes from one of them.

It runs in two acts. The first is how a decision is made: what makes it architectural, which qualities matter, how a trade-off gets written down. The second walks the territory, one region per block, with the families of solutions that exist there and two winners who chose differently. One rule holds throughout: no concept appears before the case that needs it.

In the screenshot
KatArch, block 1, What Makes a Decision Architectural, in English: the player paused on the ClearView diagram with its four services, the transcript open beside it, and the block’s title and summary below.KatArch, block 1, What Makes a Decision Architectural, in English: the player paused on the ClearView diagram with its four services, the transcript open beside it, and the block’s title and summary below.
  1. Captions are drawn by the player from word timings, so they can be turned off, resized or restyled.
  2. The transcript follows the narration; any line jumps the video to it.
  3. Spanish or English: switching keeps your place in the block.

Engineering

Three things worth a closer look

  1. 01

    Scenes timed to the voice

    Each block is a HyperFrames composition, HTML animated with GSAP. Animations are anchored to words of the narration instead of fixed seconds, so when a take is regenerated the scene follows the new timing.

  2. 02

    Captions drawn by the player

    Subtitles are not burned into the video. The player draws them from word timings, marking each word as it is spoken, in the size and style the viewer picks and keeps.

  3. 03

    One player, two languages

    Sections on the progress bar, a transcript that follows the narration and seeks on click, keyboard controls and saved progress. Switching the language swaps the video and picks up at the same point of the block.

  • Astro
  • React islands
  • TypeScript
  • HyperFrames
  • GSAP
  • ElevenLabs
  • Cloudflare R2

More screens from KatArch

Select a screen to enlarge it

The course map
A block playing
The transcript follows
On a phone

Build sheet

Stack
Astro, React islands, TypeScript, HyperFrames, GSAP, ElevenLabs, Cloudflare R2
Scale
  • 120 commits
  • 17 blocks, 73 minutes
  • 102 animated scenes
  • Spanish and English
Typefaces
  • Inter
  • JetBrains Mono
Palette
#0B0E13#F6F5F1#FF7A45#D9480F#E8ECF2