56:I[473921,["/creators-assets/_next/static/immutable/chunks/36c08p67t0nml.js","/creators-assets/_next/static/immutable/chunks/3ayu63s3pbx5h.js","/creators-assets/_next/static/immutable/chunks/2qqxwi6m3n33t.js","/creators-assets/_next/static/immutable/chunks/3283ev4bymz-y.js","/creators-assets/_next/static/immutable/chunks/1tyeiicl34tqo.js","/creators-assets/_next/static/immutable/chunks/24bk4ojcoor5n.js","/creators-assets/_next/static/immutable/chunks/3k0o12ps7rnq6.js","/creators-assets/_next/static/immutable/chunks/2fw--q9y_1nc-.js","/creators-assets/_next/static/immutable/chunks/00hohn9l3ocx9.js","/creators-assets/_next/static/immutable/chunks/271g_l-8c77ee.js","/creators-assets/_next/static/immutable/chunks/3uo-268z2xnq9.js","/creators-assets/_next/static/immutable/chunks/1eyot9c9uwocm.js","/creators-assets/_next/static/immutable/chunks/31xze_yiju0_q.js","/creators-assets/_next/static/immutable/chunks/06p8bv9p94pxh.js","/creators-assets/_next/static/immutable/chunks/42u1pxaq7eeka.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/2gb4kwi-0_ftg.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/0vxt9zvn936s0.js","/creators-assets/_next/static/immutable/chunks/102julo6bufcv.js","/creators-assets/_next/static/immutable/chunks/15z5hu5cixks0.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/3fujn21cf_mt1.js","/creators-assets/_next/static/immutable/chunks/0mwzcaalgk6io.js","/creators-assets/_next/static/immutable/chunks/2ch5kewqiwntv.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/2_dm0za3asre2.js","/creators-assets/_next/static/immutable/chunks/3wj273i6wglef.js","/creators-assets/_next/static/immutable/chunks/30ex342hi0wzr.js","/creators-assets/_next/static/immutable/chunks/0toe1wcov_38e.js","/creators-assets/_next/static/immutable/chunks/222e_wk0i41rv.js","/creators-assets/_next/static/immutable/chunks/28h79imj-g45k.js","/creators-assets/_next/static/immutable/chunks/3pe6luvwzbwnz.js","/creators-assets/_next/static/immutable/chunks/3nd1mzwm7q_f7.js","/creators-assets/_next/static/immutable/chunks/33kea80yupbzt.js","/creators-assets/_next/static/immutable/chunks/3oj8b9u7wi0dw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3f2ccywlofkgw.js","/creators-assets/_next/static/immutable/chunks/1-gdi7ej49wy6.js","/creators-assets/_next/static/immutable/chunks/05yll7e_snxjv.js"],"PostDetailCard"] 57:T6b2,

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.

53:[["$","$L56",null,{"post":{"id":"019e26bb-00d7-7008-b665-bbebd639efc0","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"0c5ede99-5a4e-45b9-81b3-1bb1634bd38c","name":"Sirrah Space","slug":"sirrahspace","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0c5ede99-5a4e-45b9-81b3-1bb1634bd38c/22zqe6c5","followed":false,"followsYou":false},"media":[],"resources":[{"id":"qD84Jb2NY0BM1Y3iGi5Z","resolved":true,"title":"Scroll Glass Lines","body":"$57","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Take your Framer website to the next level with the "},{"type":"text","text":"Scroll Glass Lines","marks":[{"type":"bold"}]},{"type":"text","text":" 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."}]},{"type":"paragraph","content":[{"type":"text","text":"What makes this updated version exceptional is the "},{"type":"text","text":"Scroll-Synced Parallax","marks":[{"type":"bold"}]},{"type":"text","text":" 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."}]},{"type":"paragraph","content":[{"type":"text","text":"Functions (Key Features):","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"📜 "},{"type":"text","text":"Scroll Parallax:","marks":[{"type":"bold"}]},{"type":"text","text":" The background intelligently tracks the page scroll, applying a smooth vertical parallax shift to the glass texture."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"✨ "},{"type":"text","text":"Ribbed Glass Optics:","marks":[{"type":"bold"}]},{"type":"text","text":" Simulates real fluted glass with adjustable refraction (distortion), edge highlights, and deep shadows."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"🎨 "},{"type":"text","text":"Fluid Gradient Blobs:","marks":[{"type":"bold"}]},{"type":"text","text":" Three distinct color blobs continuously merge and move behind the glass layer."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"🔄 "},{"type":"text","text":"Pattern Control:","marks":[{"type":"bold"}]},{"type":"text","text":" Easily switch the glass ridges between Vertical and Horizontal orientations."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"🚀 "},{"type":"text","text":"Smart Performance:","marks":[{"type":"bold"}]},{"type":"text","text":" Utilizes a sticky WebGL canvas and an Intersection Observer to automatically pause rendering when off-screen."}]}]}]}]},"introduction":"Parallax ribbed glass background.","slug":"scroll-glass-lines","author":{"framerUserId":"0c5ede99-5a4e-45b9-81b3-1bb1634bd38c","name":"Sirrah Space","slug":"sirrahspace","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0c5ede99-5a4e-45b9-81b3-1bb1634bd38c/22zqe6c5","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/qD84Jb2NY0BM1Y3iGi5Z/scroll-glass-lines-ZW6F7ishoKdqAgBd5JdLPkPGYZ74WT","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-05-10T06:30:14.575Z","updatedAt":"2026-07-26T11:26:30.916Z","publishedAt":"2026-05-14T13:44:10.199Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://dazzled-time-401464.framer.app/","price":"5","paymentUrl":"https://sirrahspace.lemonsqueezy.com/checkout/buy/0dc892bc-6889-48e4-99ec-817f8762b3b3","workshop":false,"categories":[{"id":"323e97d6-f443-488c-8661-794a9a83a20f","name":"Effects","slug":"effects"}],"lastSaveId":"1VZWGv5e5cBqlQqzkVp0","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":6,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-05-14T13:44:10.199Z","updatedAt":"2026-05-14T13:44:10.199Z","reported":false,"type":"post"}}],"$L58"]

Suggested for you