A hard boundary sweeps down the photo as it scrolls, colorizing it from grayscale top-to-bottom like a scanner.
Exports colorize on scroll — the preview runs a continuous demo loop.
Scroll Colorize sweeps a hard boundary down the photo as it scrolls into view, colorizing it from grayscale top-to-bottom like a scanner head passing over a print. A ::before duplicates the image via --ifx-src as a grayscale layer over the color <img>; scroll progress shrinks its clip-path from full to nothing, revealing color from the top down. Set --ifx-src on the figure to the SAME url() as the img (the generated HTML/React does this). It uses pure-CSS scroll-driven animations gated behind @supports (animation-timeline: view()); browsers without support never paint the grayscale layer and just show the color photo. IMPORTANT: the reduced-motion guard pins clip-path to inset(100% 0 0 0) (fully colorized), NOT animation:none alone — otherwise reduced-motion users would freeze on the grayscale start state. Tune --ifx-sc-contrast and --ifx-sc-range (how far into the scroll it finishes).
Enhanced — scroll-driven animations. This effect uses an enhanced feature — provide a graceful fallback for older browsers.