Bring Your Layouts to Life with Kinetic Metal Flow
Add an impactful aesthetic to your Framer website. Kinetic Metal Flow captures the heavy, hypnotic ripple of molten chrome and illuminated liquid metal, bringing a living art-installation feeling directly to your canvas.
Whether you want an ambient background or a bold, high-contrast focal point, this component offers a highly immersive experience.
What it does
Sharp on Retina: Automatically scales to match high-DPI and Retina displays so the metallic highlights never look pixelated or blurry.
Layer Friendly: Built with alpha-channel transparency and click-through disabled (pointer-events: none), meaning you can stack it seamlessly over background gradients, grids, or behind text.
Proper Cleanup: Safely purges its own WebGL memory buffers when unmounted, preventing memory leaks or browser lag over long sessions.
Controls
Adjust the animation look directly from the Framer sidebar:
Flow Speed: Changes how fast the liquid moves (from a slow, heavy crawl to a quicker ripple).
Wave Density: Controls the frequency of the shapes (broad, sweeping sheets vs. tight, detailed waves).
Contrast Power: Adjusts the balance between the bright chrome highlights and the dark background shadows.
Perfect For:
High-end tech, AI engineering, and developer landing pages.
Sleek dark-mode portfolios and creative agency homepages.
Immersive digital artwork grids and premium hero sections.
Modern fashion, architecture, and luxury product showcases.
Bring Your Layouts to Life with Kinetic Metal Flow
Add an impactful aesthetic to your Framer website. Kinetic Metal Flow captures the heavy, hypnotic ripple of molten chrome and illuminated liquid metal, bringing a living art-installation feeling directly to your canvas.
Whether you want an ambient background or a bold, high-contrast focal point, this component offers a highly immersive experience.
What it does
Sharp on Retina: Automatically scales to match high-DPI and Retina displays so the metallic highlights never look pixelated or blurry.
Layer Friendly: Built with alpha-channel transparency and click-through disabled (pointer-events: none), meaning you can stack it seamlessly over background gradients, grids, or behind text.
Proper Cleanup: Safely purges its own WebGL memory buffers when unmounted, preventing memory leaks or browser lag over long sessions.
Controls
Adjust the animation look directly from the Framer sidebar:
Flow Speed: Changes how fast the liquid moves (from a slow, heavy crawl to a quicker ripple).
Wave Density: Controls the frequency of the shapes (broad, sweeping sheets vs. tight, detailed waves).
Contrast Power: Adjusts the balance between the bright chrome highlights and the dark background shadows.
Perfect For:
High-end tech, AI engineering, and developer landing pages.
Sleek dark-mode portfolios and creative agency homepages.
Immersive digital artwork grids and premium hero sections.
Modern fashion, architecture, and luxury product showcases.
