Pixel Displace
Transform images or videos into playful, pixelated visuals. Push or pull pixels with your cursor for a bold, tactile effect.
Make it with Workshop
Build your own component with AI
About this Component
Transform static images and videos into playful, interactive visuals. PixelDisplace uses a custom WebGL shader to create a pixelated push/pull displacement effect that reacts to cursor movement.
Perfect for portfolios, hero sections, and experimental layouts, this effect adds a tactile, modern feel without compromising performance.
Key Features
Image & Video Support → Works with standard images (incl. SVG) and uploaded video files.
Push or Pull Modes → Choose whether pixels repel or attract along the cursor path.
Pixel Grid Control → Adjust block size from subtle texture to bold retro pixels.
Strength & Spread → Fine-tune how far and wide the displacement reaches.
Smooth Motion → Separate controls for hover speed and follow speed, plus soft fade on exit.
HiDPI Ready → Crisp results across all devices.
Responsive Media Handling → Maintains correct aspect ratio when width or height is set to Fit.
Bring your visuals to life with an interactive shader that feels natural and design-forward.
Try it here: https://minimum.supply/pixel-displace
