{"id":17033089,"url":"https://github.com/drgx/react-thanos-snap","last_synced_at":"2026-04-20T06:30:19.489Z","repository":{"id":57346331,"uuid":"187196939","full_name":"drgx/react-thanos-snap","owner":"drgx","description":"React component for creating Thanos infinity gauntlet fade effect for you react component!","archived":false,"fork":false,"pushed_at":"2021-09-26T08:29:40.000Z","size":37994,"stargazers_count":38,"open_issues_count":0,"forks_count":5,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-21T05:47:29.888Z","etag":null,"topics":["avengers","awesome","html2canvas","infinity-gauntlet","javascript","npm-package","popmotion","react","react-component-library","react-components","thanos"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/s/reactthanossnap-demo-3q171?fontsize=14","language":"JavaScript","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/drgx.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-05-17T10:28:19.000Z","updated_at":"2025-01-01T15:27:50.000Z","dependencies_parsed_at":"2022-09-19T12:11:18.708Z","dependency_job_id":null,"html_url":"https://github.com/drgx/react-thanos-snap","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drgx%2Freact-thanos-snap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drgx%2Freact-thanos-snap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drgx%2Freact-thanos-snap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drgx%2Freact-thanos-snap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/drgx","download_url":"https://codeload.github.com/drgx/react-thanos-snap/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240023115,"owners_count":19735606,"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","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":["avengers","awesome","html2canvas","infinity-gauntlet","javascript","npm-package","popmotion","react","react-component-library","react-components","thanos"],"created_at":"2024-10-14T08:32:20.650Z","updated_at":"2026-04-20T06:30:19.434Z","avatar_url":"https://github.com/drgx.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n\u003cimg src=\"assets/snap-logo.png\" width=\"150px\"\u003e\n\n\n\n  \u003ch1\u003eReact Thanos Snap\u003c/h1\u003e\n  \u003cp \u003e\n  Giving you the ability to easily converting your React components into dust with a single snap! \u003cbr\u003eInspired the amazing \u003ca href=\"https://www.marvel.com/movies/avengers-endgame\"\u003eMarvel Avenger\u003c/a\u003e movies and Google \u003ca href=\"https://www.google.com/search?q=thanos\"\u003eThanos\u003c/a\u003e ester egg.\u003c/\u003c/p\u003e\n  \u003cbr/\u003e\n  \u003cbr/\u003e\n  \u003ca href=\"https://codesandbox.io/s/reactthanossnap-demo-3q171?fontsize=14\"\u003e\n  \u003cimg alt=\"Edit react-thanos-snap demo\" src=\"https://codesandbox.io/static/img/play-codesandbox.svg\"\u003e\n\u003c/a\u003e\n\u003c/div\u003e\n\n# How to use it 📦\n\nAdd this package to your react app project\n\n## NPM\n\n`npm install react-thanos-snap`\n\n## Yarn\n\n`yarn add react-thanos-snap`\n\n## Usage ⚙️\n\nSimply wrap your component with the `react-thanos-snap` component. And set the `snap` props!\nThis packages also have the ability to restoring back your components by changing the `snap` to `false`.\n\n```js\nimport React, { useState } from 'react';\nimport InfinityGauntlet from 'react-thanos-snap';\n\nfunction App(props) {\n  const [snap, setSnap] = useState(false);\n  return (\n    \u003cdiv\u003e\n      \u003cInfinityGauntlet snap={true}\u003e{/** Put your components here **/}\u003c/InfinityGauntlet\u003e\n      \u003cbutton onClick={() =\u003e setSnap(!snap)}\u003eSnap❗️\u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n## Preview\n\n![preview](assets/preview.gif)\n\n# Limitation\n\n- The components will be wrap with the div that have `position: relative;` style on it.\n- We use `html2canvas`. This library have the limitation that can not render the image outside the origin because of the content policy restriction from the browser. if you wish to render image outside your origin, please read kindly use [proxy](http://html2canvas.hertzen.com/proxy/);. This component have the `options.proxy` props so you can add the proxy on that props.\n\n# Credit\n\n- The idea of this project also comes from [red stappler tutorial](https://redstapler.co/thanos-snap-effect-javascript-tutorial/). I porting the logic to the react and use some modification on the animation. So super thanks to the [red stapper](https://redstapler.co) for creating the great tutorial!\n\n- The Amazing infinity gauntlet logo image for this repo is owned by [Jamie Ferrato](https://dribbble.com/shots/4595136-Infinity-Gauntlet). I own no rights to the image.\n\n# Contributing\n\nI ❤️ to have your helping on react-thanos-snap project! Feel free to PR's, add issues or give feedback! Enjoy your mighty power 😎\n\n# License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdrgx%2Freact-thanos-snap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdrgx%2Freact-thanos-snap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdrgx%2Freact-thanos-snap/lists"}