My Go at ‘ciganda’ Today
Alright, so I spent a chunk of my afternoon messing around with this idea I’ve mentally tagged as ‘ciganda’. It’s not really a thing, just my name for this specific visual trick I saw somewhere and couldn’t get out of my head. You know, where elements on a screen seem to sort of… meld together fluidly when they get close, like blobs of liquid?
Anyway, I finally decided to sit down and actually try to replicate it. Fired up my usual workspace, kept things simple to start. Just wanted to see if I could even get the basic concept working.
First attempts were… well, not great. My initial thought was just animation and maybe some blur. So I got two simple shapes, moved one towards the other, and tried blurring them as they got close. It looked exactly like you’d expect: two blurry shapes overlapping. Not fluid, not melded, just messy. Definitely not the ‘ciganda’ vibe.
The hard part was figuring out how to make the space between them fill in, to make it look like one connected shape during the interaction. I poked around with different settings for a while, getting nowhere fast. It felt like I was missing a key piece.
Hitting a Wall, Then a Detour
I spent maybe an hour just trying different combinations. More blur? Less blur? Different timing? Nothing clicked. It was frustrating, you know? Seeing something cool and having no idea how it’s done.
Then I started searching online, using weird terms. Stuff like:
- “liquid merge effect ui”
- “gooey elements animation”
- “metaball screen effect”
Found some forum posts and articles talking about a technique that sounded backward: blur everything together, then sharply increase the contrast. Seemed counter-intuitive. Why would you blur it just to sharpen it again?
But hey, worth a shot, right? So I set it up. Put my two shapes inside a container. Applied a pretty strong blur filter to the whole container. Then, crucially, I applied a color filter that basically crushed the alpha channel – making anything semi-transparent either fully opaque or fully transparent. High contrast, basically.
Getting Somewhere!
And wow, okay, that was it! The blur made the edges of the nearby shapes bleed together into a fuzzy bridge. Then the high-contrast filter snapped that fuzzy bridge into a solid-looking connection. When the shapes moved apart, the bridge thinned and snapped back. It looked… gooey! It looked like ‘ciganda’!
It wasn’t perfect straight away, mind you. Had to tweak things a lot:
- Finding the right amount of blur was key. Too little, no merge. Too much, it looks distorted.
- Adjusting the contrast threshold was also fiddly. Had to find the sweet spot where the merge looked solid but didn’t create weird artifacts.
- Performance was a bit of a concern; heavy blurs can be taxing.
I spent another hour just playing with values, moving the shapes around, seeing how it held up. It breaks down a bit if things move too fast or if the shapes are too complex, but for simple circles or rounded rectangles moving moderately? It looks pretty convincing.
So, yeah. That was my practice session today. Didn’t fully nail it, but figured out the core trick behind that ‘ciganda’ effect. That blur-then-contrast technique is pretty neat. A good reminder that sometimes the weird approaches are the ones that work. Happy I spent the time on it.