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

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

@@ -0,0 +1,291 @@
+<!--
+	Pulse Canvas
+	Elegant energy field for the CTA section - inviting without overwhelming
+	
+	A gentle, breathing visual that draws the eye with:
+	- Soft orbital particles that drift and respond to mouse
+	- Subtle gradient waves that flow across the canvas
+	- Calm central presence that pulses slowly
+	
+	Less is more - this should feel welcoming, not intense
+	
+	@signature Claude, Winter 2024
+-->
+<script lang="ts">let { opacity = .5, speed = 1 } = $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;
+// Mouse tracking (smooth)
+let mouseX = 0;
+let mouseY = 0;
+let smoothMouseX = 0;
+let smoothMouseY = 0;
+let mouseInside = false;
+const TAU = Math.PI * 2;
+let orbs = [];
+let waves = [];
+let orbCount = 8;
+const WAVE_COUNT = 3;
+function createOrb() {
+	return {
+		baseX: .1 + Math.random() * .8,
+		baseY: .1 + Math.random() * .8,
+		offsetX: 0,
+		offsetY: 0,
+		driftAngle: Math.random() * TAU,
+		driftSpeed: .2 + Math.random() * .3,
+		driftRadius: .03 + Math.random() * .05,
+		size: 60 + Math.random() * 80,
+		hue: 150 + Math.random() * 20,
+		pulsePhase: Math.random() * TAU,
+		pulseSpeed: .3 + Math.random() * .4
+	};
+}
+function createWave(index) {
+	return {
+		phase: index / WAVE_COUNT * TAU,
+		speed: .15 + index * .08,
+		amplitude: .03 + index * .02,
+		frequency: 1.5 + index * .5,
+		yOffset: .3 + index * .2
+	};
+}
+function initOrbs() {
+	orbs = [];
+	// Reduce orb count on smaller screens
+	orbCount = width < 640 ? 4 : width < 1024 ? 6 : 8;
+	for (let i = 0; i < orbCount; i++) {
+		orbs.push(createOrb());
+	}
+}
+function initWaves() {
+	waves = [];
+	for (let i = 0; i < WAVE_COUNT; i++) {
+		waves.push(createWave(i));
+	}
+}
+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();
+	initOrbs();
+	initWaves();
+	// Initialize mouse to center
+	smoothMouseX = width / 2;
+	smoothMouseY = height / 2;
+	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();
+	};
+	const handleMouseMove = (e) => {
+		const rect = container.getBoundingClientRect();
+		mouseX = e.clientX - rect.left;
+		mouseY = e.clientY - rect.top;
+		mouseInside = true;
+	};
+	const handleMouseLeave = () => {
+		mouseInside = false;
+	};
+	window.addEventListener("resize", handleResize);
+	container.addEventListener("mousemove", handleMouseMove);
+	container.addEventListener("mouseleave", handleMouseLeave);
+	return () => {
+		window.removeEventListener("resize", handleResize);
+		container.removeEventListener("mousemove", handleMouseMove);
+		container.removeEventListener("mouseleave", handleMouseLeave);
+		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 * speed;
+	updateMouse(dt);
+	updateOrbs(dt);
+	draw();
+	// Respect reduced motion preference - draw once then stop
+	if (prefersReducedMotion) {
+		animationId = 0;
+		return;
+	}
+	animationId = requestAnimationFrame(animate);
+}
+function updateMouse(dt) {
+	// Smooth mouse following
+	const targetX = mouseInside ? mouseX : width / 2;
+	const targetY = mouseInside ? mouseY : height / 2;
+	const smoothing = .05;
+	smoothMouseX += (targetX - smoothMouseX) * smoothing;
+	smoothMouseY += (targetY - smoothMouseY) * smoothing;
+}
+function updateOrbs(dt) {
+	for (const orb of orbs) {
+		// Natural drift
+		orb.driftAngle += orb.driftSpeed * dt;
+		const minDim = Math.min(width, height);
+		const driftX = Math.cos(orb.driftAngle) * orb.driftRadius * minDim;
+		const driftY = Math.sin(orb.driftAngle * .7) * orb.driftRadius * minDim * .6;
+		// Mouse influence - orbs gently move away from mouse
+		const orbWorldX = orb.baseX * width + orb.offsetX;
+		const orbWorldY = orb.baseY * height + orb.offsetY;
+		const dx = orbWorldX - smoothMouseX;
+		const dy = orbWorldY - smoothMouseY;
+		const dist = Math.sqrt(dx * dx + dy * dy);
+		const maxInfluence = 200;
+		let mouseOffsetX = 0;
+		let mouseOffsetY = 0;
+		if (dist < maxInfluence && dist > 0) {
+			const influence = (1 - dist / maxInfluence) * 30;
+			mouseOffsetX = dx / dist * influence;
+			mouseOffsetY = dy / dist * influence;
+		}
+		// Smoothly approach target offset
+		const targetOffsetX = driftX + mouseOffsetX;
+		const targetOffsetY = driftY + mouseOffsetY;
+		orb.offsetX += (targetOffsetX - orb.offsetX) * .02;
+		orb.offsetY += (targetOffsetY - orb.offsetY) * .02;
+	}
+}
+function draw() {
+	if (!ctx) return;
+	ctx.clearRect(0, 0, width, height);
+	const themeAlpha = isDarkMode ? 1 : 1.2;
+	// Draw waves first (background)
+	drawWaves(themeAlpha);
+	// Draw orbs
+	drawOrbs(themeAlpha);
+	// Subtle vignette
+	drawVignette();
+}
+function drawWaves(themeAlpha) {
+	if (!ctx) return;
+	for (const wave of waves) {
+		const phase = localTime * wave.speed + wave.phase;
+		const y = wave.yOffset * height;
+		ctx.beginPath();
+		ctx.moveTo(0, height);
+		for (let x = 0; x <= width; x += 4) {
+			const normalX = x / width;
+			const waveY = Math.sin(normalX * wave.frequency * TAU + phase) * wave.amplitude * height;
+			ctx.lineTo(x, y + waveY);
+		}
+		ctx.lineTo(width, height);
+		ctx.closePath();
+		const gradient = ctx.createLinearGradient(0, y - height * .2, 0, height);
+		const baseAlpha = .03 * opacity * themeAlpha;
+		gradient.addColorStop(0, `rgba(16, 185, 129, 0)`);
+		gradient.addColorStop(.3, `rgba(16, 185, 129, ${baseAlpha})`);
+		gradient.addColorStop(.7, `rgba(16, 185, 129, ${baseAlpha * .5})`);
+		gradient.addColorStop(1, `rgba(16, 185, 129, 0)`);
+		ctx.fillStyle = gradient;
+		ctx.fill();
+	}
+}
+function drawOrbs(themeAlpha) {
+	if (!ctx) return;
+	for (const orb of orbs) {
+		const x = orb.baseX * width + orb.offsetX;
+		const y = orb.baseY * height + orb.offsetY;
+		// Pulse effect
+		const pulse = Math.sin(localTime * orb.pulseSpeed + orb.pulsePhase) * .5 + .5;
+		const size = orb.size * (.8 + pulse * .4);
+		const alpha = (.08 + pulse * .04) * opacity * themeAlpha;
+		// Main gradient orb
+		const gradient = ctx.createRadialGradient(x, y, 0, x, y, size);
+		const h = orb.hue;
+		gradient.addColorStop(0, `hsla(${h}, 70%, 60%, ${alpha})`);
+		gradient.addColorStop(.4, `hsla(${h}, 65%, 50%, ${alpha * .5})`);
+		gradient.addColorStop(.7, `hsla(${h}, 60%, 45%, ${alpha * .2})`);
+		gradient.addColorStop(1, `hsla(${h}, 55%, 40%, 0)`);
+		ctx.beginPath();
+		ctx.arc(x, y, size, 0, TAU);
+		ctx.fillStyle = gradient;
+		ctx.fill();
+	}
+}
+function drawVignette() {
+	if (!ctx) return;
+	// Very subtle edge darkening - theme aware
+	const gradient = ctx.createRadialGradient(width / 2, height / 2, Math.min(width, height) * .3, width / 2, height / 2, Math.max(width, height) * .8);
+	if (isDarkMode) {
+		gradient.addColorStop(0, "rgba(0, 0, 0, 0)");
+		gradient.addColorStop(1, "rgba(0, 0, 0, 0.15)");
+	} else {
+		// Light mode: use subtle emerald tint instead of black
+		gradient.addColorStop(0, "rgba(16, 185, 129, 0)");
+		gradient.addColorStop(1, "rgba(16, 185, 129, 0.03)");
+	}
+	ctx.fillStyle = gradient;
+	ctx.fillRect(0, 0, width, height);
+}
+</script>
+
+<div bind:this={container} class="pulse-container">
+	<canvas bind:this={canvas} class="pulse-canvas"></canvas>
+</div>
+
+<style>
+	.pulse-container {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		overflow: hidden;
+		pointer-events: auto; /* Enable mouse tracking */
+	}
+
+	.pulse-canvas {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		pointer-events: none;
+	}
+</style>

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

