@mhmo91/schmancy 0.10.24 → 0.10.26

package/src/directives/index.ts

@@ -1,4 +1,8 @@
 export * from './animate-text';
+export * from './ai-badge';
+export * from './art';
+export * from './battery';
+export * from './beta';
 export * from './color';
 export * from './confirm-click';
 export * from './cursor-glow';
@@ -6,15 +10,20 @@ export * from './cycle-text';
 export * from './depth-of-field';
 export * from './drag';
 export * from './fill';
+export * from './fyi';
 export * from './gravity';
+export * from './hummingbird';
 export * from './intersect';
 export * from './layout';
 export * from './liquid';
 export * from './living-border';
 export * from './long-press';
 export * from './magnetic';
+export * from './missed-punch';
 export * from './nebula';
 export * from './reduced-motion';
 export * from './reveal';
 export * from './ripple';
 export * from './overflow-within';
+export * from './urgent';
+export * from './working-snake';

package/src/directives/missed-punch.ts

@@ -0,0 +1,407 @@
+/**
+ * Missed Punch directive — shattering glass effect for incomplete attendance.
+ *
+ * Renders an animated shattering/fragmenting overlay when an employee has only
+ * one punch on a past date, indicating they forgot to punch out.
+ *
+ * Visual: glass shards/fragments flying outward with a crack pattern.
+ */
+
+import type { ElementPart } from 'lit'
+import { noChange } from 'lit'
+import { AsyncDirective, directive } from 'lit/async-directive.js'
+
+export interface MissedPunchOptions {
+	active: boolean
+	color?: string
+	width?: number
+}
+
+interface Shard {
+	element: SVGPolygonElement
+	x: number
+	y: number
+	vx: number
+	vy: number
+	rotation: number
+	rotationSpeed: number
+	scale: number
+	opacity: number
+}
+
+interface MissedPunchState {
+	active: boolean
+	color: string
+	width: number
+	element: HTMLElement
+	overlayElement?: HTMLDivElement
+	svg?: SVGSVGElement
+	shards: Shard[]
+	cracks: SVGPathElement[]
+	animationId?: number
+	isVisible: boolean
+	observer?: IntersectionObserver
+	startTime: number
+}
+
+const SHARD_COUNT = 8
+
+class MissedPunchDirective extends AsyncDirective {
+	private state: MissedPunchState | null = null
+
+	render(_options: MissedPunchOptions) {
+		return noChange
+	}
+
+	override update(part: ElementPart, [options]: [MissedPunchOptions]) {
+		const element = part.element as HTMLElement
+		const { active, color = 'var(--md-sys-color-error, #ef4444)', width = 150 } = options
+
+		if (!active && this.state) {
+			this.cleanup()
+			return noChange
+		}
+
+		if (!active) {
+			return noChange
+		}
+
+		if (this.state && (this.state.color !== color || this.state.width !== width)) {
+			this.cleanup()
+		}
+
+		if (!this.state) {
+			this.state = {
+				active: true,
+				color,
+				width,
+				element,
+				shards: [],
+				cracks: [],
+				isVisible: true,
+				startTime: performance.now(),
+			}
+
+			const computedStyle = getComputedStyle(element)
+			if (computedStyle.position === 'static') {
+				element.style.position = 'relative'
+			}
+
+			this.createOverlay()
+			this.setupVisibilityObserver()
+			this.startAnimation()
+		}
+
+		return noChange
+	}
+
+	private createOverlay() {
+		if (!this.state) return
+
+		const { element, color, width } = this.state
+
+		const overlay = document.createElement('div')
+		overlay.className = 'missed-punch-overlay'
+		Object.assign(overlay.style, {
+			position: 'absolute',
+			top: '50%',
+			left: '0',
+			width: `${width}px`,
+			height: '40px',
+			transform: 'translateY(-50%)',
+			pointerEvents: 'none',
+			overflow: 'visible',
+			zIndex: '4',
+		})
+
+		const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+		svg.setAttribute('width', '100%')
+		svg.setAttribute('height', '100%')
+		svg.setAttribute('viewBox', `0 0 ${width} 40`)
+		svg.setAttribute('preserveAspectRatio', 'xMinYMid meet')
+		Object.assign(svg.style, {
+			position: 'absolute',
+			top: '0',
+			left: '0',
+			width: '100%',
+			height: '100%',
+			overflow: 'visible',
+		})
+
+		// Crack lines emanating from origin
+		const cracks: SVGPathElement[] = []
+		const crackAngles = [-15, 0, 15, -30, 30, -8, 8]
+
+		for (const angle of crackAngles) {
+			const crack = document.createElementNS('http://www.w3.org/2000/svg', 'path')
+			const rad = (angle * Math.PI) / 180
+			const length = 30 + Math.random() * 40
+
+			let d = 'M 0,20'
+			let x = 0
+			let y = 20
+			const segments = 4 + Math.floor(Math.random() * 3)
+
+			for (let i = 0; i < segments; i++) {
+				const segLen = length / segments
+				x += Math.cos(rad) * segLen + (Math.random() - 0.5) * 4
+				y += Math.sin(rad) * segLen + (Math.random() - 0.5) * 3
+				d += ` L ${x.toFixed(1)},${y.toFixed(1)}`
+			}
+
+			crack.setAttribute('d', d)
+			crack.setAttribute('stroke', color)
+			crack.setAttribute('stroke-width', '1.5')
+			crack.setAttribute('fill', 'none')
+			crack.setAttribute('opacity', '0')
+			crack.style.willChange = 'opacity, stroke-dashoffset'
+
+			const pathLength = length * 1.2
+			crack.setAttribute('stroke-dasharray', pathLength.toString())
+			crack.setAttribute('stroke-dashoffset', pathLength.toString())
+
+			cracks.push(crack)
+			svg.appendChild(crack)
+		}
+
+		// Glass shards with gradient for light reflection
+		const shards: Shard[] = []
+		const defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs')
+
+		for (let i = 0; i < SHARD_COUNT; i++) {
+			const gradientId = `shard-gradient-${i}`
+			const gradient = document.createElementNS('http://www.w3.org/2000/svg', 'linearGradient')
+			gradient.setAttribute('id', gradientId)
+			gradient.setAttribute('x1', '0%')
+			gradient.setAttribute('y1', '0%')
+			gradient.setAttribute('x2', '100%')
+			gradient.setAttribute('y2', '100%')
+
+			const stop1 = document.createElementNS('http://www.w3.org/2000/svg', 'stop')
+			stop1.setAttribute('offset', '0%')
+			stop1.setAttribute('stop-color', 'white')
+			stop1.setAttribute('stop-opacity', '0.9')
+
+			const stop2 = document.createElementNS('http://www.w3.org/2000/svg', 'stop')
+			stop2.setAttribute('offset', '40%')
+			stop2.setAttribute('stop-color', color)
+			stop2.setAttribute('stop-opacity', '0.8')
+
+			const stop3 = document.createElementNS('http://www.w3.org/2000/svg', 'stop')
+			stop3.setAttribute('offset', '100%')
+			stop3.setAttribute('stop-color', color)
+			stop3.setAttribute('stop-opacity', '0.4')
+
+			gradient.appendChild(stop1)
+			gradient.appendChild(stop2)
+			gradient.appendChild(stop3)
+			defs.appendChild(gradient)
+
+			const shard = document.createElementNS('http://www.w3.org/2000/svg', 'polygon')
+
+			const size = 5 + Math.random() * 7
+			const points = this.generateShardPoints(size)
+			shard.setAttribute('points', points)
+			shard.setAttribute('fill', `url(#${gradientId})`)
+			shard.setAttribute('stroke', 'white')
+			shard.setAttribute('stroke-width', '0.5')
+			shard.setAttribute('stroke-opacity', '0.6')
+			shard.setAttribute('opacity', '0')
+			shard.style.willChange = 'transform, opacity'
+			shard.style.filter = 'drop-shadow(0 0 2px rgba(255,255,255,0.5))'
+
+			const angle = (Math.random() - 0.3) * Math.PI * 0.6 // Mostly rightward
+			const speed = 1.0 + Math.random() * 1.5
+
+			shards.push({
+				element: shard,
+				x: 0,
+				y: 20,
+				vx: Math.cos(angle) * speed,
+				vy: Math.sin(angle) * speed,
+				rotation: 0,
+				rotationSpeed: (Math.random() - 0.5) * 10,
+				scale: 0.6 + Math.random() * 0.6,
+				opacity: 0,
+			})
+
+			svg.appendChild(shard)
+		}
+
+		svg.insertBefore(defs, svg.firstChild)
+
+		// Sparkle/glint particles
+		for (let i = 0; i < 6; i++) {
+			const sparkle = document.createElementNS('http://www.w3.org/2000/svg', 'circle')
+			sparkle.setAttribute('r', '1.5')
+			sparkle.setAttribute('fill', 'white')
+			sparkle.setAttribute('opacity', '0')
+			sparkle.setAttribute('data-sparkle', i.toString())
+			sparkle.style.willChange = 'transform, opacity'
+			svg.appendChild(sparkle)
+		}
+
+		// "!" warning symbol
+		const warning = document.createElementNS('http://www.w3.org/2000/svg', 'text')
+		warning.setAttribute('x', (width - 15).toString())
+		warning.setAttribute('y', '25')
+		warning.setAttribute('fill', color)
+		warning.setAttribute('font-size', '16')
+		warning.setAttribute('font-weight', 'bold')
+		warning.setAttribute('opacity', '0.6')
+		warning.textContent = '!'
+		warning.style.animation = 'missed-pulse 1.5s ease-in-out infinite'
+		svg.appendChild(warning)
+
+		// Pulsing keyframe (shared, lazy-injected once per document)
+		if (!document.getElementById('missed-punch-styles')) {
+			const style = document.createElement('style')
+			style.id = 'missed-punch-styles'
+			style.textContent = `
+				@keyframes missed-pulse {
+					0%, 100% { opacity: 0.4; transform: scale(1); }
+					50% { opacity: 0.8; transform: scale(1.1); }
+				}
+			`
+			document.head.appendChild(style)
+		}
+
+		overlay.appendChild(svg)
+		element.appendChild(overlay)
+
+		this.state.overlayElement = overlay
+		this.state.svg = svg
+		this.state.shards = shards
+		this.state.cracks = cracks
+	}
+
+	private generateShardPoints(size: number): string {
+		const numPoints = 3 + Math.floor(Math.random() * 2) // 3-4 points
+		const points: string[] = []
+
+		for (let i = 0; i < numPoints; i++) {
+			const angle = (i / numPoints) * Math.PI * 2 + Math.random() * 0.5
+			const r = size * (0.5 + Math.random() * 0.5)
+			const x = Math.cos(angle) * r
+			const y = Math.sin(angle) * r
+			points.push(`${x.toFixed(1)},${y.toFixed(1)}`)
+		}
+
+		return points.join(' ')
+	}
+
+	private setupVisibilityObserver() {
+		if (!this.state || typeof IntersectionObserver === 'undefined') return
+
+		this.state.observer = new IntersectionObserver(
+			entries => {
+				if (!this.state) return
+				const isVisible = entries[0].isIntersecting
+
+				if (isVisible && !this.state.isVisible) {
+					this.state.isVisible = true
+					this.startAnimation()
+				} else if (!isVisible && this.state.isVisible) {
+					this.state.isVisible = false
+					if (this.state.animationId) {
+						cancelAnimationFrame(this.state.animationId)
+						this.state.animationId = undefined
+					}
+				}
+			},
+			{ threshold: 0 },
+		)
+
+		this.state.observer.observe(this.state.element)
+	}
+
+	private startAnimation() {
+		if (!this.state || !this.state.isVisible) return
+
+		const { cracks } = this.state
+		for (let i = 0; i < cracks.length; i++) {
+			const crack = cracks[i]
+			crack.setAttribute('stroke-dashoffset', '0')
+			crack.setAttribute('opacity', '0.5')
+		}
+
+		const animate = (currentTime: number) => {
+			if (!this.state || !this.state.isVisible) return
+
+			const elapsed = currentTime - this.state.startTime
+			const { shards, width } = this.state
+
+			// Continuous shard animation — each shard has its own cycle
+			for (let i = 0; i < shards.length; i++) {
+				const shard = shards[i]
+				const shardCycleDuration = 2500 + i * 200 // Stagger cycle durations
+				const shardProgress = ((elapsed + i * 300) % shardCycleDuration) / shardCycleDuration
+
+				shard.x = shardProgress * shard.vx * width * 0.5
+				shard.y = 20 + shardProgress * shard.vy * 25 + shardProgress * shardProgress * 20
+				shard.rotation += shard.rotationSpeed * 0.3
+
+				let opacity = 0.85
+				if (shardProgress < 0.1) {
+					opacity = shardProgress * 8.5
+				} else if (shardProgress > 0.8) {
+					opacity = (1 - shardProgress) * 4.25
+				}
+
+				shard.element.style.transform = `translate(${shard.x.toFixed(1)}px, ${shard.y.toFixed(1)}px) rotate(${shard.rotation.toFixed(0)}deg) scale(${shard.scale})`
+				shard.element.setAttribute('opacity', opacity.toFixed(2))
+			}
+
+			// Continuous sparkles
+			const sparkles = this.state.svg?.querySelectorAll('[data-sparkle]')
+			if (sparkles) {
+				sparkles.forEach((sparkle, i) => {
+					const sparkleCycle = 1500 + i * 150
+					const sparkleProgress = ((elapsed + i * 200) % sparkleCycle) / sparkleCycle
+
+					const sparkleX = 5 + sparkleProgress * width * 0.6
+					const sparkleY = 18 + Math.sin(sparkleProgress * Math.PI * 4) * 10
+					const sparkleOpacity = Math.sin(sparkleProgress * Math.PI) * 0.8
+
+					sparkle.setAttribute('cx', sparkleX.toFixed(1))
+					sparkle.setAttribute('cy', sparkleY.toFixed(1))
+					sparkle.setAttribute('opacity', Math.max(0, sparkleOpacity).toFixed(2))
+				})
+			}
+
+			// Pulse the cracks subtly
+			const crackPulse = Math.sin(elapsed / 800) * 0.15 + 0.45
+			for (const crack of cracks) {
+				crack.setAttribute('opacity', crackPulse.toFixed(2))
+			}
+
+			this.state.animationId = requestAnimationFrame(animate)
+		}
+
+		this.state.animationId = requestAnimationFrame(animate)
+	}
+
+	private cleanup() {
+		if (!this.state) return
+
+		if (this.state.animationId) {
+			cancelAnimationFrame(this.state.animationId)
+		}
+
+		if (this.state.observer) {
+			this.state.observer.disconnect()
+		}
+
+		if (this.state.overlayElement) {
+			this.state.overlayElement.remove()
+		}
+
+		this.state = null
+	}
+
+	override disconnected() {
+		this.cleanup()
+	}
+}
+
+export const missedPunch = directive(MissedPunchDirective)

