@autumnsgrove/groveengine 0.7.0 → 0.8.0

package/dist/ui/components/nature/botanical/FallingLeavesLayer.svelte

@@ -0,0 +1,170 @@
+<!--
+  Grove — A place to Be
+  Copyright (c) 2025 Autumn Brown
+  Licensed under AGPL-3.0
+-->
+<script lang="ts">
+	import type { Season } from '../palette';
+	import LeafFalling from './LeafFalling.svelte';
+
+	type TreeType = 'logo' | 'pine' | 'aspen' | 'birch' | 'cherry';
+	type LeafVariant = 'simple' | 'maple' | 'cherry' | 'aspen' | 'pine';
+
+	// Animation constants (defaults)
+	const DEFAULT_LEAF_OPACITY = { min: 0.4, max: 0.75 } as const;
+	const DEFAULT_FALL_DURATION = { min: 8, max: 14 } as const;
+	const DEFAULT_FALL_DISTANCE = { min: 12, max: 20 } as const;
+	const DEFAULT_DRIFT_RANGE = 60; // -30 to +30
+	const DEFAULT_SPAWN_DELAY_MAX = 15;
+
+	interface Tree {
+		id: number;
+		x: number;
+		y: number;
+		size: number;
+		treeType: TreeType;
+		zIndex?: number;
+	}
+
+	interface FallingLeaf {
+		id: number;
+		x: number;
+		y: number;
+		size: number;
+		variant: LeafVariant;
+		duration: number;
+		delay: number;
+		drift: number;
+		opacity: number;
+		fallDistance: number;
+	}
+
+	interface Props {
+		trees: Tree[];
+		season?: Season;
+		/** Minimum leaves per tree */
+		minLeavesPerTree?: number;
+		/** Maximum leaves per tree */
+		maxLeavesPerTree?: number;
+		/** Base z-index for the leaf layer (should be below trees) */
+		zIndex?: number;
+		/** Override fall distance range (in vh units) - useful for tall sections */
+		fallDistance?: { min: number; max: number };
+		/** Override fall duration range (in seconds) */
+		fallDuration?: { min: number; max: number };
+		/** Maximum spawn delay (in seconds) */
+		spawnDelayMax?: number;
+	}
+
+	let {
+		trees,
+		season = 'summer',
+		minLeavesPerTree = 2,
+		maxLeavesPerTree = 5,
+		zIndex = -1,
+		fallDistance = DEFAULT_FALL_DISTANCE,
+		fallDuration = DEFAULT_FALL_DURATION,
+		spawnDelayMax = DEFAULT_SPAWN_DELAY_MAX
+	}: Props = $props();
+
+	// Deterministic hash for pseudo-random distribution (avoids visible patterns)
+	function hashSeed(seed: number): number {
+		return Math.abs(Math.sin(seed * 12.9898) * 43758.5453);
+	}
+
+	// Map tree types to appropriate leaf variants (deterministic based on leaf id)
+	function getLeafVariant(treeType: TreeType, leafId: number): LeafVariant {
+		switch (treeType) {
+			case 'cherry':
+				return 'cherry';
+			case 'aspen':
+			case 'birch':
+				return 'aspen';
+			case 'pine':
+				return 'pine';
+			case 'logo':
+			default:
+				// Logo and default get a mix of simple and maple (deterministic with natural distribution)
+				return Math.floor(hashSeed(leafId)) % 2 === 0 ? 'simple' : 'maple';
+		}
+	}
+
+	// Generate falling leaves based on tree positions
+	function generateLeaves(treesData: Tree[]): FallingLeaf[] {
+		const leaves: FallingLeaf[] = [];
+		let leafId = 0;
+
+		for (const tree of treesData) {
+			// Random number of leaves per tree within the configured range
+			const baseLeafCount = minLeavesPerTree + Math.floor(Math.random() * (maxLeavesPerTree - minLeavesPerTree + 1));
+
+			// More leaves for bigger/closer trees, fewer for distant ones
+			const treeDepth = tree.zIndex ?? 1;
+			const depthMultiplier = 0.5 + (treeDepth / 5) * 0.8; // 0.5x for far trees, up to 1.3x for close ones
+			const leafCount = Math.ceil(baseLeafCount * depthMultiplier);
+
+			// Scale leaf size based on tree size (bigger trees = bigger leaves for perspective)
+			const treeSizeFactor = tree.size / 100; // Normalize around 100px tree size
+			const baseLeafSize = 6 + treeSizeFactor * 8; // 6-14px base depending on tree size
+			const leafSizeVariation = 6 + treeSizeFactor * 4; // Additional random variation
+
+			for (let i = 0; i < leafCount; i++) {
+				// Spawn leaves at or above tree canopy for better falling motion
+				// Leaves will animate downward from their spawn point
+				const xOffset = (Math.random() - 0.5) * (tree.size / 8); // Horizontal spread based on tree size
+				// Vertical variation: spawn leaves slightly above to at tree position
+				const yOffset = -2 - Math.random() * 3; // -2% to -5% above tree
+
+				const currentLeafId = leafId++;
+				leaves.push({
+					id: currentLeafId,
+					x: tree.x + xOffset,
+					y: Math.max(0, tree.y + yOffset), // Clamp to not go above viewport
+					size: baseLeafSize + Math.random() * leafSizeVariation,
+					variant: getLeafVariant(tree.treeType, currentLeafId),
+					duration: fallDuration.min + Math.random() * (fallDuration.max - fallDuration.min),
+					delay: Math.random() * spawnDelayMax,
+					drift: (Math.random() - 0.5) * DEFAULT_DRIFT_RANGE,
+					opacity: DEFAULT_LEAF_OPACITY.min + Math.random() * (DEFAULT_LEAF_OPACITY.max - DEFAULT_LEAF_OPACITY.min),
+					fallDistance: fallDistance.min + Math.random() * (fallDistance.max - fallDistance.min)
+				});
+			}
+		}
+
+		return leaves;
+	}
+
+	// Reactive leaves - regenerates when trees or season changes
+	let fallingLeaves = $derived(generateLeaves(trees));
+</script>
+
+<!-- Falling leaves layer - positioned behind trees -->
+<div
+	class="absolute inset-0 pointer-events-none overflow-hidden"
+	style="z-index: {zIndex};"
+>
+	{#each fallingLeaves as leaf (leaf.id)}
+		<div
+			class="absolute"
+			style="
+				left: {leaf.x}%;
+				top: {leaf.y}%;
+				opacity: {leaf.opacity};
+				width: {leaf.size}px;
+				height: {leaf.size}px;
+			"
+		>
+			<LeafFalling
+				class="w-full h-full"
+				variant={leaf.variant}
+				{season}
+				duration={leaf.duration}
+				delay={leaf.delay}
+				drift={leaf.drift}
+				fallDistance={leaf.fallDistance}
+				seed={leaf.id}
+				animate={true}
+			/>
+		</div>
+	{/each}
+</div>

package/dist/ui/components/nature/botanical/FallingLeavesLayer.svelte.d.ts

@@ -0,0 +1,35 @@
+import type { Season } from '../palette';
+type TreeType = 'logo' | 'pine' | 'aspen' | 'birch' | 'cherry';
+interface Tree {
+    id: number;
+    x: number;
+    y: number;
+    size: number;
+    treeType: TreeType;
+    zIndex?: number;
+}
+interface Props {
+    trees: Tree[];
+    season?: Season;
+    /** Minimum leaves per tree */
+    minLeavesPerTree?: number;
+    /** Maximum leaves per tree */
+    maxLeavesPerTree?: number;
+    /** Base z-index for the leaf layer (should be below trees) */
+    zIndex?: number;
+    /** Override fall distance range (in vh units) - useful for tall sections */
+    fallDistance?: {
+        min: number;
+        max: number;
+    };
+    /** Override fall duration range (in seconds) */
+    fallDuration?: {
+        min: number;
+        max: number;
+    };
+    /** Maximum spawn delay (in seconds) */
+    spawnDelayMax?: number;
+}
+declare const FallingLeavesLayer: import("svelte").Component<Props, {}, "">;
+type FallingLeavesLayer = ReturnType<typeof FallingLeavesLayer>;
+export default FallingLeavesLayer;

package/dist/ui/components/nature/botanical/FallingPetalsLayer.svelte

@@ -0,0 +1,174 @@
+<!--
+  Grove — A place to Be
+  Copyright (c) 2025 Autumn Brown
+  Licensed under AGPL-3.0
+-->
+<script lang="ts">
+	import { browser } from '$app/environment';
+	import PetalFalling from './PetalFalling.svelte';
+
+	type PetalVariant = 'round' | 'pointed' | 'heart' | 'curled' | 'tiny';
+
+	// Check for reduced motion preference
+	const prefersReducedMotion = browser
+		? window.matchMedia('(prefers-reduced-motion: reduce)').matches
+		: false;
+
+	interface Props {
+		/** Total number of petals */
+		count?: number;
+		/** Base z-index for the petal layer */
+		zIndex?: number;
+		/** Enable petal animation */
+		enabled?: boolean;
+		/** Opacity range for petals (depth affects final value) */
+		opacity?: { min: number; max: number };
+		/** Fall duration range in seconds (slower = more dreamy) */
+		fallDuration?: { min: number; max: number };
+		/** Horizontal drift range in pixels (petals flutter more than snow) */
+		driftRange?: number;
+		/** Maximum spawn delay in seconds */
+		spawnDelay?: number;
+	}
+
+	let {
+		count = 80,
+		zIndex = 50,
+		enabled = true,
+		opacity = { min: 0.5, max: 0.9 },
+		fallDuration = { min: 12, max: 20 },
+		driftRange = 80,
+		spawnDelay = 15
+	}: Props = $props();
+
+	// Petals fall gently and drift more than snow
+	// Increased distance to ensure they traverse the full viewport
+	const FALL_DISTANCE = { min: 120, max: 150 } as const;
+
+	// Reduce petal count for reduced motion
+	const actualCount = $derived(prefersReducedMotion ? Math.floor(count / 4) : count);
+
+	// Variant distribution - more round and heart shapes for cherry blossoms
+	const petalVariants: PetalVariant[] = ['round', 'round', 'pointed', 'heart', 'curled', 'tiny'];
+
+	interface Petal {
+		id: number;
+		x: number;
+		y: number;
+		size: number;
+		variant: PetalVariant;
+		duration: number;
+		delay: number;
+		drift: number;
+		opacity: number;
+		fallDistance: number;
+	}
+
+	// Deterministic hash for natural distribution
+	function hashRandom(seed: number): number {
+		const hash = Math.abs(Math.sin(seed * 12.9898) * 43758.5453);
+		return hash - Math.floor(hash);
+	}
+
+	// Generate petals across the viewport
+	function generatePetals(): Petal[] {
+		const petals: Petal[] = [];
+
+		for (let i = 0; i < actualCount; i++) {
+			// Prime number multipliers ensure uncorrelated random distributions
+			// across different properties (avoids visible patterns in petal placement)
+			const xRand = hashRandom(i * 7);
+			const yRand = hashRandom(i * 11);
+			const depthRand = hashRandom(i * 13);
+			const durationRand = hashRandom(i * 17);
+			const delayRand = hashRandom(i * 19);
+			const driftRand = hashRandom(i * 23);
+			const distanceRand = hashRandom(i * 29);
+			const variantRand = hashRandom(i * 31);
+
+			// Distribute across full width
+			const x = (i / actualCount) * 100 + (xRand - 0.5) * 15;
+
+			// Start positions: Mix above viewport and within for continuous rain effect
+			// 50% start above for "raining from sky", 50% within for immediate visibility
+			const y = yRand < 0.5
+				? -5 - yRand * 15  // Above viewport: -5% to -20%
+				: yRand * 40;       // Within viewport: 0% to 40%
+
+			// Depth-based sizing:
+			// Far petals are smaller and simpler
+			// Close petals are larger and more detailed
+			const depthFactor = depthRand;
+			const size = 10 + depthFactor * 18; // 10-28px - petals are delicate
+
+			// Variant based on depth
+			let variant: PetalVariant;
+			if (depthFactor < 0.25) {
+				variant = 'tiny';
+			} else {
+				const variantIndex = Math.floor(variantRand * (petalVariants.length - 1));
+				variant = petalVariants[variantIndex];
+			}
+
+			// Since all petals now start above viewport, stagger delays for continuous rain
+			// Shorter delays create more immediate visual interest
+			const actualDelay = delayRand * spawnDelay * 0.6; // Reduce overall delay spread
+
+			// Petals drift more erratically than snow - flutter in the breeze
+			// Use sine wave for more organic drift pattern
+			const baseDrift = (driftRand - 0.5) * driftRange;
+			const driftVariation = Math.sin(i * 0.7) * 20;
+
+			petals.push({
+				id: i,
+				x,
+				y,
+				size,
+				variant,
+				duration: fallDuration.min + durationRand * (fallDuration.max - fallDuration.min),
+				delay: actualDelay,
+				drift: baseDrift + driftVariation,
+				opacity: opacity.min + depthFactor * (opacity.max - opacity.min),
+				fallDistance: FALL_DISTANCE.min + distanceRand * (FALL_DISTANCE.max - FALL_DISTANCE.min)
+			});
+		}
+
+		return petals;
+	}
+
+	// Generate petals once
+	const petals = $derived(generatePetals());
+</script>
+
+{#if enabled}
+	<!-- Falling petals layer - cherry blossoms drifting on spring breeze -->
+	<div
+		class="absolute inset-0 pointer-events-none"
+		style="z-index: {zIndex};"
+		aria-hidden="true"
+	>
+		{#each petals as petal (petal.id)}
+			<div
+				class="absolute"
+				style="
+					left: {petal.x}%;
+					top: {petal.y}%;
+					width: {petal.size}px;
+					height: {petal.size}px;
+				"
+			>
+				<PetalFalling
+					class="w-full h-full"
+					variant={petal.variant}
+					duration={petal.duration}
+					delay={petal.delay}
+					drift={petal.drift}
+					fallDistance={petal.fallDistance}
+					opacity={petal.opacity}
+					seed={petal.id}
+					animate={true}
+				/>
+			</div>
+		{/each}
+	</div>
+{/if}

package/dist/ui/components/nature/botanical/FallingPetalsLayer.svelte.d.ts

@@ -0,0 +1,25 @@
+interface Props {
+    /** Total number of petals */
+    count?: number;
+    /** Base z-index for the petal layer */
+    zIndex?: number;
+    /** Enable petal animation */
+    enabled?: boolean;
+    /** Opacity range for petals (depth affects final value) */
+    opacity?: {
+        min: number;
+        max: number;
+    };
+    /** Fall duration range in seconds (slower = more dreamy) */
+    fallDuration?: {
+        min: number;
+        max: number;
+    };
+    /** Horizontal drift range in pixels (petals flutter more than snow) */
+    driftRange?: number;
+    /** Maximum spawn delay in seconds */
+    spawnDelay?: number;
+}
+declare const FallingPetalsLayer: import("svelte").Component<Props, {}, "">;
+type FallingPetalsLayer = ReturnType<typeof FallingPetalsLayer>;
+export default FallingPetalsLayer;

package/dist/ui/components/nature/botanical/Leaf.svelte

@@ -0,0 +1,77 @@
+<!--
+  Grove — A place to Be
+  Copyright (c) 2025 Autumn Brown
+  Licensed under AGPL-3.0
+-->
+<script lang="ts">
+	import type { Season } from '../palette';
+	import { greens, autumn } from '../palette';
+
+	interface Props {
+		class?: string;
+		color?: string;
+		season?: Season;
+		variant?: 'oak' | 'maple' | 'simple' | 'aspen';
+	}
+
+	let {
+		class: className = 'w-4 h-4',
+		color,
+		season = 'summer',
+		variant = 'simple'
+	}: Props = $props();
+
+	// Leaves change color in autumn
+	const defaultColor = $derived(season === 'autumn' ? autumn.amber : greens.grove);
+	const leafColor = $derived(color ?? defaultColor);
+	const veinColor = $derived(season === 'autumn' ? autumn.rust : greens.deepGreen);
+</script>
+
+<!-- Leaf - various shapes -->
+<svg class={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 50">
+	{#if variant === 'simple'}
+		<!-- Simple oval leaf -->
+		<ellipse fill={leafColor} cx="20" cy="22" rx="15" ry="20" />
+		<path fill="none" stroke={veinColor} stroke-width="1" d="M20 5 L20 42" opacity="0.4" />
+		<path fill="none" stroke={veinColor} stroke-width="0.5" d="M20 15 Q10 18 8 22" opacity="0.3" />
+		<path fill="none" stroke={veinColor} stroke-width="0.5" d="M20 15 Q30 18 32 22" opacity="0.3" />
+		<path fill="none" stroke={veinColor} stroke-width="0.5" d="M20 25 Q12 28 8 32" opacity="0.3" />
+		<path fill="none" stroke={veinColor} stroke-width="0.5" d="M20 25 Q28 28 32 32" opacity="0.3" />
+		<!-- Stem -->
+		<path fill="none" stroke={veinColor} stroke-width="2" d="M20 42 L20 50" />
+	{:else if variant === 'maple'}
+		<!-- Maple leaf (iconic shape) -->
+		<path
+			fill={leafColor}
+			d="M20 2
+			   L22 10 L30 5 L26 14 L38 12 L28 20 L38 25 L26 26 L32 38 L20 30 L8 38 L14 26 L2 25 L12 20 L2 12 L14 14 L10 5 L18 10 Z"
+		/>
+		<path fill="none" stroke={veinColor} stroke-width="0.5" d="M20 10 L20 30" opacity="0.4" />
+		<path fill="none" stroke={veinColor} stroke-width="0.5" d="M20 18 L10 12" opacity="0.3" />
+		<path fill="none" stroke={veinColor} stroke-width="0.5" d="M20 18 L30 12" opacity="0.3" />
+		<!-- Stem -->
+		<path fill="none" stroke={veinColor} stroke-width="2" d="M20 30 L20 50" />
+	{:else if variant === 'oak'}
+		<!-- Oak leaf (lobed) -->
+		<path
+			fill={leafColor}
+			d="M20 3
+			   Q25 5 28 10 Q32 8 34 12 Q30 14 32 18 Q36 18 36 23 Q32 24 33 28 Q36 30 34 35 Q30 34 28 38 Q25 42 20 42
+			   Q15 42 12 38 Q10 34 6 35 Q4 30 7 28 Q8 24 4 23 Q4 18 8 18 Q10 14 6 12 Q8 8 12 10 Q15 5 20 3"
+		/>
+		<path fill="none" stroke={veinColor} stroke-width="1" d="M20 5 L20 42" opacity="0.4" />
+		<!-- Stem -->
+		<path fill="none" stroke={veinColor} stroke-width="2" d="M20 42 L20 50" />
+	{:else if variant === 'aspen'}
+		<!-- Aspen leaf (round with pointed tip) -->
+		<path
+			fill={leafColor}
+			d="M20 3 Q35 15 35 28 Q35 42 20 42 Q5 42 5 28 Q5 15 20 3"
+		/>
+		<path fill="none" stroke={veinColor} stroke-width="0.8" d="M20 5 L20 42" opacity="0.4" />
+		<path fill="none" stroke={veinColor} stroke-width="0.5" d="M20 15 Q12 20 8 28" opacity="0.3" />
+		<path fill="none" stroke={veinColor} stroke-width="0.5" d="M20 15 Q28 20 32 28" opacity="0.3" />
+		<!-- Stem -->
+		<path fill="none" stroke={veinColor} stroke-width="2" d="M20 42 L20 50" />
+	{/if}
+</svg>

package/dist/ui/components/nature/botanical/Leaf.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Season } from '../palette';
+interface Props {
+    class?: string;
+    color?: string;
+    season?: Season;
+    variant?: 'oak' | 'maple' | 'simple' | 'aspen';
+}
+declare const Leaf: import("svelte").Component<Props, {}, "">;
+type Leaf = ReturnType<typeof Leaf>;
+export default Leaf;

package/dist/ui/components/nature/botanical/LeafFalling.svelte

@@ -0,0 +1,186 @@
+<!--
+  Grove — A place to Be
+  Copyright (c) 2025 Autumn Brown
+  Licensed under AGPL-3.0
+-->
+<script lang="ts">
+	import type { Season } from '../palette';
+	import { autumn, greens, pinks, autumnReds } from '../palette';
+
+	type LeafVariant = 'simple' | 'maple' | 'cherry' | 'aspen' | 'pine';
+
+	// Animation constants
+	// Starting offset ensures leaves begin above viewport for natural entrance
+	const SPAWN_OFFSET_PX = 50;
+
+	interface Props {
+		class?: string;
+		color?: string;
+		season?: Season;
+		animate?: boolean;
+		variant?: LeafVariant;
+		/** Animation duration in seconds */
+		duration?: number;
+		/** Animation delay in seconds */
+		delay?: number;
+		/** Horizontal drift amount (positive = right, negative = left) */
+		drift?: number;
+		/** Fall distance in vh units (how far the leaf travels) */
+		fallDistance?: number;
+		/** Seed for deterministic color selection */
+		seed?: number;
+	}
+
+	let {
+		class: className = 'w-4 h-4',
+		color,
+		season = 'autumn',
+		animate = true,
+		variant = 'simple',
+		duration = 5,
+		delay = 0,
+		drift = 30,
+		fallDistance = 40,
+		seed = 0
+	}: Props = $props();
+
+	// Color palettes for different leaf types
+	const autumnColors = [autumn.rust, autumn.amber, autumn.gold, autumn.pumpkin, autumn.ember];
+	const summerColors = [greens.grove, greens.meadow, greens.spring, greens.deepGreen];
+	const cherryAutumnColors = [autumnReds.crimson, autumnReds.scarlet, autumnReds.rose];
+	const cherrySpringColors = [pinks.pink, pinks.rose, pinks.blush, pinks.palePink];
+	const aspenAutumnColors = [autumn.gold, autumn.honey, autumn.straw, autumn.amber];
+
+	// Deterministic color selection using pseudo-random distribution
+	// Uses sine-based hash to avoid visible patterns from sequential IDs
+	function pickFromArray<T>(arr: T[]): T {
+		const hash = Math.abs(Math.sin(seed * 12.9898) * 43758.5453);
+		return arr[Math.floor(hash) % arr.length];
+	}
+
+	// Get default color based on variant and season (deterministic)
+	function getDefaultColor(): string {
+		if (variant === 'cherry') {
+			// Cherry trees: pink blossoms in spring, green in summer, red/orange in autumn
+			if (season === 'spring') {
+				return pickFromArray(cherrySpringColors);
+			} else if (season === 'autumn') {
+				return pickFromArray(cherryAutumnColors);
+			} else {
+				// Summer - cherry trees have regular green leaves
+				return pickFromArray(summerColors);
+			}
+		}
+		if (variant === 'aspen') {
+			const colors = season === 'autumn' ? aspenAutumnColors : summerColors;
+			return pickFromArray(colors);
+		}
+		if (variant === 'pine') {
+			// Pine stays green year-round (evergreen)
+			return pickFromArray(summerColors);
+		}
+		// Default (simple, maple)
+		const colors = season === 'autumn' ? autumnColors : summerColors;
+		return pickFromArray(colors);
+	}
+
+	const leafColor = $derived(color ?? getDefaultColor());
+</script>
+
+<!-- Falling leaf with spin/flutter animation -->
+<svg
+	class="{className} {animate ? 'fall' : ''}"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 30 35"
+	style="--fall-duration: {duration}s; --fall-delay: {delay}s; --fall-drift: {drift}px; --fall-distance: {fallDistance}vh; --spawn-offset: {SPAWN_OFFSET_PX}px;"
+>
+	<g class={animate ? 'spin' : ''}>
+		{#if variant === 'simple'}
+			<!-- Simple oval leaf -->
+			<ellipse fill={leafColor} cx="15" cy="15" rx="12" ry="14" />
+			<path fill="none" stroke="rgba(0,0,0,0.2)" stroke-width="0.8" d="M15 3 L15 29" />
+		{:else if variant === 'maple'}
+			<!-- Maple shape -->
+			<path
+				fill={leafColor}
+				d="M15 2
+				   L16 7 L22 4 L19 10 L28 9 L21 15 L28 18 L19 19 L24 28 L15 22 L6 28 L11 19 L2 18 L9 15 L2 9 L11 10 L8 4 L14 7 Z"
+			/>
+		{:else if variant === 'cherry'}
+			<!-- Cherry blossom petal - soft rounded oval -->
+			<ellipse fill={leafColor} cx="15" cy="13" rx="10" ry="12" />
+			<!-- Subtle petal notch at tip -->
+			<path fill={leafColor} d="M15 2 Q12 6 15 8 Q18 6 15 2" />
+		{:else if variant === 'aspen'}
+			<!-- Aspen/Birch - rounded heart shape -->
+			<path
+				fill={leafColor}
+				d="M15 4 Q8 4 6 12 Q4 20 15 28 Q26 20 24 12 Q22 4 15 4"
+			/>
+			<path fill="none" stroke="rgba(0,0,0,0.15)" stroke-width="0.6" d="M15 6 L15 26" />
+		{:else if variant === 'pine'}
+			<!-- Pine needle cluster - thin elongated shapes -->
+			<path fill={leafColor} d="M15 2 L16 28 L14 28 Z" />
+			<path fill={leafColor} d="M10 4 L16 26 L14 27 Z" opacity="0.8" />
+			<path fill={leafColor} d="M20 4 L14 26 L16 27 Z" opacity="0.8" />
+		{/if}
+
+		<!-- Stem (not for pine needles) -->
+		{#if variant !== 'pine'}
+			<path fill="none" stroke="rgba(0,0,0,0.3)" stroke-width="1.5" d="M15 28 L15 35" />
+		{/if}
+	</g>
+</svg>
+
+<style>
+	@keyframes fall {
+		0% {
+			/* Start transparent to avoid "stuck in place" look for leaves with no delay */
+			transform: translateY(0) translateX(0);
+			opacity: 0;
+		}
+		5% {
+			/* Fade in quickly as falling begins */
+			opacity: 0.5;
+		}
+		10% {
+			opacity: 0.85;
+		}
+		70% {
+			opacity: 0.7;
+		}
+		90% {
+			opacity: 0.3;
+		}
+		100% {
+			transform: translateY(var(--fall-distance, 40vh)) translateX(var(--fall-drift, 30px));
+			opacity: 0;
+		}
+	}
+
+	@keyframes spin {
+		0% { transform: rotate(0deg) rotateY(0deg); }
+		25% { transform: rotate(20deg) rotateY(90deg); }
+		50% { transform: rotate(-15deg) rotateY(180deg); }
+		75% { transform: rotate(25deg) rotateY(270deg); }
+		100% { transform: rotate(0deg) rotateY(360deg); }
+	}
+
+	.fall {
+		animation: fall var(--fall-duration, 5s) ease-in-out infinite;
+		animation-delay: var(--fall-delay, 0s);
+	}
+
+	.spin {
+		transform-origin: center center;
+		animation: spin calc(var(--fall-duration, 5s) * 0.6) ease-in-out infinite;
+	}
+
+	/* Respect user's motion preferences */
+	@media (prefers-reduced-motion: reduce) {
+		.fall,
+		.spin {
+			animation: none;
+		}
+	}
+</style>