server/artcraft
1
0
Fork 0
mirror of https://github.com/storytold/artcraft.git synced 2026-10-20 17:02:53 -04:00
Code Issues Packages Projects Releases Wiki Activity

theme: suspend element transitions during the fade — no button flicker

Browse Source 
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
This commit is contained in:
Tanish Manku
2026-09-11 00:28:23 -07:00
parent 12d8da32d9
commit db05f628d0
1 changed files with 9 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/apps/artcraft-website-next/src/app/globals.css
+9
View File
@@ -167,6 +167,15 @@ html.theme-anim {
--scanline 0.4s ease; --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-pending letter hide: stamped pre-paint by the head script when the
intro will play, so the wordmark never flashes complete before the intro will play, so the wordmark never flashes complete before the
formation takes the letters. The formation and HeadingFlow write inline formation takes the letters. The formation and HeadingFlow write inline