Creating Immersive Experiences with the Parallax Component for Mantine UI

Bring the Apple TV card effect to your web applications with ease and flexibility

The Parallax component is a new addition to the Mantine UI library, designed to bring a dynamic three-dimensional movement effect to any child component. Inspired by the captivating visuals seen on Apple TV cards, this component goes beyond by not only recreating the 3D motion but also adding a parallax effect to both background images and cascading elements within the Parallax component. Moreover, it introduces an adjustable light effect, available in both radial and linear forms, allowing for customization of the light's angle to enhance the visual depth and interaction.

Key Features of the Parallax Component

• 3D Motion Effect: Mimics the sophisticated Apple TV card effect, adding a lively and engaging element to your UI.

• Parallax Background and Elements: Applies a parallax effect to background images and to elements layered within the component, creating a sense of depth.

• Customizable Light Effects: Offers radial and linear lighting effects with adjustable angles, providing an additional layer of interactivity and visual appeal.

Simple Integration with Mantine UI

The Parallax component is built specifically for the Mantine UI library, which can be explored further at Mantine UI. This integration ensures that users can easily incorporate the Parallax component into their existing projects that utilize Mantine UI, benefiting from its comprehensive suite of tools and components.

Example Usage

To use the Parallax component, simply wrap any child component with <Parallax>. Here's a basic example:

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

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

In this example, YourChildComponent would be displayed with a radial light effect at a 45-degree angle and a background image that participates in the parallax effect.

Explore More on Mantine Extensions

For those looking to extend their Mantine UI experience, additional components and extensions can be found at Mantine Extensions. Here, developers can discover more innovative tools and components that complement and enhance the core functionalities of Mantine UI.

Conclusion

The Parallax component is a testament to the versatility and innovative potential of Mantine UI. By providing an easy-to-use interface for creating engaging, multi-dimensional UI effects, it helps developers elevate the user experience without extensive customization or complex coding. Whether you're looking to add a subtle depth effect to your application or aiming for the dynamic, engaging visuals similar to those on Apple TV, the Parallax component offers a powerful solution.

Check out a live demo of the Parallax component and see it in action at Mantine Parallax Demo.