Shine on Hover

Features

• Lightweight < 3kb
• No dependencies
• Framework agnostic
• Customizable

Installation

# npm
npm install shine-on-hover

# yarn
yarn add shine-on-hover

# pnpm
pnpm add shine-on-hover

# bun
bun add shine-on-hover

Usage

Vanilla JS

<div class="card" />

import { shine } from 'shine-on-hover';

shine('.card', {
  smooothness: 'BALANCE'
  shineColor: 'hsl(0deg 0% 0% / 4%)',
  shineSize: '5%',
  shineSpread: '50%',
  shineBorder: 'hsl(220deg 5% 88%)'
})

React

import { useEffect } from 'react';
import { shine } from 'shine-on-hover';

const Card = () => {
  useEffect(() => {
    shine('.card', {
      smooothness: 'BALANCE'
      shineColor: 'hsl(0deg 0% 0% / 4%)',
      shineSize: '5%',
      shineSpread: '50%',
      shineBorder: 'hsl(220deg 5% 88%)'
    })
  }, [])

  return <div className="card" />
}

Vue

<template>
    <div class="card" />
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import { shine } from 'shine-on-hover';

onMounted(() => {
  shine('.card', {
    smooothness: 'BALANCE'
    shineColor: 'hsl(0deg 0% 0% / 4%)',
    shineSize: '5%',
    shineSpread: '50%',
    shineBorder: 'hsl(220deg 5% 88%)'
  })
})
</script>

Svelte

<script lang="ts">
  import { onMount } from 'svelte';
  import { shine } from 'shine-on-hover';

  onMount(() => {
    shine('.card', {
      smooothness: 'BALANCE'
      shineColor: 'hsl(0deg 0% 0% / 4%)',
      shineSize: '5%',
      shineSpread: '50%',
      shineBorder: 'hsl(220deg 5% 88%)'
    })
  })
</script>

Configuration

Five properties are available to configure the shine effect: