solid-glow

Add a mouse-tracing glow effect to Solid components.

The glow effect will only work using the mouse as the pointer. Touch events will not trigger it.

Quick start

Install it:

npm i solid-glow
# or
yarn add solid-glow
# or
pnpm add solid-glow

Use it:

Wrap any number of <Glow> components in a <GlowCapture> which will be used to track the mouse location.

<GlowCapture>
  <span>This won't glow</span>
  <Glow color="purple">
    <span class="text-black glow:text-glow/50 glow:bg-red-100">
      This will glow purple when the mouse is passed over
    </span>
  </Glow>
</GlowCapture>

Children of <Glow> can style themselves how to look when glowing. You might choose to leave some children unchanged, or highlight them with the glow: variant style.

The value of color will be available as a CSS variable --glow-color, as well as the Tailwind glow color. You can pass any valid CSS color, including hsl() values etc. Of course, you might choose to use any other color; you can leave out the color prop entirely.

Tailwind

Add the tailwind plugin to unlock the glow: variant and glow color

tailwind.config.js

module.exports = {
  ...
  plugins: [
    require('solid-glow/tailwind')
  ]
}

As with all colors in Tailwind, you may add opacity by appending a percentage after the color, such as bg-glow/20 for 20% opacity.

Vanilla CSS

You can style the glow effect with vanilla CSS:

<GlowCapture>
  <span>This won't glow</span>
  <Glow color="hsl(338.69 100% 48.04%)">
    <span class="glowable-text">
      This will glow pink when the mouse is passed over
    </span>
  </Glow>
</GlowCapture>

.glowable-text {
  color: black;
}

[glow] .glowable-text {
  color: var(--glow-color);
}

Attribution

SolidJS port of react-glow.