component
Shader Backgrounds
By Saadat Ali

Details
- Saadat AliAuthor
- componentType
- 2026-06-11Published
- 2026-09-08Updated
- 2026-05-19Added
- BackgroundsCategories
Summary
Animated liquid glass backgrounds
Description
................................................................................................ Add Premium Components To Your Projects: Where to use: Say goodbye to flat, boring hero sections. This high-end WebGL component is built to instantly elevate your site's perceived value. It is incredibly effective for: Hero Sections: Grab your visitors' attention the millisecond they land on your page with premium, silky 3D motion. Creative Portfolios & Agencies: Showcase your cutting-edge aesthetic and technical capabilities without writing a single line of code. SaaS Landing Pages: Add a modern, tech-forward background that adds immense depth while letting your core typography and call-to-action buttons pop. Main Features: 4 Distinct 3D Shapes: Seamlessly toggle between Diagonal, Vertical, Corrugated, or Sweeping Fold styles to find the perfect geometric flow for your layout. Unlimited Color Control: Fully integrated with Framer's property panel. Create your own custom iridescent palettes by tweaking the core, inner bands, and edge highlight colors. High-Performance WebGL: Built with optimized Three.js and custom GLSL shaders. Delivers silky-smooth 60fps animations that look stunning on any device. Smart Viewport Optimization: Automatically pauses the animation when scrolled out of view, ensuring your website remains lightning-fast and battery-friendly.
Introduction
Animated liquid glass backgrounds
Rank history
Daily rank per list, from the first snapshot — lower is better.
- All · #547