Angular fancy effects library
Install the pacjage with npm
npm add @ngx-jc-tools/effectsGlow effect Angular component inspired by react-glow.
Use the custom tag <glow-effect>
| name | condition | default |
|---|---|---|
| border-radius | optional | |
| background | required | |
| border-color | required | |
| border-size | optional | 5px |
| color | required | |
| size | required | |
| transition-speed | optional | 150ms |
import { Glow } from '@ngx-jc-tools/effects';
@Component({
...,
standalone: true,
imports: [
...,
Glow
]
})
(...)<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>
Skew effect Angular directive inspired by github.
Use the directive <element skew-effect>
| name | condition | default |
|---|---|---|
| skew-perspective | optional | 700px |
| x-range | optional | 2 |
| y-range | optional | 2 |
import { Skew } from '@ngx-jc-tools/effects';
@Component({
...,
standalone: true,
imports: [
...,
Skew
]
})
(...)<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>