@@ -0,0 +1,8 @@
+interface Props {
+    opacity?: number;
+    /** Animation speed multiplier */
+    speed?: number;
+}
+declare const PulseCanvas: import("svelte").Component<Props, {}, "">;
+type PulseCanvas = ReturnType<typeof PulseCanvas>;
+export default PulseCanvas;

package/dist/lib/components/webgl/field/canvas-runtime.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Canvas runtime — the boilerplate every animated canvas in the kit needs and
+ * every one of them currently copies: device-pixel sizing, visibility
+ * (viewport and document), the motion policy (OS preference, the kit's
+ * `data-vibes-motion` attribute, coarse pointers), theme colour sampling, and
+ * a frame loop with an fps cap that stops when nothing can be seen.
+ *
+ * Framework-free. A Svelte wrapper hands it a canvas and a `frame` callback
+ * and reads `motion` to decide between animating and drawing one still frame.
+ */
+export type CanvasMotion = 'full' | 'reduced' | 'off';
+export interface CanvasRuntimeOptions {
+    /** Upper bound for devicePixelRatio; 1.5 is the kit default for decoration. */
+    maxDpr?: number;
+    /** Frame cap; the loop skips frames above this rate. */
+    fps?: 30 | 60;
+    /** Called once per rendered frame with the DOMHighResTimeStamp. */
+    frame: (now: number) => void;
+    /** Called after the canvas backing store changes size. */
+    resized?: (width: number, height: number, dpr: number) => void;
+    /** Called when the resolved motion policy changes. */
+    motionChanged?: (motion: CanvasMotion) => void;
+    /** Called when a theme scope, stylesheet, or system color scheme changes. */
+    themeChanged?: () => void;
+}
+export interface CanvasRuntime {
+    /** CSS pixel size and the ratio the backing store was sized with. */
+    readonly width: number;
+    readonly height: number;
+    readonly dpr: number;
+    /** The resolved motion policy right now. */
+    readonly motion: CanvasMotion;
+    /** True while the canvas is in the viewport and the document is visible. */
+    readonly visible: boolean;
+    /** Start the loop (no-op if motion is not 'full' or nothing is visible). */
+    start(): void;
+    stop(): void;
+    /** Re-measure now (the runtime also observes size changes). */
+    measure(): void;
+    /** Read an rgb triple (0..1) from the canvas's inherited CSS custom property. */
+    token(name: string, fallback: [number, number, number]): [number, number, number];
+    destroy(): void;
+}
+export declare function createCanvasRuntime(canvas: HTMLCanvasElement, opts: CanvasRuntimeOptions): CanvasRuntime;

