# ngx-acuw (Angular Components using WEBGL)

ngx-acuw is a collection of components for Angular made with the 3D library three.js.

<img src="./projects/ng-acuw-showcase/src/assets/acuw.svg" width="200"/>

[![npm](https://shields.io/npm/l/ngx-acuw?maxAge=2592000)](/LICENSE)
![tests](https://github.com/windmichael/ngx-acuw/workflows/tests/badge.svg)
[![npm](https://img.shields.io/npm/v/ngx-acuw.svg?maxAge=2592000?style=plastic)](https://www.npmjs.com/package/ngx-acuw)

## Showcase and Description
[ngx-acuw](https://windmichael.github.io/ngx-acuw/)

## Dependencies
* [three.js](https://threejs.org) (*requires* threejs )
* [@types/three](https://www.npmjs.com/package/@types/three) (*requires* @types/three )
* [@angular/cdk](https://material.angular.io/cdk/categories) (*requires* @angular/cdk )

## Installation
```
npm install three @types/three @angular/cdk ngx-acuw
```

## Components
<table>
  <tr>
    <th>Image As Particles</th>
    <th>Image Transition</th>
    <th>Lightbox</th>
    <th>Carousel</th>
    <th>Performance-Monitor</th>
  </tr>
  <tr>
    <td><img src="./projects/ng-acuw-showcase/src/assets/image-as-particles/imageAsParticles.gif" width="150"/></td>
    <td><img src="./projects/ng-acuw-showcase/src/assets/image-transition/imageTransition.gif" width="150"/></td>
    <td><img src="./projects/ng-acuw-showcase/src/assets/lightbox/lightbox.jpg" width="150"/></td>
    <td><img src="./projects/ng-acuw-showcase/src/assets/carousel/carousel.gif" width="150"/></td>
    <td><img src="./projects/ng-acuw-showcase/src/assets/performance-monitor/performance-monitor.png" width="150"/></td>
  </tr>
  <tr>
    <td></td>
    <td><a href="https://stackblitz.com/edit/ngx-acuw-image-transition">stackblitz<a/></td>
    <td><a href="https://stackblitz.com/edit/angular-ngx-acuw-lightbox">stackblitz<a/></td>
    <td><a href="https://stackblitz.com/edit/ngx-acuw-carousel">stackblitz<a/></td>
    <td></td>
  </tr>
</table>