{"id":21037145,"url":"https://github.com/eduardconstantin/comic-book-button-anim","last_synced_at":"2025-05-15T14:32:23.087Z","repository":{"id":54402155,"uuid":"487487167","full_name":"eduardconstantin/Comic-book-button-anim","owner":"eduardconstantin","description":"Button animation made with reactJS that has a comic book style","archived":true,"fork":false,"pushed_at":"2023-09-13T18:37:40.000Z","size":52250,"stargazers_count":22,"open_issues_count":0,"forks_count":12,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-24T19:48:55.382Z","etag":null,"topics":["animation","css","html","jsx","reactjs","typescript"],"latest_commit_sha":null,"homepage":"https://eduardconstantin.github.io/Comic-book-button-anim/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"cc0-1.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/eduardconstantin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"Code_of_Conduct.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-05-01T08:45:09.000Z","updated_at":"2024-06-10T15:58:48.000Z","dependencies_parsed_at":"2023-01-21T08:06:17.938Z","dependency_job_id":null,"html_url":"https://github.com/eduardconstantin/Comic-book-button-anim","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/eduardconstantin%2FComic-book-button-anim","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eduardconstantin%2FComic-book-button-anim/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eduardconstantin%2FComic-book-button-anim/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eduardconstantin%2FComic-book-button-anim/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eduardconstantin","download_url":"https://codeload.github.com/eduardconstantin/Comic-book-button-anim/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254358928,"owners_count":22058016,"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":["animation","css","html","jsx","reactjs","typescript"],"created_at":"2024-11-19T13:24:17.044Z","updated_at":"2025-05-15T14:32:22.531Z","avatar_url":"https://github.com/eduardconstantin.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eComic book button animation\u003c/h1\u003e\n\n I did a little experiment with react, trying to make a comic book like button animation. Inspired by Spider-man into the spider-verse movie.\n\n### What I learned making this project:\n- Fundamentals of react.js: components, imports, props, states, installing modules, framer motion\n- CSS modules\n\n---\n\n\u003cimg src=\"https://github.com/eduardconstantin/Comic-book-button-anim/blob/main/anim/btngif.gif\"\u003e\n\n\u003ch1 align=\"center\"\u003e Usage \u003c/h1\u003e\n\n``` javascript\nimport ComicButton from './components/ComicButton/ComicButton';\n\nexport default function App() {\n  return (\n    \u003cdiv className='App'\u003e\n      \u003cComicButton buttonName='BUTTON' hoverBtnName='HOVER' /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n## Props\n* buttonName - string for button name\n* hoverBtnName - string for hover button name\n\n## Steps to follow :scroll:\n\n### Tip : Complete this process in GitHub ( In your browser 🌐)\n\n```mermaid\nflowchart LR\n    Fork[Fork the project]--\u003ebranch[Create a New Branch]\n    branch--\u003eEdit[Edit file]\n    Edit--\u003ecommit[Commit the changes]\n    commit --\u003e|Finally|creatpr((Create a Pull Request))\n    \n ```\n \n ### Star The Repository :star2:\n\n## Contributing\nIf you think you can make an improvement don't hesitate to open a pull request.\n\n## Contributors\n\n\u003c!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section --\u003e\n[![All Contributors](https://img.shields.io/badge/all_contributors-11-orange.svg?style=flat-square)](#contributors-)\n\u003c!-- ALL-CONTRIBUTORS-BADGE:END --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/114871036?v=4?s=100\" width=\"100px;\" alt=\"Juanita\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJuanita\u003c/b\u003e\u003c/sub\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/eduardconstantin/Comic-book-button-anim/commits?author=JuanitaCathy\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/95903010?v=4?s=100\" width=\"100px;\" alt=\"Pavan Kamthane\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003ePavan Kamthane\u003c/b\u003e\u003c/sub\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/eduardconstantin/Comic-book-button-anim/commits?author=Pavan-Kamthane\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/98043938?v=4?s=100\" width=\"100px;\" alt=\"Vedant Kahalekar\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eVedant Kahalekar\u003c/b\u003e\u003c/sub\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/eduardconstantin/Comic-book-button-anim/commits?author=VedantKCSE\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/37380030?v=4?s=100\" width=\"100px;\" alt=\"Mldamico\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMldamico\u003c/b\u003e\u003c/sub\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/eduardconstantin/Comic-book-button-anim/commits?author=Mldamico\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\u003ca href=\"https://amreshsinha.vercel.app\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/35039730?v=4?s=100\" width=\"100px;\" alt=\"Amresh Prasad Sinha\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAmresh Prasad Sinha\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/eduardconstantin/Comic-book-button-anim/commits?author=AmreshSinha\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/Frey0-0\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/94757729?v=4?s=100\" width=\"100px;\" alt=\"Frey0-0\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eFrey0-0\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/eduardconstantin/Comic-book-button-anim/commits?author=Frey0-0\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\u003ca href=\"http://jam-burger.me/\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/89834788?v=4?s=100\" width=\"100px;\" alt=\"Jay\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJay\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/eduardconstantin/Comic-book-button-anim/commits?author=Jam-Burger\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/aaheli8\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/66815283?v=4?s=100\" width=\"100px;\" alt=\"Aaheli Sadhukhan\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAaheli Sadhukhan\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/eduardconstantin/Comic-book-button-anim/commits?author=aaheli8\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/najeebkp\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/56462749?v=4?s=100\" width=\"100px;\" alt=\"Najeeb Thangal KP\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eNajeeb Thangal KP\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/eduardconstantin/Comic-book-button-anim/commits?author=najeebkp\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/musavveer\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/62888562?v=4?s=100\" width=\"100px;\" alt=\"Musavveer Rehaman\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMusavveer Rehaman\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/eduardconstantin/Comic-book-button-anim/commits?author=musavveer\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/tusharsnn\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/55626797?v=4?s=100\" width=\"100px;\" alt=\"Tushar Singh\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eTushar Singh\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/eduardconstantin/Comic-book-button-anim/commits?author=tusharsnn\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feduardconstantin%2Fcomic-book-button-anim","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feduardconstantin%2Fcomic-book-button-anim","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feduardconstantin%2Fcomic-book-button-anim/lists"}