@mhmo91/schmancy 0.10.23 → 0.10.25

package/src/directives/art/effects/samwa.ts

@@ -0,0 +1,228 @@
+/**
+ * Samwa Effect — Ambient geometric particles with gentle physics.
+ * Color-responsive palette derived from the passed `color` prop; organic wind system.
+ */
+
+import type { ArtState, FallingParticle } from '../types'
+import { ParticlePool } from '../particle-pool'
+import { createOverlayContainer, createSVG } from '../utils'
+
+function hexToRgb(hex: string): [number, number, number] {
+	const h = hex.replace('#', '')
+	const n = parseInt(h.length === 3 ? h.split('').map(c => c + c).join('') : h, 16)
+	return [(n >> 16) & 255, (n >> 8) & 255, n & 255]
+}
+
+function lighten(r: number, g: number, b: number, amount: number): string {
+	const lr = Math.round(r + (255 - r) * amount)
+	const lg = Math.round(g + (255 - g) * amount)
+	const lb = Math.round(b + (255 - b) * amount)
+	return `#${((1 << 24) | (lr << 16) | (lg << 8) | lb).toString(16).slice(1)}`
+}
+
+function generatePalette(baseColor: string): string[] {
+	const [r, g, b] = hexToRgb(baseColor)
+	return [
+		lighten(r, g, b, 0.92),
+		lighten(r, g, b, 0.8),
+		lighten(r, g, b, 0.65),
+		lighten(r, g, b, 0.5),
+		lighten(r, g, b, 0.35),
+		lighten(r, g, b, 0.18),
+		baseColor,
+	]
+}
+
+const SHAPES = [
+	'M 2,0.4 A 1.6,1.6 0 1,1 2,3.6 A 1.6,1.6 0 1,1 2,0.4 Z',
+	'M 2,0.2 L 3.8,2 L 2,3.8 L 0.2,2 Z',
+	'M 2,0.3 L 3.5,1.15 L 3.5,2.85 L 2,3.7 L 0.5,2.85 L 0.5,1.15 Z',
+	'M 2,0.3 L 3.7,3.4 L 0.3,3.4 Z',
+	'M 1.4,0.4 L 2.6,0.4 L 2.6,1.4 L 3.6,1.4 L 3.6,2.6 L 2.6,2.6 L 2.6,3.6 L 1.4,3.6 L 1.4,2.6 L 0.4,2.6 L 0.4,1.4 L 1.4,1.4 Z',
+	'M 2,0 A 2,2 0 1,1 2,4 A 2,2 0 1,1 2,0 Z M 2,0.8 A 1.2,1.2 0 1,0 2,3.2 A 1.2,1.2 0 1,0 2,0.8 Z',
+	'M 0.4,1.6 L 3.6,1.6 L 3.6,2.4 L 0.4,2.4 Z',
+]
+
+const PARTICLE_SIZES = [
+	{ scale: 0.8, fallSpeed: 0.12, windSensitivity: 2.2, tumbleSpeed: 0.6 },
+	{ scale: 1.2, fallSpeed: 0.18, windSensitivity: 1.6, tumbleSpeed: 0.5 },
+	{ scale: 1.6, fallSpeed: 0.25, windSensitivity: 1.2, tumbleSpeed: 0.35 },
+]
+
+const DEPTH_LAYERS = [
+	{ opacity: 0.12, blur: 0.8 },
+	{ opacity: 0.2, blur: 0.3 },
+	{ opacity: 0.3, blur: 0 },
+]
+
+const SPAWN_ZONES = [
+	{ x: 0, xRange: 15, vx: 0.3 },
+	{ x: 15, xRange: 25, vx: 0.1 },
+	{ x: 40, xRange: 20, vx: 0 },
+	{ x: 60, xRange: 25, vx: -0.1 },
+	{ x: 85, xRange: 15, vx: -0.3 },
+]
+
+export function createSamwaOverlay(state: ArtState): void {
+	const { element, color } = state
+	const overlay = createOverlayContainer('samwa-overlay')
+	const svg = createSVG()
+
+	overlay.appendChild(svg)
+	element.appendChild(overlay)
+
+	const palette = generatePalette(color)
+
+	let shapeIndex = 0
+	const particleFactory = () => {
+		const particle = document.createElementNS('http://www.w3.org/2000/svg', 'path')
+		const idx = shapeIndex % SHAPES.length
+		particle.setAttribute('d', SHAPES[idx])
+		particle.setAttribute('fill', palette[idx])
+		particle.setAttribute('opacity', '0')
+		if (idx === 5) particle.setAttribute('fill-rule', 'evenodd')
+		particle.style.mixBlendMode = 'soft-light'
+		particle.style.willChange = 'transform, opacity'
+		particle.style.transform = 'translate(-100px, -100px)'
+		svg.appendChild(particle)
+		shapeIndex++
+		return particle
+	}
+
+	state.overlayElement = overlay
+	state.samwa = {
+		leafPool: new ParticlePool(particleFactory, 18),
+		fallingLeaves: [],
+		windStrength: 0,
+		windDirection: 1,
+		lastWindTime: performance.now(),
+		lastLeafSpawn: performance.now(),
+		startTime: performance.now(),
+	}
+}
+
+export function animateSamwa(state: ArtState, currentTime: number): void {
+	if (!state.samwa) return
+
+	const { intensity: effectIntensity = 1, speed = 1 } = state
+	const { leafPool, fallingLeaves } = state.samwa
+
+	if (effectIntensity <= 0) {
+		for (const leaf of fallingLeaves) {
+			leaf.element.setAttribute('opacity', '0')
+		}
+		return
+	}
+
+	const timeSinceWind = currentTime - state.samwa.lastWindTime
+
+	const gustInterval = (4000 + Math.random() * 4000) / speed
+	if (timeSinceWind > gustInterval) {
+		const isStrongGust = Math.random() < 0.3
+		state.samwa.windStrength = isStrongGust ? 1.5 : 0.8 + Math.random() * 0.4
+		state.samwa.windDirection = Math.random() > 0.5 ? 1 : -1
+		state.samwa.lastWindTime = currentTime
+	}
+
+	const windOscillation = Math.sin(currentTime * 0.001) * 0.1
+	state.samwa.windStrength = Math.max(0, state.samwa.windStrength - 0.008 + windOscillation * 0.002)
+
+	const spawnInterval = (800 + Math.random() * 1200) / speed
+	const maxLeaves = Math.max(1, Math.round(12 * effectIntensity))
+	if (currentTime - state.samwa.lastLeafSpawn > spawnInterval && leafPool.activeCount < maxLeaves) {
+		const leaf = leafPool.acquire()
+
+		const zoneWeights = [0.25, 0.15, 0.2, 0.15, 0.25]
+		let zoneRoll = Math.random()
+		let zoneIndex = 0
+		for (let i = 0; i < zoneWeights.length; i++) {
+			zoneRoll -= zoneWeights[i]
+			if (zoneRoll <= 0) {
+				zoneIndex = i
+				break
+			}
+		}
+		const zone = SPAWN_ZONES[zoneIndex]
+
+		const sizeIndex = Math.floor(Math.random() * PARTICLE_SIZES.length)
+		const depthIndex = Math.floor(Math.random() * DEPTH_LAYERS.length)
+		const sizeProps = PARTICLE_SIZES[sizeIndex]
+
+		const newLeaf: FallingParticle = {
+			element: leaf,
+			x: zone.x + Math.random() * zone.xRange,
+			y: -5 - Math.random() * 15,
+			vx: zone.vx * 0.5 + (Math.random() - 0.5) * 0.1,
+			vy: sizeProps.fallSpeed * (0.85 + Math.random() * 0.3),
+			life: 1,
+			rotation: Math.random() * 360,
+			phase: Math.random() * Math.PI * 2,
+			sizeIndex,
+			depthIndex,
+			tumbleDirection: Math.random() > 0.5 ? 1 : -1,
+			flutterAmplitude: 0.15 + Math.random() * 0.25,
+			flutterFrequency: 0.012 + Math.random() * 0.008,
+			spawnTime: currentTime,
+		}
+
+		fallingLeaves.push(newLeaf)
+		state.samwa.lastLeafSpawn = currentTime
+	}
+
+	const windStrength = state.samwa.windStrength
+	const windDirection = state.samwa.windDirection
+
+	for (let i = fallingLeaves.length - 1; i >= 0; i--) {
+		const p = fallingLeaves[i]
+		const sizeProps = PARTICLE_SIZES[p.sizeIndex]
+		const depthProps = DEPTH_LAYERS[p.depthIndex]
+
+		const windEffect = windStrength * windDirection * sizeProps.windSensitivity * 0.6
+
+		const flutterOffset = Math.sin(p.y * p.flutterFrequency + p.phase) * p.flutterAmplitude
+		const secondaryWave =
+			Math.sin(p.y * p.flutterFrequency * 0.5 + p.phase * 1.3) * p.flutterAmplitude * 0.4
+		const tertiaryWave =
+			Math.sin(p.y * p.flutterFrequency * 0.25 + p.phase * 0.7) * p.flutterAmplitude * 0.2
+
+		p.vx += windEffect * 0.01
+		p.vx += (flutterOffset + secondaryWave + tertiaryWave) * 0.025
+		p.vx *= 0.97
+
+		const verticalWind = Math.sin(currentTime * 0.0003 * speed + p.phase) * 0.03
+		p.vy = (sizeProps.fallSpeed + verticalWind) * speed
+
+		p.x += p.vx
+		p.y += p.vy
+
+		const baseRotationSpeed = sizeProps.tumbleSpeed * p.tumbleDirection * 0.7
+		const windRotation = windStrength * windDirection * 0.8
+		p.rotation += baseRotationSpeed + windRotation + flutterOffset
+
+		const age = currentTime - p.spawnTime
+		const fadeInDuration = 600
+		const fadeOutStart = 80
+
+		let opacity = depthProps.opacity * effectIntensity
+
+		if (age < fadeInDuration) {
+			opacity *= age / fadeInDuration
+		}
+
+		if (p.y > fadeOutStart) {
+			const fadeProgress = (p.y - fadeOutStart) / (110 - fadeOutStart)
+			opacity *= 1 - fadeProgress
+		}
+
+		const scale = sizeProps.scale * (0.8 + depthProps.opacity)
+
+		p.element.style.transform = `translate(${p.x.toFixed(1)}px, ${p.y.toFixed(1)}px) rotate(${p.rotation.toFixed(0)}deg) scale(${scale.toFixed(2)})`
+		p.element.style.filter = depthProps.blur > 0 ? `blur(${depthProps.blur}px)` : ''
+		p.element.setAttribute('opacity', Math.max(0, opacity).toFixed(3))
+
+		if (p.y > 110 || p.x < -10 || p.x > 110) {
+			leafPool.release(p.element)
+			fallingLeaves.splice(i, 1)
+		}
+	}
+}

