https://github.com/thetarnav/vue-gooey-background
Gooey Background Component for Vue 3
https://github.com/thetarnav/vue-gooey-background
component gooey sfc vue vue3
Last synced: 25 days ago
JSON representation
Gooey Background Component for Vue 3
- Host: GitHub
- URL: https://github.com/thetarnav/vue-gooey-background
- Owner: thetarnav
- License: mit
- Created: 2021-08-14T20:55:04.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2021-08-18T14:33:29.000Z (almost 5 years ago)
- Last Synced: 2026-05-04T00:09:27.110Z (about 1 month ago)
- Topics: component, gooey, sfc, vue, vue3
- Language: TypeScript
- Homepage: https://npmjs.com/package/vue-gooey-background
- Size: 325 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vue Gooey Background
Gooey Background Component for Vue 3.
See the [DEMO](https://stackblitz.com/edit/vue-hcyeqk?file=src/App.vue) on StackBlitz.
## Install
```sh
npm i vue-gooey-background
```
## Register the component
```js
import GooeyBackground from 'vue-gooey-background'
// register globally
app.component('GooeyBackground', GooeyBackground)
// or locally
export default {
components: { GooeyBackground },
// ...
}
```
## Usage
```html
...
```
## Props
#### disabled
- _Optional_
- Type: `Boolean`
- Disables the animation of the moving ball. Making the background static.
#### ellipse
- _Optional_
- Type: `Boolean`
- Enable it if the shape of your element is round.
## CSS Variables
Some css properties can be easily changed by setting css variables.
```css
/* the defaults: */
.gooey-background {
/* color of the gooey background */
--bg-color: #42b883;
/* border radius (will be much increased by svg filter) */
--bg-radius: 12px;
/* size of the ball that's following the mouse */
/* keep the number higher than you want, because of the svg filter */
--ball-size: 52px;
/* duration of the background color transition */
--duration: 300ms;
/* timing function of the background color transition */
--ease: cubic-bezier(0.51, 0.06, 0.56, 1.37);
}
```