2 Javascript Gooey Effects
Transform standard interfaces into organic and “living” ones with this collection of gooey effects. The primary focus here is on applying the technique to create interactive cursors, fluid navigation, and memorable visual feedback for user actions. JavaScript animations (often using GSAP) control the movement, while a simple SVG-based CSS filter does all the visual magic by “gluing” the elements together. These examples will show you how to add a tactile feel and a wow-factor to your UI.
Last updated:
Interactive Gooey Buttons
Interactive buttons featuring a fluid, mouse-tracking glow effect powered by CSS custom properties. JavaScript calculates cursor coordinates to dynamically position radial gradients and text shadows, while CSS filters create a ‘gooey’ liquid animation that responds organically to user interaction.
Interactive Grid with Gooey Blob Effect
This interactive grid showcases a mesmerizing “gooey” or “metaball” effect, achieved by applying an SVG filter to a liquid-like blob that smoothly follows the cursor. The entire experience is powered by a sophisticated combination of technologies: requestAnimationFrame for the performant cursor tracking, and SCSS using @for loops and custom functions to create unique, non-repeating @keyframes for each block’s animation.