{"id":25771879,"url":"https://github.com/zr00da/vue-mousespring","last_synced_at":"2026-02-22T20:03:36.343Z","repository":{"id":81514419,"uuid":"296837452","full_name":"zr00da/vue-mousespring","owner":"zr00da","description":null,"archived":false,"fork":false,"pushed_at":"2020-09-19T17:39:45.000Z","size":18522,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"develop","last_synced_at":"2025-10-26T08:37:41.074Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Vue","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/zr00da.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":"2020-09-19T09:55:31.000Z","updated_at":"2023-02-25T17:05:55.000Z","dependencies_parsed_at":null,"dependency_job_id":"3dddac4b-dd58-4d2a-b961-2b3f6cdce015","html_url":"https://github.com/zr00da/vue-mousespring","commit_stats":null,"previous_names":["zr00da/vue-mousespring"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/zr00da/vue-mousespring","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zr00da%2Fvue-mousespring","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zr00da%2Fvue-mousespring/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zr00da%2Fvue-mousespring/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zr00da%2Fvue-mousespring/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zr00da","download_url":"https://codeload.github.com/zr00da/vue-mousespring/tar.gz/refs/heads/develop","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zr00da%2Fvue-mousespring/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29725297,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-22T19:57:12.410Z","status":"ssl_error","status_checked_at":"2026-02-22T19:54:50.710Z","response_time":110,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":[],"created_at":"2025-02-27T03:19:37.372Z","updated_at":"2026-02-22T20:03:36.316Z","avatar_url":"https://github.com/zr00da.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-mousespring\n\n![vue-mousespring](https://github.com/mystrdat/vue-mousespring/blob/docs/docs/9yUOJgLKWb.gif)\n\nA Vue component that uses `vue-motion` spring physics and mouse coordinates on the layer to either:\n- Tilt an element passed as a slot child\n- Pass spring-smoothed mouse X/Y coordinates (range in 0 - 1) that you can access with [scoped-slots](https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots)\n\nIncludes a `mapRange` helper function to simplify adding motion based on the mouse coords.\n\nRoot element size changes are automatically updated using a [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) and the `mousemove` event is throttled to 10ms intervals using `lodash.throttle`.\n\n## Installation\n\n```Node\nnpm i --save mystrdat/vue-mousespring\n```\n\n```Vue\n\u003ctemplate\u003e\n  \u003cMouseSpring v-slot=\"{ coords, mapRange }\"\u003e\n    \u003cdiv class=\"container\"\u003e\n      \u003cdiv\n        class=\"something-else\"\n        :style=\"{\n          transform: `translate(${mapRange(5, -5, coords.y)}px, ${mapRange(-5, 5, coords.x)}px)`\n        }\"\n      /\u003e\n    \u003c/div\u003e\n  \u003c/MouseSpring\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport MouseSpring from 'vue-mousespring'\n\nexport default {\n  components: {\n    MouseSpring\n  }\n}\n\u003c/script\u003e\n```\n\n## Options\n\n```Vue\n\u003cMouseSpring\n  :tilt=\"true\"\n  :default-coords=\"{ x: 0.5, y: 0.5 }\"\n  :x-range=\"[5, -5]\"\n  :y-range=\"[-5, 5]\"\n  :spring=\"{ stiffness: 60, damping: 16, precision: 0.01 }\"\n  :leave-reset=\"200\"\n\u003e\n```\n\n`tilt` - Use default tilt mechanics | `Boolean` | default `true`  \n`defaultCoords` - Default mouse coordinates | `Object` | default `{ x: 0.5, y: 0.5 }`  \n`xRange` - Default tilt angle range on X-axis in degrees | `Array` | default `[5, -5]`  \n`yRange` - Default tilt angle range on Y-axis in degrees | `Array` | default `[-5, 5]`  \n`spring` - Spring configuration, see [options](https://posva.net/vue-motion/#/home?id=springs) | `String, Object` | default `{ stiffness: 60, damping: 16, precision: 0.01 }`  \n`leaveReset` - Timer after which to reset to default coords when the pointer leaves element | `Number` | default `200`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzr00da%2Fvue-mousespring","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzr00da%2Fvue-mousespring","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzr00da%2Fvue-mousespring/lists"}