@gfazioli/mantine-parallax

Mantine Parallax Component

https://github.com/user-attachments/assets/a44d9e9f-e3bc-4ff4-9f47-a4fde13c048b

---

Overview

This component is created on top of the Mantine library.

Despite the Parallax component allowing you to create the famous Apple TV Card effect, you can use this component to manipulate the perspective and rotation of an element. It is also possible to act on the skew of the element and disable the parallax effect when hovering with the mouse.

You can find more components on the Mantine Extensions Hub library.

Installation

npm install @gfazioli/mantine-parallax

or

yarn add @gfazioli/mantine-parallax

After installation import package styles at the root of your application:

import '@gfazioli/mantine-parallax/styles.css';

Usage

import { Parallax } from '@gfazioli/mantine-parallax';

function Demo() {

  return (
    <Parallax w={560} h={300}>
        <Title>Parallax</Title>
        <Text>
          Amazing contentParallax effect component. Hover to see the effect.
        </Text>
    </Parallax>
  );
}