https://gfazioli.github.io/mantine-scene/
A composable decorative background system for Mantine with gradients, particles, noise, and interactive effects.
https://gfazioli.github.io/mantine-scene/
animation aurora background css-animation decorative-background extension gradient mantine mantine-component mantine-ui mantine-v9 noise-texture particles react react-component starfield typescript visual-effects
Last synced: 2 months ago
JSON representation
A composable decorative background system for Mantine with gradients, particles, noise, and interactive effects.
- Host: GitHub
- URL: https://gfazioli.github.io/mantine-scene/
- Owner: gfazioli
- License: mit
- Created: 2026-03-12T06:08:55.000Z (3 months ago)
- Default Branch: master
- Last Pushed: 2026-04-03T16:08:08.000Z (3 months ago)
- Last Synced: 2026-04-04T14:10:33.589Z (2 months ago)
- Topics: animation, aurora, background, css-animation, decorative-background, extension, gradient, mantine, mantine-component, mantine-ui, mantine-v9, noise-texture, particles, react, react-component, starfield, typescript, visual-effects
- Language: TypeScript
- Homepage: https://gfazioli.github.io/mantine-scene/
- Size: 7.3 MB
- Stars: 4
- Watchers: 0
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-mantine - Mantine Scene - A composable decorative background system for Mantine with gradients, particles, noise, and interactive effects. (Libraries)
README
# Mantine Scene Component
[](https://www.npmjs.com/package/@gfazioli/mantine-scene)
[](https://www.npmjs.com/package/@gfazioli/mantine-scene)
[](https://www.npmjs.com/package/@gfazioli/mantine-scene)
---
[
❤️ If this component has been useful to you or your team, please consider becoming a sponsor
](https://github.com/sponsors/gfazioli?o=esc)
## Overview
This component is created on top of the [Mantine](https://mantine.dev/) library.
It requires **Mantine 9.x** and **React 19**.
[Mantine Scene](https://gfazioli.github.io/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.Aurora` | Shimmering aurora borealis bands with wave animation |
## 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
- 🖱️ **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; 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](https://gfazioli.github.io/mantine-scene/) → [More Mantine Components](https://mantine-extensions.vercel.app/)
## Installation
```sh
npm install @gfazioli/mantine-scene
```
or
```sh
yarn add @gfazioli/mantine-scene
```
After installation import package styles at the root of your application:
```tsx
import '@gfazioli/mantine-scene/styles.css';
```
## Usage
```tsx
import { Scene } from '@gfazioli/mantine-scene';
import { Box, Text } from '@mantine/core';
function Demo() {
return (
Your content here
);
}
```
## Sponsor
[
❤️ If this component has been useful to you or your team, please consider becoming a sponsor
](https://github.com/sponsors/gfazioli?o=esc)
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](https://github.com/sponsors/gfazioli?o=esc) today and help me keep this project reliable, up‑to‑date, and growing for everyone.
---
[](https://www.star-history.com/#gfazioli/mantine-scene&Timeline)