@mhmo91/schmancy 0.10.23 → 0.10.25

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

@@ -0,0 +1,192 @@
+/**
+ * Error Effect — Electrical/warning glow on edges with static particles and lightning bolts.
+ * 2.5-second main pulse cycle.
+ */
+
+import type { ArtState } from '../types'
+import { ParticlePool } from '../particle-pool'
+import { createOverlayContainer, createSVG } from '../utils'
+
+export function createErrorOverlay(state: ArtState): void {
+	const { element, color } = state
+	const overlay = createOverlayContainer('error-overlay')
+	const svg = createSVG()
+
+	const edgeGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g')
+	const edges = [
+		{ x: 0, y: 0, width: 100, height: 0.5 },
+		{ x: 0, y: 99.5, width: 100, height: 0.5 },
+		{ x: 0, y: 0, width: 0.5, height: 100 },
+		{ x: 99.5, y: 0, width: 0.5, height: 100 },
+	]
+
+	const edgeElements = edges.map(edge => {
+		const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect')
+		rect.setAttribute('x', edge.x.toString())
+		rect.setAttribute('y', edge.y.toString())
+		rect.setAttribute('width', edge.width.toString())
+		rect.setAttribute('height', edge.height.toString())
+		rect.setAttribute('fill', color)
+		rect.style.mixBlendMode = 'screen'
+		rect.style.willChange = 'opacity'
+		edgeGroup.appendChild(rect)
+		return rect
+	})
+
+	const staticGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g')
+	const staticParticles: NonNullable<ArtState['error']>['staticParticles'] = []
+
+	for (let i = 0; i < 4; i++) {
+		const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle')
+		circle.setAttribute('r', '0.3')
+		circle.setAttribute('fill', color)
+		circle.style.mixBlendMode = 'screen'
+		circle.style.willChange = 'opacity'
+		staticGroup.appendChild(circle)
+		staticParticles.push({ element: circle, edge: i % 4 })
+	}
+
+	svg.appendChild(edgeGroup)
+	svg.appendChild(staticGroup)
+	overlay.appendChild(svg)
+	element.appendChild(overlay)
+
+	const boltFactory = () => {
+		const path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
+		path.setAttribute('stroke', color)
+		path.setAttribute('stroke-width', '0.5')
+		path.setAttribute('fill', 'none')
+		path.style.mixBlendMode = 'screen'
+		path.style.willChange = 'opacity'
+		svg.appendChild(path)
+		return path
+	}
+
+	state.overlayElement = overlay
+	state.error = {
+		edges: edgeElements,
+		staticParticles,
+		boltPool: new ParticlePool(boltFactory, 5),
+		lightningBolts: [],
+		lastLightningSpawn: performance.now(),
+		startTime: performance.now(),
+	}
+}
+
+export function animateError(state: ArtState, currentTime: number): void {
+	if (!state.error) return
+
+	const { edges, staticParticles, boltPool, lightningBolts, startTime } = state.error
+	const elapsed = currentTime - startTime
+	const cycleProgress = (elapsed % 2500) / 2500
+
+	const edgePulse = Math.sin(cycleProgress * Math.PI * 4) * 0.5 + 0.5
+	const edgeOpacity = 0.08 + edgePulse * 0.17
+	edges.forEach(edge => edge.setAttribute('opacity', edgeOpacity.toFixed(3)))
+
+	staticParticles.forEach((particle, index) => {
+		const particlePhase = (cycleProgress + index * 0.125) % 1.0
+		let x = 0,
+			y = 0
+
+		switch (particle.edge) {
+			case 0:
+				x = Math.random() * 100
+				y = Math.random() * 5
+				break
+			case 1:
+				x = 95 + Math.random() * 5
+				y = Math.random() * 100
+				break
+			case 2:
+				x = Math.random() * 100
+				y = 95 + Math.random() * 5
+				break
+			case 3:
+				x = Math.random() * 5
+				y = Math.random() * 100
+				break
+		}
+
+		particle.element.setAttribute('cx', x.toString())
+		particle.element.setAttribute('cy', y.toString())
+
+		const flicker = Math.sin(particlePhase * Math.PI * 2) * 0.5 + 0.5
+		particle.element.setAttribute('opacity', (flicker * 0.35).toFixed(3))
+	})
+
+	if (currentTime - state.error.lastLightningSpawn > 1500 && boltPool.activeCount < 3) {
+		const bolt = boltPool.acquire()
+		const edge = Math.floor(Math.random() * 4)
+		let startX = 0,
+			startY = 0,
+			endX = 0,
+			endY = 0
+
+		switch (edge) {
+			case 0:
+				startX = Math.random() * 100
+				startY = 0
+				endX = Math.random() * 100
+				endY = 50
+				break
+			case 1:
+				startX = 100
+				startY = Math.random() * 100
+				endX = 70
+				endY = Math.random() * 100
+				break
+			case 2:
+				startX = Math.random() * 100
+				startY = 100
+				endX = Math.random() * 100
+				endY = 50
+				break
+			case 3:
+				startX = 0
+				startY = Math.random() * 100
+				endX = 30
+				endY = Math.random() * 100
+				break
+		}
+
+		bolt.setAttribute('d', createLightningPath(startX, startY, endX, endY))
+		lightningBolts.push({ element: bolt, x: 0, y: 0, vx: 0, vy: 0, life: 1 })
+		state.error.lastLightningSpawn = currentTime
+	}
+
+	for (let i = lightningBolts.length - 1; i >= 0; i--) {
+		const bolt = lightningBolts[i]
+		bolt.life -= 0.05
+		const opacity = bolt.life > 0.8 ? 0.7 : bolt.life * 0.875
+		bolt.element.setAttribute('opacity', Math.max(0, opacity).toFixed(3))
+
+		if (bolt.life <= 0) {
+			boltPool.release(bolt.element)
+			lightningBolts.splice(i, 1)
+		}
+	}
+}
+
+function createLightningPath(startX: number, startY: number, endX: number, endY: number): string {
+	const segments = 4
+	let path = `M ${startX.toFixed(1)},${startY.toFixed(1)}`
+
+	const deltaX = (endX - startX) / segments
+	const deltaY = (endY - startY) / segments
+
+	let currentX = startX
+	let currentY = startY
+
+	for (let i = 1; i < segments; i++) {
+		const jag = 3 + Math.random() * 5
+		const perpX = -deltaY * jag * (Math.random() - 0.5)
+		const perpY = deltaX * jag * (Math.random() - 0.5)
+
+		currentX += deltaX + perpX
+		currentY += deltaY + perpY
+		path += ` L ${currentX.toFixed(1)},${currentY.toFixed(1)}`
+	}
+
+	return path + ` L ${endX.toFixed(1)},${endY.toFixed(1)}`
+}

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

