Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/awtkns/vue-glow
A performant wrapper component to give dynamic glow effects in Vue
https://github.com/awtkns/vue-glow
animation glow nuxt nuxtjs ui vue vuejs vuejs-components vuetify
Last synced: 19 days ago
JSON representation
A performant wrapper component to give dynamic glow effects in Vue
- Host: GitHub
- URL: https://github.com/awtkns/vue-glow
- Owner: awtkns
- License: mit
- Created: 2020-05-03T06:06:25.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-01-25T01:26:48.000Z (about 4 years ago)
- Last Synced: 2024-12-22T03:08:20.475Z (about 1 month ago)
- Topics: animation, glow, nuxt, nuxtjs, ui, vue, vuejs, vuejs-components, vuetify
- Language: JavaScript
- Homepage: https://awtkns.com/vueglow
- Size: 224 KB
- Stars: 30
- Watchers: 3
- Forks: 4
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Live Demo
A performant wrapper component to give dynamic glow effects in Vue
---
**Vue Glow** is a simple vue component that allows any element to be given a glow / colored elevation effect. VueGlow was initially built to extend vuetify's capabilities, however it will work equally well without Vuetify. The dynamic glow effect was done in pure css meaning no additional dependencies.
## Installation
```
npm install vue-glow
```
## Import
```
import VueGlow from 'vue-glow';
```
## Basic Usage
```html
I am GLOWING!
I am GLOWING bright red!
I am using hex colors!
I am using rbg colors!
I am using Hsv colors!
```
## Props
| Prop | Effect | Default |
| ------------|---------------| ------- |
| color | Changes the color of the glow. Can either be a color name, hex, a RGB dict, HSL dict, or HSV dict. | "red" |
| elevation | Changes the elevation effect of the glow. Can be a number between 0-24. | 12 |
| intensity | Customize the intensity of the glow. Can be a number between 0-4. | 1 |
| intense | Doubles the intensity of the glow. | false |
| rounded | Allows a border radius to be specified. | 4px |
| tile | No border radius. | false |
| disabled | Disables the glow effect. Disabling will pause any animation. | false |
## Animation
Use the fade prop to make VueGlow changes it's colors. Set the animation speed with the interval prop.
Note, animation can result in poor performance at very high animation speeds.
```html
I am slowly changing colors!
```
| Prop | Effect | Default |
|-------------| ------- | ------- |
| fade | Glow changes hue over time. Animation speed can be changed with the interval prop. | false |
| interval | Sets the animation speed. Speed is in ms. Default is 50. | 50 |
| reversed | Reverses the animation. | false |
## Coming Soon
+ More color animations and effects