Customizable Cursor Flare Effect In JavaScript – Flare.js

Category: Javascript | May 28, 2024
Author:sims2001
Views Total:69 views
Official Page:Go to website
Last Update:May 28, 2024
License:MIT

Preview:

Customizable Cursor Flare Effect In JavaScript – Flare.js

Description:

Flare.js is a lightweight JavaScript library that allows you to add a customizable radiant flare effect that follows your cursor.

You can customize the glow radius to determine the size of the flare, choose any background color to match your site’s theme, and set the flare color for a striking effect.

The library works by creating a radial gradient that follows the mouse cursor’s position within the target container. Here’s a breakdown of how it functions:

  1. When the library is initialized, it adds an event listener to the target container, listening for the `mousemove` event.
  2. Upon detecting a `mousemove` event, the library calculates the mouse cursor’s position relative to the container’s coordinates.
  3. Using the calculated coordinates, a radial gradient is dynamically generated and applied as the container’s background.
  4. The radial gradient consists of two colors: the flare color (specified by `flareColor`) at the center and a transparent color (`rgba(254,1,154,0.0)`) at the outer edges.
  5. The size of the radial gradient is determined by the `glowRadius` option, creating the desired flare effect around the cursor.
  6. When the mouse cursor leaves the container, the `mouseleave` event is triggered, and the background is reset to the specified `backgroundColor`.

How to use it:

1. Download and import the FlareJS module from the library’s source files.

import FlareJS from "./src/flare.js";

2. Initialize FlareJS on the container element where you want the flare effect applied:

const flare = new FlareJS('.container', {
      // options here
});

3. Customize the flare effect by setting the glow radius, background color, and flare color:

const flare = new FlareJS('.container', {
      glowRadius: 150,
      backgroundColor: 'rgb(200, 200, 200)',
      flareColor: 'rgba(0, 51, 255, 0.5)'
});

You Might Be Interested In:


Leave a Reply