Skip to content

A simple component library to create a container with an animated grid pattern background.

License

Notifications You must be signed in to change notification settings

omnedia/ngx-flickering-grid

Repository files navigation

ngx-flickering-grid

@omnedia/ngx-flickering-grid is an Angular library that renders a dynamic flickering grid background with customizable square size, grid gaps, flicker behavior, and color. This component is perfect for adding a unique animated grid effect behind content in your Angular application.

Features

  • Dynamic flickering grid effect rendered on an HTML5 canvas.
  • Customizable grid parameters, including square size, grid gap, flicker chance, and maximum opacity.
  • Easy to integrate as a standalone component with optional viewport-based animation triggering.

Installation

Install the library using npm:

npm install @omnedia/ngx-flickering-grid

Usage

Import the NgxFlickeringGridComponent in your Angular module or component:

import { NgxFlickeringGridComponent } from '@omnedia/ngx-flickering-grid';

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

Use the component in your template:

<om-flickering-grid
  [squareSize]="6"
  [gridGap]="8"
  [flickerChance]="0.5"
  [color]="'#ffcc00'"
  [maxOpacity]="0.4"
  styleClass="custom-flickering-grid"
>
  <h1>Your Content Here</h1>
</om-flickering-grid>

How It Works

  • Dynamic Flickering Grid: The grid's squares will flicker at random intervals, controlled by the flickerChance input. You can adjust the size, gap, and opacity of the squares for different visual effects.
  • Viewport Animation: The grid animation is only triggered when the component enters the viewport, enhancing performance by preventing unnecessary rendering.
  • Global and Custom Styling: You can style the .om-flickering-grid container globally or apply custom styles using the styleClass input.

API

<om-flickering-grid
  [squareSize]="squareSize"
  [gridGap]="gridGap"
  [flickerChance]="flickerChance"
  [color]="color"
  [maxOpacity]="maxOpacity"
  styleClass="your-custom-class"
>
  <ng-content></ng-content>
</om-flickering-grid>
  • squareSize (optional): Size of each square in pixels. Defaults to 4px.
  • gridGap (optional): Gap between the squares in pixels. Defaults to 6px.
  • flickerChance (optional): Probability of squares flickering, represented as a value between 0 and 1. Defaults to 0.3.
  • color (optional): The color of the grid squares. Accepts any valid CSS color value. Defaults to '#6B7280'.
  • maxOpacity (optional): Maximum opacity level of the squares. Accepts a value between 0 and 1. Defaults to 0.3.
  • styleClass (optional): Custom CSS class to apply to the .om-flickering-grid container.

Example

<om-flickering-grid [squareSize]="8" [gridGap]="10" [flickerChance]="0.4" [color]="'#3498db'" [maxOpacity]="0.5">
  <div class="content">
    <p>Flickering Grid Background Content</p>
  </div>
</om-flickering-grid>

This will create a flickering grid with larger squares, more pronounced gaps, and a blue color, while the content inside remains unaffected by the animation.

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.

About

A simple component library to create a container with an animated grid pattern background.

Resources

License

Stars

Watchers

Forks

Packages

No packages published