Fluid Mask

Transform your site with Fluid Mask, a high-performance interactive WebGL fluid simulation component for Framer.

Transform your site with Fluid Mask , a high-performance interactive WebGL fluid simulation component for Framer. Just drag and drop , customize your typography , and watch dynamic ink ripples invert text in real time as visitors move their cursor or tap the screen. Fully GPU-accelerated with fluid physics, custom blending modes, and full canvas layout controls. 1. Perfect For: High-Impact Hero Sections: Grab immediate attention with interactive fluid ripples and inverse-blend typography. Creative Portfolios & Studios: Show off bold branding and motion design with an interactive, tactile poster aesthetic. Product & Event Launches: Create unforgettable landing page headers for tech, fashion, art, or agency sites. Interactive Brand Displays: Combine multi-swirl fluid dynamics with custom typography layers for a cutting-edge visual experience. 2. Key Features: Real-Time WebGL Fluid Physics: Fast, smooth Navier-Stokes fluid simulation with ambient ripple motion and live pointer forces. Dynamic Inversion & Blend FX: Seamlessly blend fluid over text using Difference, Exclusion, Screen, or Normal blend modes. Arbitrary Text & Free Positioning: Place primary titles and multi-layered text elements anywhere with wide-range pixel offsets, percentage positions, and pin constraints. Color Modes & Ink Swirls: Choose between Solid Color Tints, Multi-Swirl HSL shifts, or full Rainbow fluid modes. Fully Responsive & SSR Safe: Runs effortlessly across Desktop, Tablet, and Mobile with automatic WebGL context fallbacks and zero hydration issues. Keyboard Controls & Auto-Demo: Navigate and trigger fluid bursts using Space, Arrow Keys, and R (Clear), or enable hands-free auto ripples. 3. Refund Policy This is a digital product. All sales are final. Please test the live preview before purchasing. 4. Support & Custom Work Got questions or need custom Framer components or projects? Feel free to reach out anytime! Contact: hello@frolax.agency

Interactive WebGL Inversion Poster