Parallax

The Parallax Community Component — tilts its content in 3D toward the pointer, with optional light, glare, and shadow effects. Usage, options, and live examples.

parallax tilts the block body in 3D toward the pointer for an interactive parallax effect — hover (or, on touch, drag) over it and it leans. Tune the motion with maxRotation, perspective, hoverScale, and transitionDuration, and layer on lightEffect, glareEffect, and shadowEffect for shine and depth.

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

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

Demonstrations

The block body is the content to tilt. Give it a width and height (w / h) and hover over it to see the effect.

{% parallax w=320 h=180 %}
{% card title='Hover me' withBorder=true %}This card tilts in 3D toward your pointer.{% endCard %}
{% endParallax %}

Tilt amount and perspective

maxRotation caps how far it leans (degrees); perspective sets the 3D depth; hoverScale zooms slightly on hover.

{% parallax w=320 h=180 maxRotation=25 perspective=600 hoverScale=1.05 %}
{% card title='Steep tilt' withBorder=true %}A stronger lean with a slight zoom on hover.{% endCard %}
{% endParallax %}

Light and glare

Turn on lightEffect for a moving highlight and glareEffect for a glossy sheen that follows the pointer.

{% parallax w=320 h=180 lightEffect glareEffect glareMaxOpacity=0.4 %}
{% card title='Shiny' withBorder=true %}A light highlight and a glare sweep track the pointer.{% endCard %}
{% endParallax %}

Spring and shadow

springEffect gives the tilt a bouncy spring (tuned by springStiffness / springDamping), and shadowEffect adds a dynamic drop shadow.

{% parallax w=320 h=180 springEffect shadowEffect shadowColor='black' shadowBlur=24 %}
{% card title='Bouncy' withBorder=true %}A springy tilt with a moving shadow underneath.{% endCard %}
{% endParallax %}

With other components

Parallax wraps any content — a Card, an image, a heading. Here it tilts a title and a line of text.

{% parallax w=340 h=160 lightEffect %}
{% title order=3 %}Parallax{% endTitle %}
Hover anywhere on this panel to tilt it in 3D.
{% endParallax %}

Attributes

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

CSS Selector

The parallax 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.