Windows Inspired Interactive Hover Effect – vue-reveal-effect

Install & Download:

# NPM
$ npm i vue-reveal-effect

Description:

vue-reveal-effect is a Vue 3 component that applies a Windows-inspired hover effect to the background & border of an element.

How to use it:

1. Install and import the VueRevealEffect.

import { createApp } from 'vue'
import VueRevealEffect from 'vue-reveal-effect'
createApp(App).use(VueRevealEffect).mount('#app')

2. Add the v-reveal-effect to the target element and pass the following options as per your needs.

<template>
  <h1 v-reveal-effect>Hover Me</h1>
  <h1 v-reveal-effect="withOptions">With OPTIONS</h1>
</template>

const withOptions = {
  borderWidth: 1,
  borderColor: 'rgba(255, 0, 0, 40%)'
  borderGradientSize: 100,
  bgColor: '#000',
  bgGradientSize: 130,
  light: usePreferredDark(),
  clickEffect: true, // ripple click effect
  disabled: false
}

Preview:

Changelog:

v2.0.3 (04/16/2023)

• Update