{"id":15062403,"url":"https://github.com/lostisworld/astro-magneto","last_synced_at":"2025-04-10T13:33:08.782Z","repository":{"id":92798005,"uuid":"606247873","full_name":"LoStisWorld/astro-magneto","owner":"LoStisWorld","description":"Let an element follow the mouse cursor with a graceful and smooth motion.","archived":false,"fork":false,"pushed_at":"2023-03-01T20:30:59.000Z","size":22,"stargazers_count":4,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-03T02:17:17.256Z","etag":null,"topics":["astro","astro-component","intersectionobserver","magnet","movement","transform3d","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/astro-magneto","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LoStisWorld.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2023-02-25T00:00:56.000Z","updated_at":"2024-01-22T12:57:36.000Z","dependencies_parsed_at":null,"dependency_job_id":"359dfdc3-1859-4a2c-8e07-af5c19e2ea91","html_url":"https://github.com/LoStisWorld/astro-magneto","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LoStisWorld%2Fastro-magneto","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LoStisWorld%2Fastro-magneto/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LoStisWorld%2Fastro-magneto/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LoStisWorld%2Fastro-magneto/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LoStisWorld","download_url":"https://codeload.github.com/LoStisWorld/astro-magneto/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239265423,"owners_count":19610172,"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":["astro","astro-component","intersectionobserver","magnet","movement","transform3d","typescript"],"created_at":"2024-09-24T23:35:29.403Z","updated_at":"2025-02-17T09:31:00.728Z","avatar_url":"https://github.com/LoStisWorld.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![github-image-magneto-min](https://user-images.githubusercontent.com/83787591/221999916-7684851f-19ba-47a8-9aeb-43b15faa3764.jpg)\n\n\n# Astro Magneto\nLet an element follow the mouse cursor with a graceful and smooth motion.\n\n### [Live Demo](https://stackblitz.com/edit/withastro-astro-hjhuav?file=src%2Fpages%2Findex.astro)\n\n## Instalation\n\u003e using npm\n```\nnpm install astro-magneto\n```\n\u003e using pnpm\n```\npnpm add astro-magneto\n```\n\n## Possible Props \nIf Visual Studio Code is your preferred IDE, simply press CRTL+SPACE / CMD+SPACE to reveal the valid properties.\n- **class** [sting] \n- **options** [object]\n- **transition** [object]\n\n| Property           | Object    | Type              | Default | Desctription                                         |\n| ------------------ | :-------: | :---------------: | :-----: | ---------------------------------------------------- |\n| class              | -         | string            | -       | Add classes to the element                           |\n| triggerArea        | options   | number            | 100     | Element follows the mouse cursor in this range (around the element) |\n| movementRatio      | options   | 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8 | 0.5 | The triggerArea size directly affects the element's movement area, determining the space in which the element can be repositioned. |\n| rootMargin         | options   | string | 0px | IntersectionObserver rootMargin option |\n| threshold          | options   | number | 0.5 | IntersectionObserver threshold option  |\n| duration           | transition | string | 250ms | Element speed to base position  |\n| timing             | transition | string | ease  | Transition timing function  |\n| delay              | transition | string | 0s  | This specifies the duration to wait before the element goes back to the base position |\n\n\n## How to use\n```html\n---\nimport { Magneto } from 'astro-magneto';\n---\n\n\u003cdiv\u003e\n\n  \u003c!-- basic --\u003e\n  \u003cMagneto\u003e\n    \u003cbutton type=\"button\"\u003eClick Me\u003c/button\u003e\n  \u003c/Magneto\u003e\n\n  \u003c!-- using class with tailwind --\u003e\n  \u003cMagneto class=\"text-red-500\"\u003e\n    \u003cbutton type=\"button\"\u003eClick Me\u003c/button\u003e\n  \u003c/Magneto\u003e\n\n  \u003c!-- using options --\u003e\n  \u003cMagneto \n    options={{ \n      triggerArea: 200,\n      movementRatio: 0.8,\n      rootMargin: '100px 0px',\n      threshold: 1\n    }}\n  \u003e\n    \u003cbutton type=\"button\"\u003eClick Me\u003c/button\u003e\n  \u003c/Magneto\u003e\n\n  \u003c!-- using transition --\u003e\n  \u003cMagneto \n    transition={{ \n      duration: '500ms',\n      timing: 'linear',\n      delay: '5s'\n    }}\n  \u003e\n\n\u003c/div\u003e\n```\n\n\u003e Keep in mind that Magneto use the mousemove event, if the element is in the given (rootMargin, threashold) range.\n\u003e Additionally, the mousemove event will be automatically disabled once the element moves out of the viewport.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flostisworld%2Fastro-magneto","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flostisworld%2Fastro-magneto","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flostisworld%2Fastro-magneto/lists"}