Pixel scroll

A scroll-driven pixel transition from one color or image to another, with directions, patterns, easings and accent pixels in the moving band. Scroll inside the card.

Backgrounds, scroll, Motion

Install

npm i clsx motion tailwind-merge && curl -o components/pixel-scroll.tsx https://motion-brew.com/r/pixel-scroll.tsx

One self contained file for React and Tailwind CSS: pixel-scroll.tsx. Or ask your AI agent to add it through the MCP server.

Usage

import { PixelScroll } from "@/components/pixel-scroll";

export default function Page() {
  return (
    <PixelScroll
      mode="layers"
      layerA="/before.jpg"
      layerB="/after.jpg"
      direction="center-out"
      pattern="spiral"
      length={3}
      label="The studio, before and after"
    >
      <h2 className="grid h-full place-items-center text-6xl font-semibold text-white mix-blend-difference">
        Keep scrolling
      </h2>
    </PixelScroll>
  );
}

Props

Prop	Type	Default	Description
mode	"colors" \	"layers"	"colors"	Color to color, or image to image
from	string	"#f5f5f5"	Start color (colors mode)
to	string	"#242423"	End color (colors mode)
layerA	string		Start image (layers mode)
layerB	string		End image (layers mode)
pixelSize	number	16	Pixel size, px
gap	number	0	Gap between pixels along the moving front, px
startAt	number	0.08	How much already shows before scrolling, 0 to 0.5
endAt	number	0.8	How far through the scroll the transition finishes, 0.1 to 1
direction	"top-bottom" \	"bottom-top" \	"left-right" \	"right-left" \	"center-out" \	"center-in"	"bottom-top"	Where the flip starts
pattern	"random" \	"checker" \	"diagonal" \	"wave" \	"spiral" \	"radial"	"random"	How the front is broken up
intensity	number	0.45	How strongly the pattern shifts timing, 0 to 1
easing	"linear" \	"ease-in" \	"ease-out" \	"ease-in-out" \	"expo-out"	"ease-in-out"	Timing curve
accentShare	number	0.25	Share of moving pixels that flash an accent, 0 to 1
accents	string[]	four colors	Up to four accent colors
length	number	3	Scroll length in screens (or container heights)
container	RefObject<HTMLElement>		Scroll inside this element instead of the page
children	ReactNode		Content laid over the stage
label	string		Describes the visual for screen readers
className	string		Classes on the track

More backgrounds

Magnetic flow: Cards follow the leader like a snake, then burst open like the sun.
Gravity tag pile: Tags fall, bounce, spin and pile up with real physics.
Prism flow: A dark background crossed by a soft band of light that bends and drifts, its edges splitting into colour like light through a prism.
Spatial gallery: A WebGL media tunnel of images and videos that never ends: scroll or drag to travel, and the ring twists into a turning spiral as you go.

All animated react backgrounds and shaders