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

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

@@ -0,0 +1,481 @@
+<!--
+	Node Network Canvas
+	A breathing mesh of connected nodes with traveling golden paths
+	Themed for vibes.dev homepage
+-->
+<script lang="ts">import { animationStore } from "../base/animation-store.svelte";
+let { opacity = .7, spacing = 100, showPaths = true } = $props();
+// Theme detection
+let isDarkMode = true;
+let canvas;
+let container;
+let ctx = null;
+let animationId;
+let dpr = 1;
+let localTime = 0;
+let lastFrameTime = 0;
+let isVisible = true;
+let observer;
+let prefersReducedMotion = false;
+const TAU = Math.PI * 2;
+// Node configuration
+const NODE_SIZE = 3;
+const MARGIN = 40;
+// Breathing
+const BREATH_CYCLE = 5.2;
+const BREATH_DEPTH = .18;
+// Golden paths
+const MAX_PATHS = 6;
+const PATH_SPAWN_INTERVAL = 2.5;
+const SEGMENT_DURATION = .6;
+const MIN_PATH_LENGTH = 3;
+const MAX_PATH_LENGTH = 8;
+let nodes = [];
+let edges = [];
+let nodeMap = new Map();
+let adjacency = new Map();
+let meshInit = false;
+let paths = [];
+let lastSpawn = 0;
+function easeInOutCubic(t) {
+	return t < .5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
+}
+function getBreath(time, offset = 0) {
+	const t = (time + offset) % BREATH_CYCLE / BREATH_CYCLE;
+	return Math.sin(t * TAU) * .5 + .5;
+}
+function getResponsiveSpacing() {
+	const w = window.innerWidth;
+	if (w < 640) return Math.max(60, spacing * .6);
+	if (w < 1024) return Math.max(80, spacing * .8);
+	return spacing;
+}
+function getResponsiveMouseRadius() {
+	const w = window.innerWidth;
+	if (w < 640) return 80;
+	if (w < 1024) return 120;
+	return 150;
+}
+function detectTheme() {
+	isDarkMode = document.documentElement.classList.contains("dark");
+}
+// Theme-aware colors
+function getThemeColors() {
+	return {
+		// Base mesh colors - emerald family
+		edgeBase: isDarkMode ? "rgba(16, 185, 129," : "rgba(5, 150, 105,",
+		nodeGlow: isDarkMode ? "rgba(52, 211, 153," : "rgba(16, 185, 129,",
+		nodeCore: isDarkMode ? "rgba(110, 231, 183," : "rgba(52, 211, 153,",
+		// Vignette
+		vignetteColor: isDarkMode ? "0, 0, 0" : "255, 255, 255"
+	};
+}
+function drawVignette(w, h) {
+	if (!ctx) return;
+	const colors = getThemeColors();
+	const cx = w / 2;
+	const cy = h / 2;
+	const radius = Math.max(w, h) * .8;
+	const gradient = ctx.createRadialGradient(cx, cy, radius * .4, cx, cy, radius);
+	gradient.addColorStop(0, `rgba(${colors.vignetteColor}, 0)`);
+	gradient.addColorStop(.7, `rgba(${colors.vignetteColor}, 0)`);
+	gradient.addColorStop(1, `rgba(${colors.vignetteColor}, 0.4)`);
+	ctx.fillStyle = gradient;
+	ctx.fillRect(0, 0, w, h);
+}
+function initMesh() {
+	nodes = [];
+	edges = [];
+	nodeMap.clear();
+	adjacency.clear();
+	paths = [];
+	lastSpawn = 0;
+	const w = window.innerWidth;
+	const h = window.innerHeight;
+	const responsiveSpacing = getResponsiveSpacing();
+	const connectionDist = responsiveSpacing * 1.5;
+	const cols = Math.floor((w - MARGIN * 2) / responsiveSpacing);
+	const rows = Math.floor((h - MARGIN * 2) / responsiveSpacing);
+	const startX = (w - (cols - 1) * responsiveSpacing) / 2;
+	const startY = (h - (rows - 1) * responsiveSpacing) / 2;
+	let id = 0;
+	for (let row = 0; row < rows; row++) {
+		for (let col = 0; col < cols; col++) {
+			const jitterX = (Math.random() - .5) * responsiveSpacing * .25;
+			const jitterY = (Math.random() - .5) * responsiveSpacing * .25;
+			const restX = startX + col * responsiveSpacing + jitterX;
+			const restY = startY + row * responsiveSpacing + jitterY;
+			const node = {
+				id,
+				restX,
+				restY,
+				x: restX,
+				y: restY,
+				vx: 0,
+				vy: 0,
+				phase: Math.random() * TAU
+			};
+			nodes.push(node);
+			nodeMap.set(id, node);
+			adjacency.set(id, []);
+			id++;
+		}
+	}
+	// Create edges
+	for (let i = 0; i < nodes.length; i++) {
+		for (let j = i + 1; j < nodes.length; j++) {
+			const a = nodes[i];
+			const b = nodes[j];
+			const dx = b.restX - a.restX;
+			const dy = b.restY - a.restY;
+			const dist = Math.sqrt(dx * dx + dy * dy);
+			if (dist < connectionDist) {
+				edges.push({
+					from: a.id,
+					to: b.id
+				});
+				adjacency.get(a.id).push(b.id);
+				adjacency.get(b.id).push(a.id);
+			}
+		}
+	}
+	meshInit = true;
+}
+function updatePhysics() {
+	const mx = animationStore.mouseX * animationStore.innerWidth;
+	const my = animationStore.mouseY * animationStore.innerHeight;
+	const mouseRadius = getResponsiveMouseRadius();
+	for (const node of nodes) {
+		// Mouse influence
+		const dx = node.x - mx;
+		const dy = node.y - my;
+		const dist = Math.sqrt(dx * dx + dy * dy);
+		let targetX = node.restX;
+		let targetY = node.restY;
+		if (dist < mouseRadius) {
+			const force = (1 - dist / mouseRadius) * 15;
+			targetX += dx / dist * force;
+			targetY += dy / dist * force;
+		}
+		// Subtle ambient drift
+		const drift = Math.sin(localTime * .5 + node.phase) * 3;
+		targetX += drift;
+		targetY += Math.cos(localTime * .3 + node.phase) * 2;
+		// Spring physics
+		const forceX = (targetX - node.x) * .03;
+		const forceY = (targetY - node.y) * .03;
+		node.vx += forceX;
+		node.vy += forceY;
+		node.vx *= .95;
+		node.vy *= .95;
+		node.x += node.vx;
+		node.y += node.vy;
+	}
+}
+function buildPath(startId) {
+	const length = MIN_PATH_LENGTH + Math.floor(Math.random() * (MAX_PATH_LENGTH - MIN_PATH_LENGTH + 1));
+	const path = [startId];
+	const visited = new Set([startId]);
+	let current = startId;
+	for (let i = 1; i < length; i++) {
+		const neighbors = adjacency.get(current) || [];
+		const unvisited = neighbors.filter((id) => !visited.has(id));
+		if (unvisited.length === 0) break;
+		const next = unvisited[Math.floor(Math.random() * unvisited.length)];
+		path.push(next);
+		visited.add(next);
+		current = next;
+	}
+	return path.length >= MIN_PATH_LENGTH ? path : null;
+}
+function updatePaths() {
+	if (!showPaths) return;
+	const dt = .016;
+	const speed = dt / SEGMENT_DURATION;
+	// Spawn new paths
+	const activeCount = paths.filter((p) => p.active).length;
+	if (activeCount < MAX_PATHS && localTime - lastSpawn > PATH_SPAWN_INTERVAL && nodes.length > 0) {
+		const startNode = nodes[Math.floor(Math.random() * nodes.length)];
+		const path = buildPath(startNode.id);
+		if (path) {
+			paths.push({
+				waypoints: path,
+				currentSegment: 0,
+				segmentProgress: 0,
+				totalSegments: path.length * 2 - 1,
+				active: true
+			});
+			lastSpawn = localTime;
+		}
+	}
+	// Update paths
+	for (const path of paths) {
+		if (!path.active) continue;
+		path.segmentProgress += speed;
+		if (path.segmentProgress >= 1) {
+			path.segmentProgress = 0;
+			path.currentSegment++;
+			if (path.currentSegment >= path.totalSegments) {
+				path.active = false;
+			}
+		}
+	}
+	// Cleanup old paths
+	paths = paths.filter((p) => p.active || p.currentSegment < p.totalSegments);
+}
+function getNodeGold(nodeId) {
+	let intensity = 0;
+	for (const path of paths) {
+		if (!path.active) continue;
+		const wpIdx = Math.floor(path.currentSegment / 2);
+		const isEdge = path.currentSegment % 2 === 1;
+		if (!isEdge && path.waypoints[wpIdx] === nodeId) {
+			const p = path.segmentProgress;
+			intensity = Math.max(intensity, p < .2 ? p / .2 : p > .8 ? (1 - p) / .2 : 1);
+		}
+		// Trail
+		for (let i = 0; i < wpIdx; i++) {
+			if (path.waypoints[i] === nodeId) {
+				const age = wpIdx - i + (isEdge ? .5 : 0) + path.segmentProgress;
+				const trail = Math.max(0, 1 - age * .2);
+				intensity = Math.max(intensity, trail * .5);
+			}
+		}
+	}
+	return intensity;
+}
+function getEdgeGold(fromId, toId) {
+	let result = {
+		intensity: 0,
+		progress: 0,
+		dir: 1
+	};
+	for (const path of paths) {
+		if (!path.active) continue;
+		const wpIdx = Math.floor(path.currentSegment / 2);
+		const isEdge = path.currentSegment % 2 === 1;
+		if (isEdge && wpIdx < path.waypoints.length - 1) {
+			const pFrom = path.waypoints[wpIdx];
+			const pTo = path.waypoints[wpIdx + 1];
+			if (pFrom === fromId && pTo === toId || pFrom === toId && pTo === fromId) {
+				return {
+					intensity: 1,
+					progress: easeInOutCubic(path.segmentProgress),
+					dir: pFrom === fromId ? 1 : -1
+				};
+			}
+		}
+		// Trail
+		for (let i = 0; i < wpIdx; i++) {
+			if (i < path.waypoints.length - 1) {
+				const pFrom = path.waypoints[i];
+				const pTo = path.waypoints[i + 1];
+				if (pFrom === fromId && pTo === toId || pFrom === toId && pTo === fromId) {
+					const age = wpIdx - i - 1 + (isEdge ? .5 : 0) + path.segmentProgress;
+					const trail = Math.max(0, 1 - age * .2);
+					if (trail * .4 > result.intensity) {
+						result = {
+							intensity: trail * .4,
+							progress: 1,
+							dir: pFrom === fromId ? 1 : -1
+						};
+					}
+				}
+			}
+		}
+	}
+	return result;
+}
+$effect(() => {
+	// Check for reduced motion preference
+	prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+	animationStore.init();
+	detectTheme();
+	dpr = Math.min(window.devicePixelRatio || 1, 2);
+	resizeCanvas();
+	initMesh();
+	// Watch for theme changes
+	const themeObserver = new MutationObserver(detectTheme);
+	themeObserver.observe(document.documentElement, {
+		attributes: true,
+		attributeFilter: ["class"]
+	});
+	observer = new IntersectionObserver((entries) => {
+		isVisible = entries[0].isIntersecting;
+		if (isVisible && !animationId) animate();
+	}, { threshold: .01 });
+	observer.observe(container);
+	animate();
+	const handleResize = () => {
+		dpr = Math.min(window.devicePixelRatio || 1, 2);
+		resizeCanvas();
+		initMesh();
+	};
+	window.addEventListener("resize", handleResize);
+	return () => {
+		window.removeEventListener("resize", handleResize);
+		if (animationId) cancelAnimationFrame(animationId);
+		observer?.disconnect();
+		themeObserver?.disconnect();
+	};
+});
+function resizeCanvas() {
+	const w = window.innerWidth;
+	const h = window.innerHeight;
+	if (canvas) {
+		canvas.width = w * dpr;
+		canvas.height = h * dpr;
+		canvas.style.width = `${w}px`;
+		canvas.style.height = `${h}px`;
+		ctx = canvas.getContext("2d");
+		ctx?.scale(dpr, dpr);
+	}
+}
+function animate(timestamp = 0) {
+	if (!isVisible) {
+		animationId = 0;
+		return;
+	}
+	const dt = lastFrameTime ? Math.min((timestamp - lastFrameTime) / 1e3, .05) : .016;
+	lastFrameTime = timestamp;
+	localTime += dt;
+	draw();
+	// Respect reduced motion preference - draw once then stop
+	if (prefersReducedMotion) {
+		animationId = 0;
+		return;
+	}
+	animationId = requestAnimationFrame(animate);
+}
+function draw() {
+	if (!ctx || !meshInit) return;
+	const w = animationStore.innerWidth;
+	const h = animationStore.innerHeight;
+	const colors = getThemeColors();
+	updatePhysics();
+	updatePaths();
+	ctx.clearRect(0, 0, w, h);
+	const globalBreath = getBreath(localTime);
+	// Draw edges
+	for (const edge of edges) {
+		const from = nodeMap.get(edge.from);
+		const to = nodeMap.get(edge.to);
+		const gold = getEdgeGold(edge.from, edge.to);
+		// Base edge
+		const baseAlpha = .15 + globalBreath * .08;
+		ctx.beginPath();
+		ctx.moveTo(from.x, from.y);
+		ctx.lineTo(to.x, to.y);
+		ctx.strokeStyle = `${colors.edgeBase} ${baseAlpha})`;
+		ctx.lineWidth = 1;
+		ctx.stroke();
+		// Golden overlay
+		if (gold.intensity > 0) {
+			const start = gold.dir === 1 ? from : to;
+			const end = gold.dir === 1 ? to : from;
+			if (gold.progress < 1) {
+				const midX = start.x + (end.x - start.x) * gold.progress;
+				const midY = start.y + (end.y - start.y) * gold.progress;
+				// Glow
+				ctx.beginPath();
+				ctx.moveTo(start.x, start.y);
+				ctx.lineTo(midX, midY);
+				ctx.strokeStyle = `rgba(251, 191, 36, ${.3 * gold.intensity})`;
+				ctx.lineWidth = 5;
+				ctx.stroke();
+				// Core
+				ctx.beginPath();
+				ctx.moveTo(start.x, start.y);
+				ctx.lineTo(midX, midY);
+				ctx.strokeStyle = `rgba(255, 235, 150, ${.9 * gold.intensity})`;
+				ctx.lineWidth = 2;
+				ctx.stroke();
+				// Particle at tip
+				const gradient = ctx.createRadialGradient(midX, midY, 0, midX, midY, 12);
+				gradient.addColorStop(0, `rgba(255, 253, 245, ${.9 * gold.intensity})`);
+				gradient.addColorStop(.3, `rgba(251, 191, 36, ${.5 * gold.intensity})`);
+				gradient.addColorStop(1, "rgba(251, 191, 36, 0)");
+				ctx.beginPath();
+				ctx.arc(midX, midY, 12, 0, TAU);
+				ctx.fillStyle = gradient;
+				ctx.fill();
+			} else {
+				// Trail
+				ctx.beginPath();
+				ctx.moveTo(start.x, start.y);
+				ctx.lineTo(end.x, end.y);
+				ctx.strokeStyle = `rgba(251, 191, 36, ${.15 * gold.intensity})`;
+				ctx.lineWidth = 3;
+				ctx.stroke();
+			}
+		}
+	}
+	// Draw nodes
+	for (const node of nodes) {
+		const gold = getNodeGold(node.id);
+		const breath = getBreath(localTime, node.phase * .15);
+		const scale = 1 + (breath - .5) * BREATH_DEPTH;
+		const size = Math.max(1, NODE_SIZE * scale);
+		// Glow
+		const glowSize = size * (3 + gold * 2);
+		const gradient = ctx.createRadialGradient(node.x, node.y, 0, node.x, node.y, glowSize);
+		if (gold > 0) {
+			gradient.addColorStop(0, `rgba(255, 248, 220, ${.7 * gold})`);
+			gradient.addColorStop(.3, `rgba(251, 191, 36, ${.4 * gold})`);
+			gradient.addColorStop(.6, `rgba(16, 185, 129, ${.1})`);
+			gradient.addColorStop(1, "rgba(16, 185, 129, 0)");
+		} else {
+			const baseAlpha = .4 + breath * .2;
+			gradient.addColorStop(0, `${colors.nodeGlow} ${baseAlpha})`);
+			gradient.addColorStop(.5, `${colors.edgeBase} ${baseAlpha * .4})`);
+			gradient.addColorStop(1, `${colors.edgeBase} 0)`);
+		}
+		ctx.beginPath();
+		ctx.arc(node.x, node.y, glowSize, 0, TAU);
+		ctx.fillStyle = gradient;
+		ctx.fill();
+		// Core
+		const coreSize = size * (1 + gold * .3);
+		ctx.beginPath();
+		ctx.arc(node.x, node.y, coreSize, 0, TAU);
+		if (gold > 0) {
+			const coreGrad = ctx.createRadialGradient(node.x, node.y, 0, node.x, node.y, coreSize);
+			coreGrad.addColorStop(0, `rgba(255, 253, 240, 0.95)`);
+			coreGrad.addColorStop(.5, `rgba(251, 191, 36, 0.85)`);
+			coreGrad.addColorStop(1, `rgba(245, 158, 11, 0.7)`);
+			ctx.fillStyle = coreGrad;
+		} else {
+			const coreAlpha = .55 + breath * .25;
+			const coreGrad = ctx.createRadialGradient(node.x, node.y, 0, node.x, node.y, coreSize);
+			coreGrad.addColorStop(0, `${colors.nodeCore} ${coreAlpha + .15})`);
+			coreGrad.addColorStop(.6, `${colors.nodeGlow} ${coreAlpha})`);
+			coreGrad.addColorStop(1, `${colors.edgeBase} ${coreAlpha * .8})`);
+			ctx.fillStyle = coreGrad;
+		}
+		ctx.fill();
+	}
+	// Draw vignette overlay
+	drawVignette(w, h);
+}
+</script>
+
+<div bind:this={container} class="node-network-container" style:opacity>
+	<canvas bind:this={canvas} class="node-network-canvas"></canvas>
+</div>
+
+<style>
+	.node-network-container {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		pointer-events: none;
+	}
+
+	.node-network-canvas {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+	}
+</style>

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

@@ -0,0 +1,10 @@
+interface Props {
+    opacity?: number;
+    /** Node spacing in pixels */
+    spacing?: number;
+    /** Show golden traveling paths */
+    showPaths?: boolean;
+}
+declare const NodeNetworkCanvas: import("svelte").Component<Props, {}, "">;
+type NodeNetworkCanvas = ReturnType<typeof NodeNetworkCanvas>;
+export default NodeNetworkCanvas;