Reverse-engineering Claude Desktop: its frontend motion tokens and CSS tricks, fully extracted
ZeYanjie · x · 2026-10-13
A developer used REA to extract all of Claude Desktop's frontend CSS/JS and uncover why it feels so polished:
- Irradiation compensation: dark-mode text looks 10-15% bolder due to light bleeding, so Claude lowers weights from 500/600 to 460/560 for visual parity
- Grapheme reveal: each character fades from blur(6px) to crisp in 90ms with 30ms cascading delays
- Text-wrap constraints: pretty kills orphan words, balance for headings
- Icon baseline calibration via custom vertical-align values
- Motion design tokens: 60ms micro-interactions, 0.12s snaps, 0.2s base, 0.3s sheets, with dedicated bezier curves
- Stack: Tailwind + native keyframes (GPU-accelerated text effects) + Framer Motion springs
The screenshots include full keyframes code and a Claude-style Storybook, ready to copy for recreating the same frontend feel.
More from coding & agent
- Workday goes headless, opening HR and finance data to external AI agents — rseroter · 2026-10-13
- Decision model cuts main LLM calls 29.6% and cost 26.6% on 360 SOP-Bench tasks — vivekhaldar · 2026-10-13
- Your agent test can pass while it leaks your API key — a 200-line fix — rudra-sh · 2026-10-13
- clexo indexes Codex and Claude Code sessions into one searchable archive — preetam960 · 2026-10-13
- EMNLP paper: higher-accuracy LLM agents fail to flag uncertainty under knowledge conflict — DanielKhashabi · 2026-10-13
- 29 Bugs in Benchmark History Have Never Been Fixed by Any Model — PawelHuryn · 2026-10-13