---
title: "Light Curtain — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Sirrah Space · Effects. Transform your website's background with the Precision Light Curtain, a high-performance WebGL shader component for Framer."
canonical: "https://framer.elliotli.dev/component/light-curtain"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/Light Curtain

# Light Curtain

Animated 3D light curtain effect.

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

![Light Curtain preview image 1](https://framer.elliotli.dev/og/component/light-curtain/9dc3828a6793b59d/1600x1200.jpg)

## Summary

Transform your website's background with the Precision Light Curtain, a high-performance WebGL shader component for Framer.

## Description

Transform your website's background with the Precision Light Curtain, a high-performance WebGL shader component for Framer. This component renders a mesmerizing array of vertical glowing beams that gracefully sweep across the screen, grounded by a radiant horizon line. It creates a stunning, futuristic atmosphere perfect for modern portfolios, tech startups, and SaaS landing pages.

Designed for ultimate flexibility, it gives you deep control over the visual output. Seamlessly adjust the number of beams, their thickness, edge curves, and the horizon line's position. You can independently set the background, top glow, and bottom floor reflection colors to match your brand identity. Engineered with an IntersectionObserver, the animation intelligently pauses when scrolled out of view, ensuring buttery-smooth 60fps performance without draining your users' device battery. Add a touch of cinematic lighting to your design effortlessly.

**Functions (Key Features):**

-   🌟 **Dynamic Light Beams:** Animated vertical pillars of light with a sweeping, cinematic glow effect.
    
-   🎨 **Advanced Color Control:** Independently customize the background, top beam glow, and bottom floor reflection colors.
    
-   🎛 **Precision Styling:** Tweak the beam count, beam width, top fade softness, and edge curve for the perfect composition.
    
-   📍 **Horizon Tuning:** Adjust the Y-position, line thickness, and brightness of the central glowing horizon.
    
-   🚀 **Smart Performance:** GPU-accelerated WebGL rendering with an automatic off-screen pause mechanism to save system resources.
    

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

-   All · #1685

## Details

- **Author**: Sirrah Space
- **Price**: $5.00
- **Published**: 2026-09-01
- **Updated**: 2026-09-02
- **Added**: 2026-09-01
- **Categories**: Effects

## More like this

-   [Liquid Glass Loupe](/component/liquid-glass-loupe) — Aisol Studio · $12 — Liquid glass lens over content
-   [Sticky Scenes](/component/sticky-scenes) — Sofía Martín · $5 — Scroll-driven stories with sticky
-   [Studio ASCII Reveal](/component/studio-ascii-reveal) — Tanmay Kaper · $12 — Your portrait, redrawn in ASCII
-   [Kinetic Sprout](/component/kinetic-sprout) — Buster Studios · $19 — A headline that grows