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

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

@@ -0,0 +1,287 @@
+<!--
+	AssemblyField — a WebGL2 point cloud that assembles into structures: the
+	flower of life, the brand mark, a temple, a figure, a mind map. The parts
+	travel between targets and settle; the assembled state breathes.
+
+	This is the first real WebGL component in `webgl/` and the first to share
+	its runtime (sizing, visibility, motion policy, theme) through
+	`field/canvas-runtime.ts` instead of copying it. Under reduced motion it
+	draws the assembled first target once and stops. Offscreen or hidden, it
+	does not run. Colours come from the live theme tokens.
+-->
+<script lang="ts">import { onMount } from "svelte";
+import { settle, settleNow } from "../../attempt";
+import { failureClass } from "../../failure-class.js";
+import { kitLogger } from "../../kit-logger";
+import { vibesLogoSvg } from "../brand/vibes-logo";
+import { createCanvasRuntime } from "./field/canvas-runtime.js";
+import { createField } from "./field/field.js";
+import { rasterizeSvg } from "./field/raster.js";
+import { buildTarget, scattered } from "./field/targets.js";
+const logger = kitLogger("vibeskit-webgl-assembly-field");
+let { targets = [
+	"flower",
+	"logo",
+	"temple",
+	"rose",
+	"mindmap"
+], count = 24e3, hold = 11, morph = 8, autoRotate = .08, pointSize = 1.8, distance = 2.6, wander = .08, sweep = true, interactive = true, fromScattered = false, maxDpr = 1.5, colors, float = 1, swirl = 1, ripple = 1, stiffness = 1, momentum = 1, current = 1, opacity = 1, class: className = "", onTarget } = $props();
+// Dynamics follow their props live; no rebuild needed to retune the feel.
+$effect(() => {
+	field?.setDynamics({
+		float,
+		swirl,
+		ripple,
+		stiffness,
+		momentum,
+		current
+	});
+});
+$effect(() => {
+	field?.setAutoRotate(autoRotate);
+});
+let canvas = $state(null);
+let runtime = null;
+let field = null;
+let sets = new Map();
+let index = 0;
+let holdTimer = 0;
+let unavailable = $state(false);
+function resolveColors(rt) {
+	const signal = colors?.signal ?? rt.token("--brand", [
+		.72,
+		1,
+		.32
+	]);
+	const accent = colors?.accent ?? rt.token("--warning", [
+		1,
+		.9,
+		.18
+	]);
+	const fog = colors?.fog ?? rt.token("--background", [
+		.02,
+		.03,
+		.02
+	]);
+	return {
+		signal,
+		accent,
+		fog
+	};
+}
+function scheduleNext() {
+	clearTimeout(holdTimer);
+	if (!field || !runtime || runtime.motion !== "full" || targets.length < 2) return;
+	holdTimer = window.setTimeout(() => {
+		index = (index + 1) % targets.length;
+		assemble(targets[index]);
+		scheduleNext();
+	}, hold * 1e3);
+}
+function assemble(id) {
+	const set = sets.get(id);
+	if (!set || !field) return;
+	field.assemble(set);
+	onTarget?.(id);
+}
+onMount(() => {
+	if (!canvas) return;
+	const el = canvas;
+	let disposed = false;
+	(async () => {
+		// No raster (an image that fails to decode): the targets build without the logo shape.
+		const raster = await settle(() => rasterizeSvg(vibesLogoSvg, 360));
+		if (!raster.ok) {
+			logger.warn("Logo raster failed; targets build without it", { reason: failureClass(raster.error) });
+		}
+		const logo = raster.ok ? raster.value : undefined;
+		if (disposed) return;
+		for (const id of targets) sets.set(id, buildTarget(id, count, logo));
+		// No field (WebGL unavailable or refused): the component renders its unavailable state.
+		const created = settleNow(() => createField(el, {
+			count,
+			colors: {
+				signal: [
+					.72,
+					1,
+					.32
+				],
+				accent: [
+					1,
+					.9,
+					.18
+				],
+				fog: [
+					.02,
+					.03,
+					.02
+				]
+			},
+			morphSeconds: morph,
+			stagger: .5,
+			pointSize,
+			autoRotate,
+			maxDpr,
+			sweep,
+			distance,
+			wander,
+			dynamics: {
+				float,
+				swirl,
+				ripple,
+				stiffness,
+				momentum,
+				current
+			}
+		}));
+		if (!created.ok) {
+			logger.warn("Assembly field unavailable", { reason: failureClass(created.error) });
+			unavailable = true;
+			return;
+		}
+		field = created.value;
+		runtime = createCanvasRuntime(el, {
+			maxDpr,
+			fps: 60,
+			frame: (now) => field?.frame(now),
+			resized: () => field?.resize(),
+			themeChanged: () => {
+				if (!runtime || !field) return;
+				field.setColors(resolveColors(runtime));
+				if (runtime.motion !== "full") field.still();
+			},
+			motionChanged: (motion) => {
+				if (motion === "full") scheduleNext();
+				else {
+					clearTimeout(holdTimer);
+					if (field && sets.get(targets[index])) {
+						field.assemble(sets.get(targets[index]));
+						field.still();
+					}
+				}
+			}
+		});
+		field.setColors(resolveColors(runtime));
+		field.resize();
+		if (runtime.motion !== "full") {
+			field.assemble(sets.get(targets[0]));
+			field.still();
+			return;
+		}
+		if (fromScattered) {
+			field.assemble(scattered(count));
+			field.still();
+			assemble(targets[0]);
+		} else {
+			field.assemble(sets.get(targets[0]));
+			field.still();
+		}
+		index = 0;
+		runtime.start();
+		scheduleNext();
+	})();
+	// The pointer is tracked on the window, not the canvas. A hero puts the
+	// headline, the buttons, and a scrim on top of the field; listening on the
+	// canvas means the wake dies the moment the hand crosses a button. The
+	// margin keeps the ripple alive just past the edge instead of cutting it.
+	const MARGIN = 140;
+	let dragging = false, moved = 0, lx = 0, ly = 0;
+	const onMove = (e) => {
+		if (!interactive || !field) return;
+		const r = el.getBoundingClientRect();
+		const x = (e.clientX - r.left) / r.width;
+		const y = (e.clientY - r.top) / r.height;
+		const mx = MARGIN / r.width, my = MARGIN / r.height;
+		const within = x >= -mx && x <= 1 + mx && y >= -my && y <= 1 + my;
+		field.setPointer(x * 2 - 1, -(y * 2 - 1), within);
+		if (dragging && e.pointerType !== "touch") {
+			moved += Math.abs(e.clientX - lx) + Math.abs(e.clientY - ly);
+			field.orbit((e.clientX - lx) * .005, (e.clientY - ly) * .005);
+			lx = e.clientX;
+			ly = e.clientY;
+		}
+	};
+	const onLeave = () => field?.setPointer(0, 0, false);
+	const onDown = (e) => {
+		if (!interactive) return;
+		// On touch screens, preserve native page scroll and don't orbit drag
+		if (e.pointerType === "touch") {
+			dragging = false;
+			moved = 0;
+			lx = e.clientX;
+			ly = e.clientY;
+			return;
+		}
+		dragging = true;
+		moved = 0;
+		lx = e.clientX;
+		ly = e.clientY;
+	};
+	const onUp = (e) => {
+		// A press or tap that did not become a drag/scroll is a tap: spawn a ripple
+		if (e.pointerType === "touch") {
+			const dist = Math.hypot(e.clientX - lx, e.clientY - ly);
+			if (dist < 10) field?.tap();
+		} else if (dragging && moved < 4) {
+			field?.tap();
+		}
+		dragging = false;
+	};
+	const onCancel = () => {
+		dragging = false;
+		field?.setPointer(0, 0, false);
+	};
+	window.addEventListener("pointermove", onMove);
+	window.addEventListener("pointerdown", onDown);
+	window.addEventListener("pointerup", onUp);
+	window.addEventListener("pointercancel", onCancel);
+	document.addEventListener("pointerleave", onLeave);
+	return () => {
+		disposed = true;
+		clearTimeout(holdTimer);
+		window.removeEventListener("pointermove", onMove);
+		window.removeEventListener("pointerdown", onDown);
+		window.removeEventListener("pointerup", onUp);
+		window.removeEventListener("pointercancel", onCancel);
+		document.removeEventListener("pointerleave", onLeave);
+		runtime?.destroy();
+		field?.destroy();
+		runtime = null;
+		field = null;
+	};
+});
+/** Assemble a specific target now (for controls). */
+export function show(id) {
+	const i = targets.indexOf(id);
+	if (i >= 0) index = i;
+	assemble(id);
+	scheduleNext();
+}
+</script>
+
+<canvas
+	bind:this={canvas}
+	class="assembly-field {className}"
+	class:is-unavailable={unavailable}
+	style:opacity
+	style:touch-action={interactive ? 'pan-y' : undefined}
+	aria-hidden="true"
+></canvas>
+
+<style>
+	.assembly-field {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		display: block;
+	}
+	.is-unavailable {
+		display: none;
+	}
+	@media print {
+		.assembly-field {
+			display: none;
+		}
+	}
+</style>

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

