How it’s made
Every specimen in this catalogue is driven by one small engine. Shapes are
painted into an HTML5 canvas as soft, overlapping fields of ink, then passed
through an SVG gooey filter: a wide feGaussianBlur spreads each
shape’s edges into its neighbours, and a high-contrast
feColorMatrix clamps the blurred alpha back to a hard threshold.
Below that threshold the pixels vanish; above it they fuse. The result is the
liquid fuse-and-tear you see when two blobs meet and pull apart — surface
tension faked with two filter primitives and no geometry.
The motion underneath is real physics. A lightweight viscoelastic simulation
runs per particle on a hardware-accelerated 2D canvas, kept off the DOM so the
layout engine never enters the loop. Viscosity, gravity, shear and dimensions
are the variables you tune in the workbench; what you license is the exact
state you stopped on, exported as paste-ready HTML, CSS and JS with no runtime
dependencies.
Engineering Q&A
Q1
How do the SVG gooey filters work?
A large feGaussianBlur expands the boundary of every rendered
shape, then a high-contrast feColorMatrix clamps the resulting
alpha back toward 1.0. That clamp is the threshold that makes adjacent
shapes fuse where they overlap and tear cleanly where they separate —
the entire liquid look comes from those two primitives, not from per-frame
geometry.
Q2
Is there a performance cost?
Little. The physics run on a hardware-accelerated 2D canvas, so the browser
never performs DOM layout during the simulation loop. CPU overhead stays
low and the specimens hold 60fps, which makes them safe to drop onto
performance-critical landing pages.
Q3
Can I use this in React or Next.js?
Yes. Each specimen ships with framework blueprints that bind the engine’s
lifecycle inside useEffect (React/Next) or onMounted
(Vue), and tear it down again on unmount so canvases and listeners are cleaned
up rather than leaked.