41 / Colour
Exhibit 07 · Kīlauea
Threshold Flip
At one point on the way down, the whole panel changes its colours at once rather than easing between them.
also called section theming · discrete palette swap · data-theme
The common form, and the honest one when two palettes are unrelated rather than a rotation apart. Everything rests on the transition: without one it strobes, and much past a second it lags the scroll and reads as a bug.
How it is built
new IntersectionObserver(fn, { rootMargin: '-45% 0px -45% 0px' })
.flip { transition: background-color .7s var(--settle) }
/* these three palettes are unrelated by design, so they are written out
rather than derived from the house tokens */scroll inside ↓