Circadian Layout Switching Without State Leaks or Layout Shifts
Dynamic theme switching in modern web applications typically involves toggling a CSS class (like `.dark-mode`) on the root HTML element to swap color variables. In this portfolio, we push layout dynamism far beyond color swaps: our Circadian Mode completely tears down and mounts eight fundamentally distinct UI architectures based on the visitor's local hour.
Swapping entire component hierarchies dynamically within a single React 19 application creates significant architectural risks: dangling event listeners, stylesheet rule collisions, memory leaks, and jarring Cumulative Layout Shifts (CLS). Here is how we engineered smooth, leak-free circadian layout transitions.
The layout switcher is orchestrated by a lightweight React hook in `src/App.tsx`. The hook queries the visitor's local browser hour (`new Date().getHours()`) and maps it to a circadian phase: Dawn, Morning, Midday, Golden Hour, Dusk, Evening, or Night.