Vue Gooey Background

Gooey Background Component for Vue 3.

See the DEMO on StackBlitz.

Install

npm i vue-gooey-background

Register the component

import GooeyBackground from 'vue-gooey-background'

// register globally
app.component('GooeyBackground', GooeyBackground)

// or locally
export default {
	components: { GooeyBackground },
	// ...
}

Usage

<!-- simple -->
<GooeyBackground>
	<a>Your gooey link.</a>
</GooeyBackground>

<!-- available props -->
<GooeyBackground disabled ellipse> ... </GooeyBackground>

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.

/* 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);
}