Skip to main content

Scroll Color Shift — Playground

01
Midnight
#0b1220
02
Ember
#7c2d12
03
Forest
#14532d
04
Plum
#4c1d95
05
Slate
#334155
page morphs to the section on this line
Drag the vertical scroll on the right — the stage background morphs to each section as it crosses the mid-line.
Section 1 (Midnight) — colours
Sample option — updates as you tweak
// On EACH Section (Section → Animations → Scroll Color Shift):
'scroll_color_shift' => [
    'mode' => 'shift',
    'shift' => [
        'bg_color'   => [ 'predefined' => '', 'custom' => '#0b1220' ],
        'text_color' => [ 'predefined' => '', 'custom' => '#c7d2fe' ],
        'duration'   => 0.6,
    ],
],

Scroll Color Shift is a Section-level control — Section → Animationstab → Scroll Color Shift. As each marked section crosses the middle of the screen, the page background (and optionally text) transitions to its colour. Best on full-bleed, transparent sections; colours use the theme color-preset picker. Honours reduced motion.

Drag the vertical scroll on the stage's right edge — the stage background morphs to whichever section is crossing the mid-line, exactly as the page background does on a real site. This runs the real runtime: the same "which section crosses the middle of the viewport" pick, smoothed by a CSS transition. Pick a section on the right to recolour its page and text colour, and tweak the transition length. The Sample option updates as you tweak.

Where it lives

Scroll Color Shift is a Section-level control — Section → Animations tab → Scroll Color Shift. Give several sections their own colour and the page palette shifts as you scroll. Best on full-bleed, transparent sections so the morphing page colour shows through; it honours reduce motion and loads only on pages that use it.

← Back to Scroll Color Shift