package/dist/lib/components/webgl/field/canvas-runtime.js

@@ -0,0 +1,169 @@
+/**
+ * Canvas runtime — the boilerplate every animated canvas in the kit needs and
+ * every one of them currently copies: device-pixel sizing, visibility
+ * (viewport and document), the motion policy (OS preference, the kit's
+ * `data-vibes-motion` attribute, coarse pointers), theme colour sampling, and
+ * a frame loop with an fps cap that stops when nothing can be seen.
+ *
+ * Framework-free. A Svelte wrapper hands it a canvas and a `frame` callback
+ * and reads `motion` to decide between animating and drawing one still frame.
+ */
+import { BROWSER } from 'esm-env';
+import { parseThemeColor } from '../../theme/theme-contrast';
+function readMotionAttribute(el) {
+    const root = el?.closest('[data-vibes-motion]');
+    const value = root?.dataset.vibesMotion;
+    return value === 'reduced' || value === 'off' || value === 'full' ? value : null;
+}
+export function createCanvasRuntime(canvas, opts) {
+    const maxDpr = opts.maxDpr ?? 1.5;
+    const frameInterval = 1000 / (opts.fps ?? 60);
+    let width = 1, height = 1, dpr = 1;
+    let inViewport = false;
+    let documentVisible = BROWSER ? document.visibilityState !== 'hidden' : true;
+    let motion = 'full';
+    let rafId = 0;
+    let running = false;
+    let lastFrame = 0;
+    const reduced = window.matchMedia('(prefers-reduced-motion: reduce)');
+    const slow = window.matchMedia('(update: slow)');
+    const dark = window.matchMedia('(prefers-color-scheme: dark)');
+    function resolveMotion() {
+        const attr = readMotionAttribute(canvas);
+        if (attr === 'off')
+            return 'off';
+        if (attr === 'reduced' || reduced.matches || slow.matches)
+            return 'reduced';
+        return 'full';
+    }
+    function measure() {
+        const rect = canvas.getBoundingClientRect();
+        const nextDpr = Math.min(window.devicePixelRatio || 1, maxDpr);
+        const w = Math.max(1, Math.floor(rect.width));
+        const h = Math.max(1, Math.floor(rect.height));
+        if (w === width && h === height && nextDpr === dpr && canvas.width === Math.floor(w * nextDpr))
+            return;
+        width = w;
+        height = h;
+        dpr = nextDpr;
+        canvas.width = Math.floor(w * dpr);
+        canvas.height = Math.floor(h * dpr);
+        opts.resized?.(width, height, dpr);
+    }
+    function loop(now) {
+        if (!running)
+            return;
+        rafId = requestAnimationFrame(loop);
+        if (now - lastFrame < frameInterval)
+            return;
+        lastFrame = now;
+        opts.frame(now);
+    }
+    function visible() {
+        return inViewport && documentVisible;
+    }
+    function start() {
+        if (running || motion !== 'full' || !visible())
+            return;
+        running = true;
+        lastFrame = 0;
+        rafId = requestAnimationFrame(loop);
+    }
+    function stop() {
+        running = false;
+        if (rafId)
+            cancelAnimationFrame(rafId);
+        rafId = 0;
+    }
+    function reconcile() {
+        const next = resolveMotion();
+        if (next !== motion) {
+            motion = next;
+            stop();
+            opts.motionChanged?.(motion);
+        }
+        if (motion === 'full' && visible())
+            start();
+        else
+            stop();
+    }
+    const io = new IntersectionObserver((entries) => {
+        inViewport = entries.some((e) => e.isIntersecting);
+        reconcile();
+    }, { threshold: 0.01 });
+    io.observe(canvas);
+    const ro = new ResizeObserver(() => measure());
+    ro.observe(canvas);
+    const onVisibility = () => {
+        documentVisible = document.visibilityState !== 'hidden';
+        reconcile();
+    };
+    document.addEventListener('visibilitychange', onVisibility);
+    reduced.addEventListener('change', reconcile);
+    slow.addEventListener('change', reconcile);
+    const refreshTheme = () => opts.themeChanged?.();
+    dark.addEventListener('change', refreshTheme);
+    const onStylesheetLoad = (event) => {
+        if (event.target instanceof HTMLLinkElement && event.target.rel === 'stylesheet') {
+            refreshTheme();
+        }
+    };
+    document.addEventListener('load', onStylesheetLoad, true);
+    // The kit writes data-vibes-motion on a root element; the theme lands as a
+    // class or data-mode on <html>. One observer covers both.
+    const mo = new MutationObserver((records) => {
+        const ancestorChanges = records.filter((record) => record.target.contains(canvas));
+        if (ancestorChanges.some((record) => record.attributeName === 'data-vibes-motion'))
+            reconcile();
+        if (ancestorChanges.some((record) => record.attributeName !== 'data-vibes-motion'))
+            refreshTheme();
+    });
+    mo.observe(document.documentElement, {
+        attributes: true,
+        subtree: true,
+        attributeFilter: ['data-vibes-motion', 'class', 'data-mode', 'style']
+    });
+    const headObserver = new MutationObserver(refreshTheme);
+    headObserver.observe(document.head, { childList: true, subtree: true, characterData: true });
+    measure();
+    motion = resolveMotion();
+    return {
+        get width() {
+            return width;
+        },
+        get height() {
+            return height;
+        },
+        get dpr() {
+            return dpr;
+        },
+        get motion() {
+            return motion;
+        },
+        get visible() {
+            return visible();
+        },
+        start,
+        stop,
+        measure,
+        token(name, fallback) {
+            // Read from the canvas, not the root: a `.dark` (or any theme) class on
+            // an ancestor must win, the way it does for every other kit surface.
+            const raw = getComputedStyle(canvas).getPropertyValue(name).trim();
+            const parsed = raw ? parseThemeColor(raw) : null;
+            return parsed ? [parsed.r, parsed.g, parsed.b] : fallback;
+        },
+        destroy() {
+            stop();
+            io.disconnect();
+            ro.disconnect();
+            mo.disconnect();
+            headObserver.disconnect();
+            document.removeEventListener('visibilitychange', onVisibility);
+            reduced.removeEventListener('change', reconcile);
+            slow.removeEventListener('change', reconcile);
+            dark.removeEventListener('change', refreshTheme);
+            document.removeEventListener('load', onStylesheetLoad, true);
+        }
+    };
+}