@@ -0,0 +1,121 @@
+/**
+ * Funkhaus Effect — Grid wave animation with window panes glowing diagonally.
+ * 7-second cycle, exponential intensity curve.
+ */
+
+import type { ArtState } from '../types'
+import { createOverlayContainer, createSVG } from '../utils'
+
+export function createFunkhausOverlay(state: ArtState): void {
+	const { element, color } = state
+	const overlay = createOverlayContainer('funkhaus-overlay')
+	const svg = createSVG()
+
+	const cols = 5
+	const rows = 4
+	const windowWidth = 100 / cols
+	const windowHeight = 100 / rows
+
+	const framePath = createGridPath(cols, rows, windowWidth, windowHeight)
+	const frameElement = document.createElementNS('http://www.w3.org/2000/svg', 'path')
+	frameElement.setAttribute('d', framePath)
+	frameElement.setAttribute('stroke', color)
+	frameElement.setAttribute('stroke-width', '0.15')
+	frameElement.setAttribute('opacity', '0.2')
+	frameElement.setAttribute('fill', 'none')
+
+	const windowGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g')
+	windowGroup.id = 'window-panes'
+	windowGroup.style.mixBlendMode = 'screen'
+
+	const panes: Array<{ element: SVGRectElement; diagonalIndex: number }> = []
+
+	for (let row = 0; row < rows; row++) {
+		for (let col = 0; col < cols; col++) {
+			const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect')
+			rect.setAttribute('x', (col * windowWidth).toString())
+			rect.setAttribute('y', (row * windowHeight).toString())
+			rect.setAttribute('width', windowWidth.toString())
+			rect.setAttribute('height', windowHeight.toString())
+			rect.setAttribute('fill', color)
+			rect.setAttribute('opacity', '0')
+			rect.style.willChange = 'opacity'
+
+			panes.push({ element: rect, diagonalIndex: row + col })
+			windowGroup.appendChild(rect)
+		}
+	}
+
+	svg.appendChild(windowGroup)
+	svg.appendChild(frameElement)
+	overlay.appendChild(svg)
+	element.appendChild(overlay)
+
+	state.overlayElement = overlay
+	state.funkhaus = {
+		panes,
+		maxDiagonal: rows + cols - 2,
+		startTime: performance.now(),
+	}
+}
+
+export function animateFunkhaus(state: ArtState, currentTime: number): void {
+	if (!state.funkhaus) return
+
+	const { panes, maxDiagonal, startTime } = state.funkhaus
+	const { intensity: effectIntensity = 1, speed = 1 } = state
+
+	if (effectIntensity <= 0) {
+		for (const pane of panes) {
+			if (pane.element.getAttribute('opacity') !== '0') {
+				pane.element.setAttribute('opacity', '0')
+			}
+		}
+		return
+	}
+
+	const elapsed = currentTime - startTime
+	const cycleDuration = 7000 / speed
+	const cycleProgress = (elapsed % cycleDuration) / cycleDuration
+	const waveProgress = cycleProgress * 1.555
+
+	const spread = 0.18
+	const maxOpacity = 0.18 * effectIntensity
+	const spreadFactor = 1 / (2 * spread * spread)
+
+	for (let i = 0; i < panes.length; i++) {
+		const pane = panes[i]
+		const normalizedPosition = pane.diagonalIndex / maxDiagonal
+		const distance = Math.abs(normalizedPosition - waveProgress)
+
+		if (distance > 0.5) {
+			if (pane.element.getAttribute('opacity') !== '0') {
+				pane.element.setAttribute('opacity', '0')
+			}
+			continue
+		}
+
+		let localIntensity = Math.exp(-distance * distance * spreadFactor)
+
+		localIntensity =
+			localIntensity < 0.5
+				? 4 * localIntensity * localIntensity * localIntensity
+				: 1 - Math.pow(-2 * localIntensity + 2, 3) / 2
+
+		const opacity = localIntensity * maxOpacity
+		pane.element.setAttribute('opacity', opacity.toFixed(3))
+	}
+}
+
+function createGridPath(cols: number, rows: number, width: number, height: number): string {
+	let path = ''
+	for (let row = 0; row <= rows; row++) {
+		const y = row * height
+		path += `M 0,${y} L 100,${y} `
+	}
+	for (let col = 0; col <= cols; col++) {
+		const x = col * width
+		path += `M ${x},0 L ${x},100 `
+	}
+	return path
+}

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

