angular-three-postprocessing 2.2.0 → 2.2.1

package/fesm2022/angular-three-postprocessing.mjs

@@ -1,8 +1,7 @@
 import * as i0 from '@angular/core';
-import { inject, Component, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, input, Directive, Injector, computed, viewChild, afterNextRender, untracked } from '@angular/core';
-import { injectStore, pick, extend, injectBeforeRender, getLocalState, NgtArgs, vector2, is, NgtSelection, omit, resolveRef } from 'angular-three';
+import { inject, Component, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, input, Directive, Injector, computed, viewChild, effect, afterNextRender, untracked } from '@angular/core';
+import { injectStore, pick, extend, getLocalState, injectBeforeRender, NgtArgs, vector2, is, NgtSelection, omit, resolveRef } from 'angular-three';
 import { createNoopInjectionToken } from 'ngxtension/create-injection-token';
-import { injectAutoEffect } from 'ngxtension/auto-effect';
 import { mergeInputs } from 'ngxtension/inject-inputs';
 import { EffectAttribute, EffectComposer, RenderPass, NormalPass, DepthDownsamplingPass, Effect, EffectPass, Pass, BloomEffect, BlendFunction, BrightnessContrastEffect, ChromaticAberrationEffect, ColorAverageEffect, ColorDepthEffect, DepthEffect, DepthOfFieldEffect, MaskFunction, DotScreenEffect, FXAAEffect, GlitchEffect, GlitchMode, GodRaysEffect, GridEffect, HueSaturationEffect, LUT3DEffect, NoiseEffect, OutlineEffect, PixelationEffect, ScanlineEffect, SepiaEffect, ShockWaveEffect, SMAAEffect, TiltShiftEffect, VignetteEffect } from 'postprocessing';
 import { HalfFloatType, Group, NoToneMapping, Uniform, Texture, Color, CanvasTexture, RepeatWrapping, NearestFilter, Vector3, Vector2, Mesh } from 'three';
