voice to text

free

The prompt is free with an account: sign up with Google or email, and your copy starts right after. The project and Figma file come with monthly or yearly.

A motion study of a voice note turning into its own transcript, on a 10-second loop. On a light grey stage with soft light drifting across it, a white voice-note card from Mira Okafor comes in: a black play button, a waveform of 32 rounded bars, "0:00 / 0:14" in Geist Mono and a round transcribe button. The pointer clicks play and the bars start to bounce round the playhead; it clicks transcribe, and each waveform bar stretches into word-sized skeletons that slide into place and resolve into the real words while the card grows to fit three lines of text, a thin progress track takes the waveform's place and an "EN · transcript" chip rises in. Playback then reads the note karaoke-style: the word being spoken turns blue on a soft plate that glides along the line and the words already spoken turn ink. At the end the pause turns back to play, the text folds back into the waveform word by word, the card shrinks, and the note fades out. HTML, CSS and a 2D canvas with React, no images, Geist and Geist Mono, a 1080 × 1080 stage that scales to fit any window, and frame-exact rendering (window.__render(t), window.__LOOP, window.__MANUAL). The sender is invented.

what you get

prompt
Paste it into Claude, Codex, Kimi or Cursor to rebuild this template. Tested: we rebuild every template from its prompt before it goes live.
project
The Vite + React source code as a .zip, ready to run.
figma file
The editable design as a .fig file to import into Figma.

what's inside

  • voice note
  • waveform
  • transcript
  • skeleton loader
  • karaoke highlight
  • play button
  • cursor
  • autoplay loop
  • frame-exact recorder

stack

  • react
  • vite
  • typescript
  • canvas

fonts

Geist, Geist Mono

Free fonts, linked in the prompt.

colors

  • #E9EBEE
  • #FFFFFF
  • #121316
  • #C9CCD2
  • #E8EAEE
  • #2B44E0
  • #7D828B

license

Free account: personal use only. Monthly or yearly adds commercial and client work. Don't resell or share the template, prompt or files.

read the license