{"id":14961303,"url":"https://github.com/iondrimba/interactive-repulsive-effect","last_synced_at":"2025-04-13T09:40:37.178Z","repository":{"id":35973066,"uuid":"160665474","full_name":"iondrimba/interactive-repulsive-effect","owner":"iondrimba","description":":chocolate_bar: An interactive repulsion effect of grid items as seen in BestServedBold's Dribbble shot \"Holographic-Interactions\".","archived":false,"fork":false,"pushed_at":"2022-07-30T12:08:45.000Z","size":1090,"stargazers_count":203,"open_issues_count":0,"forks_count":45,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-03-27T01:11:10.344Z","etag":null,"topics":["animation","codrops","creative","demo","javascript","motion","repulsion","threejs","threejs-example","threejs-learning","tutorial","webgl"],"latest_commit_sha":null,"homepage":"https://tympanus.net/codrops/?p=36627","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/iondrimba.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":"2018-12-06T11:31:01.000Z","updated_at":"2025-03-14T21:17:49.000Z","dependencies_parsed_at":"2022-08-28T22:54:24.124Z","dependency_job_id":null,"html_url":"https://github.com/iondrimba/interactive-repulsive-effect","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/iondrimba%2Finteractive-repulsive-effect","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iondrimba%2Finteractive-repulsive-effect/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iondrimba%2Finteractive-repulsive-effect/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iondrimba%2Finteractive-repulsive-effect/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/iondrimba","download_url":"https://codeload.github.com/iondrimba/interactive-repulsive-effect/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248693137,"owners_count":21146737,"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","codrops","creative","demo","javascript","motion","repulsion","threejs","threejs-example","threejs-learning","tutorial","webgl"],"created_at":"2024-09-24T13:24:44.546Z","updated_at":"2025-04-13T09:40:37.156Z","avatar_url":"https://github.com/iondrimba.png","language":"JavaScript","readme":"# Interactive Repulsion Effect with Three.js\n\nA tutorial on how to recreate the interactive repulsion effect of grid items seen in BestServedBold's Dribbble shot [\"Holographic-Interactions\"](https://dribbble.com/shots/5515695-Holographic-Interactions). By Ion D. Filho.\n\n![Image Title](https://raw.githubusercontent.com/iondrimba/images/master/perrin.gif)\n\n[Article on Codrops](https://tympanus.net/codrops/?p=36627)\n\n[Demo](https://tympanus.net/Tutorials/InteractiveRepulsionEffect/)\n\n## Requirements\n\n* nodejs 14+\n\n### Contents\n\n````bash\nfirst-demo/ and second-demo/\n  src/\n    scripts/...\n    styles/...\n    index.html\n    index.js\n    config files...\nLICENSE\nREADME.md\n````\n\n### Installation\n\n```sh\ncd first-demo or second-demo\nnpm install\nnpm start\n```\n\n### Build\n\n```sh\ncd first-demo or second-demo\nnpm run build\n```\n\n### output folder\n\n````bash\nfirst-demo/ and second-demo/\n  public/\n    app.##hash##.js\n    app.##hash##.css\n    index.html\n````\n\n## Credits\n\n* [Threejs](https://threejs.org/)\n* [TweenMax](https://greensock.com/tweenmax)\n* [RoundedBox Mesh](https://github.com/pailhead/three-rounded-box)\n\n## License\n\nThis resource can be used freely if integrated or build upon in personal or commercial projects such as websites, web apps and web templates intended for sale. It is not allowed to take the resource \"as-is\" and sell it, redistribute, re-publish it, or sell \"pluginized\" versions of it. Free plugins built using this resource should have a visible mention and link to the original work. Always consider the licenses of all included libraries, scripts and images used.\n\n## Misc\n\nFollow Ion Drimba Filho: [Twitter](https://twitter.com/code__music), [Codepen](https://codepen.io/iondrimba/), [GitHub](https://github.com/iondrimba)\n\nFollow Codrops: [Twitter](http://www.twitter.com/codrops), [Facebook](http://www.facebook.com/codrops), [Google+](https://plus.google.com/101095823814290637419), [GitHub](https://github.com/codrops), [Pinterest](http://www.pinterest.com/codrops/), [Instagram](https://www.instagram.com/codropsss/)\n\n[© Codrops 2018](http://www.codrops.com)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiondrimba%2Finteractive-repulsive-effect","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fiondrimba%2Finteractive-repulsive-effect","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiondrimba%2Finteractive-repulsive-effect/lists"}