Rain Effect

Transform your Framer website into a cinematic experience with the Rain Effect.

Transform your Framer website into a cinematic experience with the Rain Effect . Built using custom GLSL shaders, this high-performance background component renders realistic rain physics complete with splash particles, depth-based parallax, and dynamic lighting. It is designed to be highly interactive: a localized light source follows the user's mouse cursor, illuminating nearby raindrops and creating a deep, atmospheric 3D effect. You can also toggle random lightning flashes to intensify the mood. Engineered for top-tier performance, it comes equipped with a smart Intersection Observer that automatically pauses the WebGL rendering when the component is scrolled out of view, ensuring zero impact on your site's CPU and GPU performance. Functions (Key Features): 🌧️ Realistic Physics: Drops fall with varied speeds and depths, shattering into dynamic splash particles upon impact. 🖱️ Interactive Lighting: A dynamic light source tracks the user's cursor to illuminate nearby raindrops in real-time. ⚡ Dynamic Lightning: Optional randomized lightning flashes to create a dramatic, stormy atmosphere. 🚀 WebGL Performance: GPU-accelerated rendering with an automatic off-screen pause mechanism to save battery and resources. 🎨 Full Customization: Granular control over rain intensity, speed, drop colors, lighting tint, and lightning frequency. How to Use: Copy & Paste: Copy the component from the Layers panel and paste it directly into your Framer canvas. Sizing: Set the container's Width and Height to "Fill" (100%) to use it as a full-bleed background, and place it behind your main content. Configure Rain: Adjust the Intensity , Speed , and Splash Size to control how heavy the storm feels. Set the Mood: Enable Lighting for mouse-tracking illumination and Lightning Flash for dramatic ambient bursts. Colors: Customize the Background , Rain Base , Splash Tint , and Light Color to perfectly match your brand or website theme.

Cinematic WebGL rain with lightning.