@gfazioli/mantine-parallax

A Mantine component that allows you to create the famous Apple TV parallax effect.

Version

v2.5.2

Changelog

View the Changelog

Source

View source code

Package

@gfazioli/mantine-parallax

Mantine Extensions

Docs

Edit this page

Built by

Giovambattista Fazioli (@gfazioli)

License

MIT

Support

Become a sponsor

Installation

yarn add @gfazioli/mantine-parallax

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

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

You can import styles within a layer @layer mantine-parallax by importing @gfazioli/mantine-parallax/styles.layer.css file.

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

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. See Initial values and Skew below.

The disabled prop allows you to disable the effect. Both perspective and initialPerspective props will be disabled if the value is greater or equal to 10000.

Norway Fjord Adventures

On Sale

With Fjord Tours you can explore more of the magical fjord landscapes with tours and activities on and around the fjords of Norway

Disabled

Perspective

Initial perspective

Initial rotation x

Initial rotation y

Initial rotation z

Initial skew x

Initial skew y

Threshold

Light effect

Light overlay

Light intensity

Light size

Light color

Light gradient type

Radial

Linear

Light gradient angle

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

function Demo() {
  return (
    <Center w="100%" h={500}>
      <Parallax  lightEffect lightOverlay w={400}>
        <Card shadow="sm" padding="lg" radius="md" withBorder>
          <Card.Section>
            <Image
              src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-8.png"
              height={160}
              alt="Norway"
            />
          </Card.Section>

          <Group justify="space-between" mt="md" mb="xs">
            <Text fw={500}>Norway Fjord Adventures</Text>
            <Badge color="pink">On Sale</Badge>
          </Group>

          <Text size="sm" c="dimmed">
            With Fjord Tours you can explore more of the magical fjord
            landscapes with tours and activities on and around the fjords of
            Norway
          </Text>

          <Button color="blue" fullWidth mt="md" radius="md">
            Book classic tour now
          </Button>
        </Card>
      </Parallax>
    </Center>
  );
}

Initial values and Skew

You can set the initial rotation of the card using the initialPerspective, initialRotationX, initialRotationY, and initialRotationZ props. You may also use the initialSkewX and initialSkewY props to set the initial skew of the card.

Norway Fjord Adventures

On Sale

With Fjord Tours you can explore more of the magical fjord landscapes with tours and activities on and around the fjords of Norway

Disabled

Perspective

Initial perspective

Initial rotation x

Initial rotation y

Initial rotation z

Initial skew x

Initial skew y

Threshold

Light effect

Light overlay

Light intensity

Light size

Light color

Light gradient type

Radial

Linear

Light gradient angle

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

function Demo() {
  return (
    <Center w="100%" h={500}>
      <Parallax  initialPerspective={10000} initialRotationX={60} initialSkewX={-30} initialSkewY={30} lightEffect lightOverlay w={400}>
        <Card shadow="sm" padding="lg" radius="md" withBorder>
          <Card.Section>
            <Image
              src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-8.png"
              height={160}
              alt="Norway"
            />
          </Card.Section>

          <Group justify="space-between" mt="md" mb="xs">
            <Text fw={500}>Norway Fjord Adventures</Text>
            <Badge color="pink">On Sale</Badge>
          </Group>

          <Text size="sm" c="dimmed">
            With Fjord Tours you can explore more of the magical fjord
            landscapes with tours and activities on and around the fjords of
            Norway
          </Text>

          <Button color="blue" fullWidth mt="md" radius="md">
            Book classic tour now
          </Button>
        </Card>
      </Parallax>
    </Center>
  );
}

Scroll

The initial values of the Parallax component can be set based on the scroll position. You can use the useWindowScroll() hook to get the scroll position and pass it to the Parallax component.

Norway Fjord Adventures

On Sale

With Fjord Tours you can explore more of the magical fjord landscapes with tours and activities on and around the fjords of Norway

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

function Demo() {
  const [scroll] = useWindowScroll();

  return (
    <Center w="100%" h={500}>
      <Parallax {...props} initialRotationX={(scroll.y - 4400) / 10} w={400}>
        <Card shadow="sm" padding="lg" radius="md" withBorder>
          <Card.Section>
            <Image
              src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-8.png"
              height={160}
              alt="Norway"
            />
          </Card.Section>

          <Group justify="space-between" mt="md" mb="xs">
            <Text fw={500}>Norway Fjord Adventures</Text>
            <Badge color="pink">On Sale</Badge>
          </Group>

          <Text size="sm" c="dimmed">
            With Fjord Tours you can explore more of the magical fjord
            landscapes with tours and activities on and around the fjords of
            Norway
          </Text>

          <Button color="blue" fullWidth mt="md" radius="md">
            Book classic tour now
          </Button>
        </Card>
      </Parallax>
    </Center>
  );
}

Simple usage

Below a super simple example of how to use the Parallax component.

Parallax

Amazing contentParallax effect component. Hover to see the effect.

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

function Demo() {
  return (
    <Center w="100%" h={300}>
      <Parallax w={300} h={200}>
        <Title>Parallax</Title>
        <Text>
          Amazing contentParallax effect component. Hover to see the effect.
        </Text>
      </Parallax>
    </Center>
  );
}

Parallax Effects

In addition to the classic Apple TV Card effect, you can use the Parallax component to create a parallax effects both for the background and for the content. You may use the backgroundParallax and backgroundParallaxThreshold props to enable and manage the parallax effect.

Background

Here is an example of the parallax effect used for the background.

