Cerebro
A landing page that lip-syncs.
The landing page for Cerebro, a voice-capture device that sits on your desk and remembers what you tell it. The little face on the page mouths every phrase it shows, with no audio and no animation library.
What it does
Mar 2026- 01A face that talksThe device on the page mouths short phrases one shape at a time, and each word appears as it's said.
- 02Kit on a deskThe round AMOLED face sits on its stand in a drawn desk scene, with a shadow that matches its shape.
- 03Two voicesKit searches your memories and health data before it answers. Aly skips all that for quick back-and-forth.
- 04Inside the appScreens from the phone app: stress, offload and bandwidth scores, a health view, and pairing the device.
- 05The app's API lives here tooNext.js API routes handle transcription, replies, speech and saved memories for the phone app.
Screens
The app's home screen: stress, offload and bandwidth rings, then the day's memories
Health: today's mind state and how it's moved this week
Pairing the Cerebro device, with its specs underneath
Signature
The lip-synced face
The face on the page reads its phrases out with its mouth, not with sound. Each letter maps to one of six mouth shapes, and the mouth morphs from one to the next about every 110 ms while the words appear beside it. No sprite sheet, no video, no tweening library.
How it works
- Six mouth shapesOpen, closed, mid, round, narrow and rest, after the Preston Blair cartoon set. Every shape is an SVG path with the same structure (one M, four C, one Z), so the browser's Web Animations API can morph straight between them.
- Letters to shapesA phrase is turned into a list of shapes, each tagged with the word it belongs to, so the words show up in time with the mouth. The tongue moves per shape so open vowels look right.
- A voice turnFor the app, one route takes a recording, transcribes it with Whisper, and streams Claude's reply. Each finished sentence goes to text-to-speech straight away, while a second Claude call pulls out a title, themes and mood.
- MemoriesMemories are stored as embeddings in Pinecone, so Kit can find the ones that matter to what you just said.
Design
DM SansAa
#0D0D0D#E8000A#6B6A68#F8F6F1
- Warm off-white paper, near-black ink, and one red, for the dot after the name and things you act on.
- Instrument Serif for headings and the wordmark, DM Sans in a light weight for everything else.
- The device itself is pure black, like its AMOLED screen, so the face is the brightest thing on the page.
- Hand-written CSS, no UI kit or Tailwind, to keep the type exact.