https://github.com/gfazioli/mantine-parallax

A Mantine UI Library Extension Parallax component to replicate the Apple TV Card
https://github.com/gfazioli/mantine-parallax

apple apple-card apple-tv apple-tv-card component mantine mantine-ui mantine-v7 nextjs parallax reactjs typescript

Last synced: 3 months ago
JSON representation

A Mantine UI Library Extension Parallax component to replicate the Apple TV Card

• Host: GitHub
• URL: https://github.com/gfazioli/mantine-parallax
• Owner: gfazioli
• License: mit
• Created: 2024-11-27T14:19:39.000Z (11 months ago)
• Default Branch: master
• Last Pushed: 2025-07-22T08:57:58.000Z (3 months ago)
• Last Synced: 2025-07-22T10:43:15.869Z (3 months ago)
• Topics: apple, apple-card, apple-tv, apple-tv-card, component, mantine, mantine-ui, mantine-v7, nextjs, parallax, reactjs, typescript
• Language: TypeScript
• Homepage: https://gfazioli.github.io/mantine-parallax/
• Size: 6.54 MB
• Stars: 12
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

          
# Mantine Parallax Component



  

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




---



  [![Latest Stable Version](https://img.shields.io/npm/v/%40gfazioli%2Fmantine-parallax?style=for-the-badge)](https://www.npmjs.com/package/@gfazioli/mantine-parallax)

  [![NPM Downloads](https://img.shields.io/npm/dm/%40gfazioli%2Fmantine-parallax?style=for-the-badge)](https://www.npmjs.com/package/@gfazioli/mantine-parallax)

  [![NPM Downloads](https://img.shields.io/npm/dy/%40gfazioli%2Fmantine-parallax?style=for-the-badge&label=%20&color=f90)](https://www.npmjs.com/package/@gfazioli/mantine-parallax)

  [![License](https://img.shields.io/npm/l/%40gfazioli%2Fmantine-parallax?style=for-the-badge)](https://github.com/gfazioli/mantine-parallax/blob/master/LICENSE)



## Overview

This component is created on top of the [Mantine](https://mantine.dev/) library.

[![Mantine UI Library](https://img.shields.io/badge/-MANTINE_UI_LIBRARY-blue?style=for-the-badge&labelColor=black&logo=mantine

)](https://mantine.dev/)

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.

[![Mantine Extensions](https://img.shields.io/badge/-Watch_the_Video-blue?style=for-the-badge&labelColor=black&logo=youtube

)](https://www.youtube.com/playlist?list=PL85tTROKkZrWyqCcmNCdWajpx05-cTal4)

[![Demo and Documentation](https://img.shields.io/badge/-Demo_%26_Documentation-blue?style=for-the-badge&labelColor=black&logo=typescript

)](https://gfazioli.github.io/mantine-parallax/)

[![Mantine Extensions HUB](https://img.shields.io/badge/-Mantine_Extensions_Hub-blue?style=for-the-badge&labelColor=blue

)](https://mantine-extensions.vercel.app/)

You can find more components on the [Mantine Extensions Hub](https://mantine-extensions.vercel.app/) library.

## Installation

```sh

npm install @gfazioli/mantine-parallax

```

or 

```sh

yarn add @gfazioli/mantine-parallax

```

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

```tsx

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

```

## Usage

```tsx

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

function Demo() {

  return (

    

        Parallax

        

          Amazing contentParallax effect component. Hover to see the effect.

        

    

  );

}

```



  

[![Star History Chart](https://api.star-history.com/svg?repos=gfazioli/mantine-parallax&type=Timeline)](https://www.star-history.com/#gfazioli/mantine-parallax&Timeline)