Light Curtain

Light Curtain

About Light Curtain

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.