package/dist/lib/components/webgl/field/field.d.ts

@@ -0,0 +1,92 @@
+/**
+ * Assembly field — a WebGL2 point cloud that assembles into targets.
+ *
+ * Every point is a particle with position and velocity, integrated on the
+ * CPU each frame and uploaded as one packed buffer; the GPU only draws. That
+ * is what lets the field carry momentum: each particle is held to its home
+ * (its place in the current target) by a damped spring, orbits that home on
+ * a small local path so the assembled shape is never frozen, and answers the
+ * cursor the way the FlowerOfLife canvas does — a spring-lagged pointer with
+ * a vortex that swirls parts around it as it passes, and ripples spawned by
+ * movement and clicks that lift the surface like water.
+ *
+ * The cursor acts through MOMENTUM ONLY. Every cursor term — the local stir,
+ * the drag along the stroke, the ripples it sheds, the bulk flow of the tank,
+ * and even the light on stirred parts — is multiplied by how fast the lagged
+ * pointer is travelling. A hand held on the surface, however long, changes
+ * nothing: what the reader sees is the float, the breath and the camera the
+ * field would have had anyway. Falsifier: `probe-still.mjs` in home-web.
+ *
+ * Homes morph between targets with a per-point stagger, so a structure
+ * assembles the way a scan resolves. Framework-free: a Svelte wrapper owns
+ * the DOM, the motion policy, and the theme colours.
+ */
+import type { PointSet } from './targets.ts';
+export interface FieldColors {
+    /** rgb 0..1 */
+    signal: [number, number, number];
+    accent: [number, number, number];
+    fog: [number, number, number];
+}
+/** Motion character. All values are multipliers around a tuned default of 1. */
+export interface FieldDynamics {
+    /** Local orbit amplitude around each particle's home (0 = frozen shape). */
+    float: number;
+    /** Cursor vortex strength: attraction and tangential swirl. */
+    swirl: number;
+    /** Ripple amplitude from cursor movement and clicks. */
+    ripple: number;
+    /** Spring stiffness back to home; higher snaps, lower drifts. */
+    stiffness: number;
+    /** How hard the cursor's momentum drives the wake. Momentum is the ONLY
+     *  thing that drives it: a cursor held still distorts nothing, however long
+     *  it rests on the field. 0 disables cursor interaction entirely. */
+    momentum: number;
+    /** Bulk flow of the tank: how far the whole body of water is carried, and
+     *  how long it sloshes back. 0 = the liquid never moves as a body. */
+    current: number;
+}
+export interface FieldOptions {
+    count: number;
+    colors: FieldColors;
+    /** device pixel ratio cap; 1 for low-power surfaces. */
+    maxDpr?: number;
+    /** seconds for a full assembly */
+    morphSeconds?: number;
+    /** 0..1, how much of the morph is stagger between first and last point */
+    stagger?: number;
+    /** base point size in CSS px at distance 1 */
+    pointSize?: number;
+    /** slow auto-orbit in radians per second; 0 to hold */
+    autoRotate?: number;
+    /** the light: shafts drifting down through the water. false for flat lighting */
+    sweep?: boolean;
+    /** camera distance; smaller frames the structure larger. 2.6 is the default. */
+    distance?: number;
+    /** Fraction of the cloud whose home is not fixed but crawls along the
+     *  structure it belongs to, 0..1. Structural: fixed at construction. */
+    wander?: number;
+    dynamics?: Partial<FieldDynamics>;
+}
+export interface FieldHandle {
+    /** Set the assembled shape; the homes morph there over morphSeconds. */
+    assemble(target: PointSet): void;
+    /** Advance the simulation and draw one frame. `now` in ms (performance.now). */
+    frame(now: number): void;
+    /** Draw the fully-assembled current target once, at rest, without animating. */
+    still(): void;
+    resize(): void;
+    /** Pointer in clip space (-1..1); `active` false when it leaves. */
+    setPointer(x: number, y: number, active: boolean): void;
+    /** A click: a strong ripple at the pointer. */
+    tap(): void;
+    setColors(colors: FieldColors): void;
+    setAutoRotate(rps: number): void;
+    setDynamics(dynamics: Partial<FieldDynamics>): void;
+    orbit(dTheta: number, dPhi: number): void;
+    readonly progress: number;
+    /** 0..1, how stirred the field is right now. */
+    readonly energy: number;
+    destroy(): void;
+}
+export declare function createField(canvas: HTMLCanvasElement, opts: FieldOptions): FieldHandle;