package/src/directives/art/effects/snow.ts

@@ -0,0 +1,207 @@
+/**
+ * Snow Effect — Peaceful winter snowfall with snow/leaf shapes.
+ * Same physics pattern as samwa effect but tuned for slower, floatier fall.
+ */
+
+import type { ArtState, FallingParticle } from '../types'
+import { ParticlePool } from '../particle-pool'
+import { createOverlayContainer, createSVG } from '../utils'
+
+const SNOW_COLORS = [
+	'#FFFFFF',
+	'#F8FCFF',
+	'#E8F4FF',
+	'#F0F8FF',
+	'#FAFEFF',
+	'#E0F0FF',
+	'#D4A574',
+	'#C19A6B',
+	'#8B4513',
+	'#CD853F',
+]
+
+const SNOWFLAKE_SHAPES = [
+	'M 2,0 L 2.15,1.7 L 3.7,0.8 L 2.3,2 L 3.7,3.2 L 2.15,2.3 L 2,4 L 1.85,2.3 L 0.3,3.2 L 1.7,2 L 0.3,0.8 L 1.85,1.7 Z',
+	'M 2,0.2 L 2.2,1.6 L 3.4,0.6 L 2.4,1.8 L 3.8,2 L 2.4,2.2 L 3.4,3.4 L 2.2,2.4 L 2,3.8 L 1.8,2.4 L 0.6,3.4 L 1.6,2.2 L 0.2,2 L 1.6,1.8 L 0.6,0.6 L 1.8,1.6 Z',
+	'M 2,0.3 L 2.3,1.2 L 3.2,0.8 L 2.6,1.6 L 3.6,1.8 L 2.7,2.1 L 3.3,2.8 L 2.4,2.5 L 2,3.7 L 1.6,2.5 L 0.7,2.8 L 1.3,2.1 L 0.4,1.8 L 1.4,1.6 L 0.8,0.8 L 1.7,1.2 Z',
+	'M 2,0.4 L 2.12,1.8 L 3.6,2 L 2.12,2.2 L 2,3.6 L 1.88,2.2 L 0.4,2 L 1.88,1.8 Z',
+	'M 2,0.5 C 2.8,0.8 3.2,1.4 3.4,2 C 3.2,2.6 2.8,3.2 2,3.5 C 1.2,3.2 0.8,2.6 0.6,2 C 0.8,1.4 1.2,0.8 2,0.5 Z',
+	'M 2,0.2 L 2.1,1.5 L 2.8,0.5 L 2.25,1.6 L 3.5,1.2 L 2.35,1.85 L 3.8,2 L 2.35,2.15 L 3.5,2.8 L 2.25,2.4 L 2.8,3.5 L 2.1,2.5 L 2,3.8 L 1.9,2.5 L 1.2,3.5 L 1.75,2.4 L 0.5,2.8 L 1.65,2.15 L 0.2,2 L 1.65,1.85 L 0.5,1.2 L 1.75,1.6 L 1.2,0.5 L 1.9,1.5 Z',
+	'M 2,0.4 C 2.6,1 3,1.6 3.1,2.2 C 3,2.8 2.6,3.2 2,3.6 C 1.4,3.2 1,2.8 0.9,2.2 C 1,1.6 1.4,1 2,0.4 Z',
+	'M 2,0.8 L 2.15,1.7 L 3.2,2 L 2.15,2.3 L 2,3.2 L 1.85,2.3 L 0.8,2 L 1.85,1.7 Z',
+]
+
+const PARTICLE_SIZES = [
+	{ scale: 0.7, fallSpeed: 0.03, windSensitivity: 2.8, tumbleSpeed: 0.15 },
+	{ scale: 1.0, fallSpeed: 0.05, windSensitivity: 2.2, tumbleSpeed: 0.2 },
+	{ scale: 1.4, fallSpeed: 0.07, windSensitivity: 1.6, tumbleSpeed: 0.15 },
+]
+
+const DEPTH_LAYERS = [
+	{ opacity: 0.2, blur: 0.8 },
+	{ opacity: 0.35, blur: 0.3 },
+	{ opacity: 0.55, blur: 0 },
+]
+
+const SPAWN_ZONES = [
+	{ x: 0, xRange: 20, vx: 0.2 },
+	{ x: 20, xRange: 20, vx: 0.1 },
+	{ x: 40, xRange: 20, vx: 0 },
+	{ x: 60, xRange: 20, vx: -0.1 },
+	{ x: 80, xRange: 20, vx: -0.2 },
+]
+
+export function createSnowOverlay(state: ArtState): void {
+	const { element } = state
+	const overlay = createOverlayContainer('snow-overlay')
+	const svg = createSVG()
+
+	overlay.appendChild(svg)
+	element.appendChild(overlay)
+
+	let shapeIndex = 0
+	const particleFactory = () => {
+		const particle = document.createElementNS('http://www.w3.org/2000/svg', 'path')
+		const idx = shapeIndex % SNOWFLAKE_SHAPES.length
+		const colorIdx = Math.floor(Math.random() * SNOW_COLORS.length)
+
+		particle.setAttribute('d', SNOWFLAKE_SHAPES[idx])
+		particle.setAttribute('fill', SNOW_COLORS[colorIdx])
+		particle.setAttribute('opacity', '0')
+		particle.style.mixBlendMode = 'soft-light'
+		particle.style.willChange = 'transform, opacity'
+		particle.style.transform = 'translate(-100px, -100px)'
+
+		svg.appendChild(particle)
+		shapeIndex++
+		return particle
+	}
+
+	state.overlayElement = overlay
+	state.snow = {
+		snowflakePool: new ParticlePool(particleFactory, 20),
+		fallingSnowflakes: [],
+		windStrength: 0,
+		windDirection: 1,
+		windPhase: Math.random() * Math.PI * 2,
+		lastWindGust: performance.now(),
+		lastSpawn: performance.now(),
+		startTime: performance.now(),
+	}
+}
+
+export function animateSnow(state: ArtState, currentTime: number): void {
+	if (!state.snow) return
+
+	const { intensity = 1, speed = 1 } = state
+	const { snowflakePool, fallingSnowflakes } = state.snow
+
+	if (intensity <= 0) {
+		for (const flake of fallingSnowflakes) {
+			flake.element.setAttribute('opacity', '0')
+		}
+		return
+	}
+
+	const timeSinceWind = currentTime - state.snow.lastWindGust
+	const gustInterval = (8000 + Math.random() * 8000) / speed
+
+	if (timeSinceWind > gustInterval) {
+		const isStrongGust = Math.random() < 0.15
+		state.snow.windStrength = isStrongGust ? 0.8 : 0.3 + Math.random() * 0.3
+		state.snow.windDirection = Math.random() > 0.5 ? 1 : -1
+		state.snow.lastWindGust = currentTime
+	}
+
+	const windOscillation = Math.sin(currentTime * 0.0005) * 0.08
+	state.snow.windStrength = Math.max(0, state.snow.windStrength - 0.003 + windOscillation * 0.001)
+
+	const spawnInterval = (1200 + Math.random() * 1500) / speed
+	const maxFlakes = Math.max(2, Math.round(12 * intensity))
+
+	if (currentTime - state.snow.lastSpawn > spawnInterval && snowflakePool.activeCount < maxFlakes) {
+		const flake = snowflakePool.acquire()
+
+		const zoneIndex = Math.floor(Math.random() * SPAWN_ZONES.length)
+		const zone = SPAWN_ZONES[zoneIndex]
+
+		const sizeIndex = Math.floor(Math.random() * PARTICLE_SIZES.length)
+		const depthIndex = Math.floor(Math.random() * DEPTH_LAYERS.length)
+		const sizeProps = PARTICLE_SIZES[sizeIndex]
+
+		const newFlake: FallingParticle = {
+			element: flake,
+			x: zone.x + Math.random() * zone.xRange,
+			y: -5 - Math.random() * 15,
+			vx: zone.vx * 0.5 + (Math.random() - 0.5) * 0.1,
+			vy: sizeProps.fallSpeed * (0.85 + Math.random() * 0.3),
+			life: 1,
+			rotation: Math.random() * 360,
+			phase: Math.random() * Math.PI * 2,
+			sizeIndex,
+			depthIndex,
+			tumbleDirection: Math.random() > 0.5 ? 1 : -1,
+			flutterAmplitude: 0.06 + Math.random() * 0.1,
+			flutterFrequency: 0.008 + Math.random() * 0.005,
+			spawnTime: currentTime,
+		}
+
+		fallingSnowflakes.push(newFlake)
+		state.snow.lastSpawn = currentTime
+	}
+
+	const windStrength = state.snow.windStrength
+	const windDirection = state.snow.windDirection
+
+	for (let i = fallingSnowflakes.length - 1; i >= 0; i--) {
+		const p = fallingSnowflakes[i]
+		const sizeProps = PARTICLE_SIZES[p.sizeIndex]
+		const depthProps = DEPTH_LAYERS[p.depthIndex]
+
+		const windEffect = windStrength * windDirection * sizeProps.windSensitivity * 0.4
+
+		const flutterOffset = Math.sin(p.y * p.flutterFrequency + p.phase) * p.flutterAmplitude
+		const secondaryWave =
+			Math.sin(p.y * p.flutterFrequency * 0.5 + p.phase * 1.3) * p.flutterAmplitude * 0.3
+
+		p.vx += windEffect * 0.006
+		p.vx += (flutterOffset + secondaryWave) * 0.015
+		p.vx *= 0.985
+
+		const verticalWind = Math.sin(currentTime * 0.0002 * speed + p.phase) * 0.015
+		p.vy = (sizeProps.fallSpeed + verticalWind) * speed
+
+		p.x += p.vx
+		p.y += p.vy
+
+		const baseRotationSpeed = sizeProps.tumbleSpeed * p.tumbleDirection * 0.4
+		const windRotation = windStrength * windDirection * 0.3
+		p.rotation += baseRotationSpeed + windRotation + flutterOffset * 0.5
+
+		const age = currentTime - p.spawnTime
+		const fadeInDuration = 1000
+		const fadeOutStart = 75
+
+		let opacity = depthProps.opacity * intensity
+
+		if (age < fadeInDuration) {
+			opacity *= age / fadeInDuration
+		}
+
+		if (p.y > fadeOutStart) {
+			const fadeProgress = (p.y - fadeOutStart) / (110 - fadeOutStart)
+			opacity *= 1 - fadeProgress
+		}
+
+		const scale = sizeProps.scale * (0.8 + depthProps.opacity)
+
+		p.element.style.transform = `translate(${p.x.toFixed(1)}px, ${p.y.toFixed(1)}px) rotate(${p.rotation.toFixed(0)}deg) scale(${scale.toFixed(2)})`
+		p.element.style.filter = depthProps.blur > 0 ? `blur(${depthProps.blur}px)` : ''
+		p.element.setAttribute('opacity', Math.max(0, opacity).toFixed(3))
+
+		if (p.y > 110 || p.x < -10 || p.x > 110) {
+			snowflakePool.release(p.element)
+			fallingSnowflakes.splice(i, 1)
+		}
+	}
+}

