@ngx-jc-tools/effects
TypeScript icon, indicating that this package has built-in type declarations

1.0.11 • Public • Published

@ngx-jc-tools/effects

Angular fancy effects library

Installation

Install the pacjage with npm

  npm add @ngx-jc-tools/effects

Effects

Glow

Glow effect Angular component inspired by react-glow.

Usage

Use the custom tag <glow-effect>

params
name condition default
border-radius optional
background required
border-color required
border-size optional 5px
color required
size required
transition-speed optional 150ms
typescript
import { Glow } from '@ngx-jc-tools/effects';

@Component({
  ...,
  standalone: true,
  imports: [
    ...,
    Glow
  ]
})
(...)
html
<div class="flex flex-col justify-center items-center min-h-screen bg-[#232323]">
  <!--
    @tag glow-effect
    @attr size set de glow aura size
    @attr transition-speed glow aura transition duration
    @attr border-color passive border color
  -->
  <glow-effect
    border-radius="10px"
    color="#db80e7"
    size="200px"
    transition-speed="2.2s"
    background="#232323"
    border-color="#b0b0b05e"
    border-size="2px"
  >
    <!-- content -->
    ...
  </glow-effect>
</div>

result

glow effect gif

Skew

Skew effect Angular directive inspired by github.

Usage

Use the directive <element skew-effect>

params
name condition default
skew-perspective optional 700px
x-range optional 2
y-range optional 2
typescript
import { Skew } from '@ngx-jc-tools/effects';

@Component({
  ...,
  standalone: true,
  imports: [
    ...,
    Skew
  ]
})
(...)
html
<div class="flex flex-col justify-center items-center min-h-screen bg-[#232323]">
  <!--
    @tag element[skew-effect]
    @attr x-range range of degrees on the x axe
    @attr y-range range of degrees on the y axe
    @attr skew-perspective
  -->
  <div skew-effect [x-range]="8" [x-range]="6" class="rounded-md border-2 border-gray-400 sm:py-32 py-24">
    <!-- content -->
    ...
  </div>
</div>

/@ngx-jc-tools/effects/

    Package Sidebar

    Install

    npm i @ngx-jc-tools/effects

    Weekly Downloads

    0

    Version

    1.0.11

    License

    none

    Unpacked Size

    834 kB

    Total Files

    15

    Last publish

    Collaborators

    • jscg