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.
Wipe Reveal — Hover to sweep a glowing diagonal seam across the frame, wiping one image into the next.
Pixel Melt — Hover to crunch both images into chunky mosaic blocks that flip over, staggered, into the second.
Liquid Transition — Hover to ripple both frames through a flowing noise warp as one dissolves into the other.
Pixel Rise — Hover 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 Dissolve — Hover and the first image burns away along a glowing ember edge, revealing the next through the noise.
Venetian Blinds — Hover to flip open a stack of horizontal blinds, each strip wiping to the second image.
Ripple Reveal — Hover to send a rippling ring out from the centre, warping the first image aside as the next floods in.
Zoom Blur — Hover to punch through a radial zoom-blur — the first image streaks outward as the second rushes in.
Checker Flip — Hover and the image tiles into a checkerboard whose squares flip over, staggered, to the next image.
Glass Shatter — The image is cracked into Voronoi glass shards — move your cursor to blow them outward, leaving dark leading between the pieces.
Liquid Distortion — A mesmerising simplex-noise liquid warp drifting across the image. Adapted from Shery.js (style 1), MIT — Sheryians Coding School.
Liquid Cursor — A flowing liquid distortion that bends around your cursor. Adapted from Shery.js (style 5), MIT — Sheryians Coding School.
Perlin Distortion — A pulsing Perlin-noise displacement that breathes the image in and out. Adapted from Shery.js (style 6), MIT — Sheryians Coding School.
Wind — A natural simplex-noise sway, like the image fluttering in a breeze. Adapted from Shery.js (style 4), MIT — Sheryians Coding School.
Cyber Squares — Retro cyber squares pulse across the image and brighten around your cursor. Adapted from Shery.js (style 7), MIT — Sheryians Coding School.
Pixel Distortion — Move your cursor to crunch the image into chunky pixel blocks that jitter, distort and RGB-split around the pointer.
Dot Matrix — An LED-style dot grid of the image — move your cursor to scatter the dots into a dispersing cloud.
Ballpoint — A 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 Aberration — Red and blue channels drift apart toward the edges with a slow pulse.
Pixelate — Snaps the image to a square grid whose resolution breathes over time.
Ripple — Concentric water ripples radiate from your cursor and warp the image.
Glitch — Random horizontal slices tear and shift with bursts of RGB noise.
Halftone — Rebuilds the image from ink dots that grow where the picture is darker.
Twirl — Swirls the pixels into a spinning vortex centred on your cursor.
Duotone — Maps brightness onto a two-colour gradient that shifts through the spectrum.
Wave — Gently ripples the whole image like a flag in a slow breeze.
Posterize — Flattens the image into a handful of colour bands, screen-print style.
Scanline CRT — Curved tube, scanlines, RGB fringe and a rolling bar — vintage television.
Ordered Dither — Bayer-matrix ordered dithering crunched down to a few colour levels.
LED Dot-Matrix — Rebuilds the image from a grid of glowing round LEDs on a black panel.
Edge Glow — Sobel edge detection lights up the outlines in their own colour on black.
Spotlight — A flashlight of full colour follows your cursor through a darkened image.
Magnifier — A fish-eye loupe follows your cursor, zooming the image right beneath it.
Pixel Dissolve — The image materialises from chunky mosaic blocks into full resolution.
Ink Bleed — Colour blooms outward from your cursor like ink dropped into water.
Depth Parallax — Fake 2.5D — brightness becomes depth, so the scene tilts as you move.
ASCII Art — Rebuilds the image from terminal glyphs whose density tracks brightness.
Game Boy — Four-shade DMG green palette with ordered dithering and chunky pixels.
Hex Mosaic — Pixelates the image onto a honeycomb grid of hexagons.
Crystallize — Shatters the image into flat Voronoi cells with dark stained-glass leading.
Engraving — Renders the image as inked woodcut hatch-lines on warm paper.
Low Poly — Flat-shades the image across a grid split into triangles, geometric-art style.
Anaglyph 3D — Red/cyan stereo split driven by brightness-as-depth — grab your 3D glasses.
Comic Cel — Posterised flat colours with bold inked outlines — cel-shaded comic look.
Thermal Vision — Maps brightness onto an infrared heat ramp — cold indigo to white-hot.
Oil Paint — Kuwahara filtering smears the image into soft painterly brush strokes.
VHS — Tape warble, chroma bleed and a rolling tracking band — worn-out VHS.
Kaleidoscope — Folds the image into six-fold mirrored symmetry that slowly rotates.