Mantine Scene 2.1 β now with rain, confetti, parallax waves & viewport-aware lazy mode
Hey Hunters π
I just shipped Mantine Scene v2.1 β a React component library that lets you compose decorative animated backgrounds out of stackable layers: gradients, glows, mesh gradients, particles, weather effects, parallax waves, and more. Built on top of Mantine 9, runs in any React 19 app.
This release is all about richer atmospheric effects and performance under real-world conditions.
π¬ What's new in 2.1
Three brand-new sub-scenes:
β’ Scene.Rain β angled rain streaks with a fully tunable splash effect at the bottom edge (size, opacity, thickness, count). Pair it with Scene.Glow for an instant lightning-storm effect.
β’ Scene.Confetti β multi-color, multi-shape celebration effect (rectangles, circles, triangles) with a continuous loop and a one-shot burst mode. Set origin to "bottom" and it flips into a confetti cannon: pieces shoot upward, peak, and fall back down. An onComplete callback fires when the last piece settles.
β’ Scene.Waves β multi-layer parallax SVG waves panning horizontally. Per-layer paths are generated deterministically and tile seamlessly. You pick the direction (left or right), the parallax intensity (negative values invert the depth for a dreamy feel), the position (top or bottom), and either a color palette or single-color shade derivation.
Viewport-aware lazy mode
Set the lazy prop on Scene and the component pauses every child animation and the internal mouse-tracking rAF loop when it scrolls off-screen β automatically resuming when it comes back. Built on IntersectionObserver, toggling a CSS attribute directly on the DOM, so it produces zero React re-renders on viewport enter/leave events. Great for long landing pages with multiple decorative scenes.
onMousePosition callback
When interactive is on, you can now pipe the smoothed cursor position out of the scene to coordinate with external UI β toasts, cursors, custom hover indicators, anything that should track the same eased-out coordinates the scene uses internally.
Responsive props go CSS-native
Dimension props like Glow size, Glow blur, and DotGrid spacing now use Mantine's StyleProp + InlineStyles pattern (the same one SimpleGrid and AppShell use). Breakpoint changes update CSS variables via @media queries β no React re-renders at all on window resize.
βοΈ Why I built it
I wanted a way to drop atmospheric animated backgrounds into Mantine apps without reaching for canvas libraries or framer-motion choreography. Everything in Mantine Scene is CSS-animation-driven, deterministic via PRNG seeds, SSR-safe, respects prefers-reduced-motion, and uses the Mantine theming system end-to-end (MantineColor, theme breakpoints, the Styles API).
This release pushes the library closer to "drop in three lines, get a polished animated hero section" while keeping the bundle small and the runtime cost predictable.
π§ Tech notes for the curious
β’ Pure CSS animations plus occasional requestAnimationFrame for mouse-tracking smoothing
β’ Deterministic per-particle layout via mulberry32 PRNG, no jank between mounts
β’ Scene.Waves SVG paths generated with integer-frequency sine waves so translateX(-50%) tiles seamlessly
β’ 24 jest tests, full Mantine 9 / React 19 / TypeScript 6 support
π¦ Install: npm install @gfazioli/mantine-scene
π Docs and playground: https://gfazioli.github.io/mantine-scene/
π GitHub: https://github.com/gfazioli/mantine-scene
Would love feedback on the new effects β and ideas for what should come next. Some folks have been asking for a fog/mist sub-scene, lightning bolts as a first-class sub-scene (instead of the Rain + Glow combo), and audio-reactive variants. Curious what the Hunt thinks π
Happy to answer any questions in the comments!
Replies