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

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

@@ -0,0 +1,253 @@
+<!--
+	Orbit Canvas
+	Orbital rings at different scales representing different user journeys
+	Each orbit has its own rhythm, dots traveling along paths
+	Suggests diverse paths converging on the same platform
+	
+	@signature Claude, Winter 2024
+-->
+<script lang="ts">let { opacity = .5, rings = 4 } = $props();
+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;
+// Theme detection
+let isDarkMode = true;
+let width = 0;
+let height = 0;
+const TAU = Math.PI * 2;
+const BREATH_CYCLE = 5.5;
+let orbits = [];
+let dots = [];
+// Color palette for different personas
+const ORBIT_COLORS = [
+	{
+		r: 16,
+		g: 185,
+		b: 129
+	},
+	{
+		r: 59,
+		g: 130,
+		b: 246
+	},
+	{
+		r: 245,
+		g: 158,
+		b: 11
+	},
+	{
+		r: 168,
+		g: 85,
+		b: 247
+	}
+];
+function initOrbits() {
+	if (!width || !height) return;
+	const centerX = width / 2;
+	const centerY = height / 2;
+	const maxRadius = Math.min(width, height) * .4;
+	// Reduce complexity on smaller screens
+	const isMobile = width < 640;
+	orbits = [];
+	dots = [];
+	for (let i = 0; i < rings; i++) {
+		const radiusRatio = .25 + i / (rings - 1) * .75;
+		const orbit = {
+			radius: maxRadius * radiusRatio,
+			speed: (.15 + Math.random() * .1) * (i % 2 === 0 ? 1 : -1),
+			phase: Math.random() * TAU,
+			color: ORBIT_COLORS[i % ORBIT_COLORS.length],
+			dotCount: 2 + Math.floor(Math.random() * 3),
+			lineAlpha: .15 + i / rings * .1,
+			dotSize: 3 + i * .5
+		};
+		orbits.push(orbit);
+		// Create dots for this orbit (fewer on mobile)
+		const dotsToCreate = isMobile ? Math.ceil(orbit.dotCount / 2) : orbit.dotCount;
+		for (let j = 0; j < dotsToCreate; j++) {
+			dots.push({
+				orbitIndex: i,
+				angle: j / orbit.dotCount * TAU + Math.random() * .5,
+				speed: orbit.speed * (.8 + Math.random() * .4),
+				size: orbit.dotSize * (.7 + Math.random() * .6),
+				alpha: .5 + Math.random() * .5
+			});
+		}
+	}
+}
+function getBreathPhase(time) {
+	const phase = time % BREATH_CYCLE / BREATH_CYCLE;
+	return Math.sin(phase * TAU) * .5 + .5;
+}
+function detectTheme() {
+	isDarkMode = document.documentElement.classList.contains("dark");
+}
+$effect(() => {
+	// Check for reduced motion preference
+	prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+	dpr = Math.min(window.devicePixelRatio || 1, 2);
+	detectTheme();
+	resizeCanvas();
+	initOrbits();
+	// 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) {
+			lastFrameTime = 0;
+			animate();
+		}
+	}, { threshold: .01 });
+	observer.observe(container);
+	const handleResize = () => {
+		dpr = Math.min(window.devicePixelRatio || 1, 2);
+		resizeCanvas();
+		initOrbits();
+	};
+	window.addEventListener("resize", handleResize);
+	return () => {
+		window.removeEventListener("resize", handleResize);
+		if (animationId) cancelAnimationFrame(animationId);
+		observer?.disconnect();
+		themeObserver?.disconnect();
+	};
+});
+function resizeCanvas() {
+	width = container?.clientWidth || window.innerWidth;
+	height = container?.clientHeight || window.innerHeight;
+	if (canvas) {
+		canvas.width = width * dpr;
+		canvas.height = height * dpr;
+		canvas.style.width = `${width}px`;
+		canvas.style.height = `${height}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;
+	updateDots(dt);
+	draw();
+	// Respect reduced motion preference - draw once then stop
+	if (prefersReducedMotion) {
+		animationId = 0;
+		return;
+	}
+	animationId = requestAnimationFrame(animate);
+}
+function updateDots(dt) {
+	for (const dot of dots) {
+		dot.angle += dot.speed * dt;
+	}
+}
+function draw() {
+	if (!ctx) return;
+	// Clear and redraw (no trail - cleaner for variable backgrounds)
+	ctx.clearRect(0, 0, width, height);
+	const cx = width / 2;
+	const cy = height / 2;
+	const breath = getBreathPhase(localTime);
+	// Theme-adjusted alpha multiplier
+	const themeAlpha = isDarkMode ? 1 : 1.2;
+	// Draw orbital rings
+	for (let i = 0; i < orbits.length; i++) {
+		const orbit = orbits[i];
+		const breathRadius = orbit.radius * (1 + breath * .02);
+		const rotation = localTime * orbit.speed + orbit.phase;
+		// Orbital path (ellipse for depth)
+		ctx.save();
+		ctx.translate(cx, cy);
+		ctx.rotate(rotation * .1);
+		ctx.beginPath();
+		ctx.ellipse(0, 0, breathRadius, breathRadius * .6, 0, 0, TAU);
+		ctx.strokeStyle = `rgba(${orbit.color.r}, ${orbit.color.g}, ${orbit.color.b}, ${orbit.lineAlpha * opacity * themeAlpha})`;
+		ctx.lineWidth = 1;
+		ctx.stroke();
+		// Subtle glow
+		ctx.beginPath();
+		ctx.ellipse(0, 0, breathRadius, breathRadius * .6, 0, 0, TAU);
+		ctx.strokeStyle = `rgba(${orbit.color.r}, ${orbit.color.g}, ${orbit.color.b}, ${orbit.lineAlpha * opacity * themeAlpha * .3})`;
+		ctx.lineWidth = 4;
+		ctx.stroke();
+		ctx.restore();
+	}
+	// Draw traveling dots
+	for (const dot of dots) {
+		const orbit = orbits[dot.orbitIndex];
+		const breathRadius = orbit.radius * (1 + breath * .02);
+		const rotation = localTime * orbit.speed * .1 + orbit.phase;
+		// Calculate position on ellipse
+		const ellipseX = Math.cos(dot.angle) * breathRadius;
+		const ellipseY = Math.sin(dot.angle) * breathRadius * .6;
+		// Apply orbit rotation
+		const cosR = Math.cos(rotation);
+		const sinR = Math.sin(rotation);
+		const x = cx + ellipseX * cosR - ellipseY * sinR;
+		const y = cy + ellipseX * sinR + ellipseY * cosR;
+		const dotAlpha = dot.alpha * (.6 + breath * .4);
+		// Glow
+		const glowSize = dot.size * 3;
+		const glow = ctx.createRadialGradient(x, y, 0, x, y, glowSize);
+		glow.addColorStop(0, `rgba(${orbit.color.r}, ${orbit.color.g}, ${orbit.color.b}, ${dotAlpha * opacity * .6})`);
+		glow.addColorStop(.5, `rgba(${orbit.color.r}, ${orbit.color.g}, ${orbit.color.b}, ${dotAlpha * opacity * .2})`);
+		glow.addColorStop(1, `rgba(${orbit.color.r}, ${orbit.color.g}, ${orbit.color.b}, 0)`);
+		ctx.beginPath();
+		ctx.arc(x, y, glowSize, 0, TAU);
+		ctx.fillStyle = glow;
+		ctx.fill();
+		// Core dot
+		ctx.beginPath();
+		ctx.arc(x, y, dot.size, 0, TAU);
+		ctx.fillStyle = `rgba(${Math.min(255, orbit.color.r + 40)}, ${Math.min(255, orbit.color.g + 40)}, ${Math.min(255, orbit.color.b + 40)}, ${dotAlpha * opacity})`;
+		ctx.fill();
+	}
+	// Central glow
+	const centerGlow = ctx.createRadialGradient(cx, cy, 0, cx, cy, orbits[0]?.radius * .5 || 50);
+	centerGlow.addColorStop(0, `rgba(16, 185, 129, ${.1 * opacity * breath})`);
+	centerGlow.addColorStop(.5, `rgba(16, 185, 129, ${.03 * opacity})`);
+	centerGlow.addColorStop(1, "rgba(16, 185, 129, 0)");
+	ctx.fillStyle = centerGlow;
+	ctx.beginPath();
+	ctx.arc(cx, cy, orbits[0]?.radius * .5 || 50, 0, TAU);
+	ctx.fill();
+}
+</script>
+
+<div bind:this={container} class="orbit-container">
+	<canvas bind:this={canvas} class="orbit-canvas"></canvas>
+</div>
+
+<style>
+	.orbit-container {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		overflow: hidden;
+	}
+
+	.orbit-canvas {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		pointer-events: none;
+	}
+</style>

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

@@ -0,0 +1,8 @@
+interface Props {
+    opacity?: number;
+    /** Number of orbital rings */
+    rings?: number;
+}
+declare const OrbitCanvas: import("svelte").Component<Props, {}, "">;
+type OrbitCanvas = ReturnType<typeof OrbitCanvas>;
+export default OrbitCanvas;

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

@@ -0,0 +1,270 @@
+<!--
+	Particle Flow Canvas
+	Flow field particles with mouse vortex interaction
+	Themed for vibes.dev homepage
+-->
+<script lang="ts">import { animationStore } from "../base/animation-store.svelte";
+let { opacity = .6, count = 800, speed = .3, mouseRadius = 300 } = $props();
+// Theme detection
+let isDarkMode = true;
+let canvas;
+let container;
+let ctx = null;
+let animationId;
+let dpr = 1;
+let canvasWidth = 0;
+let canvasHeight = 0;
+let isVisible = true;
+let observer;
+let resizeObserver;
+let prefersReducedMotion = false;
+// Noise evolution
+let noiseZ = 0;
+// Colors (emerald palette)
+const PRIMARY = "16, 185, 129";
+const SECONDARY = "20, 184, 166";
+const ACCENT = "251, 191, 36";
+const FLOW_SCALE = .002;
+const BASE_LIFE = 180;
+const MOUSE_FORCE = .35;
+let particles = [];
+function createParticle(w, h) {
+	const rand = Math.random();
+	let color;
+	let isGold = false;
+	if (rand > .97) {
+		color = ACCENT;
+		isGold = true;
+	} else if (rand > .5) {
+		color = PRIMARY;
+	} else {
+		color = SECONDARY;
+	}
+	return {
+		x: Math.random() * w,
+		y: Math.random() * h,
+		vx: 0,
+		vy: 0,
+		maxLife: Math.random() * BASE_LIFE + 60,
+		life: Math.random() * BASE_LIFE,
+		color,
+		history: [],
+		isGold
+	};
+}
+function resetParticle(p, w, h) {
+	p.x = Math.random() * w;
+	p.y = Math.random() * h;
+	p.life = p.maxLife;
+	p.history = [];
+	p.vx = 0;
+	p.vy = 0;
+}
+// Simple flow field noise
+function noise(x, y, z) {
+	return Math.sin(x * 1.5) * Math.cos(y * 1.2) + Math.sin(z * .8) * Math.cos(x + y * .5);
+}
+function initParticles() {
+	particles = [];
+	const w = canvasWidth || window.innerWidth;
+	const h = canvasHeight || window.innerHeight;
+	for (let i = 0; i < count; i++) {
+		particles.push(createParticle(w, h));
+	}
+}
+function detectTheme() {
+	isDarkMode = document.documentElement.classList.contains("dark");
+}
+$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();
+	initParticles();
+	// 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);
+	resizeObserver = new ResizeObserver(() => {
+		resizeCanvas();
+		initParticles();
+	});
+	resizeObserver.observe(container);
+	animate();
+	const handleResize = () => {
+		dpr = Math.min(window.devicePixelRatio || 1, 2);
+		resizeCanvas();
+		initParticles();
+	};
+	window.addEventListener("resize", handleResize);
+	return () => {
+		window.removeEventListener("resize", handleResize);
+		if (animationId) cancelAnimationFrame(animationId);
+		observer?.disconnect();
+		resizeObserver?.disconnect();
+		themeObserver?.disconnect();
+	};
+});
+function resizeCanvas() {
+	const rect = container?.getBoundingClientRect();
+	const w = Math.max(1, Math.round(rect?.width || window.innerWidth));
+	const h = Math.max(1, Math.round(rect?.height || window.innerHeight));
+	canvasWidth = w;
+	canvasHeight = h;
+	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() {
+	if (!isVisible) {
+		animationId = 0;
+		return;
+	}
+	draw();
+	// Respect reduced motion preference - draw once then stop
+	if (prefersReducedMotion) {
+		animationId = 0;
+		return;
+	}
+	animationId = requestAnimationFrame(animate);
+}
+function draw() {
+	if (!ctx) return;
+	const w = canvasWidth || animationStore.innerWidth;
+	const h = canvasHeight || animationStore.innerHeight;
+	const mx = animationStore.mouseX * w;
+	const my = animationStore.mouseY * h;
+	// Fade trails without painting an opaque background over the consumer surface.
+	ctx.globalCompositeOperation = "destination-out";
+	ctx.fillStyle = `rgba(0, 0, 0, ${isDarkMode ? .12 : .15})`;
+	ctx.fillRect(0, 0, w, h);
+	// Blending mode - additive for dark, normal for light
+	if (isDarkMode) {
+		ctx.globalCompositeOperation = "lighter";
+	} else {
+		ctx.globalCompositeOperation = "source-over";
+	}
+	noiseZ += .001;
+	for (const p of particles) {
+		p.life--;
+		if (p.life <= 0) resetParticle(p, w, h);
+		// Store history
+		p.history.push({
+			x: p.x,
+			y: p.y
+		});
+		if (p.history.length > 8) p.history.shift();
+		// Flow field
+		const angle = noise(p.x * FLOW_SCALE, p.y * FLOW_SCALE, noiseZ) * Math.PI * 4;
+		p.vx += Math.cos(angle) * .06;
+		p.vy += Math.sin(angle) * .06;
+		// Mouse vortex
+		const dx = p.x - mx;
+		const dy = p.y - my;
+		const dist = Math.sqrt(dx * dx + dy * dy);
+		if (dist < mouseRadius && dist > 0) {
+			const force = (mouseRadius - dist) / mouseRadius;
+			const vortexAngle = Math.atan2(dy, dx) + Math.PI / 2;
+			p.vx += Math.cos(vortexAngle) * force * MOUSE_FORCE;
+			p.vy += Math.sin(vortexAngle) * force * MOUSE_FORCE;
+		}
+		// Damping
+		p.vx *= .94;
+		p.vy *= .94;
+		// Update position
+		p.x += p.vx * speed * 4;
+		p.y += p.vy * speed * 4;
+		// Wrap with history clear
+		if (p.x < 0) {
+			p.x = w;
+			p.history = [];
+		}
+		if (p.x > w) {
+			p.x = 0;
+			p.history = [];
+		}
+		if (p.y < 0) {
+			p.y = h;
+			p.history = [];
+		}
+		if (p.y > h) {
+			p.y = 0;
+			p.history = [];
+		}
+		// Draw
+		if (p.history.length >= 2) {
+			const lifeRatio = p.life / p.maxLife;
+			// Higher alpha in light mode for visibility
+			const baseAlpha = isDarkMode ? p.isGold ? .75 : .45 : p.isGold ? .9 : .7;
+			const alpha = lifeRatio * baseAlpha;
+			ctx.beginPath();
+			ctx.moveTo(p.history[0].x, p.history[0].y);
+			for (let i = 1; i < p.history.length; i++) {
+				ctx.lineTo(p.history[i].x, p.history[i].y);
+			}
+			ctx.strokeStyle = `rgba(${p.color}, ${alpha})`;
+			ctx.lineWidth = p.isGold ? 2.5 : 1.8;
+			ctx.stroke();
+		}
+	}
+	// Connect nearby particles (neural effect)
+	if (isDarkMode) {
+		ctx.globalCompositeOperation = "lighter";
+	}
+	for (let i = 0; i < particles.length; i += 3) {
+		const a = particles[i];
+		for (let j = i + 1; j < particles.length; j += 3) {
+			const b = particles[j];
+			const dx = a.x - b.x;
+			const dy = a.y - b.y;
+			const dist = Math.sqrt(dx * dx + dy * dy);
+			if (dist < 60) {
+				const alpha = (1 - dist / 60) * (isDarkMode ? .08 : .15);
+				ctx.beginPath();
+				ctx.moveTo(a.x, a.y);
+				ctx.lineTo(b.x, b.y);
+				ctx.strokeStyle = `rgba(16, 185, 129, ${alpha})`;
+				ctx.lineWidth = .5;
+				ctx.stroke();
+			}
+		}
+	}
+	// Reset composite
+	ctx.globalCompositeOperation = "source-over";
+}
+</script>
+
+<div bind:this={container} class="particle-flow-container" style:opacity>
+	<canvas bind:this={canvas} class="particle-flow-canvas"></canvas>
+</div>
+
+<style>
+	.particle-flow-container {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		pointer-events: none;
+	}
+
+	.particle-flow-canvas {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+	}
+</style>

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

@@ -0,0 +1,12 @@
+interface Props {
+    opacity?: number;
+    /** Number of particles */
+    count?: number;
+    /** Base particle speed */
+    speed?: number;
+    /** Mouse influence radius */
+    mouseRadius?: number;
+}
+declare const ParticleFlowCanvas: import("svelte").Component<Props, {}, "">;
+type ParticleFlowCanvas = ReturnType<typeof ParticleFlowCanvas>;
+export default ParticleFlowCanvas;