Home

Awesome

ngx-retro-grid

@omnedia/ngx-retro-grid is an Angular library that provides a retro-styled grid background animation for Angular components. This component creates a 3D perspective grid with customizable colors, rotation, and smooth animation, perfect for adding a nostalgic or futuristic visual effect to your application.

Features

Installation

Install the library using npm:

npm install @omnedia/ngx-retro-grid

Usage

Import the NgxRetroGridComponent in your Angular module or component:

import { NgxRetroGridComponent } from '@omnedia/ngx-retro-grid';

@Component({
  ...
  imports: [
    ...
    NgxRetroGridComponent,
  ],
  ...
})

Use the component in your template:


<om-retro-grid
  [gridColor]="'#ff007f'"
  [fadeColor]="'#000000'"
  [gridRotation]="'35deg'"
  styleClass="custom-class"
>
  <h1>Your content here</h1>
</om-retro-grid>

API


<om-retro-grid
  [gridColor]="gridColor"
  [fadeColor]="fadeColor"
  [gridRotation]="gridRotation"
  styleClass="your-custom-class"
>
  <ng-content></ng-content>
</om-retro-grid>

Example

<om-retro-grid
  [gridColor]="'#00ffcc'"
  [fadeColor]="'#001f3f'"
  [gridRotation]="'45deg'"
  styleClass="example-class"
>
  <div class="content">This is a retro grid background</div>
</om-retro-grid>

This will create a retro grid background with a cyan grid, a dark blue fading effect, and a 45-degree rotation for the grid.

Styling

To customize the appearance of the grid or the container, use the styleClass input to apply your own CSS classes.

.example-class {
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
}

Contributing

Contributions are welcome. Please submit a pull request or open an issue to discuss your ideas.

License

This project is licensed under the MIT License.