WebGL Liquid
A flowing liquid field
A WebGL shader with controls for deep, mid, and highlight colors, speed, and flow strength. It includes a fallback when WebGL initialization fails.
Preview & install WebGL LiquidReact animated backgrounds
Compare liquid fields, auroras, and gradients for React hero sections. Preview the visual treatment, then open the component docs for its controls and source.
Choose a background around your content
Start with the text and actions the section must communicate. A liquid field brings visible movement; softer gradients and auroras can leave more room for the content. Check contrast across the full animation rather than one still frame.
Silk Aurora
A soft aurora treatment
Layer an atmospheric aurora behind a hero. Compare the preview with your own heading length and foreground colors.
Preview & install Silk AuroraAnimated Gradient
A moving gradient
Use a gradient-led treatment when a section needs color and movement without a recognizable scene.
Preview & install Animated GradientGrain Gradient
A textured color field
A breathing field of color with film grain and soft shadows. Use the controls to tune texture to the surrounding page.
Preview & install Grain GradientHow should I check a background before shipping?
Try it on a phone and a lower-powered device, inspect text contrast, and verify what happens when animation or graphics support is limited. Rendering technology and fallback behavior differ between components; a preview is not a performance guarantee.