@mhmo91/schmancy 0.10.24 → 0.10.25

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'
+}

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)
+		}
+	}
+}