WebGL Image Effect Shaders

WebGL image effects for React — fluid distortion, particle dissolves, pixel sorting and hover-reactive shaders applied to your own images. Drop in a texture and the GLSL does the rest.

ASCII Animations

All 48 image shaders components

  • Wipe RevealHover to sweep a glowing diagonal seam across the frame, wiping one image into the next.
  • Pixel MeltHover to crunch both images into chunky mosaic blocks that flip over, staggered, into the second.
  • Liquid TransitionHover to ripple both frames through a flowing noise warp as one dissolves into the other.
  • Pixel RiseHover and a ragged wall of pixels climbs from the bottom, dissolving the old image block by block as the new one rises into place.
  • Burn DissolveHover and the first image burns away along a glowing ember edge, revealing the next through the noise.
  • Venetian BlindsHover to flip open a stack of horizontal blinds, each strip wiping to the second image.
  • Ripple RevealHover to send a rippling ring out from the centre, warping the first image aside as the next floods in.
  • Zoom BlurHover to punch through a radial zoom-blur — the first image streaks outward as the second rushes in.
  • Checker FlipHover and the image tiles into a checkerboard whose squares flip over, staggered, to the next image.
  • Glass ShatterThe image is cracked into Voronoi glass shards — move your cursor to blow them outward, leaving dark leading between the pieces.
  • Liquid DistortionA mesmerising simplex-noise liquid warp drifting across the image. Adapted from Shery.js (style 1), MIT — Sheryians Coding School.
  • Liquid CursorA flowing liquid distortion that bends around your cursor. Adapted from Shery.js (style 5), MIT — Sheryians Coding School.
  • Perlin DistortionA pulsing Perlin-noise displacement that breathes the image in and out. Adapted from Shery.js (style 6), MIT — Sheryians Coding School.
  • WindA natural simplex-noise sway, like the image fluttering in a breeze. Adapted from Shery.js (style 4), MIT — Sheryians Coding School.
  • Cyber SquaresRetro cyber squares pulse across the image and brighten around your cursor. Adapted from Shery.js (style 7), MIT — Sheryians Coding School.
  • Pixel DistortionMove your cursor to crunch the image into chunky pixel blocks that jitter, distort and RGB-split around the pointer.
  • Dot MatrixAn LED-style dot grid of the image — move your cursor to scatter the dots into a dispersing cloud.
  • BallpointA ballpoint-pen cross-hatch rendering — strokes follow the image's form on grainy paper with a vignette. Adapted (single-pass) from flockaroo, CC BY-NC-SA.
  • Chromatic AberrationRed and blue channels drift apart toward the edges with a slow pulse.
  • PixelateSnaps the image to a square grid whose resolution breathes over time.
  • RippleConcentric water ripples radiate from your cursor and warp the image.
  • GlitchRandom horizontal slices tear and shift with bursts of RGB noise.
  • HalftoneRebuilds the image from ink dots that grow where the picture is darker.
  • TwirlSwirls the pixels into a spinning vortex centred on your cursor.
  • DuotoneMaps brightness onto a two-colour gradient that shifts through the spectrum.
  • WaveGently ripples the whole image like a flag in a slow breeze.
  • PosterizeFlattens the image into a handful of colour bands, screen-print style.
  • Scanline CRTCurved tube, scanlines, RGB fringe and a rolling bar — vintage television.
  • Ordered DitherBayer-matrix ordered dithering crunched down to a few colour levels.
  • LED Dot-MatrixRebuilds the image from a grid of glowing round LEDs on a black panel.
  • Edge GlowSobel edge detection lights up the outlines in their own colour on black.
  • SpotlightA flashlight of full colour follows your cursor through a darkened image.
  • MagnifierA fish-eye loupe follows your cursor, zooming the image right beneath it.
  • Pixel DissolveThe image materialises from chunky mosaic blocks into full resolution.
  • Ink BleedColour blooms outward from your cursor like ink dropped into water.
  • Depth ParallaxFake 2.5D — brightness becomes depth, so the scene tilts as you move.
  • ASCII ArtRebuilds the image from terminal glyphs whose density tracks brightness.
  • Game BoyFour-shade DMG green palette with ordered dithering and chunky pixels.
  • Hex MosaicPixelates the image onto a honeycomb grid of hexagons.
  • CrystallizeShatters the image into flat Voronoi cells with dark stained-glass leading.
  • EngravingRenders the image as inked woodcut hatch-lines on warm paper.
  • Low PolyFlat-shades the image across a grid split into triangles, geometric-art style.
  • Anaglyph 3DRed/cyan stereo split driven by brightness-as-depth — grab your 3D glasses.
  • Comic CelPosterised flat colours with bold inked outlines — cel-shaded comic look.
  • Thermal VisionMaps brightness onto an infrared heat ramp — cold indigo to white-hot.
  • Oil PaintKuwahara filtering smears the image into soft painterly brush strokes.
  • VHSTape warble, chroma bleed and a rolling tracking band — worn-out VHS.
  • KaleidoscopeFolds the image into six-fold mirrored symmetry that slowly rotates.