Animated Backgrounds
Reusable ambient components for the npm package, paired with a richer showcase treatment in the docs app. The components stay practical and theme-aware, while this page pushes the presentation a bit further.
Ambient motion that feels product-ready, not distracting
Use `AnimatedBackground` as the container, then swap decorative presets like `GradientOrbs` and `GridGlow` depending on whether the page needs softness or structure.
Recommended defaults
`intensity="medium"` and `speed="slow"`
Style
Restrained default
Preset gallery
Each preset stays decorative and composable. The wrapper controls motion intensity and timing so consumers do not have to tune raw CSS values.
Hero Atmosphere
Soft blurred energy for landing pages, sign-in shells, and product launches.
Spotlight Reveal
Center-focused attention for feature callouts, pricing, and CTA sections.
Structured Surface
Sharper geometry for dashboards, technical marketing, or empty-state containers.
GridGlow adds structure
This preset works well behind analytics tiles, technical feature callouts, empty states, and documentation sections where you want motion but still need crisp edges.
Signal
98.4%
System uptime
Latency
23ms
Median response time
GradientOrbs
Landing pages, auth screens, product launches, and premium hero sections.
GridGlow
Dashboards, changelogs, feature grids, or more technical visual surfaces.
AnimatedBackground
Any time you need a safe wrapper that manages layering and reduced motion.
Composable by design
Consumers can mix the wrapper with whichever preset fits the page, without pulling in a motion library or hand-authoring their own layered gradients.