mitm_llc

← web design

own project // 2026

Transcribd

The product page for my on-device transcription app, with an animation that shows what speaker labeling does.

Client
My own app
Year
2026
What I built
Product page with a hero animation that explains speaker labeling, plus the app's legal pages
Platform
Static HTML, CSS and JavaScript on Vercel
Live site
mitmllc.com/transcribd

Transcribd is my Mac app that turns recordings into transcripts labeled by speaker, without uploading the audio. Most people don't know the word diarization, so the hero animation shows what it does.

The animation plays out a conversation between two people. A phone starts recording, the raw transcript comes out as one messy block, and then it splits into clean lines with each speaker labeled. It runs on timers, has a replay button, and respects the reduced motion setting.

The page uses the studio's cyberpunk style, and the app's privacy policy and terms live under the same address.

Transcribd page with the hero animation at its recording step: a phone between Speaker 1 and Speaker 2
The animation at the recording step.
Transcribd hero animation at the raw output step, showing an unlabeled run-on transcript
The raw transcript, just before it gets split by speaker.