Scene

The Scene community component — a decorative animated background that layers gradients, glow blobs, dot grids, and noise behind your content. Usage, options, and live examples.

scene is a decorative animated background: it layers effects — gradients, glow blobs, dot grids, and noise grain — behind the block body. Turn layers on with the flags gradient, glow, dotGrid, and noise, tune each with a few color shortcuts, or pass layersJson for full control. The block body is the foreground content rendered over the scene.

A Community Component — wraps Scene by gfazioli, MIT licensed, npm @gfazioli/mantine-scene.

Use it as {% scene … %} in Markdown, or call it from Python logic (loops, snippets) via component('aardvark', 'scene', …).

Demonstrations

A gradient backdrop

Turn on the gradient layer and set gradientFrom / gradientTo to wash the background with a color blend behind your content.

{% scene gradient gradientFrom='indigo' gradientTo='grape' %}
### Layered over a gradient
A soft color wash sits behind this text.
{% endScene %}

Glow and a dot grid

Stack layers by combining flags — here a glow blob and a dotGrid, each with its own color shortcut (glowColor, dotColor).

{% scene glow glowColor='cyan' dotGrid dotColor='blue' %}
### Glow + dots
Two layers compose back-to-front behind the content.
{% endScene %}

Mouse-tracking interaction

Add interactive so the scene responds to the pointer, and noise for a subtle film grain.

{% scene interactive glow glowColor='grape' noise %}
### Move your mouse
The glow follows the pointer; a noise layer adds grain.
{% endScene %}

Full control with layersJson

When the flag shortcuts aren’t enough, pass layersJson — a JSON array of {kind, …} descriptors, where kind is the layer type and the rest are that layer’s props. Order is back-to-front.

{% scene layersJson='[{"kind":"gradient","type":"radial","from":"teal","to":"blue"},{"kind":"glow","color":"teal"},{"kind":"noise"}]' %}
### Composed from JSON
A radial gradient, a glow, and noise — fully specified.
{% endScene %}

With other components

Use a Scene as the backdrop for a hero, then layer other built-in tags over it — here a {% title %} and a {% badge %}.

{% scene gradient gradientFrom='blue' gradientTo='cyan' glow %}
{% title order=2 %}Build with Aardvark{% endTitle %}
Status: {% badge color='green' %}stable{% endBadge %}
{% endScene %}

Attributes

Omit any attribute to take its default. Bare flags (e.g. gradient, glow) become =True.

CSS Selector

The scene mounts inside a wrapper carrying data-aardvark-island="Scene", and Mantine’s Scene exposes Styles API class names you can target:

/* The scene container that holds the layers + your content */
[data-aardvark-island='Scene'] .mantine-Scene-root { }
/* The foreground content layer (your block body) */
[data-aardvark-island='Scene'] .mantine-Scene-content { }
/* Individual effect layers (gradient / glow / dot grid / noise) */
[data-aardvark-island='Scene'] .mantine-Scene-layer { }

Injecting Attributes

Use attr={…} to forward raw HTML attributes (data-*, ARIA, etc.) onto the rendered element — they ride a separate channel from the React props, so they never collide with a component prop.