@vibesdotdev/kit 0.0.0-stage → 1.0.0-rc.4

package/dist/lib/components/webgl/FlowerOfLifeCanvas.svelte

@@ -0,0 +1,627 @@
+<!--
+	Flower of Life / Cymatic Mandala Canvas
+	Sacred geometry with mouse interaction, ripple effects, and breathing animations
+	Uses the active Vibes brand and foreground tokens
+	Supports light and dark modes with appropriate vignette/glow adjustments
+-->
+<script lang="ts">import { parseThemeColor } from "../theme/theme-contrast.js";
+let { opacity = .8, scale = 1 } = $props();
+let canvas;
+let dustCanvas;
+let container;
+let ctx = null;
+let dustCtx = null;
+let animationId;
+let dpr = 1;
+let localTime = 0;
+let lastFrameTime = 0;
+let isVisible = true;
+let observer;
+let prefersReducedMotion = false;
+// Theme detection
+let isDarkMode = true;
+// Viewport
+let width = 0;
+let height = 0;
+// Mouse tracking with spring physics
+let targetMouseX = .5;
+let targetMouseY = .5;
+let mouseX = .5;
+let mouseY = .5;
+let mouseVelX = 0;
+let mouseVelY = 0;
+const SPRING_STIFFNESS = .06;
+const SPRING_DAMPING = .85;
+let ripples = [];
+let lastRippleX = .5;
+let lastRippleY = .5;
+// Energy system
+let energy = 0;
+const ENERGY_DECAY = .985;
+const TAU = Math.PI * 2;
+let PALETTE = Array.from({ length: 6 }, () => ({
+	r: 128,
+	g: 128,
+	b: 128
+}));
+let HIGHLIGHT = {
+	r: 255,
+	g: 255,
+	b: 255
+};
+// Breathing
+const BREATH_CYCLE = 5.5;
+const BREATH_DEPTH = .03;
+// Ripple physics
+const RIPPLE_SPEED = 300;
+const RIPPLE_LIFETIME = 3;
+const RIPPLE_AMPLITUDE = 12;
+let dustParticles = [];
+let energyParticles = [];
+function getColor(index) {
+	return PALETTE[index % PALETTE.length];
+}
+function rgba(color, alpha) {
+	return `rgba(${color.r}, ${color.g}, ${color.b}, ${alpha})`;
+}
+function handleMouseMove(e) {
+	if (!container) return;
+	const rect = container.getBoundingClientRect();
+	// Calculate mouse position relative to container
+	targetMouseX = (e.clientX - rect.left) / width;
+	targetMouseY = (e.clientY - rect.top) / height;
+}
+function handleClick(e) {
+	if (!container) return;
+	const rect = container.getBoundingClientRect();
+	// Spawn ripple on click - use container-relative coordinates
+	const x = e.clientX - rect.left;
+	const y = e.clientY - rect.top;
+	ripples.push({
+		x,
+		y,
+		time: localTime,
+		strength: 1.5
+	});
+	energy = Math.min(1.2, energy + .3);
+}
+function detectTheme() {
+	const styles = getComputedStyle(container);
+	const read = (name, fallback) => {
+		const color = parseThemeColor(styles.getPropertyValue(name));
+		return color ? {
+			r: color.r * 255,
+			g: color.g * 255,
+			b: color.b * 255
+		} : fallback;
+	};
+	const brand = read("--brand", PALETTE[0]);
+	HIGHLIGHT = read("--foreground", HIGHLIGHT);
+	PALETTE = Array.from({ length: 6 }, (_, i) => {
+		const mix = i / 10;
+		return {
+			r: brand.r * (1 - mix) + HIGHLIGHT.r * mix,
+			g: brand.g * (1 - mix) + HIGHLIGHT.g * mix,
+			b: brand.b * (1 - mix) + HIGHLIGHT.b * mix
+		};
+	});
+	const modeScope = container.closest("[data-mode], .dark, .light");
+	isDarkMode = modeScope?.getAttribute("data-mode") === "dark" || modeScope?.classList.contains("dark") || !modeScope && window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+$effect(() => {
+	// Check for reduced motion preference
+	prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+	dpr = Math.min(window.devicePixelRatio || 1, 2);
+	detectTheme();
+	resizeCanvases();
+	initDustParticles();
+	initEnergyParticles();
+	observer = new IntersectionObserver((entries) => {
+		isVisible = entries[0].isIntersecting;
+		if (isVisible && !animationId) animate();
+	}, { threshold: .01 });
+	observer.observe(container);
+	// Watch for theme changes
+	const themeObserver = new MutationObserver(() => detectTheme());
+	themeObserver.observe(document.documentElement, {
+		attributes: true,
+		attributeFilter: [
+			"class",
+			"style",
+			"data-mode",
+			"data-theme"
+		]
+	});
+	const media = window.matchMedia("(prefers-color-scheme: dark)");
+	media.addEventListener("change", detectTheme);
+	document.addEventListener("load", detectTheme, true);
+	window.addEventListener("resize", handleResize);
+	window.addEventListener("mousemove", handleMouseMove);
+	window.addEventListener("click", handleClick);
+	// Defer the first heavy frame off the synchronous hydration path —
+	// a single drawMandala() can take >100ms and was blocking the auth
+	// page's first paint (CDP/renderer freezes on post-signin).
+	const startAnimation = () => {
+		if (!container) return;
+		animate();
+	};
+	// requestIdleCallback is missing in some browsers (Safari): fall back to a timer.
+	const hasIdleCallback = window.requestIdleCallback !== undefined;
+	const startHandle = hasIdleCallback ? window.requestIdleCallback(startAnimation, { timeout: 200 }) : window.setTimeout(startAnimation, 0);
+	return () => {
+		window.removeEventListener("resize", handleResize);
+		window.removeEventListener("mousemove", handleMouseMove);
+		window.removeEventListener("click", handleClick);
+		media.removeEventListener("change", detectTheme);
+		document.removeEventListener("load", detectTheme, true);
+		if (animationId) cancelAnimationFrame(animationId);
+		if (hasIdleCallback) window.cancelIdleCallback(startHandle);
+		else window.clearTimeout(startHandle);
+		observer?.disconnect();
+		themeObserver.disconnect();
+	};
+});
+function handleResize() {
+	dpr = Math.min(window.devicePixelRatio || 1, 2);
+	resizeCanvases();
+	initDustParticles();
+}
+function resizeCanvases() {
+	if (!container) return;
+	// Size to container, not window
+	const rect = container.getBoundingClientRect();
+	width = rect.width;
+	height = rect.height;
+	[canvas, dustCanvas].forEach((c) => {
+		if (!c) return;
+		c.width = width * dpr;
+		c.height = height * dpr;
+		c.style.width = `${width}px`;
+		c.style.height = `${height}px`;
+		const context = c.getContext("2d");
+		context?.scale(dpr, dpr);
+	});
+	ctx = canvas?.getContext("2d") || null;
+	dustCtx = dustCanvas?.getContext("2d") || null;
+}
+function initDustParticles() {
+	dustParticles = [];
+	const count = Math.min(120, Math.floor(width * height / 1e4));
+	for (let i = 0; i < count; i++) {
+		dustParticles.push({
+			x: Math.random() * width,
+			y: Math.random() * height,
+			z: Math.random(),
+			size: .5 + Math.random() * 1.5,
+			alpha: .1 + Math.random() * .3,
+			speed: .1 + Math.random() * .25
+		});
+	}
+}
+function initEnergyParticles() {
+	energyParticles = [];
+	// Center particles
+	for (let i = 0; i < 4; i++) {
+		energyParticles.push({
+			layer: 0,
+			circleIndex: 0,
+			angle: Math.random() * TAU,
+			speed: .3 + Math.random() * .2,
+			size: 2 + Math.random() * 2,
+			alpha: .6 + Math.random() * .4
+		});
+	}
+	// First ring (6 circles)
+	for (let c = 0; c < 6; c++) {
+		for (let i = 0; i < 2; i++) {
+			energyParticles.push({
+				layer: 1,
+				circleIndex: c,
+				angle: Math.random() * TAU,
+				speed: .2 + Math.random() * .15,
+				size: 1.5 + Math.random() * 1.5,
+				alpha: .5 + Math.random() * .3
+			});
+		}
+	}
+	// Second ring (12 circles)
+	for (let c = 0; c < 12; c++) {
+		energyParticles.push({
+			layer: 2,
+			circleIndex: c,
+			angle: Math.random() * TAU,
+			speed: .15 + Math.random() * .1,
+			size: 1 + Math.random() * 1,
+			alpha: .3 + Math.random() * .2
+		});
+	}
+}
+function updatePhysics() {
+	// Spring physics for mouse
+	const dx = targetMouseX - mouseX;
+	const dy = targetMouseY - mouseY;
+	mouseVelX += dx * SPRING_STIFFNESS;
+	mouseVelY += dy * SPRING_STIFFNESS;
+	mouseVelX *= SPRING_DAMPING;
+	mouseVelY *= SPRING_DAMPING;
+	mouseX += mouseVelX;
+	mouseY += mouseVelY;
+	// Energy decay
+	energy *= ENERGY_DECAY;
+	// Spawn ripples from mouse movement
+	const mouseDelta = Math.sqrt(Math.pow((mouseX - lastRippleX) * width, 2) + Math.pow((mouseY - lastRippleY) * height, 2));
+	const spawnThreshold = 15 + Math.sqrt(mouseVelX * mouseVelX + mouseVelY * mouseVelY) * 100;
+	if (mouseDelta > spawnThreshold) {
+		const rippleStrength = Math.min(1, mouseDelta / 50);
+		ripples.push({
+			x: mouseX * width,
+			y: mouseY * height,
+			time: localTime,
+			strength: rippleStrength
+		});
+		energy = Math.min(1.2, energy + .1 * rippleStrength);
+		lastRippleX = mouseX;
+		lastRippleY = mouseY;
+	}
+	// Clean old ripples
+	ripples = ripples.filter((r) => localTime - r.time < RIPPLE_LIFETIME);
+}
+function getDisplacement(x, y, depth) {
+	const cx = width / 2;
+	const cy = height / 2;
+	let displacement = 0;
+	// Ripple displacement
+	for (const ripple of ripples) {
+		const dist = Math.sqrt((x - ripple.x) ** 2 + (y - ripple.y) ** 2);
+		const age = localTime - ripple.time;
+		const rippleRadius = age * RIPPLE_SPEED;
+		const rippleWidth = 80 + age * 30;
+		const distFromRing = Math.abs(dist - rippleRadius);
+		if (distFromRing < rippleWidth) {
+			const ringFalloff = 1 - distFromRing / rippleWidth;
+			const radiusDecay = 1 / Math.sqrt(1 + rippleRadius / 80);
+			const ageFalloff = Math.exp(-age * .8);
+			const wave = Math.sin(dist * .05 - age * 10);
+			displacement += wave * ringFalloff * radiusDecay * ageFalloff * ripple.strength * RIPPLE_AMPLITUDE;
+		}
+	}
+	// Ambient breathing wave - propagates outward from center
+	const distFromCenter = Math.sqrt((x - cx) ** 2 + (y - cy) ** 2);
+	const breathSpeed = .8 - depth * .1;
+	const ambientWave = Math.sin(distFromCenter * .008 - localTime * breathSpeed);
+	const ambientIntensity = Math.max(.25, 1 - energy * .5);
+	const depthFactor = Math.max(.4, 1 - depth * .2);
+	displacement += ambientWave * ambientIntensity * 3.5 * depthFactor;
+	return displacement;
+}
+function getBreath(time) {
+	const phase = time % BREATH_CYCLE / BREATH_CYCLE;
+	const inhaleRatio = .35;
+	if (phase < inhaleRatio) {
+		const t = phase / inhaleRatio;
+		return Math.sin(t * Math.PI * .5);
+	} else {
+		const t = (phase - inhaleRatio) / (1 - inhaleRatio);
+		return Math.cos(t * Math.PI * .5);
+	}
+}
+function getCircleCenter(cx, cy, baseRadius, layer, index) {
+	switch (layer) {
+		case 0: return {
+			x: cx,
+			y: cy
+		};
+		case 1: {
+			const angle = index / 6 * TAU;
+			return {
+				x: cx + Math.cos(angle) * baseRadius,
+				y: cy + Math.sin(angle) * baseRadius
+			};
+		}
+		case 2: {
+			const angle = index / 12 * TAU;
+			const dist = baseRadius * Math.sqrt(3);
+			return {
+				x: cx + Math.cos(angle) * dist,
+				y: cy + Math.sin(angle) * dist
+			};
+		}
+		case 3: {
+			const angle = index / 18 * TAU;
+			return {
+				x: cx + Math.cos(angle) * baseRadius * 2,
+				y: cy + Math.sin(angle) * baseRadius * 2
+			};
+		}
+		default: return {
+			x: cx,
+			y: cy
+		};
+	}
+}
+function drawSacredCircle(centerX, centerY, radius, alpha, glowIntensity, depth, colorIndex) {
+	if (!ctx) return;
+	const breath = getBreath(localTime);
+	const breathRadius = radius * (1 + breath * BREATH_DEPTH * (1 - depth * .15));
+	const color = getColor(colorIndex);
+	const shimmer = Math.sin(localTime * 1.5 + colorIndex * .3) * .08;
+	const baseAlpha = alpha * (1 + shimmer);
+	// Sample displacement around the circle for wobbly effect
+	const segments = 32;
+	ctx.beginPath();
+	for (let i = 0; i <= segments; i++) {
+		const angle = i / segments * TAU;
+		const baseX = centerX + Math.cos(angle) * breathRadius;
+		const baseY = centerY + Math.sin(angle) * breathRadius;
+		const displacement = getDisplacement(baseX, baseY, depth);
+		const displacedRadius = breathRadius + displacement;
+		const x = centerX + Math.cos(angle) * displacedRadius;
+		const y = centerY + Math.sin(angle) * displacedRadius;
+		if (i === 0) ctx.moveTo(x, y);
+		else ctx.lineTo(x, y);
+	}
+	ctx.closePath();
+	// Outer glow layers
+	ctx.strokeStyle = rgba(color, baseAlpha * .06 * glowIntensity);
+	ctx.lineWidth = 14;
+	ctx.stroke();
+	ctx.strokeStyle = rgba(color, baseAlpha * .1 * glowIntensity);
+	ctx.lineWidth = 8;
+	ctx.stroke();
+	ctx.strokeStyle = rgba(color, baseAlpha * .2 * glowIntensity);
+	ctx.lineWidth = 4;
+	ctx.stroke();
+	// Core with energy influence
+	const energyShift = energy * .15;
+	ctx.strokeStyle = rgba(color, baseAlpha * (.45 + energyShift));
+	ctx.lineWidth = 2;
+	ctx.stroke();
+	// Sharp inner line
+	ctx.strokeStyle = rgba(color, baseAlpha * .8);
+	ctx.lineWidth = 1;
+	ctx.stroke();
+	// Highlight
+	ctx.strokeStyle = rgba(HIGHLIGHT, baseAlpha * .4 * (1 + breath * .3));
+	ctx.lineWidth = .5;
+	ctx.stroke();
+}
+function drawEnergyParticles(cx, cy, baseRadius, rotation) {
+	if (!ctx) return;
+	const breath = getBreath(localTime);
+	for (const particle of energyParticles) {
+		particle.angle += particle.speed * .016 * (1 + energy * .5);
+		if (particle.angle > TAU) particle.angle -= TAU;
+		const center = getCircleCenter(cx, cy, baseRadius, particle.layer, particle.circleIndex);
+		const circleRadius = baseRadius;
+		const displacement = getDisplacement(center.x + Math.cos(particle.angle) * circleRadius, center.y + Math.sin(particle.angle) * circleRadius, particle.layer);
+		const displacedRadius = circleRadius + displacement;
+		const px = center.x + Math.cos(particle.angle + rotation) * displacedRadius;
+		const py = center.y + Math.sin(particle.angle + rotation) * displacedRadius;
+		const pulse = 1 + breath * .15 + Math.sin(localTime * 2 + particle.angle) * .1;
+		const size = particle.size * pulse;
+		const dynamicAlpha = particle.alpha * (1 + energy * .3);
+		// Outer glow
+		const gradient = ctx.createRadialGradient(px, py, 0, px, py, size * 5);
+		gradient.addColorStop(0, rgba(HIGHLIGHT, dynamicAlpha));
+		gradient.addColorStop(.25, rgba(PALETTE[2], dynamicAlpha * .7));
+		gradient.addColorStop(.5, rgba(PALETTE[0], dynamicAlpha * .25));
+		gradient.addColorStop(1, "rgba(16, 185, 129, 0)");
+		ctx.beginPath();
+		ctx.arc(px, py, size * 5, 0, TAU);
+		ctx.fillStyle = gradient;
+		ctx.fill();
+		// Hot core
+		ctx.beginPath();
+		ctx.arc(px, py, size * .6, 0, TAU);
+		ctx.fillStyle = rgba(HIGHLIGHT, dynamicAlpha * 1.1);
+		ctx.fill();
+	}
+}
+function animate(timestamp = 0) {
+	if (!isVisible) {
+		animationId = 0;
+		return;
+	}
+	const dt = lastFrameTime ? Math.min((timestamp - lastFrameTime) / 1e3, .05) : .016;
+	lastFrameTime = timestamp;
+	localTime += dt;
+	updatePhysics();
+	drawDustLayer();
+	drawMandala();
+	// Respect reduced motion preference - draw once then stop
+	if (prefersReducedMotion) {
+		animationId = 0;
+		return;
+	}
+	animationId = requestAnimationFrame(animate);
+}
+function drawDustLayer() {
+	if (!dustCtx) return;
+	const mx = mouseX * width;
+	const my = mouseY * height;
+	const lightRadius = Math.min(width, height) * .25;
+	dustCtx.clearRect(0, 0, width, height);
+	for (const p of dustParticles) {
+		const parallax = .2 + p.z * .8;
+		p.y += p.speed * parallax * (1 + energy * .3);
+		p.x += (mouseX - .5) * p.z * .4;
+		p.x += Math.sin(localTime * .5 + p.x * .01) * .15 * p.z;
+		if (p.y > height) {
+			p.y = -10;
+			p.x = Math.random() * width;
+		}
+		if (p.x < 0) p.x = width;
+		if (p.x > width) p.x = 0;
+		const dx = p.x - mx;
+		const dy = p.y - my;
+		const dist = Math.sqrt(dx * dx + dy * dy);
+		const proximity = Math.max(0, 1 - dist / lightRadius) ** 2;
+		const illumination = proximity * (.5 + p.z * .5);
+		const size = p.size * (.5 + p.z * .5) * (1 + illumination * .8);
+		const twinkle = .8 + Math.sin(localTime * 3 + p.x * .01) * .2;
+		const alpha = p.alpha * (.3 + p.z * .7) * twinkle * (1 + illumination * 2.5);
+		const gradient = dustCtx.createRadialGradient(p.x, p.y, 0, p.x, p.y, size * 3);
+		if (illumination > .1) {
+			gradient.addColorStop(0, `rgba(255, 255, 250, ${alpha * .95})`);
+			gradient.addColorStop(.2, `rgba(167, 243, 208, ${alpha * .7})`);
+			gradient.addColorStop(.5, `rgba(52, 211, 153, ${alpha * .3})`);
+			gradient.addColorStop(1, "rgba(16, 185, 129, 0)");
+		} else {
+			gradient.addColorStop(0, `rgba(52, 211, 153, ${alpha * .8})`);
+			gradient.addColorStop(.4, `rgba(16, 185, 129, ${alpha * .3})`);
+			gradient.addColorStop(1, "rgba(16, 185, 129, 0)");
+		}
+		dustCtx.beginPath();
+		dustCtx.arc(p.x, p.y, size * 3, 0, TAU);
+		dustCtx.fillStyle = gradient;
+		dustCtx.fill();
+	}
+	// Mouse caustic glow
+	const causticIntensity = .08 + energy * .04;
+	const caustic = dustCtx.createRadialGradient(mx, my, 0, mx, my, lightRadius * 1.5);
+	caustic.addColorStop(0, `rgba(255, 250, 245, ${causticIntensity * .6})`);
+	caustic.addColorStop(.15, `rgba(236, 253, 245, ${causticIntensity * .4})`);
+	caustic.addColorStop(.4, `rgba(52, 211, 153, ${causticIntensity * .15})`);
+	caustic.addColorStop(.7, `rgba(16, 185, 129, ${causticIntensity * .05})`);
+	caustic.addColorStop(1, "rgba(16, 185, 129, 0)");
+	dustCtx.fillStyle = caustic;
+	dustCtx.beginPath();
+	dustCtx.arc(mx, my, lightRadius * 1.5, 0, TAU);
+	dustCtx.fill();
+	// Ripple rings around mouse
+	const ripplePhase = localTime * 2;
+	for (let ring = 0; ring < 3; ring++) {
+		const ringRadius = lightRadius * (.3 + ring * .25) + Math.sin(ripplePhase + ring * 1.5) * 8;
+		const ringAlpha = causticIntensity * .2 * (1 - ring * .3);
+		dustCtx.beginPath();
+		dustCtx.arc(mx, my, ringRadius, 0, TAU);
+		dustCtx.strokeStyle = `rgba(236, 253, 245, ${ringAlpha})`;
+		dustCtx.lineWidth = 2 - ring * .5;
+		dustCtx.stroke();
+	}
+}
+function drawMandala() {
+	if (!ctx) return;
+	const cx = width / 2;
+	const cy = height / 2;
+	// Scale to fill ~35% of min dimension, adjusted by scale prop
+	const baseRadius = Math.min(width, height) * .175 * scale;
+	const rotation = localTime * .012;
+	ctx.clearRect(0, 0, width, height);
+	ctx.save();
+	ctx.translate(cx, cy);
+	ctx.rotate(rotation);
+	ctx.translate(-cx, -cy);
+	// Layer 3: Outermost (18 circles)
+	for (let i = 0; i < 18; i++) {
+		const angle = i / 18 * TAU;
+		const x = cx + Math.cos(angle) * baseRadius * 2;
+		const y = cy + Math.sin(angle) * baseRadius * 2;
+		drawSacredCircle(x, y, baseRadius, .18, .35, 3, i);
+	}
+	// Layer 2: Second ring (12 circles)
+	for (let i = 0; i < 12; i++) {
+		const angle = i / 12 * TAU;
+		const dist = baseRadius * Math.sqrt(3);
+		const x = cx + Math.cos(angle) * dist;
+		const y = cy + Math.sin(angle) * dist;
+		drawSacredCircle(x, y, baseRadius, .3, .55, 2, i + 18);
+	}
+	// Layer 1: First ring (6 circles)
+	for (let i = 0; i < 6; i++) {
+		const angle = i / 6 * TAU;
+		const x = cx + Math.cos(angle) * baseRadius;
+		const y = cy + Math.sin(angle) * baseRadius;
+		drawSacredCircle(x, y, baseRadius, .55, .8, 1, i + 30);
+	}
+	// Center
+	drawSacredCircle(cx, cy, baseRadius, .8, 1, 0, 0);
+	// Inner seed pattern
+	const seedRadius = baseRadius * .5;
+	for (let i = 0; i < 6; i++) {
+		const angle = i / 6 * TAU + TAU / 12;
+		const x = cx + Math.cos(angle) * seedRadius;
+		const y = cy + Math.sin(angle) * seedRadius;
+		drawSacredCircle(x, y, seedRadius, .6, .9, 0, i + 36);
+	}
+	drawSacredCircle(cx, cy, seedRadius, .75, 1, 0, 42);
+	// Energy particles
+	drawEnergyParticles(cx, cy, baseRadius, rotation);
+	ctx.restore();
+	// Central bloom
+	const breath = getBreath(localTime);
+	const bloomSize = baseRadius * 2 * (1 + breath * .05);
+	const bloomIntensity = .18 + breath * .08 + energy * .1;
+	const bloom = ctx.createRadialGradient(cx, cy, 0, cx, cy, bloomSize);
+	bloom.addColorStop(0, rgba(PALETTE[2], bloomIntensity * 1.2));
+	bloom.addColorStop(.15, rgba(PALETTE[1], bloomIntensity * .6));
+	bloom.addColorStop(.4, rgba(PALETTE[0], bloomIntensity * .2));
+	bloom.addColorStop(.7, rgba(PALETTE[0], bloomIntensity * .05));
+	bloom.addColorStop(1, "rgba(16, 185, 129, 0)");
+	ctx.fillStyle = bloom;
+	ctx.beginPath();
+	ctx.arc(cx, cy, bloomSize, 0, TAU);
+	ctx.fill();
+	// Outer halo
+	const haloSize = baseRadius * 3.5;
+	const halo = ctx.createRadialGradient(cx, cy, baseRadius * 2, cx, cy, haloSize);
+	halo.addColorStop(0, "rgba(16, 185, 129, 0)");
+	halo.addColorStop(.3, `rgba(16, 185, 129, ${.02 + breath * .01})`);
+	halo.addColorStop(.6, `rgba(16, 185, 129, ${.01})`);
+	halo.addColorStop(1, "rgba(16, 185, 129, 0)");
+	ctx.fillStyle = halo;
+	ctx.beginPath();
+	ctx.arc(cx, cy, haloSize, 0, TAU);
+	ctx.fill();
+	// Vignette - theme aware
+	// Dark mode: fade to black for depth
+	// Light mode: subtle fade to reduce edge harshness, much softer
+	const vignette = ctx.createRadialGradient(cx, cy, baseRadius * 2.5, cx, cy, Math.max(width, height) * .75);
+	if (isDarkMode) {
+		vignette.addColorStop(0, "rgba(0, 0, 0, 0)");
+		vignette.addColorStop(.4, "rgba(0, 0, 0, 0.08)");
+		vignette.addColorStop(.7, "rgba(0, 0, 0, 0.2)");
+		vignette.addColorStop(1, "rgba(0, 0, 0, 0.35)");
+	} else {
+		// Light mode: use a subtle theme-tinted fade
+		vignette.addColorStop(0, "rgba(16, 185, 129, 0)");
+		vignette.addColorStop(.5, "rgba(16, 185, 129, 0.02)");
+		vignette.addColorStop(.8, "rgba(16, 185, 129, 0.05)");
+		vignette.addColorStop(1, "rgba(16, 185, 129, 0.08)");
+	}
+	ctx.fillStyle = vignette;
+	ctx.fillRect(0, 0, width, height);
+}
+</script>
+
+<div bind:this={container} class="flower-of-life-container" style:opacity>
+	<canvas bind:this={dustCanvas} class="canvas dust-layer"></canvas>
+	<canvas bind:this={canvas} class="canvas geometry-layer"></canvas>
+</div>
+
+<style>
+	.flower-of-life-container {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		pointer-events: auto; /* Enable for click ripples */
+	}
+
+	.canvas {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		pointer-events: none;
+	}
+
+	.dust-layer {
+		z-index: 0;
+		opacity: 0.7;
+	}
+
+	.geometry-layer {
+		z-index: 1;
+	}
+</style>

package/dist/lib/components/webgl/FlowerOfLifeCanvas.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    /** Opacity of the canvas */
+    opacity?: number;
+    /** Scale factor for the geometry (1 = ~35% of viewport) */
+    scale?: number;
+}
+declare const FlowerOfLifeCanvas: import("svelte").Component<Props, {}, "">;
+type FlowerOfLifeCanvas = ReturnType<typeof FlowerOfLifeCanvas>;
+export default FlowerOfLifeCanvas;