Enhance your Framer website with the Scroll Glass Grid component. This advanced WebGL background creates a luxurious frosted glass block aesthetic. Behind the grid, vibrant fluid blobs organically morph and glide, generating dynamic, eye-catching color refractions.
Designed for maximum visual impact, it features a scroll-synced parallax engine via a sticky canvas layout, ensuring the glass texture shifts naturally as users scroll down the page. Built with raw GLSL shaders and a smart visibility sensor, it delivers buttery-smooth 60fps animations while preserving device battery and CPU resources. It is the perfect foundational element for creative agencies, SaaS landing pages, and premium portfolios looking for a highly interactive, high-tech touch.
Functions (Key Features):
📜 Scroll Parallax: Intelligently tracks page scroll for a natural, deep 3D illusion without performance drops.
✨ Glass Block Optics: Simulates realistic frosted glass blocks with adjustable refraction, edge highlights, and deep shadows.
🎨 Fluid Gradient Blobs: Three distinct fluid color blobs merge and animate beautifully behind the glass layer.
🚀 Smart Performance: Utilizes an off-screen pause mechanism to automatically save CPU and GPU resources when not in view.
📐 Grid Sizing: Easily adjust the Block Size to create fine geometric textures or large, bold glass panels.
How to Use:
Copy & Paste: Copy the component from the Layers panel and paste it directly into your Framer project.
Layout Setup: For the best parallax experience, place it inside a tall section (e.g., Height: 200vh). The internal canvas uses position: sticky to perfectly track the user's scroll depth.
Customize Colors: Define the Background color and the three moving Blob colors to match your brand palette.
Glass Texture: Adjust the Block Size slider to scale the grid pattern up or down.
Fine-Tune Optics: Modify Speed, Refraction, Edge Light, and Edge Shadow to dial in your perfect hyper-realistic glassmorphism effect.
Alpheratz
