Liquid Background

A reactive and dynamic background effect using OGL for WebGL-based visuals.

API

This component does not require external props to function, as it dynamically renders the liquid background effect on mount.

Note: This component uses OGL Web Renderer & requires ogl npm package as a dependency.

npm

pnpm

bun

yarn

npx shadcn-vue@latest add "https://inspira-ui.com/r/liquid-background.json"

You can copy and paste the following code to create this component:

LiquidBackground.vue

WebGL Rendering: Utilizes the OGL library to provide hardware-accelerated background effects.
Animated Shader: Runs a custom fragment and vertex shader to generate a liquid-like visual animation.
Automatic Resizing: Listens to window resize events and adjusts the canvas dimensions accordingly.
Clean Resource Management: Disposes of the WebGL context and removes event listeners upon unmount, preventing memory leaks.

OGL Renderer: Creates a renderer with new Renderer() and appends the associated canvas to the DOM.
Shader Programs: Defines vertex (vert) and fragment (frag) shaders, where the fragment shader implements the liquid animation logic.
Triangle Geometry: Uses OGL’s built-in Triangle geometry for a full-screen quad.
Uniforms:
- uTime: Updated each frame to animate the shader.
- uResolution: Adjusted on window resize to maintain consistent visuals.
- uColor: An example color uniform (slightly purple) used in the shader.
Animation Loop: Schedules updates via requestAnimationFrame, updates uTime, and renders the scene.

On This Page