Mouse Light

A framework-agnostic mouse tracking lighting effect.

Installation

npm install @yanren1225/mouse-light

Usage

Vanilla JS

import { MouseLight } from '@yanren1225/mouse-light';
import '@yanren1225/mouse-light/style.css';

const container = document.querySelector('.my-container');
const effect = new MouseLight(container, {
  size: 300, // or '300px'
  theme: 'auto', // 'light' | 'dark' | 'auto'
  opacity: 0.15
});

React / Solid / Vue

Just wrap your component or attach the ref to the element.

SolidJS Example

import { onMount, onCleanup } from 'solid-js';
import { MouseLight } from '@yanren1225/mouse-light';
import '@yanren1225/mouse-light/style.css';

const MyComponent = () => {
  let ref;
  let light;

  onMount(() => {
    if (ref) light = new MouseLight(ref);
  });

  onCleanup(() => {
    light?.destroy();
  });

  return <div ref={ref}>Content</div>;
};

React Example

import { useEffect, useRef } from 'react';
import { MouseLight } from '@yanren1225/mouse-light';
import '@yanren1225/mouse-light/style.css';

const MyComponent = () => {
  const ref = useRef(null);

  useEffect(() => {
    if (!ref.current) return;
    
    const light = new MouseLight(ref.current);
    
    return () => {
      light.destroy();
    };
  }, []);

  return <div ref={ref}>Content</div>;
};

Vue Example

<script setup>
import { onMounted, onUnmounted, ref } from 'vue';
import { MouseLight } from '@yanren1225/mouse-light';
import '@yanren1225/mouse-light/style.css';

const container = ref(null);
let light;

onMounted(() => {
  if (container.value) {
    light = new MouseLight(container.value);
  }
});

onUnmounted(() => {
  if (light) {
    light.destroy();
  }
});
</script>

<template>
  <div ref="container">Content</div>
</template>

Svelte Example

<script>
  import { onMount } from 'svelte';
  import { MouseLight } from '@yanren1225/mouse-light';
  import '@yanren1225/mouse-light/style.css';

  let container;
  let light;

  onMount(() => {
    light = new MouseLight(container);
    return () => light.destroy();
  });
</script>

<div bind:this={container}>
  Content
</div>