Skip to content

aidanaden/solid-glow

Repository files navigation

solid-glow

solid-glow

size size npm pnpm

solid-glow

Add a mouse-tracing glow effect to Solid components.

gif of glow effect

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.

About

Add a mouse-tracing glow effect to SolidJS components.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published