Skip to content

component

Shader Backgrounds

By Saadat Ali

Details

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.

12014016017178/148/228/309/79/15
  • All · #547