image-effects

An interactive image transition component. Simulates a burning ember hole using complex SVG displacement maps and color matrices. The burn originates exactly from the mouse entry coordinates.

An interactive image transition component. Applies a mathematical SVG Gooey filter to a grid of beads. On hover, the beads calculate their proximity to the cursor and violently tear outward like magnetic fluid, revealing the content underneath.

An interactive liquid image transition component. Fragments an image into an SVG grid mapped with a gooey color matrix. On hover, the droplets calculate their proximity to the cursor and melt outward, revealing the content underneath.

An interactive WebGL component splitting media into vertical glass slices that dynamically tilt, compress, and refract based on cursor proximity.

An interactive image transition component. Applies a heavily asymmetrical SVG Gooey filter to a grid of vertical strips. On hover, the strips calculate their proximity to the cursor and drip downward like thick paint or liquid, revealing the content underneath.

An interactive WebGL component applying a fluid chromatic distortion that clears into a crystal lens around the cursor.

An interactive image transition component. Connects an SVG grid of nodes and edges masked with a mathematical gooey filter. On hover, it calculates the cursor's origin and triggers a radiating physics simulation where edges snap and nodes organically drift outward.

An interactive WebGL grid that zooms and rounds media cells dynamically based on cursor proximity.

An interactive WebGL component that displays media (image or video) with a fluid, 2D grid-based velocity distortion effect following the cursor.

An interactive WebGL component that displays media (image or video) with a fluid, velocity-based slice distortion effect following the cursor.