---
title: "Scroll Glass Lines — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Sirrah Space · Effects. Take your Framer website to the next level with the Scroll Glass Lines component."
canonical: "https://framer.elliotli.dev/component/scroll-glass-lines"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/Scroll Glass Lines

# Scroll Glass Lines

Parallax ribbed glass background.

[View on Framer](https://framer.com/marketplace/components/scroll-glass-lines/?via=elliot-li)

![Scroll Glass Lines preview image 1](https://framer.elliotli.dev/og/component/scroll-glass-lines/462d09ed598459da/1600x1200.jpg)

## Summary

Take your Framer website to the next level with the Scroll Glass Lines component.

## Description

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.
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #3600

## Details

- **Author**: Sirrah Space
- **Price**: $5.00
- **Published**: 2026-05-14
- **Updated**: 2026-07-26
- **Added**: 2026-05-10
- **Categories**: Effects

## More like this

-   [Particle Image](/component/particle-image) — Jamik · $12 — Logos and photos as 3D points
-   [Ascii Portrait](/component/ascii-portrait) — The Black Sheep · Free — Photos that dissolve into ASCII
-   [Sandfall](/component/sandfall) — Cyedi Creative Studio · $5 — Your headline, buried in coloured
-   [Still Water](/component/still-water) — DariStudio · $9 — Water ripples over any photo