Pixel Scroll

Scroll-driven pixel transition

The component supports two reveal approaches: Colors mode: transitions from one color state to another, with optional accent pixels. Two-layer mode: transitions from Layer A to Layer B (image-to-image style transition). Main controls and functionality: Pixel Size and Gap: define the block size and spacing. End At: sets when the transition finishes within the scroll range. Direction: controls flow (top-bottom, bottom-top, left-right, right-left, center-out, center-in). Pattern: changes threshold distribution (random, checker, diagonal, wave, spiral, radial). Pattern Intensity: controls how strongly the selected pattern affects transition timing. Easing: shapes transition timing (linear, ease-in, ease-out, ease-in-out, expo-out). Accent Share + 4 Accent Colors: adds controlled variation inside the transition band.

Scroll-driven pixel transition