Liquid Aura Gradient

Liquid Aura Gradient

About Liquid Aura Gradient

Immerse your users in a mesmerizing visual experience with Liquid Aura Gradient. Powered by WebGL and custom shaders (GLSL), this component renders organic, fluid color transitions that look like moving oil or a digital aurora.

Unlike heavy video backgrounds, this generative shader runs smoothly on the GPU. It utilizes domain warping algorithms (Simplex Noise) to create complex, non-repeating patterns. It is the ultimate background solution for Web3 interfaces, AI landing pages, and high-end creative portfolios looking for that "ethereal" or holographic aesthetic.

Functions (Key Features):

  • WebGL Powered: Renders natively on the GPU for buttery-smooth 60fps performance without video compression artifacts.

  • 🌈 4-Point Blending: Mixes four distinct colors to create deep, rich gradients that shift organically.

  • 🌀 Domain Warping: Uses advanced noise algorithms to create fluid, swirling distortions unique to shaders.

  • 🌫️ Softness Control: Integrated Blur property allows you to go from sharp liquid details to a soft, dreamy aura.

  • ⏱️ Adjustable Flow: Control the Speed of the animation to match your site's energy, from calm ambient to fast-paced.

How to Use:

  1. Insert: Drag the Liquid Aura Gradient component onto your canvas.

  2. Sizing: Set Width and Height to "Fill" (100%) to use it as a full-screen background.

  3. Colors: Assign the 4 Color inputs (e.g., Cyan, Pink, Orange, Purple) to match your brand palette.

  4. Mood: Adjust the Speed (0.5 for slow, 2.0 for energetic) and Blur (increase to remove noise grain and make it softer).

  5. Layering: Place white text or glass-morphism cards on top for a stunning modern contrast.