Reflection

The Reflection Community Component — paints a mirrored reflection beneath its content, with optional water ripple and contact shadow. Usage, options, and live examples.

reflection paints a mirrored reflection beneath the block body — the glassy floor-reflection look. Turn on ripple for an animated water ripple, tune the mirror with reflectionOpacity / reflectionDistance / reflectionBlur, and add a contact shadow with the shadow* props.

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

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

Demonstrations

The block body is the content to reflect. With no props you get a clean static mirror beneath it.

{% reflection %}
{% card title='Reflected' withBorder=true w=260 %}A mirrored copy of this card is painted below it.{% endCard %}
{% endReflection %}

Water ripple

Turn on ripple for an animated water surface, then shape it with rippleStrength, rippleFrequency, and rippleSpeed.

{% reflection ripple rippleStrength=8 rippleSpeed=3 %}
{% card title='On the water' withBorder=true w=260 %}The reflection below ripples like water.{% endCard %}
{% endReflection %}

Mirror opacity and distance

reflectionOpacity fades the mirror, reflectionDistance pushes it away from the source, and reflectionBlur softens it.

{% reflection reflectionOpacity=0.5 reflectionDistance=10 reflectionBlur=2 %}
{% card title='Soft mirror' withBorder=true w=260 %}A fainter, slightly blurred reflection set a little lower.{% endCard %}
{% endReflection %}

Contact shadow

Add a grounding shadow under the content with shadowSize, shadowOpacity, shadowBlur, and shadowColor.

{% reflection shadowSize=24 shadowOpacity=0.3 shadowBlur=12 shadowColor='black' %}
{% card title='Grounded' withBorder=true w=260 %}A soft contact shadow sits beneath this card.{% endCard %}
{% endReflection %}

With other components

Reflection wraps anything — an image, a Card, a Badge. Here it mirrors a badge group.

{% reflection ripple reflectionOpacity=0.6 %}
{% group %}{% badge variant='filled' color='grape' %}New{% endBadge %}{% badge variant='light' %}Beta{% endBadge %}{% endGroup %}
{% endReflection %}

Attributes

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

CSS Selector

The reflection effect is owned by the package’s stylesheet (loaded automatically). aardvark adds one stable hook for site overrides:

Injecting Attributes

Pass attr={…} to forward raw HTML attributes (id, class, data-*, ARIA, inline style) onto the rendered element — an escape hatch for anything not covered by a named attribute above.