Mantine Scene Component

---

❤️ If this component has been useful to you or your team, please consider becoming a sponsor

Overview

This component is created on top of the Mantine library. It requires Mantine 9.x and React 19.

Mantine Scene is a decorative background container that composes multiple visual layers to create rich, atmospheric backgrounds for your React applications. Place it behind your content and combine sub-components to build anything from subtle gradients to full starfield environments.

Sub-components

Component	Description
Scene.Gradient	Radial, linear, or conic gradient with optional rotate/pulse animation
Scene.Glow	Floating, animated glow blobs with float/pulse/breathe variants
Scene.DotGrid	Repeating dot pattern with stagger, fade masks, and twinkle animation
Scene.Mesh	Multi-stop radial gradient overlay simulating a mesh gradient
Scene.Noise	SVG-based film grain texture with configurable seed, type, and color tint
Scene.StarField	CSS-only star field with deterministic PRNG positioning and twinkle animation
Scene.StarWarp	Hyperspace warp-speed effect with configurable focal point and direction
Scene.ShootingStar	Animated shooting star trails at configurable angles and intervals
Scene.Snow	Falling snowflakes with horizontal drift and wind control
Scene.Rain	Angled rain streaks with optional bottom-edge splash effect
Scene.Confetti	Multi-shape confetti (rectangles, circles, triangles) with continuous or burst (onComplete) modes and configurable origin (top/bottom)
Scene.Waves	Parallax SVG wave layers with configurable direction, parallax intensity, and seamless horizontal panning
Scene.Aurora	Shimmering aurora borealis bands with wave animation
Scene.Radar	Concentric Wi-Fi / radar pulses with arc or circle shape and smart-default origin
Scene.Beams	Sweeping light columns or rows with cycled colours and configurable corner radius
Scene.Globe	Interactive 3D dotted globe (powered by cobe — optional peer dep) with markers, arcs (flight paths), drag, inertia, follow-cursor, focus

Features

• 🎨 Theme Integration: All color props accept Mantine theme colors (MantineColor)
• 🧩 Composable: Freely combine any number of sub-components — layer order follows DOM order
• ✨ Rich Animations: GPU-accelerated CSS animations (transform/opacity) with per-component controls
• 🌍 3D Globe: Interactive WebGL globe with markers, arcs, drag, inertia, and follow-cursor — cobe ships as an optional peer dep so it never weighs on consumers who don't use it
• 🖱️ Interactive Mode: Enable mouse tracking — Glow, Gradient, StarWarp and Globe react to cursor position with configurable LERP easing. Use onMousePosition to pipe smoothed coordinates to external UI
• 💤 Lazy Mode: Optional lazy prop pauses every child animation and the internal rAF loop when the scene leaves the viewport (via IntersectionObserver) — zero React re-renders
• 📱 Responsive Props: Dimension props (size, blur, spacing) use Mantine's native StyleProp<T> with InlineStyles + media queries — zero re-renders on resize, same pattern as SimpleGrid
• ♿ Accessibility: aria-hidden="true" by default; respects prefers-reduced-motion with configurable reducedMotion prop
• 🖥️ Fullscreen: Set fullscreen to cover the entire viewport with position: fixed
• 🎨 Styles API: Full Mantine Styles API support for all sub-components
• 📦 TypeScript: Complete type safety with exported prop interfaces and factory types

Note

→ Demo and Documentation → More Mantine Components

Installation

npm install @gfazioli/mantine-scene

or

yarn add @gfazioli/mantine-scene

After installation import package styles at the root of your application:

import '@gfazioli/mantine-scene/styles.css';

Usage

import { Scene } from '@gfazioli/mantine-scene';
import { Box, Text } from '@mantine/core';

function Demo() {
  return (
    <Box pos="relative" h={400}>
      <Scene>
        <Scene.StarField count={{ base: 50, md: 100 }} twinkle />
        <Scene.Gradient from="violet" fromOpacity={0.15} />
        <Scene.Glow color="violet" size={400} blur={120} opacity={0.3} top="20%" left="30%" />
        <Scene.DotGrid color="gray" opacity={0.3} spacing={24} />
        <Scene.Noise opacity={0.025} />
      </Scene>
      <Box pos="relative" style={{ zIndex: 1 }} p="xl">
        <Text size="xl" fw={700} c="white">Your content here</Text>
      </Box>
    </Box>
  );
}

Sponsor

❤️ If this component has been useful to you or your team, please consider becoming a sponsor

Your support helps me:

• Keep the project actively maintained with timely bug fixes and security updates
• Add new features, improve performance, and refine the developer experience
• Expand test coverage and documentation for smoother adoption
• Ensure long‑term sustainability without relying on ad hoc free time
• Prioritize community requests and roadmap items that matter most

Open source thrives when those who benefit can give back—even a small monthly contribution makes a real difference. Sponsorships help cover maintenance time, infrastructure, and the countless invisible tasks that keep a project healthy.

Your help truly matters.

💚 Become a sponsor today and help me keep this project reliable, up‑to‑date, and growing for everyone.

---