Take your Framer website to the next level with the Scroll Glass Lines component. This advanced WebGL background simulates the luxurious aesthetic of fluted (ribbed) glass. Behind the textured surface, vibrant fluid blobs seamlessly morph and glide, creating a beautiful, eye-catching gradient refraction.
What makes this updated version exceptional is the Scroll-Synced Parallax engine. Designed with a position: sticky canvas, the glass texture shifts naturally in tandem with the user's scrolling, creating a deep, immersive 3D illusion without compromising performance. Built strictly 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 visual anchor for modern SaaS platforms, creative agencies, and premium portfolios.
Functions (Key Features):
📜 Scroll Parallax: The background intelligently tracks the page scroll, applying a smooth vertical parallax shift to the glass texture.
✨ Ribbed Glass Optics: Simulates real fluted glass with adjustable refraction (distortion), edge highlights, and deep shadows.
🎨 Fluid Gradient Blobs: Three distinct color blobs continuously merge and move behind the glass layer.
🔄 Pattern Control: Easily switch the glass ridges between Vertical and Horizontal orientations.
🚀 Smart Performance: Utilizes a sticky WebGL canvas and an Intersection Observer to automatically pause rendering when off-screen.
How to Use:
Copy & Paste: Copy the component from the Layers panel and paste it into your Framer project.
Layout Setup: For the best parallax effect, place it inside a tall section (e.g., Height: 200vh). The internal canvas uses position: sticky, ensuring it perfectly tracks the user's scroll depth.
Customize Colors: Set your Background color and the three moving Blob colors to match your brand identity.
Glass Texture: Adjust the Direction and Line Size to scale the ribbed glass effect to your liking.
Fine-Tune Optics: Modify the Speed, Refraction, Edge Light, and Edge Shadow sliders to dial in the hyper-realistic glassmorphism.
Alpheratz