Disabled

Perspective

Initial perspective

Initial rotation x

Initial rotation y

Initial rotation z

Initial skew x

Initial skew y

Threshold

Light effect

Light overlay

Light intensity

Light size

Light color

Light gradient type

Radial

Linear

Light gradient angle

Background parallax

Background parallax threshold

import { Parallax } from '@gfazioli/mantine-parallax';
function Demo() {
  return (
    <Center w="100%" h={400}>
      <Parallax
        lightEffect
        lightGradientType="linear"
        lightGradientAngle={-120}
        backgroundParallax
        backgroundParallaxThreshold={1}
        w={400}
        h={300}
        backgroundImage=""https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-1.png"
      />
    </Center>
  );
  );
}

Content

Of course, you can also use the parallax effect for the content. You may use the contentParallax and contentParallaxDistance props to enable and manage the parallax effect.

Parallax

Amazing contentParallax effect component. Hover to see the effect.

Perspective

Threshold

Light effect

Light overlay

Light intensity

Light size

Light color

Light gradient type

Radial

Linear

Light gradient angle

Content parallax

Content parallax distance

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

function Demo() {
  return (
    <Center w="100%" h={300}>
      <Parallax  contentParallax contentParallaxDistance={1} w={300} h={200} p={16} bg="dark.5">
        <Title c="gray.2">Parallax</Title>
        <Text c="yellow.5">
          Amazing contentParallax effect component. Hover to see the effect.
        </Text>
      </Parallax>
    </Center>
  );
}

Example: Complex

Below a more complex example of how to use the Parallax component.

Parallax

Amazing contentParallax effect component. Hover to see the effect.

Perspective

Threshold

Light effect

Light overlay

Light intensity

Light size

Light color

Light gradient type

Radial

Linear

Light gradient angle

Background parallax

Background parallax threshold

Content parallax

Content parallax distance

import { Parallax } from '@gfazioli/mantine-parallax';
function Demo() {
  return (
    <Center w="100%" h={300} bg="dark.7">
      <Parallax
        lightEffect
        backgroundParallax
        backgroundParallaxThreshold={1}
        contentParallax
        contentParallaxDistance={1}
        w={400}
        h={200}
        p={16}
        backgroundImage="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-1.png"
        style={{
          borderRadius: "16px",
          border: "1px solid #666",
        }}
      >
        <Title c="gray.2">Parallax</Title>
        <Text c="gray.2" fw="bold">
          Amazing contentParallax effect component. Hover to see the effect.
        </Text>
      </Parallax>
    </Center>
  );
}

Example: Shadow

Give free rein to your creativity. You can use the Parallax component to create shading effects.

Parallax

Amazing parallax effect component. Hover to see the effect.

Perspective

Threshold

Light effect

Light overlay

Light intensity

Light size

Light color

Light gradient type

Radial

Linear

Light gradient angle

Background parallax

Background parallax threshold

Content parallax

Content parallax distance

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

function Demo() {
  return (
    <Center w="100%" h={300}>
      <Parallax  backgroundParallax backgroundParallaxThreshold={1} contentParallax contentParallaxDistance={4} p={32} bg="tomato">
        <Box
          w={300}
          h={200}
          style={{
            position: "absolute",
            boxShadow: "0 0 12px rgba(0, 0, 0, 1)",
            backgroundColor: "rgba(0, 0, 0, 0.5)",
            borderRadius: "16px",
          }}
        />
        <Paper w={300} h={200} bg="gray.9" radius={16} p={16}>
          <Title c="white">Parallax</Title>
          <Text c="white">
            Amazing parallax effect component. Hover to see the effect.
          </Text>
        </Paper>
      </Parallax>
    </Center>
  );
}

Example: Presentation

Give free rein to your creativity. You can use the Parallax component to create shading effects.

Norway Fjord Adventures

On Sale

With Fjord Tours you can explore more of the magical fjord landscapes with tours and activities on and around the fjords of Norway

Norway Fjord Adventures

On Sale

With Fjord Tours you can explore more of the magical fjord landscapes with tours and activities on and around the fjords of Norway

Norway Fjord Adventures

On Sale

With Fjord Tours you can explore more of the magical fjord landscapes with tours and activities on and around the fjords of Norway

import { Stack } from '@mantine/core';
import { Parallax } from '@gfazioli/mantine-parallax';
import { PresentationCard } from './PresentationCard';

function Demo() {
  const presentationProps = {
    initialRotationX: 60,
    initialSkewX: -30,
    initialSkewY: 30,
    initialPerspective: 10000,
    disabled: true,
  };

  return (
    <Stack w="100%" h={500} align="center">
      <Parallax w={400} {...presentationProps} style={{ position: 'absolute', top: 160 }}>
        <PresentationCard imgIndex={1} />
      </Parallax>
      <Parallax w={400} {...presentationProps} style={{ position: 'absolute', top: 80 }}>
        <PresentationCard imgIndex={2} />
      </Parallax>
      <Parallax w={400} {...presentationProps} style={{ position: 'absolute', top: 0 }}>
        <PresentationCard imgIndex={3} />
      </Parallax>
    </Stack>
  );
}

Mantine Parallax

@gfazioli/mantine-parallax

Installation

Usage

Initial values and Skew

Scroll

Simple usage

Parallax

Parallax Effects

Background

Content

Parallax

Example: Complex

Parallax

Example: Shadow

Parallax

Example: Presentation

HIGHLIGHTS

RESOURCES

ECOSYSTEM