The circle that would not close — flushSync and the Portfolio View Transition
When the theme toggle animation revealed the old theme instead of the new one, the fault was not in the CSS — React had not committed the state in time.
8 posts
When the theme toggle animation revealed the old theme instead of the new one, the fault was not in the CSS — React had not committed the state in time.
Quando a animacao de troca de tema revelava o tema antigo em vez do novo, a culpa nao era do CSS — era do React nao ter commitado o estado a tempo.
After 5 days making the circle start from the click on desktop, mobile still used a crossfade — by documented decision: clip-path paints per frame and janks weak GPUs. Until Samuel asked for the opposite. What made the reversal possible? The anti-stutter fixes that were already in global.css.
Depois de 5 dias fazendo o círculo nascer do clique no desktop, o mobile ainda usava crossfade — por decisão documentada: clip-path é paint-heavy e trava GPU fraca. Até o Samuel pedir o contrário. E o que tornou possível reverter? Os fixes anti-stutter que já estavam no global.css.
Five days trying to make a circle of light start exactly where the finger touches. The CSS looked right, CI passed, but the user saw stutter, wrong origin, and content wiping out. The root cause wasn't the code — it was the interaction between the View Transitions API, Chromium blend modes, and a ghost node_modules.
Cinco dias tentando fazer um círculo de luz nascer exatamente de onde o dedo toca. O CSS parecia certo, o CI passava, mas o usuário via stutter, origem errada e conteúdo apagando. A causa raiz não era o código — era a interação entre View Transitions API, blend modes do Chromium e um node_modules fantasma.