@weeehaoooz/talos-fx

High-performance, GPU-accelerated, accessible visual FX directives and reactive motion effects for Angular 20+.

Attach dynamic visual effects directly to existing cards, buttons, heroes, containers, and inputs without DOM wrapper bloat.

Documentation & Live Preview: https://talos.weeehaoooz.dev

Interactive Previews

Explore live interactive demonstrations and tweak effect parameters in real time on the official preview site:

• 🌈 Prism Border: talos.weeehaoooz.dev/fx/prism-border
• 💫 Aura Border: talos.weeehaoooz.dev/fx/aura-border
• 🌊 Wave Border: talos.weeehaoooz.dev/fx/wave-border
• 💧 Metallic Blob: talos.weeehaoooz.dev/fx/metallic-blob
• 🔦 Spotlight: talos.weeehaoooz.dev/fx/spotlight
• 📐 3D Perspective Tilt: talos.weeehaoooz.dev/fx/tilt
• ✨ Shimmer Sweep: talos.weeehaoooz.dev/fx/shimmer
• 🌌 Pulse Glow: talos.weeehaoooz.dev/fx/pulse-glow

Features

• 🌈 Prism Border ([talosPrismBorder]): Isotropic light refraction with chromatic aberration, dispersion spread, specular refraction highlights, and organic edge wrapping.
• 💫 Aura Border ([talosAuraBorder]): Luminous light beam traveling smoothly along container perimeter borders.
• 🌊 Wave Border ([talosWaveBorder]): Harmonic sound wave visualizer anchored to container edges.
• 💧 Metallic Blob ([talosMetallicBlob]): Reactive fluid liquid chrome / metallic blob responding smoothly to cursor movement.
• 🔦 Spotlight ([talosSpotlight]): Smooth cursor-following specular spotlight for cards and grid items.
• 📐 3D Tilt ([talosTilt]): Gyroscopic 3D perspective tilt with specular glare overlay.
• ✨ Shimmer Sweep ([talosShimmer]): High-polish metallic shimmer sweep on hover or continuous pulse.
• 🌌 Pulse Glow ([talosPulseGlow]): Atmospheric breathing neon / drop-glow aura.
• ♿ Accessibility First: Automatically obeys prefers-reduced-motion: reduce.
• ⚡ Zero Change-Detection Overhead: Mouse tracking and lerping run outside Angular zones for 60-120fps performance.

Installation

npm install @weeehaoooz/talos-fx

Global Styles Setup

Add the stylesheet to your angular.json or import it in src/styles.scss:

@use '@weeehaoooz/talos-fx/styles/animations.scss';

Quick Start

Import TALOS_FX (or individual directives) into your standalone Angular component:

import { Component } from '@angular/core';
import { 
  TalosPrismBorderDirective,
  TalosAuraBorderDirective,
  TalosTiltDirective,
  TalosSpotlightDirective 
} from '@weeehaoooz/talos-fx';

@Component({
  selector: 'app-demo',
  imports: [
    TalosPrismBorderDirective,
    TalosAuraBorderDirective,
    TalosTiltDirective, 
    TalosSpotlightDirective
  ],
  template: `
    <!-- Prism Border Card with Chromatic Aberration -->
    <div 
      class="card" 
      talosPrismBorder 
      [prismSpeed]="1.5" 
      [prismChromatic]="1.2" 
      [prismSpread]="2"
    >
      <h3>Prism Refraction Card</h3>
    </div>

    <!-- Aura Luminous Light Beam -->
    <div 
      class="card" 
      talosAuraBorder 
      [beamColorFrom]="'#6366f1'" 
      [beamColorTo]="'#06b6d4'"
    >
      <h3>Aura Border Card</h3>
    </div>

    <!-- 3D Perspective Tilt with Spotlight -->
    <div class="tilt-card" talosTilt [tiltGlare]="true" talosSpotlight>
      <h3>3D Interactive Card</h3>
    </div>
  `
})
export class DemoComponent {}

All-in-One Import

You can also import TALOS_FX to include all directives and components at once:

import { Component } from '@angular/core';
import { TALOS_FX } from '@weeehaoooz/talos-fx';

@Component({
  selector: 'app-demo',
  imports: [TALOS_FX],
  templateUrl: './demo.component.html'
})
export class DemoComponent {}

License

Commercial & Evaluation License © weeehaoooz.

Free for internal evaluation, local development, and non-production testing. Production deployment requires an active commercial license key. See LICENSE and Talos Pricing for complete licensing terms.