Cloudify transforms any logo or text into a realistic, animated cloud shape using layered SVG displacement filters — no external libraries or APIs required. Upload an image or type custom text, and watch it dissolve into a soft, breathing vapor effect in real time.
The component uses advanced SVG turbulence, morphology, and displacement mapping to generate realistic cloud depth, tinted shadows, and a subtle wisp animation. Fully customizable through Framer property controls, it runs smoothly on both the Framer Canvas and live preview.
Key Features
- Image & Text content modes — cloudify logos or custom typography
- Animated wisp effect with adjustable speed (set to 0 to freeze)
- Thickness & Cloudiness sliders for full density control
- Light sky, dark sky, and transparent background modes
- Dark Clouds toggle for moody, dimmed aesthetics
- Cloud Tint color control for shadow hue
- Font family, weight, and tracking controls in text mode
- Works best with SVG logos for the sharpest, cleanest cloud shapes
- No external dependencies or APIs
- Optimized for Framer Canvas and Preview
Where to Use
- Hero sections and landing pages
- Brand reveals and logo animations
- Agency portfolios and case study headers
- Web3, DeFi, and AI product launches
- Dark mode brand assets
- Creative coding and experimental UI
Best For
- Designers building atmospheric, premium visuals
- Framer creators showcasing advanced SVG effects
- Motion-heavy layouts and immersive brand experiences
- Portfolios, pitch decks, and experimental web projects
Tip: For the best results, upload your logo as an SVG — vector shapes produce the sharpest, most defined cloud silhouettes. PNG and JPEG work too, but SVGs give you pixel-perfect edges at any size.
Studio0x