@@ -0,0 +1,50 @@
+import { type FieldColors } from './field/field.ts';
+import { type TargetId } from './field/targets.ts';
+interface Props {
+    /** Targets to cycle through, in order. */
+    targets?: TargetId[];
+    /** Points in the cloud. 24k is comfortable on integrated GPUs. */
+    count?: number;
+    /** Seconds a target is held before the next assembly begins. */
+    hold?: number;
+    /** Seconds one assembly takes. */
+    morph?: number;
+    /** Slow orbit, radians per second. */
+    autoRotate?: number;
+    /** Point size in CSS px. */
+    pointSize?: number;
+    /** Camera distance; smaller frames the structure larger. */
+    distance?: number;
+    /** Fraction of the cloud whose home crawls along the structure instead of
+     *  holding still, 0..1. Structural: read once, at construction. */
+    wander?: number;
+    /** The scan sweep band. */
+    sweep?: boolean;
+    /** Pointer push and drag-to-orbit. */
+    interactive?: boolean;
+    /** Start from loose parts instead of the first target. */
+    fromScattered?: boolean;
+    /** Cap for devicePixelRatio. */
+    maxDpr?: number;
+    /** Explicit colours; otherwise read from --brand / --brand-fill tokens. */
+    colors?: Partial<FieldColors>;
+    /** Motion character (multipliers around 1): local orbit amplitude, cursor
+     *  vortex, ripple amplitude, spring stiffness, how much the cursor's
+     *  momentum drives the wake, and how far the tank's bulk flow carries.
+     *  All live-tunable; changing a prop retunes the running field. */
+    float?: number;
+    swirl?: number;
+    ripple?: number;
+    stiffness?: number;
+    momentum?: number;
+    current?: number;
+    opacity?: number;
+    class?: string;
+    /** Reports the target now assembling. */
+    onTarget?: (id: TargetId) => void;
+}
+declare const AssemblyField: import("svelte").Component<Props, {
+    show: (id: TargetId) => void;
+}, "">;
+type AssemblyField = ReturnType<typeof AssemblyField>;
+export default AssemblyField;