package/src/directives/art/effects/starfield.ts

@@ -0,0 +1,107 @@
+/**
+ * Starfield Effect — Night sky with twinkling stars.
+ *
+ * 6 groups × 7 stars using CSS radial-gradient backgrounds.
+ * Wave-by-wave fade-in (group 0 first, then 1, 2, …); gentle twinkle once visible.
+ * Opacity driven by RAF instead of CSS @keyframes to avoid Shadow DOM scoping.
+ */
+
+import type { ArtState } from '../types'
+import { createOverlayContainer } from '../utils'
+
+const GROUP_COUNT = 6
+const STARS_PER_GROUP = 7
+
+function generateStarGroups() {
+	return Array.from({ length: GROUP_COUNT }, (_, g) => {
+		const stops: string[] = []
+		for (let i = 0; i < STARS_PER_GROUP; i++) {
+			const x = Math.random() * 96 + 2
+			const y = Math.random() * 94 + 3
+			const size = 0.8 + Math.random() * 1.5
+			const alpha = 0.3 + Math.random() * 0.7
+			stops.push(
+				`radial-gradient(circle ${size}px at ${x}% ${y}%, rgba(255,255,255,${alpha}) 0%, transparent 100%)`,
+			)
+		}
+		const appearDelay = g * 0.6
+		return {
+			bg: stops.join(','),
+			appearDelay,
+			twinkleDuration: 5 + g * 0.7,
+			twinkleDelay: appearDelay + 2.5,
+		}
+	})
+}
+
+export function createStarfieldOverlay(state: ArtState): void {
+	const { element } = state
+	const overlay = createOverlayContainer('starfield-overlay')
+
+	const starArea = document.createElement('div')
+	starArea.style.cssText = 'position:absolute;bottom:0;right:0;width:66vw;height:66vw;'
+	overlay.appendChild(starArea)
+
+	const generated = generateStarGroups()
+	const groups: NonNullable<ArtState['starfield']>['groups'] = []
+
+	for (const g of generated) {
+		const div = document.createElement('div')
+		div.style.cssText = `position:absolute;inset:0;opacity:0;will-change:opacity;background:${g.bg};`
+		starArea.appendChild(div)
+		groups.push({
+			element: div,
+			appearDelay: g.appearDelay,
+			twinkleDuration: g.twinkleDuration,
+			twinkleDelay: g.twinkleDelay,
+		})
+	}
+
+	element.appendChild(overlay)
+	state.overlayElement = overlay
+	state.starfield = { groups, startTime: performance.now() }
+}
+
+export function animateStarfield(state: ArtState, currentTime: number): void {
+	if (!state.starfield) return
+
+	const { intensity = 1, speed = 1 } = state
+	const { groups, startTime } = state.starfield
+	const elapsed = ((currentTime - startTime) / 1000) * speed
+
+	for (const g of groups) {
+		if (intensity <= 0) {
+			g.element.style.opacity = '0'
+			continue
+		}
+
+		const appearStart = g.appearDelay
+		const appearEnd = appearStart + 2.5
+		let opacity: number
+
+		if (elapsed < appearStart) {
+			opacity = 0
+		} else if (elapsed < appearEnd) {
+			const t = (elapsed - appearStart) / 2.5
+			opacity = 1 - Math.pow(1 - t, 3)
+		} else {
+			const twinkleElapsed = elapsed - g.twinkleDelay
+			if (twinkleElapsed < 0) {
+				opacity = 1
+			} else {
+				const cycle = (twinkleElapsed % g.twinkleDuration) / g.twinkleDuration
+				if (cycle < 0.25) {
+					opacity = 1 - (cycle / 0.25) * 0.4
+				} else if (cycle < 0.5) {
+					opacity = 0.6 + ((cycle - 0.25) / 0.25) * 0.25
+				} else if (cycle < 0.75) {
+					opacity = 0.85 - ((cycle - 0.5) / 0.25) * 0.3
+				} else {
+					opacity = 0.55 + ((cycle - 0.75) / 0.25) * 0.45
+				}
+			}
+		}
+
+		g.element.style.opacity = (opacity * intensity).toFixed(3)
+	}
+}

