Three motion systems
Orbit, rise, and drift create clearly different cell choreography.
Backgrounds & systems
Metaball Background
Merge a deliberately small colony of colored cells into an organic surface without canvas or a permanent render loop.
Fluid character with strict limits
Organic motion that stays operationally predictable.
Use merging cells for ambient hero panels, product canvases, music surfaces, and speculative interface backdrops.
Hard DOM cap
The full effect never creates more than seven cells; thumbnails render at most four.
No render loop
Native CSS handles every movement, with a stable reduced-motion state.
Three-step workflow
How to use the Metaball Field studio
- Choose a colony
Begin from six palettes and motion arrangements.
- Shape the merge
Adjust cell count, scale, blur, spread, and speed.
- Ship plain code
Export a responsive fragment or standalone HTML document.
Questions, answered.
Does this use canvas or WebGL?
No. It is a capped set of CSS elements.
How many cells can it render?
Seven in a studio or export and four in compact thumbnails.
Can it pause for reduced motion?
Yes. The cells remain visible but static.
Is the blur expensive?
The filtered region and element count are bounded, and compact previews use a reduced blur.