Making Motive.
The gooey effect is one of the most recognizable CSS tricks on the web. As a designer, making original visuals with it used to be the hard part. AI gave me a way to reverse-engineer the effect and make something of my own by prompting.
Start with an effect
The original CSS-Tricks article on the gooey effect shows how to blur separate shapes, then restore a hard edge so they appear to melt together. I rebuilt that mechanism as an adjustable drawing tool, then started testing what it could say.
The effect wasn’t enough
The early jellyfish and bloom studies missed what I wanted. I was more interested in connecting sources, centralizing information, or creating branches. The shapes could stay abstract as long as their behavior said something.
Even “connection” needed a question. Did the parts stay separate, exchange something, or become a unified whole? That answer changed the drawing. Asking before building became part of the skill.
The corrections became rules
One study moved away from the center and felt wrong beside the others. The rule became a stable, balanced composition throughout the loop. Symmetry didn’t have to mean circles.
The edges took several passes too. Slightly fading outlines and overlapping inner lines made the forms look soft in the wrong places. The silhouette needed to stay crisp, with the construction lines sitting clearly inside it.
I kept Construction as the first finish because I liked seeing how the forms were made.
From study to skill
Those corrections became a process: ask what an idea means, choose a geometric interpretation, keep the motion centered, and make the loop resolve cleanly. The Motive skill applies that process to each new prompt.
Each result is a standalone HTML file with the animation and a small toolbar. You can open it, adjust it, and take it elsewhere. The skill’s source is on GitHub.