thetarnav / vue-gooey-background

Gooey Background Component for Vue 3

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

vue-gooey-background's Issues

Create and link a Demo

Crazy artifacts on safari

The morphing gooey effect doesnt work on safari :-( Was trying some things, but nothing helped...

You can see the Problem here, Chrome works, but Safari not
http://vue.florian-strasser.de/

Background color transition

The background should have a basic background color transition set.
With a CSS variable o easily control it.

Detect mobile device

Instead of relying on media queries to hide the moving ball, detect the device type on the component load using js.