Bring high-end digital environments to life with Liquid Silk. By combining advanced organic wave math with cinematic film grain, this component mimics the hypnotic flow of ethereal fabrics and liquid metal. Designed exclusively for Framer, it delivers a deeply immersive, sensory background that elevates your design without writing a single line of code.
Organic Motion: Smooth, fabric-like wave patterns driven by custom GLSL math.
Cinematic Texture: Adjustable fractional noise for a premium frosted glass or matte finish.
True-to-Hex Colors: Advanced sRGB-to-Linear gamma correction ensures your exact brand colors render perfectly.
Flawless Looping: Mathematical continuity guarantees a seamless 60fps experience.
Instead of overwhelming you with broken settings, Liquid Silk offers a highly tuned, foolproof control set:
Base Color: Native Framer Color Picker support.
Flow Speed: Adjust the velocity from a slow, ambient drift to an energetic wave.
Wave Scale: Zoom in for broad, elegant folds or out for dense, rippling textures.
Rotation: Full 360° control over the wave's directional flow.
Grain Intensity: Dial in the perfect amount of noise for added depth.
Bulletproof Resizing: Built with a custom ResizeObserver, ensuring it never breaks, shrinks, or misaligns when dropped into a Framer Stack or Grid.
Vanilla Three.js: Ultra-lightweight architecture that completely bypasses heavy React wrappers for raw, GPU-accelerated speed.
Retina-Ready: Dynamic devicePixelRatio scaling ensures crisp edges on 4K and Apple displays.
Memory Optimized: Aggressive garbage collection prevents browser lag on long-scrolling pages.
High-end SaaS and Web3 landing pages
Luxury fashion & branding portfolios
Premium ecommerce hero sections
Creative agency websites
Architectural and interior design showcases
Code Component M
