Explore the DitherLab component for Framer by Motion Dev Lab.
Create expressive dither-based image effects, transitions, and animations.
Use presets, tweak animation parameters, and trigger dynamic visuals for hero sections and storytelling layouts.
Tip: Start with the presets, then fine-tune the parameters to create your own effect.
scroll to sweep
DitherLab — Interactive
Image System
Image System
idle
Preset
Smooth top-down reveal as you scroll — fine pixels, soft edge
Mode
Sweep position driven by page scroll in real time
Direction
Edge0.50
Wide — large dithered overlap zone
Scrub Start10%
Scrub End85%
Range of page scroll that maps to 0→100% sweep
Scroll Pace1.60
Shapes how quickly the reveal progresses inside the scrub range
Pixel
Pixel Size2px
Threshold80
Shape
Algorithm
8×8 grid — 64 tonal levels, smoother gradients.
Difference most visible at pixel size ≥ 4
Difference most visible at pixel size ≥ 4
Dither Color & Effects
Pixel Color
#c8f060
Background
#0d0d0d
Organic GrainAnimated micro-noise breaks the rigid Bayer grid — film-grain feel
Strength4%
Depth RevealLuminance shifts the dissolve threshold — negative reveals highlights first, positive reveals shadows first
Depth Bias-18%
Moderate negative — highlights clearly emerge first
Chromatic AberrationR/G/B channel split peaks at dissolve midpoint
Intensity6px
Render Quality
Optimized. Capped at 1.5x DPR. Great clarity with reduced GPU load.
Image
Look
Color Mode
Original image colors
Brightness0
Contrast0
Highlights0
Shadows0
Saturation0
Hue0°
Film GrainLuminance-weighted noise applied before dithering
Strength43%
GlowBright-area bloom composited with screen blend
Strength100%
Radius5px
URL
Leave empty to disable navigation
Upload Image
↑ UPLOAD IMAGE 🔒
Made by Motion Dev Lab
scroll to sweep
DitherLab — Interactive
Image System
Image System
idle
Preset
Smooth top-down reveal as you scroll — fine pixels, soft edge
Mode
Sweep position driven by page scroll in real time
Direction
Edge0.50
Wide — large dithered overlap zone
Scrub Start50%
Scrub End75%
Range of page scroll that maps to 0→100% sweep
Scroll Pace1.00
Shapes how quickly the reveal progresses inside the scrub range
Pixel
Pixel Size2px
Threshold80
Shape
Algorithm
8×8 grid — 64 tonal levels, smoother gradients.
Difference most visible at pixel size ≥ 4
Difference most visible at pixel size ≥ 4
Dither Color & Effects
Pixel Color
#c8f060
Background
#0d0d0d
Organic GrainAnimated micro-noise breaks the rigid Bayer grid — film-grain feel
Strength4%
Depth RevealLuminance shifts the dissolve threshold — negative reveals highlights first, positive reveals shadows first
Depth Bias-18%
Moderate negative — highlights clearly emerge first
Chromatic AberrationR/G/B channel split peaks at dissolve midpoint
Intensity6px
Render Quality
Optimized. Capped at 1.5x DPR. Great clarity with reduced GPU load.
Image
Look
Color Mode
Original image colors
Brightness0
Contrast0
Highlights0
Shadows0
Saturation0
Hue0°
Film GrainLuminance-weighted noise applied before dithering
Strength43%
GlowBright-area bloom composited with screen blend
Strength100%
Radius5px
URL
Leave empty to disable navigation
Upload Image
↑ UPLOAD IMAGE 🔒
Made by Motion Dev Lab
scroll to sweep
DitherLab — Interactive
Image System
Image System
idle
Preset
Smooth top-down reveal as you scroll — fine pixels, soft edge
Mode
Sweep position driven by page scroll in real time
Direction
Edge0.50
Wide — large dithered overlap zone
Scrub Start10%
Scrub End85%
Range of page scroll that maps to 0→100% sweep
Scroll Pace1.15
Shapes how quickly the reveal progresses inside the scrub range
Pixel
Pixel Size2px
Threshold80
Shape
Algorithm
8×8 grid — 64 tonal levels, smoother gradients.
Difference most visible at pixel size ≥ 4
Difference most visible at pixel size ≥ 4
Dither Color & Effects
Pixel Color
#c8f060
Background
#0d0d0d
Organic GrainAnimated micro-noise breaks the rigid Bayer grid — film-grain feel
Strength4%
Depth RevealLuminance shifts the dissolve threshold — negative reveals highlights first, positive reveals shadows first
Depth Bias-18%
Moderate negative — highlights clearly emerge first
Chromatic AberrationR/G/B channel split peaks at dissolve midpoint
Intensity6px
Render Quality
Optimized. Capped at 1.5x DPR. Great clarity with reduced GPU load.
Image
Look
Color Mode
Original image colors
Brightness0
Contrast0
Highlights0
Shadows0
Saturation0
Hue0°
Film GrainLuminance-weighted noise applied before dithering
Strength43%
GlowBright-area bloom composited with screen blend
Strength100%
Radius5px
URL
Leave empty to disable navigation
Upload Image
↑ UPLOAD IMAGE 🔒
Made by Motion Dev Lab
Get Component
Available Soon
About
Contact
© 2026 Motion Dev Lab. All rights reserved.