package/src/directives/nebula.ts

@@ -32,13 +32,13 @@
  * ```
  */
 
+import type { ElementPart } from 'lit'
 import { noChange } from 'lit'
 import { AsyncDirective, directive } from 'lit/async-directive.js'
-import type { ElementPart } from 'lit'
-import { SPRING_SMOOTH, SPRING_GENTLE, getEasing } from '../utils/animation'
+import { EMPTY, type Subscription, from, fromEvent, timer } from 'rxjs'
+import { catchError, take, tap } from 'rxjs/operators'
+import { SPRING_GENTLE, SPRING_SMOOTH, getEasing } from '../utils/animation'
 import { reducedMotion$ } from './reduced-motion'
-import { Subscription, timer, fromEvent, from, EMPTY } from 'rxjs'
-import { take, tap, catchError } from 'rxjs/operators'
 
 export interface NebulaOptions {
 	/** Whether the nebula is active/visible. Default: true (auto-shows, auto-hides after autoHideDuration) */
@@ -94,7 +94,7 @@ const DEFAULTS: Required<NebulaOptions> = {
 	idleBreathe: true,
 	temperature: 0,
 	chromaticAberration: 1,
-	particleCount: 30,
+	particleCount: 8,
 }
 
 // =============================================================================
@@ -139,10 +139,11 @@ function injectGlobalStyles(): void {
 	75% { transform: translate3d(calc(var(--nebula-aberration, 3px) * -1.8), 0, 0); }
 }
 
-/* Iridescent core - continuous 360-degree hue rotation (the ONE filter animation) */
+/* Iridescent core - compositor-only rotation. filter is static (baked inline) to avoid
+   per-frame raster cost of animated blur/hue-rotate under mix-blend-mode: screen. */
 @keyframes nebula-iridescent {
-	0% { filter: hue-rotate(0deg) blur(var(--nebula-blur-core, 12px)) saturate(1.6); }
-	100% { filter: hue-rotate(360deg) blur(var(--nebula-blur-core, 12px)) saturate(1.6); }
+	0% { transform: translateZ(0) rotate(0deg); }
+	100% { transform: translateZ(0) rotate(360deg); }
 }
 
 /* Bioluminescent tendrils - organic breathing */
@@ -161,17 +162,17 @@ function injectGlobalStyles(): void {
 	85% { opacity: 0.6; }
 }
 
-/* Idle breathing - gentle pulse when dimmed */
+/* Idle breathing - compositor-only pulse when dimmed.
+   filter: blur is intentionally static (baked on layers) — animating it here
+   would keep re-rasterizing the dimmed overlay forever for no visual gain. */
 @keyframes nebula-idle-breathe {
 	0%, 100% {
 		opacity: var(--nebula-idle-opacity, 0.08);
-		filter: blur(calc(var(--nebula-blur-base, 10px) * 8));
-		transform: scale(1);
+		transform: scale(1) translateZ(0);
 	}
 	50% {
 		opacity: calc(var(--nebula-idle-opacity, 0.08) * 1.4);
-		filter: blur(calc(var(--nebula-blur-base, 10px) * 10));
-		transform: scale(1.005);
+		transform: scale(1.005) translateZ(0);
 	}
 }
 
@@ -185,7 +186,8 @@ function injectGlobalStyles(): void {
 	isolation: isolate;
 }
 
-.nebula-overlay.paused .nebula-layer {
+.nebula-overlay.paused .nebula-layer,
+.nebula-overlay.dimmed .nebula-layer {
 	animation-play-state: paused !important;
 }
 
@@ -216,6 +218,7 @@ interface State {
 	originalContain: string
 	isDimmed: boolean
 	autoHideSub: Subscription | null
+	fadeFinishedSub: Subscription | null
 	options: Required<NebulaOptions>
 	reducedMotion: boolean
 	isVisible: boolean
@@ -352,6 +355,8 @@ class NebulaDirective extends AsyncDirective {
 		if (this.state?.overlay && this.state.isDimmed) {
 			this.state.isDimmed = false
 			this.state.options = opts
+			this.state.fadeFinishedSub?.unsubscribe()
+			this.state.fadeFinishedSub = null
 			this.awakenOverlay(opts, reducedMotion)
 			this.scheduleAutoHide(opts)
 			return
@@ -372,28 +377,26 @@ class NebulaDirective extends AsyncDirective {
 		if (!this.state?.overlay) return
 
 		const overlay = this.state.overlay
-		const awakenDuration = reducedMotion ? 0 : opts.fadeInDuration * 0.6
-		const easing = reducedMotion ? 'linear' : getEasing(SPRING_SMOOTH)
-
-		// Update CSS custom properties
 		overlay.style.setProperty('--nebula-intensity', String(opts.intensity))
 
 		overlay.animate(
 			[
-				{ opacity: opts.idleOpacity, transform: 'scale(0.98)', filter: `blur(${4 * opts.blur}px)` },
-				{ opacity: opts.intensity * 0.7, transform: 'scale(1.01)', filter: `blur(${1 * opts.blur}px)` },
-				{ opacity: opts.intensity, transform: 'scale(1)', filter: 'blur(0px)' },
+				{ opacity: opts.idleOpacity, transform: 'scale(0.98) translateZ(0)' },
+				{ opacity: opts.intensity * 0.7, transform: 'scale(1.01) translateZ(0)' },
+				{ opacity: opts.intensity, transform: 'scale(1) translateZ(0)' },
 			] as Keyframe[],
 			{
-				duration: awakenDuration,
-				easing,
+				duration: reducedMotion ? 0 : opts.fadeInDuration * 0.6,
+				easing: reducedMotion ? 'linear' : getEasing(SPRING_SMOOTH),
 				fill: 'forwards',
 			},
 		)
 
-		// Resume CSS animations
-		overlay.classList.remove('paused')
+		// Clear the dimmed gate + any container-level idle-breathe animation hide() installed,
+		// then resume the per-layer CSS animations.
+		overlay.classList.remove('paused', 'dimmed')
 		overlay.classList.add('running')
+		overlay.style.animation = ''
 	}
 
 	private createOverlay(element: HTMLElement, opts: Required<NebulaOptions>, reducedMotion: boolean): void {
@@ -568,7 +571,11 @@ class NebulaDirective extends AsyncDirective {
 						transparent 100%)`,
 				mixBlendMode: 'screen',
 				transform: 'translateZ(0)',