package/src/directives/art/index.ts

@@ -0,0 +1,2 @@
+export { art } from './art.directive'
+export type { ArtEffect, ArtOptions } from './types'

package/src/directives/art/particle-pool.ts

@@ -0,0 +1,40 @@
+/**
+ * Particle Pool
+ *
+ * Reusable object pool for SVG particles to avoid constant creation/destruction.
+ * Used by samwa (leaves), howl (steam), error (lightning), snow (flakes) effects.
+ */
+
+export class ParticlePool<T extends SVGElement> {
+	private pool: T[] = []
+	private active = new Set<T>()
+	private factory: () => T
+
+	constructor(factory: () => T, initialSize: number = 10) {
+		this.factory = factory
+		for (let i = 0; i < initialSize; i++) {
+			this.pool.push(factory())
+		}
+	}
+
+	acquire(): T {
+		let particle = this.pool.pop()
+		if (!particle) particle = this.factory()
+		this.active.add(particle)
+		return particle
+	}
+
+	release(particle: T) {
+		this.active.delete(particle)
+		particle.setAttribute('opacity', '0')
+		this.pool.push(particle)
+	}
+
+	clear() {
+		this.active.forEach(p => this.release(p))
+	}
+
+	get activeCount() {
+		return this.active.size
+	}
+}