This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

NgGlow

Glow effect to Angular components inspired by react-glow.

Installation

Install the package with npm:

npm add ng-glow

Usage

Wrap any quantity of <ng-glow> components in a <ng-glow-cap> which will be used to track the mouse location.

<ng-glow-cap size="50%">
  <ng-glow color="#80008078" styleClass="rounded-2xl mb-3">
    <div class="rounded-2xl py-10 text-center ring-1 ring-inset ring-gray-100/5 lg:flex lg:flex-col lg:justify-center lg:py-16">
      <div class="mx-auto max-w-xs px-8">
        <p class="text-base font-semibold text-gray-300">Pay once, own it forever</p>
        <p class="mt-6 flex items-baseline justify-center gap-x-2">
          <span class="text-5xl font-bold tracking-tight text-gray-500">$349</span>
          <span class="text-sm font-semibold leading-6 tracking-wide text-gray-300">USD</span>
        </p>
        <a href="#" class="mt-10 block w-full rounded-md bg-indigo-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500">Get access</a>
        <p class="mt-6 text-xs leading-5 text-gray-300">Invoices and receipts available for easy company reimbursement</p>
      </div>
    </div>
  </ng-glow>
</ng-glow-cap>

Tailwind

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

tailwind.config.js

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