@mhmo91/schmancy 0.10.24 → 0.10.26

package/src/directives/art/types.ts

@@ -0,0 +1,129 @@
+/**
+ * Art Directive Types
+ *
+ * Type definitions for the art directive animation system.
+ */
+
+import type { ParticlePool } from './particle-pool'
+
+export type ArtEffect = 'funkhaus' | 'samwa' | 'howl' | 'error' | 'snow' | 'starfield'
+
+export interface ArtOptions {
+	name: ArtEffect
+	color: string
+	/** Animation intensity: 0 = none, 0.5 = subtle, 1 = full (default: 1) */
+	intensity?: number
+	/** Animation speed multiplier: 0.5 = half speed, 1 = normal, 2 = double (default: 1) */
+	speed?: number
+}
+
+export interface Particle<T extends SVGElement = SVGElement> {
+	element: T
+	x: number
+	y: number
+	vx: number
+	vy: number
+	life: number
+	rotation?: number
+	scale?: number
+	phase?: number
+}
+
+/** Extended physics particle used by samwa + snow effects. */
+export interface FallingParticle {
+	element: SVGPathElement
+	x: number
+	y: number
+	vx: number
+	vy: number
+	life: number
+	rotation: number
+	phase: number
+	sizeIndex: number
+	depthIndex: number
+	tumbleDirection: number
+	flutterAmplitude: number
+	flutterFrequency: number
+	spawnTime: number
+}
+
+export interface ArtState {
+	effect: ArtEffect
+	color: string
+	intensity: number
+	speed: number
+	element: HTMLElement
+	overlayElement?: HTMLElement
+	animationId?: number
+	isVisible: boolean
+	observer?: IntersectionObserver
+
+	funkhaus?: {
+		panes: Array<{ element: SVGRectElement; diagonalIndex: number }>
+		maxDiagonal: number
+		startTime: number
+	}
+
+	samwa?: {
+		leafPool: ParticlePool<SVGPathElement>
+		fallingLeaves: FallingParticle[]
+		windStrength: number
+		windDirection: number
+		lastWindTime: number
+		lastLeafSpawn: number
+		startTime: number
+	}
+
+	howl?: {
+		gears: Array<{ element: SVGElement; speed: number }>
+		sparkles: Array<{
+			element: SVGPathElement
+			baseX: number
+			baseY: number
+			phase: number
+			speed: number
+		}>
+		steamPool: ParticlePool<SVGCircleElement>
+		steamParticles: Particle<SVGCircleElement>[]
+		wisps: SVGPathElement[]
+		crystals: Array<{
+			element: SVGPolygonElement
+			baseX: number
+			baseY: number
+			phase: number
+			rotSpeed: number
+		}>
+		lastSteamSpawn: number
+		startTime: number
+	}
+
+	error?: {
+		edges: SVGRectElement[]
+		staticParticles: Array<{ element: SVGCircleElement; edge: number }>
+		boltPool: ParticlePool<SVGPathElement>
+		lightningBolts: Particle<SVGPathElement>[]
+		lastLightningSpawn: number
+		startTime: number
+	}
+
+	snow?: {
+		snowflakePool: ParticlePool<SVGPathElement>
+		fallingSnowflakes: FallingParticle[]
+		windStrength: number
+		windDirection: number
+		windPhase: number
+		lastWindGust: number
+		lastSpawn: number
+		startTime: number
+	}
+
+	starfield?: {
+		groups: Array<{
+			element: HTMLDivElement
+			appearDelay: number
+			twinkleDuration: number
+			twinkleDelay: number
+		}>
+		startTime: number
+	}
+}

package/src/directives/art/utils.ts

@@ -0,0 +1,35 @@
+/**
+ * Shared DOM/SVG creation utilities for art effects.
+ */
+
+export function createOverlayContainer(className: string): HTMLDivElement {
+	const overlay = document.createElement('div')
+	overlay.className = `art-overlay ${className}`
+	overlay.style.cssText = `
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		pointer-events: none;
+		z-index: 1000;
+		overflow: hidden;
+	`
+	return overlay
+}
+
+export function createSVG(): SVGSVGElement {
+	const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+	svg.setAttribute('width', '100%')
+	svg.setAttribute('height', '100%')
+	svg.setAttribute('viewBox', '0 0 100 100')
+	svg.setAttribute('preserveAspectRatio', 'none')
+	svg.style.cssText = `
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+	`
+	return svg
+}