I Turned Logos Into Clouds. Because Why Not?

Some things you build because they solve a problem. Other things you build because you see them and immediately think, “I need to play with that.”

Cloudify belongs to the second category.

I saw Hunter Thompson’s cloud logo tool and wanted to bring that effect into Framer as a proper component. There is something very satisfying about taking a familiar logo and watching its edges turn soft and wispy. It still looks like your logo, except it now appears to be floating somewhere above you.

Completely unnecessary. Very enjoyable.

A little bit of both

I also came across Bálint Ferenczy’s Cloud Generator on CodePen. His version inspired the dark mode and its toggle in Cloudify. That then gave me another idea: make the background transparent too, so the clouds could sit directly on a website’s own background.

The result is my take on the best of both worlds, packaged into something you can use directly in Framer. Credit to Hunter and Bálint for the work that inspired it.

That last part mattered to me. I wanted it to feel like something you could drop into a page and start experimenting with immediately. Add the component, give it a logo or some text, and see what happens.

Drag, drop, cloud.

Give your logo a forecast

Cloudify turns images or text into animated cloud shapes using layered SVG filters. The effect has soft edges, tinted shadows, and a subtle wisp animation that gives it a little movement. It runs without an additional effects library or an API.

The controls are right inside Framer. You can adjust thickness and cloudiness, change the animation speed, and tint the shadows. There are light, dark, and transparent backgrounds, plus a Dark Clouds toggle when you want a moodier look.

Text mode lets you play with the font, weight, and spacing too. And if you find a cloud you particularly like, setting the speed to zero freezes the animation.

I like that the same idea can feel quite different with a few adjustments. A light, airy logo has one personality. A darker, heavier cloud has another. You get to decide what sort of weather your page is having.

Just a fun thing to make

There does not have to be a grand reason for every little project. Sometimes an effect catches your attention, you want to understand it, and you end up making something other people can play with too.

That is what this was for me.

Maybe it ends up in a portfolio header, a playful landing page, or your website’s footer. A cloud version of your logo floating at the bottom of a page could be a fun little detail, especially with the transparent background letting it sit naturally within your design.

Or maybe you find a use for it that I have not thought of at all. That is part of the fun of putting something like this out there.

Making something simply because it is fun is a perfectly good use of curiosity.

Cloudify is available for free on the Framer Marketplace. Grab it, try your logo, type something ridiculous, and see what you come up with.

And if you know someone who would enjoy putting their logo in the sky, send it their way.

I cannot wait to see what you make with it. 🌥️