Animated Backgrounds — With 5 different styles

Where to use

• Hero Sections

• SaaS Landing

• Dashboard Headers

• Portfolio Websites

• App Backgrounds

• Startup Websites

• Product Launches

• Marketing Pages

• Interactive Layouts

• Loading Screens

Features

• 5 Styles — Fluid, nebula, plasma, flare, and flame shader effects.

• WebGL Engine — GPU-powered rendering with Three.js for smooth animation.

• Realtime Controls — Adjust scale, distortion, speed, intensity, and detail live.

• Custom Colors — Four editable color layers for unique visual themes.

• Performance — Optimized shaders with capped pixel ratio for smoother playback.

• Responsive — Automatically scales to different layouts and screen sizes.

• Live Animation — Continuous motion with smooth frame timing updates.

• Hot Swapping — Instantly switch shader styles without reloading.

• Viewport Detection — Pauses rendering when offscreen to improve performance.

• Framer Controls — Fully integrated Framer property controls for easy editing.