Library / Page transitions

Section Colour Morph free

The page background melts between section colours as you scroll, blended in OKLCH so mid-tones stay clean.

Scroll inside the preview to try it.

Customize

Section headings

Background colour of each section

Text colour of each section

How much of the screen height the blend takes

Code

import SectionColorMorph from './SectionColorMorph';

<SectionColorMorph />

Checking your access…

Dependencies: none

transition scroll colour oklch

More in Page transitions

Curtain CallHeavy theatre curtains sweep shut over the old page, hold on the next page name, then gather back to reveal the new one.
Ticket PunchA paper ticket rises showing FROM and TO, a punch bites a hole, and the hole grows to swallow the screen and show the new page.
Grid ShiftTiles unfold across the screen in one sweeping wave, diagonal, by row, by column, from the centre or random, then retreat to reveal the new page.