@@ -0,0 +1,203 @@
+/**
+ * Howl Effect — Steampunk gears, sparkles, crystals, rising steam.
+ * 17-second cycle, layered animations.
+ */
+
+import type { ArtState } from '../types'
+import { ParticlePool } from '../particle-pool'
+import { createOverlayContainer, createSVG } from '../utils'
+
+export function createHowlOverlay(state: ArtState): void {
+	const { element, color } = state
+	const overlay = createOverlayContainer('howl-overlay')
+	const svg = createSVG()
+
+	const gearsGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g')
+	const gearConfigs = [
+		{ cx: 15, cy: 20, r: 8, teeth: 12, speed: 0.5 },
+		{ cx: 85, cy: 25, r: 6, teeth: 10, speed: -0.7 },
+		{ cx: 30, cy: 80, r: 10, teeth: 16, speed: 0.4 },
+		{ cx: 75, cy: 75, r: 7, teeth: 12, speed: -0.6 },
+	]
+
+	const gears = gearConfigs.map(config => {
+		const g = document.createElementNS('http://www.w3.org/2000/svg', 'g')
+		g.style.transformOrigin = `${config.cx}% ${config.cy}%`
+		g.style.willChange = 'transform'
+
+		const path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
+		path.setAttribute('d', createGearPath(config.cx, config.cy, config.r, config.teeth))
+		path.setAttribute('fill', color)
+		path.setAttribute('opacity', '0.3')
+		path.style.mixBlendMode = 'screen'
+
+		g.appendChild(path)
+		gearsGroup.appendChild(g)
+		return { element: g, speed: config.speed }
+	})
+
+	const sparklesGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g')
+	const sparkles: NonNullable<ArtState['howl']>['sparkles'] = []
+
+	for (let i = 0; i < 6; i++) {
+		const path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
+		const x = 10 + Math.random() * 80
+		const y = 10 + Math.random() * 80
+		const size = 0.3 + Math.random() * 0.5
+
+		const sparklePath = `M ${x},${y - size} L ${x + size * 0.3},${y} L ${x},${y + size} L ${x - size * 0.3},${y} Z`
+		path.setAttribute('d', sparklePath)
+		path.setAttribute('fill', color)
+		path.style.mixBlendMode = 'screen'
+		path.style.willChange = 'opacity, transform'
+
+		sparklesGroup.appendChild(path)
+		sparkles.push({
+			element: path,
+			baseX: x,
+			baseY: y,
+			phase: Math.random() * Math.PI * 2,
+			speed: 0.5 + Math.random() * 1.5,
+		})
+	}
+
+	const crystalsGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g')
+	const crystals: NonNullable<ArtState['howl']>['crystals'] = []
+
+	for (let i = 0; i < 4; i++) {
+		const polygon = document.createElementNS('http://www.w3.org/2000/svg', 'polygon')
+		const x = 20 + Math.random() * 60
+		const y = 20 + Math.random() * 60
+		const size = 0.8 + Math.random() * 1.2
+
+		polygon.setAttribute(
+			'points',
+			`${x},${y - size} ${x + size * 0.6},${y} ${x},${y + size} ${x - size * 0.6},${y}`,
+		)
+		polygon.setAttribute('fill', color)
+		polygon.style.mixBlendMode = 'screen'
+		polygon.style.willChange = 'transform, opacity'
+
+		crystalsGroup.appendChild(polygon)
+		crystals.push({
+			element: polygon,
+			baseX: x,
+			baseY: y,
+			phase: Math.random() * Math.PI * 2,
+			rotSpeed: 0.5 + Math.random(),
+		})
+	}
+
+	svg.appendChild(gearsGroup)
+	svg.appendChild(sparklesGroup)
+	svg.appendChild(crystalsGroup)
+	overlay.appendChild(svg)
+	element.appendChild(overlay)
+
+	const steamFactory = () => {
+		const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle')
+		circle.setAttribute('fill', color)
+		circle.style.mixBlendMode = 'screen'
+		circle.style.willChange = 'transform, opacity'
+		svg.appendChild(circle)
+		return circle
+	}
+
+	state.overlayElement = overlay
+	state.howl = {
+		gears,
+		sparkles,
+		steamPool: new ParticlePool(steamFactory, 12),
+		steamParticles: [],
+		wisps: [],
+		crystals,
+		lastSteamSpawn: performance.now(),
+		startTime: performance.now(),
+	}
+}
+
+export function animateHowl(state: ArtState, currentTime: number): void {
+	if (!state.howl) return
+
+	const { gears, sparkles, crystals, steamPool, steamParticles, startTime } = state.howl
+	const elapsed = currentTime - startTime
+	const cycleProgress = (elapsed % 17000) / 17000
+
+	gears.forEach(gear => {
+		const rotation = (elapsed / 80) * gear.speed
+		gear.element.style.transform = `rotate(${rotation.toFixed(1)}deg)`
+	})
+
+	sparkles.forEach(sparkle => {
+		const twinkle = Math.sin((cycleProgress * sparkle.speed + sparkle.phase) * Math.PI * 2)
+		const opacity = 0.15 + twinkle * 0.25
+
+		const floatX = Math.sin((elapsed / 2000) * sparkle.speed + sparkle.phase) * 0.3
+		const floatY = Math.cos((elapsed / 2000) * sparkle.speed + sparkle.phase) * 0.2
+
+		sparkle.element.setAttribute('opacity', opacity.toFixed(3))
+		sparkle.element.style.transform = `translate(${floatX.toFixed(2)}px, ${floatY.toFixed(2)}px)`
+	})
+
+	crystals.forEach(crystal => {
+		const floatX = Math.sin((elapsed / 3500) * crystal.rotSpeed + crystal.phase) * 1.5
+		const floatY = Math.cos((elapsed / 4000) * crystal.rotSpeed + crystal.phase) * 1.2
+		const rotation = (elapsed / 120) * crystal.rotSpeed
+
+		const pulse = Math.sin((cycleProgress + crystal.phase / (Math.PI * 2)) * Math.PI * 2)
+		const opacity = 0.12 + pulse * 0.18
+
+		crystal.element.style.transform = `translate(${floatX.toFixed(1)}px, ${floatY.toFixed(1)}px) rotate(${rotation.toFixed(1)}deg)`
+		crystal.element.setAttribute('opacity', opacity.toFixed(3))
+	})
+
+	if (currentTime - state.howl.lastSteamSpawn > 600 && steamPool.activeCount < 12) {
+		const steam = steamPool.acquire()
+		steamParticles.push({
+			element: steam,
+			x: 10 + Math.random() * 80,
+			y: 105,
+			vx: (Math.random() - 0.5) * 0.15,
+			vy: -0.25 - Math.random() * 0.25,
+			life: 1,
+			scale: 0.5 + Math.random(),
+		})
+		state.howl.lastSteamSpawn = currentTime
+	}
+
+	for (let i = steamParticles.length - 1; i >= 0; i--) {
+		const p = steamParticles[i]
+
+		p.x += p.vx
+		p.y += p.vy
+		p.life -= 0.008
+		p.scale! += 0.02
+
+		p.element.style.transform = `translate(${p.x.toFixed(1)}px, ${p.y.toFixed(1)}px)`
+		p.element.setAttribute('r', p.scale!.toFixed(2))
+		p.element.setAttribute('opacity', (p.life * 0.18).toFixed(3))
+
+		if (p.life <= 0 || p.y < -10) {
+			steamPool.release(p.element)
+			steamParticles.splice(i, 1)
+		}
+	}
+}
+
+function createGearPath(cx: number, cy: number, r: number, teeth: number): string {
+	const toothHeight = r * 0.2
+	const innerR = r - toothHeight
+	let path = ''
+
+	for (let i = 0; i < teeth; i++) {
+		const a1 = (i / teeth) * Math.PI * 2
+		const a2 = ((i + 0.4) / teeth) * Math.PI * 2
+		const a3 = ((i + 0.6) / teeth) * Math.PI * 2
+		const a4 = ((i + 1) / teeth) * Math.PI * 2
+
+		if (i === 0) path += `M ${cx + innerR * Math.cos(a1)},${cy + innerR * Math.sin(a1)} `
+		path += `L ${cx + r * Math.cos(a2)},${cy + r * Math.sin(a2)} L ${cx + r * Math.cos(a3)},${cy + r * Math.sin(a3)} L ${cx + innerR * Math.cos(a4)},${cy + innerR * Math.sin(a4)} `
+	}
+
+	return path + 'Z'
+}