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.
Alpheratz
