Pixel Displace
Interactive shader that transforms images into pixel grids that push or pull with cursor motion. Fully customizable, crisp, and responsive.
Make it with Workshop
Build your own component with AI
Transform static images 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
Push or Pull Modes → Choose whether pixels repel or attract along the cursor path.
Pixel Grid Control → Adjust block size for anything 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.
HiDPI Ready → Crisp results across all devices.
Responsive Image Handling → Works with all image formats, including SVGs.
Bring your visuals to life with an interactive shader that feels natural and design-forward.