-				// hue-rotate is the core visual — continuous 360deg cycle
+				transformOrigin: '50% 50%',
+				// Static filter — animating hue-rotate + blur every frame is a GPU pig
+				// under mix-blend-mode: screen. Compositor-only rotation gets the iridescent
+				// shimmer "for free" by sliding the gradient across the blend stack.
+				filter: `blur(${12 * opts.blur}px) saturate(1.6)`,
 				animation: `nebula-iridescent ${28000 / opts.speed}ms linear infinite`,
 			})
 			overlay.appendChild(iridescentLayer)
@@ -635,13 +642,14 @@ class NebulaDirective extends AsyncDirective {
 		const fadeInDuration = reducedMotion ? 0 : opts.fadeInDuration
 		const entranceEasing = reducedMotion ? 'linear' : getEasing(SPRING_SMOOTH)
 
+		// Compositor-only entrance — opacity + transform reach the same "rising into focus"
+		// feel without animating `filter: blur`, which re-rasterizes the full filtered
+		// region every frame under mix-blend-mode: screen.
 		overlay.animate(
 			[
-				{ opacity: 0, transform: 'scale(0.85)', filter: `blur(${25 * opts.blur}px) saturate(0.5)` },
-				{ opacity: opts.intensity * 0.3, transform: 'scale(0.95)', filter: `blur(${12 * opts.blur}px) saturate(0.8)` },
-				{ opacity: opts.intensity * 0.6, transform: 'scale(1.02)', filter: `blur(${4 * opts.blur}px) saturate(1.1)` },
-				{ opacity: opts.intensity * 0.85, transform: 'scale(1.005)', filter: `blur(${1 * opts.blur}px) saturate(1.05)` },
-				{ opacity: opts.intensity, transform: 'scale(1)', filter: 'blur(0px) saturate(1)' },
+				{ opacity: 0, transform: 'scale(0.85) translateZ(0)' },
+				{ opacity: opts.intensity * 0.4, transform: 'scale(0.97) translateZ(0)' },
+				{ opacity: opts.intensity, transform: 'scale(1) translateZ(0)' },
 			] as Keyframe[],
 			{
 				duration: fadeInDuration,
@@ -658,6 +666,7 @@ class NebulaDirective extends AsyncDirective {
 			originalContain,
 			isDimmed: false,
 			autoHideSub: null,
+			fadeFinishedSub: null,
 			options: opts,
 			reducedMotion,
 			isVisible: document.visibilityState === 'visible',
@@ -695,53 +704,46 @@ class NebulaDirective extends AsyncDirective {
 		const overlay = this.state.overlay
 		const currentOpts = this.state.options
 		const reducedMotion = this.state.reducedMotion
-
-		const fadeOutDuration = reducedMotion ? 0 : opts.fadeOutDuration
-		const exitEasing = reducedMotion ? 'linear' : getEasing(SPRING_GENTLE)
+		const duration = reducedMotion ? 0 : opts.fadeOutDuration
+		const easing = reducedMotion ? 'linear' : getEasing(SPRING_GENTLE)
 
 		// Full hide (idleOpacity = 0)
 		if (opts.idleOpacity <= 0) {
 			overlay.animate(
 				[
-					{ opacity: currentOpts.intensity, transform: 'scale(1)', filter: 'blur(0px) saturate(1)' },
-					{ opacity: currentOpts.intensity * 0.4, transform: 'scale(0.95)', filter: `blur(${8 * currentOpts.blur}px) saturate(0.7)` },
-					{ opacity: 0, transform: 'scale(0.9)', filter: `blur(${15 * currentOpts.blur}px) saturate(0.3)` },
+					{ opacity: currentOpts.intensity, transform: 'scale(1) translateZ(0)' },
+					{ opacity: currentOpts.intensity * 0.4, transform: 'scale(0.95) translateZ(0)' },
+					{ opacity: 0, transform: 'scale(0.9) translateZ(0)' },
 				] as Keyframe[],
-				{
-					duration: fadeOutDuration,
-					easing: exitEasing,
-					fill: 'forwards',
-				},
+				{ duration, easing, fill: 'forwards' },
 			)
 			return
 		}
 
-		// Fade to idle with CSS animation for breathing
 		const fadeDown = overlay.animate(
 			[
-				{ opacity: currentOpts.intensity, transform: 'scale(1)', filter: 'blur(0px) saturate(1)' },
-				{ opacity: currentOpts.intensity * 0.5, transform: 'scale(0.99)', filter: `blur(${3 * currentOpts.blur}px) saturate(0.75)` },
-				{ opacity: opts.idleOpacity, transform: 'scale(1)', filter: `blur(${8 * currentOpts.blur}px) saturate(0.4)` },
+				{ opacity: currentOpts.intensity, transform: 'scale(1) translateZ(0)' },
+				{ opacity: currentOpts.intensity * 0.5, transform: 'scale(0.99) translateZ(0)' },
+				{ opacity: opts.idleOpacity, transform: 'scale(1) translateZ(0)' },
 			] as Keyframe[],
-			{
-				duration: fadeOutDuration,
-				easing: exitEasing,
-				fill: 'forwards',
-			},
+			{ duration, easing, fill: 'forwards' },
 		)
 
-		// Switch to CSS animation for idle breathing (more efficient)
-		if (opts.idleBreathe && !reducedMotion) {
-			from(fadeDown.finished).pipe(
-				take(1),
-				catchError(() => EMPTY),
-			).subscribe(() => {
-				if (this.state?.overlay) {
-					// Use pure CSS animation for idle - no JS overhead
+		// After fade-down, gate per-layer animations off via the `dimmed` class — without
+		// this, chromatic/iridescent/tendril/particle keyframes keep burning GPU under
+		// mix-blend-mode: screen forever even though the stack is visually idle.
+		this.state.fadeFinishedSub?.unsubscribe()
+		this.state.fadeFinishedSub = from(fadeDown.finished).pipe(
+			take(1),
+			tap(() => {
+				if (!this.state?.overlay) return
+				this.state.overlay.classList.add('dimmed')
+				if (opts.idleBreathe && !reducedMotion) {
 					this.state.overlay.style.animation = `nebula-idle-breathe ${12000 / currentOpts.speed}ms ${BREATHING_EASING} infinite`
 				}
-			})
-		}
+			}),
+			catchError(() => EMPTY),
+		).subscribe()
 	}
 
 	private cleanup(): void {
@@ -750,6 +752,7 @@ class NebulaDirective extends AsyncDirective {
 		this.coordinator.unregister(this, this.state.element)
 
 		this.state.autoHideSub?.unsubscribe()
+		this.state.fadeFinishedSub?.unsubscribe()
 
 		this.state.overlay?.remove()
 		this.state.element.style.position = this.state.originalPosition