Fluid Mesh Gradient

Move your cursor around the gradient to see it come alive.

⏹ ⏹ Great for ⏹ ⏹

• Interactive hero backdrop behind headlines/CTAs

• Ambient page background for marketing sites and portfolios

• High-touch “moment” for product launches, events, or brand storytelling sections

• Section transitions (paired with gradients/overlays) for depth and motion without video

⏹ ⏹ Features ⏹ ⏹

• Hero & background ready: Designed to sit behind content and elevate landing pages, product heroes, and section dividers with dynamic ambience.

• Cursor-reactive motion: Smooth, “liquid” response that feels premium.

• Autonomous drift + morph: Movement continues naturally with no cursor input, keeping the page feeling alive.

• High-quality WebGL shader: Single pass, procedural rendering, no image assets and no heavy DOM layers.

• Performance-minded: GPU-driven animation with adaptive rendering behavior to maintain smooth playback and avoid visible jitter.

• Easy art direction: Preset palettes plus custom colors (void + band stops) for quick brand matching.

• Control over feel: Tune scale, distortion, grain, bloom, and lag to go from subtle luxury to bold kinetic energy.

• Robust in real pages: Handles resize/visibility changes and maintains stable output in preview and runtime environments.

Made with ♡ by SOSOTAR. If you have any question, email play@sosotar.com