https://github.com/zr00da/vue-mousespring
https://github.com/zr00da/vue-mousespring
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/zr00da/vue-mousespring
- Owner: zr00da
- License: mit
- Created: 2020-09-19T09:55:31.000Z (over 5 years ago)
- Default Branch: develop
- Last Pushed: 2020-09-19T17:39:45.000Z (over 5 years ago)
- Last Synced: 2025-10-26T08:37:41.074Z (8 months ago)
- Language: Vue
- Size: 17.7 MB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-mousespring
A Vue component that uses `vue-motion` spring physics and mouse coordinates on the layer to either:
- Tilt an element passed as a slot child
- 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)
Includes a `mapRange` helper function to simplify adding motion based on the mouse coords.
Root 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`.
## Installation
```Node
npm i --save mystrdat/vue-mousespring
```
```Vue
import MouseSpring from 'vue-mousespring'
export default {
components: {
MouseSpring
}
}
```
## Options
```Vue
```
`tilt` - Use default tilt mechanics | `Boolean` | default `true`
`defaultCoords` - Default mouse coordinates | `Object` | default `{ x: 0.5, y: 0.5 }`
`xRange` - Default tilt angle range on X-axis in degrees | `Array` | default `[5, -5]`
`yRange` - Default tilt angle range on Y-axis in degrees | `Array` | default `[-5, 5]`
`spring` - Spring configuration, see [options](https://posva.net/vue-motion/#/home?id=springs) | `String, Object` | default `{ stiffness: 60, damping: 16, precision: 0.01 }`
`leaveReset` - Timer after which to reset to default coords when the pointer leaves element | `Number` | default `200`