@mhmo91/schmancy 0.10.42 → 0.10.44

package/src/directives/hummingbird.ts

@@ -27,7 +27,17 @@ import { noChange } from 'lit'
 import { AsyncDirective, directive } from 'lit/async-directive.js'
 import type { ElementPart } from 'lit'
 import { BehaviorSubject, EMPTY, Observable, forkJoin, timer, fromEvent, combineLatest } from 'rxjs'
-import { distinctUntilChanged, filter, map, switchMap, takeUntil, tap, take, debounceTime, startWith } from 'rxjs/operators'
+import {
+	distinctUntilChanged,
+	filter,
+	map,
+	switchMap,
+	takeUntil,
+	tap,
+	take,
+	debounceTime,
+	startWith,
+} from 'rxjs/operators'
 import { discover } from '../discovery/discovery.service'
 import { ThemeWhereAreYou, ThemeHereIAm } from '../theme/theme.events'
 
@@ -233,7 +243,7 @@ class HummingbirdDirective extends AsyncDirective {
 		const element = part.element as HTMLElement
 		const opts: HummingbirdOptions = typeof options === 'object' ? options : {}
 		// Check both: boolean false OR options.playing === false
-		const shouldPlay = typeof options === 'boolean' ? options : (opts.playing !== false)
+		const shouldPlay = typeof options === 'boolean' ? options : opts.playing !== false
 
 		if (!shouldPlay) {
 			this.fadeOutAndCleanup()
@@ -271,7 +281,7 @@ class HummingbirdDirective extends AsyncDirective {
 				distinctUntilChanged(),
 				filter(() => !this.destroyed$.value),
 				switchMap(state => this.handleStateTransition(state)),
-				takeUntil(this.destroyed$.pipe(filter(v => v)))
+				takeUntil(this.destroyed$.pipe(filter(v => v))),
 			)
 			.subscribe()
 
@@ -283,17 +293,16 @@ class HummingbirdDirective extends AsyncDirective {
 					subscriber.next(true)
 					return
 				}
-				const observer = new IntersectionObserver(
-					entries => subscriber.next(entries[0].isIntersecting),
-					{ threshold: 0 }
-				)
+				const observer = new IntersectionObserver(entries => subscriber.next(entries[0].isIntersecting), {
+					threshold: 0,
+				})
 				observer.observe(this.element)
 				return () => observer.disconnect()
 			}),
 			// Page Visibility
 			fromEvent(document, 'visibilitychange').pipe(
 				map(() => document.visibilityState === 'visible'),
-				startWith(document.visibilityState === 'visible')
+				startWith(document.visibilityState === 'visible'),
 			),
 			// Parent playing state - find ancestor with 'playing' property and observe changes
 			new Observable<boolean>(subscriber => {
@@ -330,7 +339,7 @@ class HummingbirdDirective extends AsyncDirective {
 				distinctUntilChanged(),
 				tap(visible => this.visible$.next(visible)),
 				filter(() => !this.destroyed$.value && !!this.context),
-				takeUntil(this.destroyed$.pipe(filter(v => v)))
+				takeUntil(this.destroyed$.pipe(filter(v => v))),
 			)
 			.subscribe(visible => {
 				if (visible && !this.rafId) {
@@ -347,7 +356,7 @@ class HummingbirdDirective extends AsyncDirective {
 			.pipe(
 				debounceTime(100),
 				filter(() => !this.destroyed$.value && !!this.context),
-				takeUntil(this.destroyed$.pipe(filter(v => v)))
+				takeUntil(this.destroyed$.pipe(filter(v => v))),
 			)
 			.subscribe(() => this.updateDestinationPositions())
 
@@ -357,31 +366,34 @@ class HummingbirdDirective extends AsyncDirective {
 			.pipe(
 				filter(() => !this.destroyed$.value && !this.bird),
 				// Wait for host element to be visible (opacity > 0.5)
-				switchMap(() => new Observable<void>(subscriber => {
-					if (!this.element) {
-						subscriber.next()
-						subscriber.complete()
-						return
-					}
-					const checkVisibility = () => {
-						if (this.isElementVisible(this.element!)) {
-							subscriber.next()
-							subscriber.complete()
-						} else {
-							timer(50)
-								.pipe(takeUntil(this.destroyed$.pipe(filter(v => v))))
-								.subscribe(checkVisibility)
-						}
-					}
-					checkVisibility()
-				})),
+				switchMap(
+					() =>
+						new Observable<void>(subscriber => {
+							if (!this.element) {
+								subscriber.next()
+								subscriber.complete()
+								return
+							}
+							const checkVisibility = () => {
+								if (this.isElementVisible(this.element!)) {
+									subscriber.next()
+									subscriber.complete()
+								} else {
+									timer(50)
+										.pipe(takeUntil(this.destroyed$.pipe(filter(v => v))))
+										.subscribe(checkVisibility)
+								}
+							}
+							checkVisibility()
+						}),
+				),
 				switchMap(() => this.createBird()),
 				tap(() => {
 					if (!this.destroyed$.value) {
 						this.state$.next('flying')
 					}
 				}),
-				takeUntil(this.destroyed$.pipe(filter(v => v)))
+				takeUntil(this.destroyed$.pipe(filter(v => v))),
 			)
 			.subscribe()
 	}
@@ -399,9 +411,7 @@ class HummingbirdDirective extends AsyncDirective {
 			case 'done':
 				this.cleanup()
 				// Emit completion event so parent can react
-				this.element?.dispatchEvent(
-					new CustomEvent('hummingbird-complete', { bubbles: true, composed: true })
-				)
+				this.element?.dispatchEvent(new CustomEvent('hummingbird-complete', { bubbles: true, composed: true }))
 				return EMPTY
 			default:
 				return EMPTY
@@ -488,7 +498,7 @@ class HummingbirdDirective extends AsyncDirective {
 				takeUntil(timer(150)),
 				map(e => e.detail.theme?.color),
 				filter((color): color is string => !!color && color !== this.currentColor),
-				takeUntil(this.destroyed$.pipe(filter(v => v)))
+				takeUntil(this.destroyed$.pipe(filter(v => v))),
 			)
 			.subscribe(color => {
 				if (!this.bird) return
@@ -497,9 +507,7 @@ class HummingbirdDirective extends AsyncDirective {
 			})
 
 		// Dispatch FROM the host element (bubbles up to nearest theme)
-		this.element.dispatchEvent(
-			new CustomEvent(ThemeWhereAreYou, { bubbles: true, composed: true })
-		)
+		this.element.dispatchEvent(new CustomEvent(ThemeWhereAreYou, { bubbles: true, composed: true }))
 	}
 
 	/**
@@ -520,7 +528,7 @@ class HummingbirdDirective extends AsyncDirective {
 				takeUntil(timer(100)),
 				map(e => e.detail.theme?.color),
 				filter((color): color is string => !!color && color !== this.currentColor),
-				takeUntil(this.destroyed$.pipe(filter(v => v)))
+				takeUntil(this.destroyed$.pipe(filter(v => v))),
 			)
 			.subscribe(color => {
 				if (!this.bird) return
@@ -529,9 +537,7 @@ class HummingbirdDirective extends AsyncDirective {
 			})
 
 		// Dispatch FROM the destination element (bubbles up to its nearest theme)
-		dest.element.dispatchEvent(
-			new CustomEvent(ThemeWhereAreYou, { bubbles: true, composed: true })
-		)
+		dest.element.dispatchEvent(new CustomEvent(ThemeWhereAreYou, { bubbles: true, composed: true }))
 	}
 
 	/**
@@ -568,9 +574,9 @@ class HummingbirdDirective extends AsyncDirective {
 									duration: normalized[i].duration,
 								}
 							})
-							.filter((d): d is Destination => d !== null)
+							.filter((d): d is Destination => d !== null),
 					),
-					takeUntil(this.destroyed$.pipe(filter(v => v)))
+					takeUntil(this.destroyed$.pipe(filter(v => v))),
 				)
 				.subscribe({
 					next: positions => resolve(positions),
@@ -779,7 +785,7 @@ class HummingbirdDirective extends AsyncDirective {
 		}
 	}
 
-		/**
+	/**
 	 * Check if an element is sufficiently visible (opacity > 0.5 and not hidden)
 	 * Uses 0.5 threshold to wait for CSS transitions to be halfway done
 	 */
@@ -796,10 +802,6 @@ class HummingbirdDirective extends AsyncDirective {
 		return r.bottom > pad && r.top < window.innerHeight - pad && r.right > pad && r.left < window.innerWidth - pad
 	}
 
-
-
-
-
 	/**
 	 * Show shimmer effect on an element (similar to fyi directive)
 	 */
@@ -837,10 +839,11 @@ class HummingbirdDirective extends AsyncDirective {
 		this.shimmerOverlay = shimmer
 
 		// Animate shimmer - slow and elegant like fyi directive (10 seconds)
-		this.shimmerAnimation = shimmer.animate(
-			[{ backgroundPosition: '300% 0' }, { backgroundPosition: '-100% 0' }],
-			{ duration: 10000, easing: 'cubic-bezier(0.25, 0.1, 0.25, 1)', iterations: Infinity }
-		)
+		this.shimmerAnimation = shimmer.animate([{ backgroundPosition: '300% 0' }, { backgroundPosition: '-100% 0' }], {
+			duration: 10000,
+			easing: 'cubic-bezier(0.25, 0.1, 0.25, 1)',
+			iterations: Infinity,
+		})
 	}
 
 	/**
@@ -877,8 +880,11 @@ class HummingbirdDirective extends AsyncDirective {
 		this.bird.style.opacity = '1'
 
 		this.bird.animate(
-			[{ opacity: 1, transform: this.bird.style.transform }, { opacity: 0, transform: this.bird.style.transform }],
-			{ duration: 400, easing: 'ease-out', fill: 'forwards' }
+			[
+				{ opacity: 1, transform: this.bird.style.transform },
+				{ opacity: 0, transform: this.bird.style.transform },
+			],
+			{ duration: 400, easing: 'ease-out', fill: 'forwards' },
 		).onfinish = () => {
 			this.state$.next('done')
 		}
@@ -912,15 +918,16 @@ class HummingbirdDirective extends AsyncDirective {
 				{ opacity: 0.2, offset: 0.85 },
 				{ opacity: 0 },
 			],
-			{ duration: 3000, easing: 'linear', fill: 'forwards' }
+			{ duration: 3000, easing: 'linear', fill: 'forwards' },
 		)
 
 		// Fade out trail canvas even more slowly if exists
 		if (this.trailCanvas) {
-			this.trailCanvas.animate(
-				[{ opacity: 1 }, { opacity: 0 }],
-				{ duration: 3500, easing: 'ease-out', fill: 'forwards' }
-			)
+			this.trailCanvas.animate([{ opacity: 1 }, { opacity: 0 }], {
+				duration: 3500,
+				easing: 'ease-out',
+				fill: 'forwards',
+			})
 		}
 
 		// Fade out shimmer
@@ -968,7 +975,7 @@ class HummingbirdDirective extends AsyncDirective {
 					delay: i * 300,
 					easing: 'ease-out',
 					fill: 'forwards',
-				}
+				},
 			).onfinish = () => ring.remove()
 		}
 
@@ -1046,27 +1053,87 @@ class HummingbirdDirective extends AsyncDirective {
 		el.animate(
 			[
 				{ transform: `${originalTransform} translate(0, 0) scale(1) rotate(0deg)`, filter: 'brightness(1)' },
-				{ transform: `${originalTransform} translate(-2px, 1px) scale(0.992) rotate(-0.3deg)`, filter: 'brightness(1.05)', offset: 0.05 },
-				{ transform: `${originalTransform} translate(3px, -1px) scale(1.005) rotate(0.4deg)`, filter: 'brightness(1.1)', offset: 0.1 },
-				{ transform: `${originalTransform} translate(-1px, 2px) scale(0.995) rotate(-0.2deg)`, filter: `brightness(1.15) drop-shadow(0 0 5px ${color})`, offset: 0.15 },
-				{ transform: `${originalTransform} translate(2px, 0px) scale(1.008) rotate(0.5deg)`, filter: 'brightness(1.2)', offset: 0.2 },
-				{ transform: `${originalTransform} translate(-3px, -2px) scale(0.988) rotate(-0.6deg)`, filter: `brightness(1.25) drop-shadow(0 0 8px ${color})`, offset: 0.25 },
-				{ transform: `${originalTransform} translate(1px, 3px) scale(1.01) rotate(0.3deg)`, filter: 'brightness(1.3)', offset: 0.3 },
-				{ transform: `${originalTransform} translate(-2px, -1px) scale(0.985) rotate(-0.4deg)`, filter: `brightness(1.35) drop-shadow(0 0 12px ${color})`, offset: 0.35 },
-				{ transform: `${originalTransform} translate(4px, 1px) scale(1.015) rotate(0.7deg)`, filter: 'brightness(1.4)', offset: 0.4 },
-				{ transform: `${originalTransform} translate(-1px, 2px) scale(0.99) rotate(-0.5deg)`, filter: `brightness(1.35) drop-shadow(0 0 15px ${color})`, offset: 0.45 },
-				{ transform: `${originalTransform} translate(2px, -2px) scale(1.012) rotate(0.4deg)`, filter: 'brightness(1.3)', offset: 0.5 },
-				{ transform: `${originalTransform} translate(-3px, 1px) scale(0.993) rotate(-0.3deg)`, filter: `brightness(1.25) drop-shadow(0 0 10px ${color})`, offset: 0.55 },
-				{ transform: `${originalTransform} translate(1px, -1px) scale(1.006) rotate(0.2deg)`, filter: 'brightness(1.2)', offset: 0.6 },
-				{ transform: `${originalTransform} translate(-1px, 1px) scale(0.997) rotate(-0.15deg)`, filter: 'brightness(1.15)', offset: 0.7 },
-				{ transform: `${originalTransform} translate(1px, 0px) scale(1.003) rotate(0.1deg)`, filter: 'brightness(1.1)', offset: 0.8 },
-				{ transform: `${originalTransform} translate(0px, -1px) scale(0.999) rotate(-0.05deg)`, filter: 'brightness(1.05)', offset: 0.9 },
+				{
+					transform: `${originalTransform} translate(-2px, 1px) scale(0.992) rotate(-0.3deg)`,
+					filter: 'brightness(1.05)',
+					offset: 0.05,
+				},
+				{
+					transform: `${originalTransform} translate(3px, -1px) scale(1.005) rotate(0.4deg)`,
+					filter: 'brightness(1.1)',
+					offset: 0.1,
+				},
+				{
+					transform: `${originalTransform} translate(-1px, 2px) scale(0.995) rotate(-0.2deg)`,
+					filter: `brightness(1.15) drop-shadow(0 0 5px ${color})`,
+					offset: 0.15,
+				},
+				{
+					transform: `${originalTransform} translate(2px, 0px) scale(1.008) rotate(0.5deg)`,
+					filter: 'brightness(1.2)',
+					offset: 0.2,
+				},
+				{
+					transform: `${originalTransform} translate(-3px, -2px) scale(0.988) rotate(-0.6deg)`,
+					filter: `brightness(1.25) drop-shadow(0 0 8px ${color})`,
+					offset: 0.25,
+				},
+				{
+					transform: `${originalTransform} translate(1px, 3px) scale(1.01) rotate(0.3deg)`,
+					filter: 'brightness(1.3)',
+					offset: 0.3,
+				},
+				{
+					transform: `${originalTransform} translate(-2px, -1px) scale(0.985) rotate(-0.4deg)`,
+					filter: `brightness(1.35) drop-shadow(0 0 12px ${color})`,
+					offset: 0.35,
+				},
+				{
+					transform: `${originalTransform} translate(4px, 1px) scale(1.015) rotate(0.7deg)`,
+					filter: 'brightness(1.4)',
+					offset: 0.4,
+				},
+				{
+					transform: `${originalTransform} translate(-1px, 2px) scale(0.99) rotate(-0.5deg)`,
+					filter: `brightness(1.35) drop-shadow(0 0 15px ${color})`,
+					offset: 0.45,
+				},
+				{
+					transform: `${originalTransform} translate(2px, -2px) scale(1.012) rotate(0.4deg)`,
+					filter: 'brightness(1.3)',
+					offset: 0.5,
+				},
+				{
+					transform: `${originalTransform} translate(-3px, 1px) scale(0.993) rotate(-0.3deg)`,
+					filter: `brightness(1.25) drop-shadow(0 0 10px ${color})`,
+					offset: 0.55,
+				},
+				{
+					transform: `${originalTransform} translate(1px, -1px) scale(1.006) rotate(0.2deg)`,
+					filter: 'brightness(1.2)',
+					offset: 0.6,
+				},
+				{
+					transform: `${originalTransform} translate(-1px, 1px) scale(0.997) rotate(-0.15deg)`,
+					filter: 'brightness(1.15)',
+					offset: 0.7,
+				},
+				{
+					transform: `${originalTransform} translate(1px, 0px) scale(1.003) rotate(0.1deg)`,
+					filter: 'brightness(1.1)',
+					offset: 0.8,
+				},
+				{
+					transform: `${originalTransform} translate(0px, -1px) scale(0.999) rotate(-0.05deg)`,
+					filter: 'brightness(1.05)',
+					offset: 0.9,
+				},
 				{ transform: `${originalTransform} translate(0, 0) scale(1) rotate(0deg)`, filter: 'brightness(1)' },
 			],
 			{
 				duration: 500,
 				easing: 'linear',
-			}
+			},
 		)
 	}
 
@@ -1133,7 +1200,7 @@ class HummingbirdDirective extends AsyncDirective {
 				{ transform: 'translate(-50%, -50%) rotateX(85deg) scale(0)' },
 				{ transform: 'translate(-50%, -50%) rotateX(85deg) scale(1)' },
 			],
-			{ duration: 600, easing: 'cubic-bezier(0.34, 1.56, 0.64, 1)', fill: 'forwards' }
+			{ duration: 600, easing: 'cubic-bezier(0.34, 1.56, 0.64, 1)', fill: 'forwards' },
 		)
 		this.element?.appendChild(lensing)
 		this.lensingRing = lensing
@@ -1141,8 +1208,22 @@ class HummingbirdDirective extends AsyncDirective {
 		// 2. Layered accretion disks - cosmic nebula colors (H-alpha crimson, OIII teal, stellar pink)
 		const diskConfigs = [
 			{ size: 85, speed: 4, color1: COSMIC_COLORS.oiii, color2: COSMIC_COLORS.deepBlue, rotateX: 68, reverse: true },
-			{ size: 68, speed: 2.5, color1: COSMIC_COLORS.hAlpha, color2: COSMIC_COLORS.hAlphaDim, rotateX: 72, reverse: false },
-			{ size: 52, speed: 1.8, color1: COSMIC_COLORS.stellar, color2: COSMIC_COLORS.stellarDim, rotateX: 76, reverse: true },
+			{
+				size: 68,
+				speed: 2.5,
+				color1: COSMIC_COLORS.hAlpha,
+				color2: COSMIC_COLORS.hAlphaDim,
+				rotateX: 72,
+				reverse: false,
+			},
+			{
+				size: 52,
+				speed: 1.8,
+				color1: COSMIC_COLORS.stellar,
+				color2: COSMIC_COLORS.stellarDim,
+				rotateX: 76,
+				reverse: true,
+			},
 		]
 
 		diskConfigs.forEach((config, i) => {
@@ -1178,7 +1259,7 @@ class HummingbirdDirective extends AsyncDirective {
 					{ transform: `translate(-50%, -50%) rotateX(${config.rotateX}deg) scale(0) rotate(0deg)` },
 					{ transform: `translate(-50%, -50%) rotateX(${config.rotateX}deg) scale(1) rotate(0deg)` },
 				],
-				{ duration: 400 + i * 100, easing: 'cubic-bezier(0.34, 1.56, 0.64, 1)', fill: 'forwards' }
+				{ duration: 400 + i * 100, easing: 'cubic-bezier(0.34, 1.56, 0.64, 1)', fill: 'forwards' },
 			).onfinish = () => {
 				disk.style.transform = `translate(-50%, -50%) rotateX(${config.rotateX}deg) scale(1)`
 				disk.animate(
@@ -1186,7 +1267,7 @@ class HummingbirdDirective extends AsyncDirective {
 						{ transform: `translate(-50%, -50%) rotateX(${config.rotateX}deg) scale(1) rotate(0deg)` },
 						{ transform: `translate(-50%, -50%) rotateX(${config.rotateX}deg) scale(1) rotate(${direction}360deg)` },
 					],
-					{ duration: config.speed * 1000, easing: 'linear', iterations: Infinity }
+					{ duration: config.speed * 1000, easing: 'linear', iterations: Infinity },
 				)
 			}
 			this.element?.appendChild(disk)
@@ -1228,7 +1309,7 @@ class HummingbirdDirective extends AsyncDirective {
 				{ transform: 'translate(-50%, -50%) scale(1.15)', offset: 0.6 },
 				{ transform: 'translate(-50%, -50%) scale(1)' },
 			],
-			{ duration: 500, easing: 'cubic-bezier(0.34, 1.56, 0.64, 1)', fill: 'forwards' }
+			{ duration: 500, easing: 'cubic-bezier(0.34, 1.56, 0.64, 1)', fill: 'forwards' },
 		)
 		this.element?.appendChild(horizon)
 		this.eventHorizon = horizon
@@ -1306,7 +1387,7 @@ class HummingbirdDirective extends AsyncDirective {
 					delay,
 					easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
 					fill: 'forwards',
-				}
+				},
 			).onfinish = () => p.remove()
 		}
 
@@ -1364,7 +1445,7 @@ class HummingbirdDirective extends AsyncDirective {
 					delay: 150 + i * 120,
 					easing: 'cubic-bezier(0.55, 0, 1, 0.45)',
 					fill: 'forwards',
-				}
+				},
 			).onfinish = () => streak.remove()
 		}
 	}
@@ -1388,7 +1469,7 @@ class HummingbirdDirective extends AsyncDirective {
 					{ transform: disk.style.transform, opacity: 1 },
 					{ transform: 'translate(-50%, -50%) rotateX(90deg) scale(0)', opacity: 0 },
 				],
-				{ duration: 200 + i * 50, easing: 'ease-in', fill: 'forwards' }
+				{ duration: 200 + i * 50, easing: 'ease-in', fill: 'forwards' },
 			).onfinish = () => disk.remove()
 		})
 		this.accretionDisks = []
@@ -1400,7 +1481,7 @@ class HummingbirdDirective extends AsyncDirective {
 					{ transform: 'translate(-50%, -50%) rotateX(85deg) scale(1)', opacity: 0.6 },
 					{ transform: 'translate(-50%, -50%) rotateX(85deg) scale(0)', opacity: 0 },
 				],
-				{ duration: 250, easing: 'ease-in', fill: 'forwards' }
+				{ duration: 250, easing: 'ease-in', fill: 'forwards' },
 			).onfinish = () => this.lensingRing?.remove()
 		}
 
@@ -1413,7 +1494,7 @@ class HummingbirdDirective extends AsyncDirective {
 					{ transform: 'translate(-50%, -50%) scale(1.3)', filter: 'brightness(3)', offset: 0.2 },
 					{ transform: 'translate(-50%, -50%) scale(0)', filter: 'brightness(5)', opacity: 0 },
 				],
-				{ duration: 350, easing: 'cubic-bezier(0.55, 0, 1, 0.45)', fill: 'forwards' }
+				{ duration: 350, easing: 'cubic-bezier(0.55, 0, 1, 0.45)', fill: 'forwards' },
 			).onfinish = () => bh.remove()
 		}
 
@@ -1472,7 +1553,7 @@ class HummingbirdDirective extends AsyncDirective {
 					delay: i * 60,
 					easing: 'cubic-bezier(0, 0.55, 0.45, 1)',
 					fill: 'forwards',
-				}
+				},
 			).onfinish = () => ring.remove()
 		}
 
@@ -1505,7 +1586,7 @@ class HummingbirdDirective extends AsyncDirective {
 				{ transform: 'translate(-50%, -50%) scale(5)', opacity: 1, offset: 0.12 },
 				{ transform: 'translate(-50%, -50%) scale(8)', opacity: 0 },
 			],
-			{ duration: 450, easing: 'ease-out', fill: 'forwards' }
+			{ duration: 450, easing: 'ease-out', fill: 'forwards' },
 		).onfinish = () => flash.remove()
 
 		// 6. Cosmic afterglow nebula - layered emission colors
@@ -1538,7 +1619,7 @@ class HummingbirdDirective extends AsyncDirective {
 				{ opacity: 0.6, transform: 'translate(-50%, -50%) scale(1.8)', offset: 0.4 },
 				{ opacity: 0, transform: 'translate(-50%, -50%) scale(2.5)' },
 			],
-			{ duration: 900, easing: 'ease-out', fill: 'forwards' }
+			{ duration: 900, easing: 'ease-out', fill: 'forwards' },
 		).onfinish = () => {
 			afterglow.remove()
 			this.state$.next('done')
@@ -1554,30 +1635,98 @@ class HummingbirdDirective extends AsyncDirective {
 				[
 					// Initial impact - sudden expansion with bright flash
 					{ transform: `${originalTransform} translate(0, 0) scale(1) rotate(0deg)`, filter: 'brightness(1)' },
-					{ transform: `${originalTransform} translate(0, 0) scale(1.04) rotate(0deg)`, filter: `brightness(2) drop-shadow(0 0 30px ${color})`, offset: 0.05 },
+					{
+						transform: `${originalTransform} translate(0, 0) scale(1.04) rotate(0deg)`,
+						filter: `brightness(2) drop-shadow(0 0 30px ${color})`,
+						offset: 0.05,
+					},
 					// Violent shake sequence
-					{ transform: `${originalTransform} translate(-4px, 2px) scale(1.025) rotate(-0.8deg)`, filter: `brightness(1.6) drop-shadow(0 0 25px ${color})`, offset: 0.1 },
-					{ transform: `${originalTransform} translate(5px, -3px) scale(0.98) rotate(1deg)`, filter: `brightness(1.4) drop-shadow(0 0 20px ${color})`, offset: 0.15 },
-					{ transform: `${originalTransform} translate(-3px, -2px) scale(1.02) rotate(-0.6deg)`, filter: `brightness(1.3) drop-shadow(0 0 18px ${color})`, offset: 0.2 },
-					{ transform: `${originalTransform} translate(4px, 3px) scale(0.985) rotate(0.8deg)`, filter: `brightness(1.25) drop-shadow(0 0 15px ${color})`, offset: 0.25 },
-					{ transform: `${originalTransform} translate(-2px, 1px) scale(1.015) rotate(-0.5deg)`, filter: `brightness(1.2) drop-shadow(0 0 12px ${color})`, offset: 0.3 },
-					{ transform: `${originalTransform} translate(3px, -2px) scale(0.99) rotate(0.6deg)`, filter: `brightness(1.18) drop-shadow(0 0 10px ${color})`, offset: 0.35 },
-					{ transform: `${originalTransform} translate(-2px, 2px) scale(1.01) rotate(-0.4deg)`, filter: `brightness(1.15) drop-shadow(0 0 8px ${color})`, offset: 0.4 },
-					{ transform: `${originalTransform} translate(2px, -1px) scale(0.995) rotate(0.4deg)`, filter: 'brightness(1.12)', offset: 0.45 },
-					{ transform: `${originalTransform} translate(-1px, 1px) scale(1.008) rotate(-0.3deg)`, filter: 'brightness(1.1)', offset: 0.5 },
-					{ transform: `${originalTransform} translate(1px, -1px) scale(0.997) rotate(0.25deg)`, filter: 'brightness(1.08)', offset: 0.55 },
-					{ transform: `${originalTransform} translate(-1px, 0px) scale(1.005) rotate(-0.2deg)`, filter: 'brightness(1.06)', offset: 0.6 },
-					{ transform: `${originalTransform} translate(1px, 1px) scale(0.998) rotate(0.15deg)`, filter: 'brightness(1.05)', offset: 0.65 },
-					{ transform: `${originalTransform} translate(0px, -1px) scale(1.003) rotate(-0.1deg)`, filter: 'brightness(1.04)', offset: 0.7 },
-					{ transform: `${originalTransform} translate(-1px, 0px) scale(0.999) rotate(0.08deg)`, filter: 'brightness(1.03)', offset: 0.75 },
-					{ transform: `${originalTransform} translate(0px, 1px) scale(1.002) rotate(-0.05deg)`, filter: 'brightness(1.02)', offset: 0.8 },
-					{ transform: `${originalTransform} translate(0px, 0px) scale(1.001) rotate(0.03deg)`, filter: 'brightness(1.01)', offset: 0.9 },
+					{
+						transform: `${originalTransform} translate(-4px, 2px) scale(1.025) rotate(-0.8deg)`,
+						filter: `brightness(1.6) drop-shadow(0 0 25px ${color})`,
+						offset: 0.1,
+					},
+					{
+						transform: `${originalTransform} translate(5px, -3px) scale(0.98) rotate(1deg)`,
+						filter: `brightness(1.4) drop-shadow(0 0 20px ${color})`,
+						offset: 0.15,
+					},
+					{
+						transform: `${originalTransform} translate(-3px, -2px) scale(1.02) rotate(-0.6deg)`,
+						filter: `brightness(1.3) drop-shadow(0 0 18px ${color})`,
+						offset: 0.2,
+					},
+					{
+						transform: `${originalTransform} translate(4px, 3px) scale(0.985) rotate(0.8deg)`,
+						filter: `brightness(1.25) drop-shadow(0 0 15px ${color})`,
+						offset: 0.25,
+					},
+					{
+						transform: `${originalTransform} translate(-2px, 1px) scale(1.015) rotate(-0.5deg)`,
+						filter: `brightness(1.2) drop-shadow(0 0 12px ${color})`,
+						offset: 0.3,
+					},
+					{
+						transform: `${originalTransform} translate(3px, -2px) scale(0.99) rotate(0.6deg)`,
+						filter: `brightness(1.18) drop-shadow(0 0 10px ${color})`,
+						offset: 0.35,
+					},
+					{
+						transform: `${originalTransform} translate(-2px, 2px) scale(1.01) rotate(-0.4deg)`,
+						filter: `brightness(1.15) drop-shadow(0 0 8px ${color})`,
+						offset: 0.4,
+					},
+					{
+						transform: `${originalTransform} translate(2px, -1px) scale(0.995) rotate(0.4deg)`,
+						filter: 'brightness(1.12)',
+						offset: 0.45,
+					},
+					{
+						transform: `${originalTransform} translate(-1px, 1px) scale(1.008) rotate(-0.3deg)`,
+						filter: 'brightness(1.1)',
+						offset: 0.5,
+					},
+					{
+						transform: `${originalTransform} translate(1px, -1px) scale(0.997) rotate(0.25deg)`,
+						filter: 'brightness(1.08)',
+						offset: 0.55,
+					},
+					{
+						transform: `${originalTransform} translate(-1px, 0px) scale(1.005) rotate(-0.2deg)`,
+						filter: 'brightness(1.06)',
+						offset: 0.6,
+					},
+					{
+						transform: `${originalTransform} translate(1px, 1px) scale(0.998) rotate(0.15deg)`,
+						filter: 'brightness(1.05)',
+						offset: 0.65,
+					},
+					{
+						transform: `${originalTransform} translate(0px, -1px) scale(1.003) rotate(-0.1deg)`,
+						filter: 'brightness(1.04)',
+						offset: 0.7,
+					},
+					{
+						transform: `${originalTransform} translate(-1px, 0px) scale(0.999) rotate(0.08deg)`,
+						filter: 'brightness(1.03)',
+						offset: 0.75,
+					},
+					{
+						transform: `${originalTransform} translate(0px, 1px) scale(1.002) rotate(-0.05deg)`,
+						filter: 'brightness(1.02)',
+						offset: 0.8,
+					},
+					{
+						transform: `${originalTransform} translate(0px, 0px) scale(1.001) rotate(0.03deg)`,
+						filter: 'brightness(1.01)',
+						offset: 0.9,
+					},
 					{ transform: `${originalTransform} translate(0, 0) scale(1) rotate(0deg)`, filter: 'brightness(1)' },
 				],
 				{
 					duration: 800,
 					easing: 'linear',
-				}
+				},
 			)
 		}
 	}