From db05f628d02be47302dc298668b28d7456575e87 Mon Sep 17 00:00:00 2001 From: Tanish Manku Date: Fri, 11 Sep 2026 00:28:23 -0700 Subject: [PATCH] =?UTF-8?q?theme:=20suspend=20element=20transitions=20duri?= =?UTF-8?q?ng=20the=20fade=20=E2=80=94=20no=20button=20flicker?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Element-level color transitions (invert-block's 120ms, the buttons' transition-colors) re-target every frame against the animating tokens during a theme fade — a visible stutter-chase on the secondary button (the primary was immune only because its transition-opacity overrides transition-colors). While .theme-anim is on, element transition durations are zeroed and the root's token animation does all the driving; everything restores when the class lifts. Claude-Session: https://claude.ai/code/session_01YBoaBEt3gynzTwogBFtn4B --- frontend/apps/artcraft-website-next/src/app/globals.css | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/frontend/apps/artcraft-website-next/src/app/globals.css b/frontend/apps/artcraft-website-next/src/app/globals.css index 44ca0229ce..fac71a96b9 100644 --- a/frontend/apps/artcraft-website-next/src/app/globals.css +++ b/frontend/apps/artcraft-website-next/src/app/globals.css @@ -167,6 +167,15 @@ html.theme-anim { --scanline 0.4s ease; } +/* While the theme fade runs, element-level transitions (invert-block's + 120ms colors, the buttons' transition-colors) would re-target every + frame against the animating tokens — a visible stutter-chase. Suspend + them for the window; the root's token transition does all the driving, + and everything is restored when .theme-anim lifts (~0.45s). */ +html.theme-anim body * { + transition-duration: 0s !important; +} + /* Intro-pending letter hide: stamped pre-paint by the head script when the intro will play, so the wordmark never flashes complete before the formation takes the letters. The formation and HeadingFlow write inline