This component is created on top of the Mantine library.
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.
| 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.Aurora |
Shimmering aurora borealis bands with wave animation |
- 🎨 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
- 🖱️ Interactive Mode: Enable mouse tracking — Glow, Gradient, and StarWarp react to cursor position with configurable LERP easing
- 📱 Responsive Props: Key props (
count,size,blur,spacing) accept Mantine responsive objects like{ base: 50, md: 100 } - ♿ Accessibility:
aria-hidden="true"by default; respectsprefers-reduced-motionwith configurablereducedMotionprop - 🖥️ Fullscreen: Set
fullscreento cover the entire viewport withposition: fixed - 🎨 Styles API: Full Mantine Styles API support for all sub-components
- 📦 TypeScript: Complete type safety with exported prop interfaces and factory types
npm install @gfazioli/mantine-sceneor
yarn add @gfazioli/mantine-sceneAfter installation import package styles at the root of your application:
import '@gfazioli/mantine-scene/styles.css';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>
);
}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.