ngx-astro-dark-veil

Dark veil WebGL effect for Astro. A zero-runtime port of @omnedia/ngx-dark-veil to Astro components — no Angular dependency.

A WebGL shader that adds a dark, animated veiling effect over your content with optional noise, scanlines, and warp.

Features

• Pure Astro component (.astro), no Angular runtime.
• WebGL via the ogl library.
• The CPPN shader is copied as-is (it's GLSL, no Angular dependency).
• Instances get unique ids, so you can use several on the same page.
• Animation pauses when off-screen (IntersectionObserver), same as the original.

Installation

npm install ngx-astro-dark-veil

Usage

---
import DarkVeil from 'ngx-astro-dark-veil';
---

<DarkVeil>
  <h1>Hello world</h1>
</DarkVeil>

Props

| Prop | Default | | --------------------- | ------- | | hueShift | 0 | | noiseIntensity | 0 | | scanlineIntensity | 0 | | speed | 1 | | scanlineFrequency | 0 | | warpAmount | 0 | | resolutionScale | 1 |

All components accept class for additional styling.

License

MIT. Original effect © Omnedia (MIT).