Neural Reveal Fluid is a masterclass in WebGL integration for Framer. Moving far beyond standard CSS hover states or simple clip-paths, this component uses raw fragment and vertex shaders to create a liquid-like, interactive distortion field. As users move their cursor across the screen, a fluid "lens" dynamically reveals a secondary layer of media, complete with water-like ripples and cinematic color fringing.

This is the exact type of high-end, immersive "vibe code" used by top-tier award-winning agencies, now packaged into a highly optimized, drag-and-drop Framer component.

✨ Key Highlights

• Raw WebGL Fluid Physics: Powered by advanced Simplex noise algorithms, the component mathematically displaces the pixels inside the reveal mask, creating a mesmerizing, realistic liquid flow effect.

• Dual-Layer Media Engine: Seamlessly transition between any combination of media. Reveal a playing video from a static image, swap between two videos, or cross-fade high-resolution photography.

• Global Passive Sensing: Unlike standard hover effects that only trigger when the mouse enters the bounding box, this component uses global window sensing. The fluid lens anticipates and smoothly tracks the user's cursor even before they directly hover over the card.

• Cinematic Chromatic Aberration: Features a built-in RGB split effect on the edges of the reveal mask, giving the interaction a premium, physical glass-like optic quality.

• High-Performance Rendering: Highly optimized texture binding ensures that video frames are only sent to the GPU when they are actively playing, preventing memory leaks and keeping framerates buttery smooth.

⚙️ Complete Design Control

• Media & Playback: Independently assign Image or Video nodes for both the Base (Primary) and Reveal (Secondary) layers. Control Autoplay, Loop, and Mute states for each video layer independently.

• Shader Optics: Take total control over the GLSL math right from the Framer sidebar. Adjust the Lens Size (mask radius), increase the Flow intensity for wilder liquid displacement, and dial in the exact amount of RGB Fringe (aberration) and Edge Softness.

• Tactile Physics: Customize the "Mouse Damping" to control exactly how heavy or silky the fluid tracking feels.

• Container Styling: Easily adjust the border radius, drop shadows, and background color, and instantly turn the entire WebGL canvas into a clickable routed link.

💡 Perfect For

• High-End Portfolios: Use it as an unforgettable thumbnail interaction for premium design or architecture case studies.

• Video Showreels: Reveal dynamic video content behind a clean, minimalist typography-driven cover image.

• Futuristic Landing Pages: Inject immediate, high-tech interactivity into SaaS platforms, AI tools, or Web3 products.