stimulus-glow.md

title	description	package	packagePath
Glow	A Stimulus controller that add a mouse-tracing glow effect.	glow	stimulus-glow

Installation

:installation-block{:package="package" :packagePath="packagePath"}

Example

:glow

How it works

The concept of the effect is to clone an element, the overlay, and applying a CSS mask with a radial-gradient property that follow the mouse.

Every element that has a glow class will be revealed by the mask but not the rest.

Usage

TailwindCSS is required to use this CSS, because we will use a custom variant to limit the glow effect to the overlay.

In your tailwind.config.js file, add this plugin:

::code-block{tabName="tailwind.config.js"}

const plugin = require("tailwindcss/plugin")

module.exports = {
  content: ["./index.html", "./src/**/*.{js,ts}"],

  plugins: [
    plugin(
      ({ addVariant }) => {
        addVariant("glow", ".glow-capture .glow-overlay &")
      },
      {
        theme: {
          extend: {
            colors: {
              glow: "color-mix(in srgb, var(--glow-color) calc(<alpha-value> * 100%), transparent)",
            },
          },
        },
      },
    ),
  ],
}

::

Now in your CSS, add this class: ::code-block{tabName="app/javascript/stylesheets/application.css"}

.glow-overlay {
  --glow-size: 25rem; /* Change the size of the glow effect here */

  position: absolute;
  inset: 0;
  pointer-events: none;
  user-select: none;
  opacity: var(--glow-opacity, 0);
  mask: radial-gradient(
    var(--glow-size) var(--glow-size) at var(--glow-x) var(--glow-y),
    var(--glow-color) 1%,
    transparent 50%
  );
  transition: 400ms mask ease;
  will-change: mask;
}

::

Here is a simplified version of the minimum markup you need:

::code-block{tabName="app/views/index.html"}

<div data-controller="glow" class="relative glow-capture">
  <div data-glow-target="child" class="glow glow:ring-1 glow:border-glow glow:ring-glow glow:bg-glow/[.15]">
    <h2 class="font-bold text-2xl mb-4 text-gray-200 glow:text-glow/[.8]">Chicken Shawarma & Veggies</h2>

    <p class="text-sm text-gray-300 glow:text-glow">Vitae ducimus harum earum ratione autem esse ea!</p>

    <button class="glow:text-glow glow:border-glow glow:ring glow:ring-glow">Add to cart</button>
  </div>

  <div data-glow-target="overlay" class="glow-overlay" style="--glow-color: #f97316"></div>
</div>

::

I suggest you the inspect the index.html of the demo for a complete example.

Extending Controller

::extending-controller ::code-block{tabName="app/javascript/controllers/glow_controller.js"}

import Glow from "stimulus-glow"

export default class extends Glow {
  connect() {
    super.connect()
    console.log("Do what you want here.")
  }
}

:: ::