@@ -14,15 +13,15 @@ class NgtpEffectBlendMode {
     constructor() {
         this.effect = inject(NgtpEffect, { optional: true });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtpEffectBlendMode, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: NgtpEffectBlendMode, isStandalone: true, selector: "ngtp-effect-blend-mode", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpEffectBlendMode, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.4", type: NgtpEffectBlendMode, isStandalone: true, selector: "ngtp-effect-blend-mode", ngImport: i0, template: `
 		@if (effect) {
 			<ngt-value [rawValue]="effect.blendFunction()" attach="blendMode.blendFunction" />
 			<ngt-value [rawValue]="effect.opacity()" attach="blendMode.opacity.value" />
 		}
 	`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtpEffectBlendMode, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpEffectBlendMode, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-effect-blend-mode',
@@ -46,10 +45,10 @@ class NgtpEffect {
         this.camera = this.store.select('camera');
         this.invalidate = this.store.select('invalidate');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtpEffect, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.0", type: NgtpEffect, isStandalone: true, inputs: { blendFunction: { classPropertyName: "blendFunction", publicName: "blendFunction", isSignal: true, isRequired: false, transformFunction: null }, opacity: { classPropertyName: "opacity", publicName: "opacity", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpEffect, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.4", type: NgtpEffect, isStandalone: true, inputs: { blendFunction: { classPropertyName: "blendFunction", publicName: "blendFunction", isSignal: true, isRequired: false, transformFunction: null }, opacity: { classPropertyName: "opacity", publicName: "opacity", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtpEffect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpEffect, decorators: [{
             type: Directive,
             args: [{ standalone: true }]
         }] });
@@ -69,7 +68,6 @@ class NgtpEffectComposer {
     constructor() {
         this.options = input(defaultOptions$4, { transform: mergeInputs(defaultOptions$4) });
         this.injector = inject(Injector);
-        this.autoEffect = injectAutoEffect();
         this.store = injectStore();
         this.size = this.store.select('size');
         this.gl = this.store.select('gl');
@@ -122,48 +120,22 @@ class NgtpEffectComposer {
             return { composer, normalPass, downSamplingPass };
         });
         extend({ Group });
-        afterNextRender(() => {
-            this.disableToneMapping();
-            this.setComposerSize();
-            this.updatePasses();
-            injectBeforeRender(({ delta }) => {
-                const [{ composer }, { enabled, autoClear, stencilBuffer }, gl] = [
-                    this.composerData(),
-                    this.options(),
-                    this.gl(),
-                ];
-                if (enabled) {
-                    const currentAutoClear = gl.autoClear;
-                    gl.autoClear = autoClear;
-                    if (stencilBuffer && !autoClear)
-                        gl.clearStencil();
-                    composer.render(delta);
-                    gl.autoClear = currentAutoClear;
-                }
-            }, { injector: this.injector, priority: this.options().enabled ? this.options().renderPriority : 0 });
-        });
-    }
-    // NOTE: Disable tone mapping because threejs disallows tonemapping on render targets
-    disableToneMapping() {
-        this.autoEffect(() => {
+        // NOTE: Disable tone mapping because threejs disallows tonemapping on render targets
+        effect((onCleanup) => {
             const gl = this.gl();
             const currentTonemapping = gl.toneMapping;
             gl.toneMapping = NoToneMapping;
-            return () => {
+            onCleanup(() => {
                 gl.toneMapping = currentTonemapping;
-            };
+            });
         });
-    }
-    setComposerSize() {
-        this.autoEffect(() => {
+        effect(() => {
             const [{ composer }, { width, height }] = [this.composerData(), this.size()];
             if (composer) {
                 composer.setSize(width, height);
             }
         });
-    }
-    updatePasses() {
-        this.autoEffect(() => {
+        effect((onCleanup) => {
             const [group, { composer, normalPass, downSamplingPass }, camera] = [
                 this.groupRef(),
                 this.composerData(),
@@ -203,24 +175,42 @@ class NgtpEffectComposer {
                 if (downSamplingPass)
                     downSamplingPass.enabled = true;
             }
-            return () => {
+            onCleanup(() => {
                 for (const pass of passes)
                     composer?.removePass(pass);
                 if (normalPass)
                     normalPass.enabled = false;
                 if (downSamplingPass)
                     downSamplingPass.enabled = false;
-            };
+            });
+        });
+        // NOTE: register beforeRender afterNextRender to ensure input is ready
+        afterNextRender(() => {
+            injectBeforeRender(({ delta }) => {
+                const [{ composer }, { enabled, autoClear, stencilBuffer }, gl] = [
+                    this.composerData(),
+                    this.options(),
+                    this.gl(),
+                ];
+                if (enabled) {
+                    const currentAutoClear = gl.autoClear;
+                    gl.autoClear = autoClear;
+                    if (stencilBuffer && !autoClear)
+                        gl.clearStencil();
+                    composer.render(delta);
+                    gl.autoClear = currentAutoClear;
+                }
+            }, { injector: this.injector, priority: this.options().enabled ? this.options().renderPriority : 0 });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtpEffectComposer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.0", type: NgtpEffectComposer, isStandalone: true, selector: "ngtp-effect-composer", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "groupRef", first: true, predicate: ["group"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpEffectComposer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.4", type: NgtpEffectComposer, isStandalone: true, selector: "ngtp-effect-composer", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "groupRef", first: true, predicate: ["group"], descendants: true, isSignal: true }], ngImport: i0, template: `
 		<ngt-group #group>
 			<ng-content />
 		</ngt-group>
 	`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtpEffectComposer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpEffectComposer, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-effect-composer',
@@ -330,12 +320,12 @@ class NgtpASCII {
         this.options = input(defaultOptions$3, { transform: mergeInputs(defaultOptions$3) });
         this.effect = computed(() => new ASCIIEffect(this.options()));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtpASCII, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.0", type: NgtpASCII, isStandalone: true, selector: "ngtp-ascii", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpASCII, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: NgtpASCII, isStandalone: true, selector: "ngtp-ascii", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
 		<ngt-primitive *args="[effect()]" />
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtpASCII, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpASCII, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-ascii',
@@ -355,15 +345,15 @@ class NgtpBloom {
         this.effect = inject(NgtpEffect, { host: true });
         this.options = input({});
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtpBloom, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.0", type: NgtpBloom, isStandalone: true, selector: "ngtp-bloom", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.ADD })], hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpBloom, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: NgtpBloom, isStandalone: true, selector: "ngtp-bloom", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.ADD })], hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
 		<ngt-bloom-effect *args="[options()]" [camera]="effect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-bloom-effect>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtpBloom, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpBloom, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-bloom',
@@ -388,15 +378,15 @@ class NgtpBrightnessContrast {
         this.effect = inject(NgtpEffect, { host: true });
         this.options = input({});
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtpBrightnessContrast, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.0", type: NgtpBrightnessContrast, isStandalone: true, selector: "ngtp-brightness-contrast", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpBrightnessContrast, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: NgtpBrightnessContrast, isStandalone: true, selector: "ngtp-brightness-contrast", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
 		<ngt-brightness-contrast-effect *args="[options()]" [camera]="effect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-brightness-contrast-effect>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtpBrightnessContrast, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpBrightnessContrast, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-brightness-contrast',
@@ -420,15 +410,15 @@ class NgtpChromaticAberration {
         this.effect = inject(NgtpEffect, { host: true });
         this.options = input({});
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtpChromaticAberration, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.0", type: NgtpChromaticAberration, isStandalone: true, selector: "ngtp-chromatic-aberration", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpChromaticAberration, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: NgtpChromaticAberration, isStandalone: true, selector: "ngtp-chromatic-aberration", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
 		<ngt-chromatic-aberration-effect *args="[options()]" [camera]="effect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-chromatic-aberration-effect>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtpChromaticAberration, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpChromaticAberration, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-chromatic-aberration',
@@ -451,14 +441,14 @@ class NgtpColorAverage {
     constructor() {
         this.options = input({ blendFunction: BlendFunction.NORMAL }, { transform: mergeInputs({ blendFunction: BlendFunction.NORMAL }) });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtpColorAverage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.0", type: NgtpColorAverage, isStandalone: true, selector: "ngtp-color-average", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpColorAverage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: NgtpColorAverage, isStandalone: true, selector: "ngtp-color-average", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
 		<ngt-color-average-effect *args="[options().blendFunction]">
 			<ng-content />
 		</ngt-color-average-effect>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtpColorAverage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpColorAverage, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-color-average',
@@ -480,15 +470,15 @@ class NgtpColorDepth {
         this.effect = inject(NgtpEffect, { host: true });
         this.options = input({});
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtpColorDepth, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.0", type: NgtpColorDepth, isStandalone: true, selector: "ngtp-color-depth", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpColorDepth, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: NgtpColorDepth, isStandalone: true, selector: "ngtp-color-depth", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
 		<ngt-color-depth-effect *args="[options()]" [camera]="effect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-color-depth-effect>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtpColorDepth, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpColorDepth, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-color-depth',
@@ -512,15 +502,15 @@ class NgtpDepth {
         this.effect = inject(NgtpEffect, { host: true });
         this.options = input({});
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtpDepth, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.0", type: NgtpDepth, isStandalone: true, selector: "ngtp-depth", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpDepth, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: NgtpDepth, isStandalone: true, selector: "ngtp-depth", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
 		<ngt-depth-effect *args="[options()]" [camera]="effect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-depth-effect>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtpDepth, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpDepth, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-depth',
@@ -540,7 +530,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
 
 class NgtpDepthOfField {
     constructor() {
-        this.autoEffect = injectAutoEffect();
         this.effectComposer = inject(NgtpEffectComposer);
         this.options = input({});
         this.autoFocus = computed(() => this.options().target != null);
@@ -559,21 +548,17 @@ class NgtpDepthOfField {
             maskPass.maskFunction = MaskFunction.MULTIPLY_RGB_SET_ALPHA;
             return effect;
         });
-        afterNextRender(() => {
-            this.autoEffect(() => {
-                const effect = this.effect();
-                return () => {
-                    effect.dispose();
-                };
-            });
+        effect((onCleanup) => {
+            const depthOfFieldEffect = this.effect();
+            onCleanup(() => depthOfFieldEffect.dispose());
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtpDepthOfField, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.0", type: NgtpDepthOfField, isStandalone: true, selector: "ngtp-depth-of-field", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpDepthOfField, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: NgtpDepthOfField, isStandalone: true, selector: "ngtp-depth-of-field", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
 		<ngt-primitive *args="[effect()]" />
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtpDepthOfField, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpDepthOfField, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-depth-of-field',
@@ -593,15 +578,15 @@ class NgtpDotScreen {
         this.effect = inject(NgtpEffect, { host: true });
         this.options = input({});
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtpDotScreen, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.0", type: NgtpDotScreen, isStandalone: true, selector: "ngtp-dot-screen", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpDotScreen, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: NgtpDotScreen, isStandalone: true, selector: "ngtp-dot-screen", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
 		<ngt-dot-screen-effect *args="[options()]" [camera]="effect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-dot-screen-effect>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtpDotScreen, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpDotScreen, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-dot-screen',
@@ -625,15 +610,15 @@ class NgtpFXAA {
         this.effect = inject(NgtpEffect, { host: true });
         this.options = input({});
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtpFXAA, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.0", type: NgtpFXAA, isStandalone: true, selector: "ngtp-fxaa", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpFXAA, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: NgtpFXAA, isStandalone: true, selector: "ngtp-fxaa", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
 		<ngt-fXAA-effect *args="[options()]" [camera]="effect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-fXAA-effect>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtpFXAA, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpFXAA, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-fxaa',
@@ -653,7 +638,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
 
 class NgtpGlitch {
     constructor() {
-        this.autoEffect = injectAutoEffect();
         this.store = injectStore();
         this.invalidate = this.store.select('invalidate');
         this.options = input({ active: true }, { transform: mergeInputs({ active: true }) });
@@ -677,24 +661,22 @@ class NgtpGlitch {
                 strength,
             });
         });
-        afterNextRender(() => {
-            this.autoEffect(() => {
-                const effect = this.effect();
-                return () => effect.dispose();
-            });
-            this.autoEffect(() => {
-                const [effect, invalidate, mode, active] = [this.effect(), this.invalidate(), this.mode(), this.active()];
-                effect.mode = active ? mode || GlitchMode.SPORADIC : GlitchMode.DISABLED;
-                invalidate();
-            });
+        effect((onCleanup) => {
+            const effect = this.effect();
+            onCleanup(() => effect.dispose());
+        });
+        effect(() => {
+            const [glitchEffect, invalidate, mode, active] = [this.effect(), this.invalidate(), this.mode(), this.active()];
+            glitchEffect.mode = active ? mode || GlitchMode.SPORADIC : GlitchMode.DISABLED;
+            invalidate();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtpGlitch, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.0", type: NgtpGlitch, isStandalone: true, selector: "ngtp-glitch", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpGlitch, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: NgtpGlitch, isStandalone: true, selector: "ngtp-glitch", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
 		<ngt-primitive *args="[effect()]" />
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtpGlitch, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpGlitch, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-glitch',
@@ -710,26 +692,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
 
 class NgtpGodRays {
     constructor() {
-        this.autoEffect = injectAutoEffect();
         this.effectComposer = inject(NgtpEffectComposer);
         this.options = input({});
         this.effect = computed(() => {
             const [camera, { sun, ...options }] = [this.effectComposer.camera(), this.options()];
             return new GodRaysEffect(camera, is.ref(sun) ? sun.nativeElement : sun, options);
         });
-        afterNextRender(() => {
-            this.autoEffect(() => {
-                const [sun, effect] = [this.options().sun, this.effect()];
-                effect.lightSource = is.ref(sun) ? sun.nativeElement : sun;
-            });
+        effect(() => {
+            const [sun, godRaysEffect] = [this.options().sun, this.effect()];
+            godRaysEffect.lightSource = is.ref(sun) ? sun.nativeElement : sun;
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtpGodRays, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.0", type: NgtpGodRays, isStandalone: true, selector: "ngtp-god-rays", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpGodRays, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: NgtpGodRays, isStandalone: true, selector: "ngtp-god-rays", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
 		<ngt-primitive *args="[effect()]" />
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtpGodRays, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpGodRays, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-god-rays',
@@ -745,28 +724,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
 
 class NgtpGrid {
     constructor() {
-        this.autoEffect = injectAutoEffect();
         this.options = input({});
         this.size = pick(this.options, 'size');
         this.effect = computed(() => {
             const { size: _, ...options } = this.options();
             return new GridEffect(options);
         });
-        afterNextRender(() => {
-            this.autoEffect(() => {
-                const [size, effect] = [this.size(), this.effect()];
-                if (size) {
-                    effect.setSize(size.width, size.height);
-                }
-            });
+        effect(() => {
+            const [size, effect] = [this.size(), this.effect()];
+            if (size) {
+                effect.setSize(size.width, size.height);
+            }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtpGrid, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.0", type: NgtpGrid, isStandalone: true, selector: "ngtp-grid", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpGrid, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: NgtpGrid, isStandalone: true, selector: "ngtp-grid", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
 		<ngt-primitive *args="[effect()]" />
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtpGrid, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpGrid, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-grid',
@@ -786,15 +762,15 @@ class NgtpHueSaturation {
         this.effect = inject(NgtpEffect, { host: true });
         this.options = input({});
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtpHueSaturation, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.0", type: NgtpHueSaturation, isStandalone: true, selector: "ngtp-hue-saturation", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpHueSaturation, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: NgtpHueSaturation, isStandalone: true, selector: "ngtp-hue-saturation", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
 		<ngt-hue-saturation-effect *args="[options()]" [camera]="effect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-hue-saturation-effect>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtpHueSaturation, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpHueSaturation, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-hue-saturation',
@@ -902,7 +878,6 @@ const defaultOptions$2 = {
 };
 class NgtpLensFlare {
     constructor() {
-        this.autoEffect = injectAutoEffect();
         this.store = injectStore();
         this.viewport = this.store.select('viewport');
         this.raycaster = this.store.select('raycaster');
@@ -915,15 +890,13 @@ class NgtpLensFlare {
             const { position: _, followMouse: __, smoothTime: ___, ...options } = this.options();
             return new LensFlareEffect(options);
         });
-        afterNextRender(() => {
-            this.autoEffect(() => {
-                const [effect, viewport] = [this.effect(), this.viewport()];
-                const iResolution = effect.uniforms.get('iResolution');
-                if (iResolution) {
-                    iResolution.value.x = viewport.width;
-                    iResolution.value.y = viewport.height;
-                }
-            });
+        effect(() => {
+            const [lensFlareEffect, viewport] = [this.effect(), this.viewport()];
+            const iResolution = lensFlareEffect.uniforms.get('iResolution');
+            if (iResolution) {
+                iResolution.value.x = viewport.width;
+                iResolution.value.y = viewport.height;
+            }
         });
         injectBeforeRender(({ delta }) => {
             const [effect] = [this.effect()];
@@ -979,12 +952,12 @@ class NgtpLensFlare {
             easing.damp(uOpacity, 'value', target, smoothTime, delta);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtpLensFlare, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.0", type: NgtpLensFlare, isStandalone: true, selector: "ngtp-lens-flare", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpLensFlare, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: NgtpLensFlare, isStandalone: true, selector: "ngtp-lens-flare", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
 		<ngt-primitive *args="[effect()]" [parameters]="{ dispose: null }" />
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtpLensFlare, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpLensFlare, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-lens-flare',
@@ -1000,7 +973,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
 
 class NgtpLUT {
     constructor() {
-        this.autoEffect = injectAutoEffect();
         this.store = injectStore();
         this.invalidate = this.store.select('invalidate');
         this.options = input({});
@@ -1009,27 +981,25 @@ class NgtpLUT {
             const [lut, { lut: _, ...options }] = [this.lut(), this.options()];
             return new LUT3DEffect(lut, options);
         });
-        afterNextRender(() => {
-            this.autoEffect(() => {
-                const [effect, { lut, tetrahedralInterpolation }, invalidate] = [
-                    this.effect(),
-                    this.options(),
-                    this.invalidate(),
-                ];
-                if (tetrahedralInterpolation)
-                    effect.tetrahedralInterpolation = tetrahedralInterpolation;
-                if (lut)
-                    effect.lut = lut;
-                invalidate();
-            });
+        effect(() => {
+            const [effect, { lut, tetrahedralInterpolation }, invalidate] = [
+                this.effect(),
+                this.options(),
+                this.invalidate(),
+            ];
+            if (tetrahedralInterpolation)
+                effect.tetrahedralInterpolation = tetrahedralInterpolation;
+            if (lut)
+                effect.lut = lut;
+            invalidate();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtpLUT, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.0", type: NgtpLUT, isStandalone: true, selector: "ngtp-lut", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpLUT, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: NgtpLUT, isStandalone: true, selector: "ngtp-lut", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
 		<ngt-primitive *args="[effect()]" [dispose]="null" />
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtpLUT, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpLUT, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-lut',
@@ -1049,15 +1019,15 @@ class NgtpNoise {
         this.effect = inject(NgtpEffect, { host: true });
         this.options = input({});
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtpNoise, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.0", type: NgtpNoise, isStandalone: true, selector: "ngtp-noise", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.COLOR_DODGE })], hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpNoise, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: NgtpNoise, isStandalone: true, selector: "ngtp-noise", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.COLOR_DODGE })], hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
 		<ngt-noise-effect *args="[options()]" [camera]="effect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-noise-effect>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtpNoise, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpNoise, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-noise',
@@ -1144,31 +1114,35 @@ class NgtpOutline {
                 ...restOptions,
             });
         });
-        const autoEffect = injectAutoEffect();
-        afterNextRender(() => {
-            autoEffect(() => {
-                const effect = this.effect();
-                return () => effect.dispose();
-            });
-            autoEffect(() => {
-                const [effect, invalidate, selectionLayer] = [this.effect(), this.invalidate(), this.selectionLayer()];
-                effect.selectionLayer = selectionLayer;
-                invalidate();
-            });
-            autoEffect(() => {
-                // NOTE: we run this effect if declarative NgtSelection is not enabled
-                if (!this.ngtSelection) {
-                    // NOTE: if NgtSelection is not used and selection is not provided, we throw
-                    if (this.selection() === undefined) {
-                        throw new Error('[NGT PostProcessing]: ngtp-outline requires selection input or use NgtSelection');
-                    }
-                    return this.handleSelectionChangeEffect(this.selection, this.effect, this.invalidate);
+        effect((onCleanup) => {
+            const effect = this.effect();
+            onCleanup(() => effect.dispose());
+        });
+        effect(() => {
+            const [effect, invalidate, selectionLayer] = [this.effect(), this.invalidate(), this.selectionLayer()];
+            effect.selectionLayer = selectionLayer;
+            invalidate();
+        });
+        effect((onCleanup) => {
+            // NOTE: we run this effect if declarative NgtSelection is not enabled
+            if (!this.ngtSelection) {
+                // NOTE: if NgtSelection is not used and selection is not provided, we throw
+                if (this.selection() === undefined) {
+                    throw new Error('[NGT PostProcessing]: ngtp-outline requires selection input or use NgtSelection');
                 }
-                // NOTE: we run this effect if declarative NgtSelection is enabled
-                const selectionEnabled = this.ngtSelection.enabled();
-                if (!selectionEnabled)
-                    return;
-                return this.handleSelectionChangeEffect(this.ngtSelection.selected, this.effect, this.invalidate);
+                const cleanup = this.handleSelectionChangeEffect(this.selection, this.effect, this.invalidate);
+                onCleanup(() => {
+                    cleanup?.();
+                });
+                return;
+            }
+            // NOTE: we run this effect if declarative NgtSelection is enabled
+            const selectionEnabled = this.ngtSelection.enabled();
+            if (!selectionEnabled)
+                return;
+            const cleanup = this.handleSelectionChangeEffect(this.ngtSelection.selected, this.effect, this.invalidate);
+            onCleanup(() => {
+                cleanup?.();
             });
         });
     }
@@ -1193,12 +1167,12 @@ class NgtpOutline {
             invalidate();
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtpOutline, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.0", type: NgtpOutline, isStandalone: true, selector: "ngtp-outline", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpOutline, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: NgtpOutline, isStandalone: true, selector: "ngtp-outline", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
 		<ngt-primitive *args="[effect()]" />
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtpOutline, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpOutline, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-outline',
@@ -1218,12 +1192,12 @@ class NgtpPixelation {
         this.granularity = pick(this.options, 'granularity');
         this.effect = computed(() => new PixelationEffect(this.granularity()));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtpPixelation, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.0", type: NgtpPixelation, isStandalone: true, selector: "ngtp-pixelation", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpPixelation, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: NgtpPixelation, isStandalone: true, selector: "ngtp-pixelation", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
 		<ngt-primitive *args="[effect()]" />
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtpPixelation, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpPixelation, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-pixelation',
@@ -1246,15 +1220,15 @@ class NgtpScanline {
         this.effect = inject(NgtpEffect, { host: true });
         this.options = input(defaultOptions, { transform: mergeInputs(defaultOptions) });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtpScanline, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.0", type: NgtpScanline, isStandalone: true, selector: "ngtp-scanline", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.OVERLAY })], hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpScanline, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: NgtpScanline, isStandalone: true, selector: "ngtp-scanline", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.OVERLAY })], hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
 		<ngt-scanline-effect *args="[options()]" [camera]="effect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-scanline-effect>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtpScanline, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpScanline, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-scanline',
@@ -1279,15 +1253,15 @@ class NgtpSepia {
         this.effect = inject(NgtpEffect, { host: true });
         this.options = input({});
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtpSepia, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.0", type: NgtpSepia, isStandalone: true, selector: "ngtp-sepia", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpSepia, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: NgtpSepia, isStandalone: true, selector: "ngtp-sepia", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
 		<ngt-sepia-effect *args="[options()]" [camera]="effect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-sepia-effect>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtpSepia, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpSepia, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-sepia',
@@ -1311,15 +1285,15 @@ class NgtpShockWave {
         this.effect = inject(NgtpEffect, { host: true });
         this.options = input({});
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtpShockWave, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.0", type: NgtpShockWave, isStandalone: true, selector: "ngtp-shock-wave", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpShockWave, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: NgtpShockWave, isStandalone: true, selector: "ngtp-shock-wave", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
 		<ngt-shock-wave-effect *args="[options()]" [camera]="effect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-shock-wave-effect>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtpShockWave, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpShockWave, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-shock-wave',
@@ -1343,15 +1317,15 @@ class NgtpSMAA {
         this.effect = inject(NgtpEffect, { host: true });
         this.options = input({});
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtpSMAA, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.0", type: NgtpSMAA, isStandalone: true, selector: "ngtp-smaa", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpSMAA, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: NgtpSMAA, isStandalone: true, selector: "ngtp-smaa", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
 		<ngt-sMAA-effect *args="[options()]" [camera]="effect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-sMAA-effect>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtpSMAA, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpSMAA, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-smaa',
@@ -1375,15 +1349,15 @@ class NgtpTiltShift {
         this.effect = inject(NgtpEffect, { host: true });
         this.options = input({});
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtpTiltShift, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.0", type: NgtpTiltShift, isStandalone: true, selector: "ngtp-tilt-shift", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.ADD })], hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpTiltShift, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: NgtpTiltShift, isStandalone: true, selector: "ngtp-tilt-shift", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.ADD })], hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
 		<ngt-tilt-shift-effect *args="[options()]" [camera]="effect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-tilt-shift-effect>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtpTiltShift, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpTiltShift, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-tilt-shift',
@@ -1489,15 +1463,15 @@ class NgtpTiltShift2 {
         this.effect = inject(NgtpEffect, { host: true });
         this.options = input({});
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtpTiltShift2, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.0", type: NgtpTiltShift2, isStandalone: true, selector: "ngtp-tilt-shift2", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.NORMAL })], hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpTiltShift2, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: NgtpTiltShift2, isStandalone: true, selector: "ngtp-tilt-shift2", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.NORMAL })], hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
 		<ngt-tilt-shift2-effect *args="[options()]" [camera]="effect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-tilt-shift2-effect>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtpTiltShift2, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpTiltShift2, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-tilt-shift2',
@@ -1522,15 +1496,15 @@ class NgtpVignette {
         this.effect = inject(NgtpEffect, { host: true });
         this.options = input({});
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtpVignette, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.0", type: NgtpVignette, isStandalone: true, selector: "ngtp-vignette", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpVignette, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: NgtpVignette, isStandalone: true, selector: "ngtp-vignette", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
 		<ngt-vignette-effect *args="[options()]" [camera]="effect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-vignette-effect>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtpVignette, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpVignette, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-vignette',
@@ -1578,15 +1552,15 @@ class NgtpWater {
         this.effect = inject(NgtpEffect, { host: true });
         this.options = input({});
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtpWater, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.0", type: NgtpWater, isStandalone: true, selector: "ngtp-water", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.NORMAL })], hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpWater, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: NgtpWater, isStandalone: true, selector: "ngtp-water", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.NORMAL })], hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
 		<ngt-water-effect *args="[options()]" [camera]="effect.camera()">
 			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-water-effect>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtpWater, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpWater, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-water',