{"id":15481256,"url":"https://github.com/gfazioli/mantine-marquee","last_synced_at":"2026-02-17T08:03:51.110Z","repository":{"id":245101440,"uuid":"817275302","full_name":"gfazioli/mantine-marquee","owner":"gfazioli","description":"A Mantine UI component that creates a Marquee effect with any element.","archived":false,"fork":false,"pushed_at":"2025-10-03T07:04:32.000Z","size":10538,"stargazers_count":15,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-03T09:07:57.901Z","etag":null,"topics":["component","mantine","mantine-ui","mantine-v7","marquee","nextjs","react-component","reactjs","typescript"],"latest_commit_sha":null,"homepage":"https://gfazioli.github.io/mantine-marquee/","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","wpbones"]}},"created_at":"2024-06-19T11:21:23.000Z","updated_at":"2025-10-03T07:04:00.000Z","dependencies_parsed_at":"2024-06-19T21:05:40.368Z","dependency_job_id":"1c615312-480e-462a-956c-f5854c08fdd9","html_url":"https://github.com/gfazioli/mantine-marquee","commit_stats":{"total_commits":19,"total_committers":2,"mean_commits":9.5,"dds":0.1578947368421053,"last_synced_commit":"97fada94e3bb4f6f14f1734b851f52d0069c7c57"},"previous_names":["gfazioli/mantine-marquee"],"tags_count":34,"template":true,"template_full_name":"gfazioli/mantine-flip","purl":"pkg:github/gfazioli/mantine-marquee","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gfazioli%2Fmantine-marquee","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gfazioli%2Fmantine-marquee/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gfazioli%2Fmantine-marquee/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gfazioli%2Fmantine-marquee/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gfazioli","download_url":"https://codeload.github.com/gfazioli/mantine-marquee/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gfazioli%2Fmantine-marquee/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278452049,"owners_count":25989101,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-05T02:00:06.059Z","response_time":54,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["component","mantine","mantine-ui","mantine-v7","marquee","nextjs","react-component","reactjs","typescript"],"created_at":"2024-10-02T05:03:02.444Z","updated_at":"2026-02-17T08:03:51.090Z","avatar_url":"https://github.com/gfazioli.png","language":"TypeScript","funding_links":["https://github.com/sponsors/gfazioli","https://github.com/sponsors/wpbones","https://github.com/sponsors/gfazioli?o=esc"],"categories":[],"sub_categories":[],"readme":"# Mantine Marquee Component\n\n\u003cimg alt=\"Mantine Marquee\" src=\"https://github.com/gfazioli/mantine-marquee/blob/master/logo.png\" /\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \n  [![NPM version](https://img.shields.io/npm/v/%40gfazioli%2Fmantine-marquee?style=for-the-badge)](https://www.npmjs.com/package/@gfazioli/mantine-marquee)\n  [![NPM Downloads](https://img.shields.io/npm/dm/%40gfazioli%2Fmantine-marquee?style=for-the-badge)](https://www.npmjs.com/package/@gfazioli/mantine-marquee)\n  [![NPM Downloads](https://img.shields.io/npm/dy/%40gfazioli%2Fmantine-marquee?style=for-the-badge\u0026label=%20\u0026color=f90)](https://www.npmjs.com/package/@gfazioli/mantine-marquee)\n  ![NPM License](https://img.shields.io/npm/l/%40gfazioli%2Fmantine-marquee?style=for-the-badge)\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 Marquee](https://gfazioli.github.io/mantine-marquee/) is a versatile React component for the Mantine ecosystem that renders continuous, seamless scrolling of any child elements—cards, boxes, text, or avatars—either horizontally or vertically. It exposes ergonomic props to control behavior and presentation: reverse toggles direction, vertical switches axis, fadeEdges adds gradient masking with configurable size and color, pauseOnHover halts motion on interaction, and duration/gap/repeat fine‑tune speed, spacing, and loop continuity. \n\nThe component fits neatly into layouts with explicit width/height and Mantine spacing props, and ships with dedicated stylesheets, including an optional @layer import for clean, scoped CSS integration. Example demos show simple colored boxes, mirrored horizontal tracks, stacked vertical tracks, and testimonial cards with avatars and ratings—all demonstrating how arbitrary React content can be animated into a polished marquee without custom animation code.\n\n\u003e [!note]\n\u003e\n\u003e → [Demo and Documentation](https://gfazioli.github.io/mantine-marquee/) → [Youtube Video](https://www.youtube.com/playlist?list=PL85tTROKkZrWyqCcmNCdWajpx05-cTal4) → [More Mantine Components](https://mantine-extensions.vercel.app/)\n\n\n## Installation\n\n```sh\nnpm install @gfazioli/mantine-marquee\n```\nor \n\n```sh\nyarn add @gfazioli/mantine-marquee\n```\n\nAfter installation import package styles at the root of your application:\n\n```tsx\nimport '@gfazioli/mantine-marquee/styles.css';\n```\n\n## Usage\n\n```tsx\nimport { Marquee } from '@gfazioli/mantine-marquee';\n\nfunction Demo() {\n  function BoxComponent({ children, ...props }: { children: ReactNode; [key: string]: any }) {\n    return (\n      \u003cBox {...props} p=\"md\" w=\"200px\" c=\"white\" style={{ borderRadius: '8px' }}\u003e\n        {children}\n      \u003c/Box\u003e\n    );\n  }\n\n  return (\n    \u003cMarquee {...props} w={560} h={300}\u003e\n      \u003cBoxComponent bg=\"red\"\u003eHello World #1\u003c/BoxComponent\u003e\n      \u003cBoxComponent bg=\"cyan\"\u003eHope you like it #2\u003c/BoxComponent\u003e\n      \u003cBoxComponent bg=\"blue\"\u003eHave a nice day #3\u003c/BoxComponent\u003e\n      \u003cBoxComponent bg=\"lime\"\u003eGoodbye #4\u003c/BoxComponent\u003e\n    \u003c/Marquee\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/285cdda3-cd62-46a3-b028-816c34217530\n\n---\n[![Star History Chart](https://api.star-history.com/svg?repos=gfazioli/mantine-marquee\u0026type=Timeline)](https://www.star-history.com/#gfazioli/mantine-marquee\u0026Timeline)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgfazioli%2Fmantine-marquee","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgfazioli%2Fmantine-marquee","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgfazioli%2Fmantine-marquee/lists"}