{"id":23105766,"url":"https://github.com/maxwellmatthis/gravitify","last_synced_at":"2025-08-14T05:15:30.280Z","repository":{"id":228574222,"uuid":"754563715","full_name":"maxwellmatthis/gravitify","owner":"maxwellmatthis","description":"Add physics to HTML.","archived":false,"fork":false,"pushed_at":"2025-02-17T18:18:19.000Z","size":102,"stargazers_count":0,"open_issues_count":3,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-03T22:29:25.616Z","etag":null,"topics":["gravity","joke","library","physics","prank"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/gravitify","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/maxwellmatthis.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-02-08T10:22:18.000Z","updated_at":"2025-02-17T18:18:23.000Z","dependencies_parsed_at":"2025-04-04T00:45:16.744Z","dependency_job_id":null,"html_url":"https://github.com/maxwellmatthis/gravitify","commit_stats":null,"previous_names":["maxwellmatthis/gravitify.js","maxwellmatthis/gravitify"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/maxwellmatthis/gravitify","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxwellmatthis%2Fgravitify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxwellmatthis%2Fgravitify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxwellmatthis%2Fgravitify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxwellmatthis%2Fgravitify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/maxwellmatthis","download_url":"https://codeload.github.com/maxwellmatthis/gravitify/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxwellmatthis%2Fgravitify/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270364971,"owners_count":24571423,"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-08-14T02:00:10.309Z","response_time":75,"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":["gravity","joke","library","physics","prank"],"created_at":"2024-12-17T00:54:42.596Z","updated_at":"2025-08-14T05:15:30.245Z","avatar_url":"https://github.com/maxwellmatthis.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Gravitify\n\nBrings HTML nodes and their JavaScript functionality to the canvas and applies physics to everything using matter.js.\n\n\u003cimg width=\"693\" alt=\"Screenshot 2024-03-19 at 12 25 48 PM\" src=\"https://github.com/maxwellmatthis/gravitify.js/assets/58150536/19695c40-6e8a-4b7c-8243-2d5fef64df9a\"\u003e\n\n## Installation\n\nThe following command lets you install the public package directly from NPM:\n\n```bash\nnpm install gravitify\n```\n\n## Usage\n\nThe `gravitify` function is the main function of the library. It converts a DOM root element and its children into a 2D physics scene by creating or resizing a canvas to the same size as the root element and adding all 'top level elements' as entities. 'Top level element' means buttons, text, inputs and so on. These elements can be defined by their css selectors and a function.\n\n```ts\nimport { gravitify } from \"gravitify\";\n\nconst canvas = document.querySelector(\"canvas\") as HTMLCanvasElement;\nconst main = document.querySelector(\"main\") as HTMLElement;\n\n// default usage\ngravitify(main, canvas);\n\n// with entity elements specified by their css selectors and a function\ngravitify(main, canvas, [\"#super-specific\", \"button\", \"a\"], (e) =\u003e {\n    return e.children.length === 0;\n}, { /* See: `gravitify.PhysicsOptions` jsDoc */ });\n```\n\n## Tests\n\nFor testing purposes there is a Parcel and TypeScript project in the [test](./test) directory.\n\n```bash\n# install all dependencies\nnpm i\n\n# start the parcel development server for the test page\nnpm run dev\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaxwellmatthis%2Fgravitify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaxwellmatthis%2Fgravitify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaxwellmatthis%2Fgravitify/lists"}