{"id":22105661,"url":"https://github.com/gfazioli/mantine-parallax","last_synced_at":"2026-02-17T08:01:32.331Z","repository":{"id":265466212,"uuid":"895078790","full_name":"gfazioli/mantine-parallax","owner":"gfazioli","description":"A Mantine UI Library Extension Parallax component to replicate the Apple TV Card","archived":false,"fork":false,"pushed_at":"2026-02-09T17:33:51.000Z","size":14961,"stargazers_count":15,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-02-09T20:53:27.656Z","etag":null,"topics":["apple","apple-card","apple-tv","apple-tv-card","component","mantine","mantine-ui","mantine-v7","nextjs","parallax","reactjs","typescript"],"latest_commit_sha":null,"homepage":"https://gfazioli.github.io/mantine-parallax/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gfazioli.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":["gfazioli"]}},"created_at":"2024-11-27T14:19:39.000Z","updated_at":"2026-02-09T17:33:10.000Z","dependencies_parsed_at":null,"dependency_job_id":"9153ceec-0d79-497c-8391-871d38b317f4","html_url":"https://github.com/gfazioli/mantine-parallax","commit_stats":null,"previous_names":["gfazioli/mantine-parallax"],"tags_count":48,"template":false,"template_full_name":"gfazioli/mantine-marquee","purl":"pkg:github/gfazioli/mantine-parallax","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gfazioli%2Fmantine-parallax","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gfazioli%2Fmantine-parallax/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gfazioli%2Fmantine-parallax/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gfazioli%2Fmantine-parallax/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gfazioli","download_url":"https://codeload.github.com/gfazioli/mantine-parallax/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gfazioli%2Fmantine-parallax/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29537237,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-17T05:00:25.817Z","status":"ssl_error","status_checked_at":"2026-02-17T04:57:16.126Z","response_time":100,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["apple","apple-card","apple-tv","apple-tv-card","component","mantine","mantine-ui","mantine-v7","nextjs","parallax","reactjs","typescript"],"created_at":"2024-12-01T06:48:08.828Z","updated_at":"2026-02-17T08:01:32.235Z","avatar_url":"https://github.com/gfazioli.png","language":"TypeScript","funding_links":["https://github.com/sponsors/gfazioli","https://github.com/sponsors/gfazioli?o=esc"],"categories":[],"sub_categories":[],"readme":"# Mantine Parallax Component\n\n\u003cimg alt=\"Mantine Parallax\" src=\"https://github.com/gfazioli/mantine-parallax/blob/master/logo.png\" /\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n  [![Latest Stable Version](https://img.shields.io/npm/v/%40gfazioli%2Fmantine-parallax?style=for-the-badge)](https://www.npmjs.com/package/@gfazioli/mantine-parallax)\n  [![NPM Downloads](https://img.shields.io/npm/dm/%40gfazioli%2Fmantine-parallax?style=for-the-badge)](https://www.npmjs.com/package/@gfazioli/mantine-parallax)\n  [![NPM Downloads](https://img.shields.io/npm/dy/%40gfazioli%2Fmantine-parallax?style=for-the-badge\u0026label=%20\u0026color=f90)](https://www.npmjs.com/package/@gfazioli/mantine-parallax)\n  [![License](https://img.shields.io/npm/l/%40gfazioli%2Fmantine-parallax?style=for-the-badge)](https://github.com/gfazioli/mantine-parallax/blob/master/LICENSE)\n\n---\n\n[\u003ckbd\u003e \u003cbr/\u003e ❤️ If this component has been useful to you or your team, please consider becoming a sponsor \u003cbr/\u003e \u003c/kbd\u003e](https://github.com/sponsors/gfazioli?o=esc)  \n\n\u003c/div\u003e\n\n## Overview\n\nThis component is created on top of the [Mantine](https://mantine.dev/) library.\n\n[Mantine Parallax](https://gfazioli.github.io/mantine-parallax/) provides a flexible way to create rich, interactive motion effects for UI elements, ranging from the classic Apple TV card tilt to custom 3D transformations. \n\nThrough props like perspective, initialPerspective, rotation (X/Y/Z), skew (X/Y), and lightEffect/lightOverlay, you can fine-tune both the visual depth and the response to user hover. It also offers guardrails—setting disabled or using large initialPerspective values (≥ 10000) effectively turns off perspective—to maintain control over extreme configurations. \n\nBeyond hover, Parallax integrates with scroll-driven interactions by feeding values from useWindowScroll to initial transformation props, enabling dynamic transitions tied to page position. For layered scenes, backgroundParallax and backgroundParallaxThreshold add independent parallax to backgrounds, making it simple to create immersive cards, banners, and panels that feel responsive and dimensional while remaining straightforward to integrate and style via the provided CSS layers.\n\n\u003e [!note]\n\u003e\n\u003e → [Demo and Documentation](https://gfazioli.github.io/mantine-parallax/) → [Youtube Video](https://www.youtube.com/playlist?list=PL85tTROKkZrWyqCcmNCdWajpx05-cTal4) → [More Mantine Components](https://mantine-extensions.vercel.app/)\n\n## Installation\n\n```sh\nnpm install @gfazioli/mantine-parallax\n```\nor \n\n```sh\nyarn add @gfazioli/mantine-parallax\n```\n\nAfter installation import package styles at the root of your application:\n\n```tsx\nimport '@gfazioli/mantine-parallax/styles.css';\n```\n\n## Usage\n\n```tsx\nimport { Parallax } from '@gfazioli/mantine-parallax';\n\nfunction Demo() {\n\n  return (\n    \u003cParallax w={560} h={300}\u003e\n        \u003cTitle\u003eParallax\u003c/Title\u003e\n        \u003cText\u003e\n          Amazing contentParallax effect component. Hover to see the effect.\n        \u003c/Text\u003e\n    \u003c/Parallax\u003e\n  );\n}\n```\n## Sponsor\n\n\u003cdiv align=\"center\"\u003e\n\n[\u003ckbd\u003e \u003cbr/\u003e ❤️ If this component has been useful to you or your team, please consider becoming a sponsor \u003cbr/\u003e \u003c/kbd\u003e](https://github.com/sponsors/gfazioli?o=esc)\n\n\u003c/div\u003e\n\nYour support helps me:\n\n- Keep the project actively maintained with timely bug fixes and security updates\t\n- Add new features, improve performance, and refine the developer experience\t\n- Expand test coverage and documentation for smoother adoption\t\n- Ensure long‑term sustainability without relying on ad hoc free time\t\n- Prioritize community requests and roadmap items that matter most\n\nOpen source thrives when those who benefit can give back—even a small monthly contribution makes a real difference. Sponsorships help cover maintenance time, infrastructure, and the countless invisible tasks that keep a project healthy.\n\nYour help truly matters.\n\n💚 [Become a sponsor](https://github.com/sponsors/gfazioli?o=esc) today and help me keep this project reliable, up‑to‑date, and growing for everyone.\n\n---\nhttps://github.com/user-attachments/assets/a44d9e9f-e3bc-4ff4-9f47-a4fde13c048b\n\n---  \n[![Star History Chart](https://api.star-history.com/svg?repos=gfazioli/mantine-parallax\u0026type=Timeline)](https://www.star-history.com/#gfazioli/mantine-parallax\u0026Timeline)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgfazioli%2Fmantine-parallax","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgfazioli%2Fmantine-parallax","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgfazioli%2Fmantine-parallax/lists"}