@revyme/runtime 0.0.1

package/dist/cursor-runtime.d.ts

@@ -0,0 +1,58 @@
+import { type ComponentType } from 'react';
+export type CursorMode = 'follow' | 'replace';
+export type CursorSide = 'top' | 'bottom' | 'left' | 'right';
+export type CursorAlign = 'start' | 'center' | 'end';
+export interface CursorTransition {
+    type?: 'spring' | 'tween' | 'instant';
+    stiffness?: number;
+    damping?: number;
+    mass?: number;
+    duration?: number;
+    ease?: string;
+}
+export interface CursorOpts<P = any> {
+    variant?: string;
+    mode?: CursorMode;
+    /**
+     * Which side of the mouse the cursor wrapper anchors to (Follow mode).
+     * Replace mode ignores side / align / offset — it auto-centers on the mouse.
+     */
+    side?: CursorSide;
+    /**
+     * Alignment along the perpendicular axis to `side`.
+     * top/bottom: start = left, center = horizontal center, end = right.
+     * left/right: start = top,  center = vertical center,   end = bottom.
+     */
+    align?: CursorAlign;
+    offsetX?: number;
+    offsetY?: number;
+    transition?: CursorTransition;
+    props?: Partial<P>;
+    /**
+     * Wrapper width / height applied to the cursor's outer motion.div. Useful
+     * for code components (canvases, sparks) that fill their parent — without
+     * this they'd render at their intrinsic size, which is often the whole
+     * viewport. Plain numbers are interpreted as px; pass a string ('100%',
+     * '4rem') to use other CSS units.
+     */
+    width?: number | string;
+    height?: number | string;
+    /**
+     * When true, fade/scale on enter and exit via AnimatePresence. Default
+     * false: appear and disappear instantly. The follow movement is always
+     * smoothed by the spring config above — `enterExit` only controls the
+     * mount/unmount transition.
+     */
+    enterExit?: boolean;
+}
+/**
+ * Spread the return value into an element to give it a component cursor.
+ * Returns onMouseEnter/onMouseLeave handlers that push/pop the global store.
+ *
+ * <button {...withCursor(Pointer, { mode: 'follow', transition: { type: 'spring', stiffness: 300 } })}>
+ */
+export declare function withCursor<P>(Component: ComponentType<P>, opts?: CursorOpts<P>): {
+    onMouseEnter: () => void;
+    onMouseLeave: () => void;
+};
+export declare function CursorPortal(): import("react/jsx-runtime").JSX.Element | null;

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { default as withResponsiveProps } from './withResponsiveProps';
+export { withCursor, CursorPortal, type CursorMode, type CursorSide, type CursorAlign, type CursorTransition, type CursorOpts, } from './cursor-runtime';
+export { useStaticCanvas } from './useStaticCanvas';
+export { playSketchDraw, type SketchAnimOpts, type SketchAnimMode, type SketchAnimTrigger, type SketchAnimTransition, } from './sketch-draw';

package/dist/index.js

@@ -0,0 +1,378 @@
+import { useEffect, useState, useSyncExternalStore } from "react";
+import { jsx } from "react/jsx-runtime";
+import { AnimatePresence, motion, useMotionValue, useSpring } from "framer-motion";
+import { getStroke } from "perfect-freehand";
+//#region src/withResponsiveProps.tsx
+/**
+* HOC that reads a `data-responsive` JSON prop and merges per-viewport overrides.
+* Usage: `export default withResponsiveProps(MyComponent)`
+*
+* On the canvas, CodeComponentHost injects `__canvasViewportWidth` to simulate viewport size.
+* In production, uses `window.innerWidth`.
+*
+* data-responsive='{"768":{"fontSize":32},"375":{"fontSize":24}}'
+* Breakpoints are max-width: if viewport <= 768, the 768 overrides apply.
+*/
+function withResponsiveProps(Component) {
+	return function ResponsiveSpark(props) {
+		const canvasVpWidth = props.__canvasViewportWidth;
+		const [windowWidth, setWindowWidth] = useState(typeof window !== "undefined" ? window.innerWidth : 1440);
+		useEffect(() => {
+			if (canvasVpWidth !== void 0) return;
+			const handler = () => setWindowWidth(window.innerWidth);
+			window.addEventListener("resize", handler);
+			return () => window.removeEventListener("resize", handler);
+		}, [canvasVpWidth]);
+		const vpWidth = canvasVpWidth ?? windowWidth;
+		const responsiveStr = props["data-responsive"];
+		let mergedProps = { ...props };
+		if (responsiveStr) try {
+			const overrides = typeof responsiveStr === "string" ? JSON.parse(responsiveStr) : responsiveStr;
+			const sortedBp = [...Array.isArray(overrides._bp) ? overrides._bp : Object.keys(overrides).filter((k) => k !== "_bp").map(Number)].sort((a, b) => a - b);
+			let matchedBp;
+			for (let i = 0; i < sortedBp.length; i++) if (vpWidth > (i > 0 ? sortedBp[i - 1] : 0) && vpWidth <= sortedBp[i]) {
+				matchedBp = sortedBp[i];
+				break;
+			}
+			if (matchedBp !== void 0 && overrides[matchedBp]) mergedProps = {
+				...mergedProps,
+				...overrides[matchedBp]
+			};
+		} catch {}
+		delete mergedProps["data-responsive"];
+		delete mergedProps["__canvasViewportWidth"];
+		return /* @__PURE__ */ jsx(Component, { ...mergedProps });
+	};
+}
+//#endregion
+//#region src/cursor-runtime.tsx
+var _active = null;
+var _listeners = /* @__PURE__ */ new Set();
+var _nextKey = 0;
+function _setActive(next) {
+	_active = next;
+	_listeners.forEach((l) => l());
+}
+function _subscribe(l) {
+	_listeners.add(l);
+	return () => {
+		_listeners.delete(l);
+	};
+}
+function _getActive() {
+	return _active;
+}
+/**
+* Spread the return value into an element to give it a component cursor.
+* Returns onMouseEnter/onMouseLeave handlers that push/pop the global store.
+*
+* <button {...withCursor(Pointer, { mode: 'follow', transition: { type: 'spring', stiffness: 300 } })}>
+*/
+function withCursor(Component, opts = {}) {
+	return {
+		onMouseEnter: () => {
+			_setActive({
+				key: ++_nextKey,
+				Component,
+				opts
+			});
+		},
+		onMouseLeave: () => {
+			_setActive(null);
+		}
+	};
+}
+function _springConfig(t) {
+	if (!t || t.type === "instant") return {
+		stiffness: 1e3,
+		damping: 50,
+		mass: .1
+	};
+	if (t.type === "tween" && t.duration) return {
+		stiffness: Math.max(50, 400 / Math.max(.1, t.duration)),
+		damping: 30,
+		mass: 1
+	};
+	return {
+		stiffness: t.stiffness ?? 300,
+		damping: t.damping ?? 30,
+		mass: t.mass ?? 1
+	};
+}
+function CursorPortal() {
+	const cursor = useSyncExternalStore(_subscribe, _getActive, _getActive);
+	const x = useMotionValue(0);
+	const y = useMotionValue(0);
+	const sx = useSpring(x, _springConfig(cursor?.opts.transition));
+	const sy = useSpring(y, _springConfig(cursor?.opts.transition));
+	useEffect(() => {
+		const onMove = (e) => {
+			x.set(e.clientX + (cursor?.opts.offsetX ?? 0));
+			y.set(e.clientY + (cursor?.opts.offsetY ?? 0));
+		};
+		window.addEventListener("mousemove", onMove);
+		return () => window.removeEventListener("mousemove", onMove);
+	}, [
+		cursor,
+		x,
+		y
+	]);
+	useEffect(() => {
+		if (cursor?.opts.mode === "replace") {
+			const prev = document.body.style.cursor;
+			document.body.style.cursor = "none";
+			return () => {
+				document.body.style.cursor = prev;
+			};
+		}
+	}, [cursor]);
+	const wrapW = typeof cursor?.opts.width === "number" ? cursor.opts.width + "px" : cursor?.opts.width;
+	const wrapH = typeof cursor?.opts.height === "number" ? cursor.opts.height + "px" : cursor?.opts.height;
+	const outerStyle = {
+		position: "fixed",
+		top: 0,
+		left: 0,
+		x: sx,
+		y: sy,
+		pointerEvents: "none",
+		zIndex: 9999
+	};
+	const innerStyle = {
+		width: wrapW,
+		height: wrapH,
+		transform: _innerTransform(cursor?.opts)
+	};
+	if (!cursor?.opts.enterExit) return cursor ? /* @__PURE__ */ jsx(motion.div, {
+		style: outerStyle,
+		children: /* @__PURE__ */ jsx("div", {
+			style: innerStyle,
+			children: /* @__PURE__ */ jsx(cursor.Component, { ...cursor.opts.props ?? {} })
+		})
+	}, cursor.key) : null;
+	return /* @__PURE__ */ jsx(AnimatePresence, { children: cursor && /* @__PURE__ */ jsx(motion.div, {
+		style: outerStyle,
+		initial: {
+			opacity: 0,
+			scale: .8
+		},
+		animate: {
+			opacity: 1,
+			scale: 1
+		},
+		exit: {
+			opacity: 0,
+			scale: .8
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			style: innerStyle,
+			children: /* @__PURE__ */ jsx(cursor.Component, { ...cursor.opts.props ?? {} })
+		})
+	}, cursor.key) });
+}
+/**
+* Build the inner-wrapper transform from side + align + mode. Pure CSS
+* percentage translates so it works regardless of whether width/height are
+* set explicitly. Replace mode auto-centers; Follow mode anchors a corner /
+* edge / center based on the chosen side and alignment.
+*/
+function _innerTransform(opts) {
+	if (!opts || opts.mode === "replace") return "translate(-50%, -50%)";
+	const side = opts.side ?? "bottom";
+	const align = opts.align ?? "center";
+	let tx = 0;
+	let ty = 0;
+	if (side === "top") ty = -100;
+	else if (side === "left") tx = -100;
+	if (side === "top" || side === "bottom") {
+		if (align === "center") tx = -50;
+		else if (align === "end") tx = -100;
+	} else if (align === "center") ty = -50;
+	else if (align === "end") ty = -100;
+	return "translate(" + tx + "%, " + ty + "%)";
+}
+//#endregion
+//#region src/useStaticCanvas.ts
+/**
+* `useStaticCanvas()` — returns `true` when the component is being rendered
+* inside the Revyme canvas editor, `false` in the live preview, published
+* site, or any other consumer environment.
+*
+* Sparks / code components use this to skip GPU-expensive animation work
+* (continuous rAF loops, big CSS blur layers, WebGL frames) on the editor
+* canvas where the user only needs a representative still — paint once,
+* stop. The full animated version still runs in preview and production.
+*
+* Mechanics: this default implementation always returns `false`. The canvas
+* editor's spark loader (`code-component-runtime.ts` MODULE_MAP) overrides
+* the export at compile time so it returns `true` in the canvas iframe and
+* `false` in the spark editor's preview pane (which sets `previewMode`).
+*
+* Mirrors Framer's `useIsStaticRenderer` pattern.
+*/
+function useStaticCanvas() {
+	return false;
+}
+//#endregion
+//#region src/sketch-draw.ts
+var DEFAULT_OPTS = {
+	trigger: "inView",
+	mode: "sequential",
+	durationScale: 1,
+	stagger: .5,
+	transition: {
+		type: "tween",
+		duration: 1,
+		ease: "easeOut"
+	},
+	brushSize: 8
+};
+function applyEase(t, transition) {
+	if (transition.type === "spring") {
+		const damping = transition.damping ?? 10;
+		const stiffness = transition.stiffness ?? 100;
+		const dampedT = 1 - Math.exp(-damping * t * .1);
+		const oscillation = Math.cos(t * Math.sqrt(stiffness) * .3);
+		return Math.min(1, dampedT * (1 - .1 * oscillation * (1 - t)));
+	}
+	switch (transition.ease ?? "easeOut") {
+		case "linear": return t;
+		case "easeIn": return t * t;
+		case "easeOut": return 1 - (1 - t) * (1 - t);
+		case "easeInOut": return t < .5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
+		case "circIn": return 1 - Math.sqrt(1 - t * t);
+		case "circOut": return Math.sqrt(1 - Math.pow(t - 1, 2));
+		case "backOut": {
+			const c1 = 1.70158;
+			return 1 + (c1 + 1) * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2);
+		}
+		default: return 1 - (1 - t) * (1 - t);
+	}
+}
+function parsePoints(raw) {
+	if (!raw) return [];
+	return raw.split(/\s+/).filter(Boolean).map((s) => {
+		const [x, y, p] = s.split(",");
+		return [
+			parseFloat(x) || 0,
+			parseFloat(y) || 0,
+			p != null ? parseFloat(p) : .5
+		];
+	});
+}
+function outlineToD(outline) {
+	if (outline.length === 0) return "";
+	let d = `M ${outline[0][0].toFixed(2)} ${outline[0][1].toFixed(2)}`;
+	for (let i = 1; i < outline.length; i++) d += ` L ${outline[i][0].toFixed(2)} ${outline[i][1].toFixed(2)}`;
+	return d + " Z";
+}
+/**
+* Play a sketch draw animation on the given wrapper SVG. Pass the
+* options the generator emitted in source.
+*
+* Returns a cleanup function — wire as your useEffect's return value
+* so re-mounts cancel an in-flight animation cleanly:
+*
+*   useEffect(() => playSketchDraw(svgEl, opts), []);
+*
+* If `wrapperEl` is null or the wrapper has no path children with
+* `data-points`, this is a no-op and returns a noop cleanup.
+*/
+function playSketchDraw(wrapperEl, userOpts = {}) {
+	const noop = () => {};
+	if (!wrapperEl) return noop;
+	const opts = {
+		...DEFAULT_OPTS,
+		...userOpts,
+		transition: {
+			...DEFAULT_OPTS.transition,
+			...userOpts.transition
+		}
+	};
+	const paths = Array.from(wrapperEl.querySelectorAll("path[data-points]"));
+	if (paths.length === 0) return noop;
+	const finalDs = paths.map((p) => p.getAttribute("d") || "");
+	const pointsList = paths.map((p) => parsePoints(p.getAttribute("data-points") || ""));
+	paths.forEach((p) => p.setAttribute("d", ""));
+	const baseDur = (opts.transition.duration ?? 1) * 1e3 * opts.durationScale;
+	const maxPoints = pointsList.reduce((m, p) => Math.max(m, p.length), 1);
+	const perStrokeDur = pointsList.map((p) => baseDur * (p.length / maxPoints));
+	const startMs = [];
+	let cursor = 0;
+	for (let i = 0; i < paths.length; i++) if (opts.mode === "simultaneous") startMs.push(0);
+	else if (opts.mode === "staggered") {
+		const overlap = Math.max(0, Math.min(1, opts.stagger));
+		const start = i === 0 ? 0 : startMs[i - 1] + perStrokeDur[i - 1] * (1 - overlap);
+		startMs.push(start);
+	} else {
+		startMs.push(cursor);
+		cursor += perStrokeDur[i];
+	}
+	let cancelled = false;
+	let rafId = 0;
+	let started = false;
+	let cleanupTrigger = null;
+	let startTs = 0;
+	const tick = (now) => {
+		if (cancelled) return;
+		const elapsed = now - startTs;
+		let allDone = true;
+		for (let i = 0; i < paths.length; i++) {
+			const local = elapsed - startMs[i];
+			if (local < 0) {
+				allDone = false;
+				continue;
+			}
+			const t = Math.min(1, local / Math.max(1, perStrokeDur[i]));
+			if (t < 1) allDone = false;
+			let d;
+			if (t >= 1) d = finalDs[i];
+			else {
+				const eased = applyEase(t, opts.transition);
+				const sliceCount = Math.max(2, Math.floor(pointsList[i].length * eased));
+				const subset = pointsList[i].slice(0, sliceCount);
+				if (subset.length < 2) d = "";
+				else d = outlineToD(getStroke(subset, {
+					size: opts.brushSize,
+					thinning: .5,
+					smoothing: .5,
+					streamline: .5
+				}));
+			}
+			paths[i].setAttribute("d", d);
+		}
+		if (!allDone) rafId = requestAnimationFrame(tick);
+	};
+	const start = () => {
+		if (started) return;
+		started = true;
+		startTs = performance.now();
+		rafId = requestAnimationFrame(tick);
+	};
+	if (opts.trigger === "inView") {
+		const obs = new IntersectionObserver((entries) => {
+			if (entries.some((e) => e.isIntersecting)) {
+				start();
+				obs.disconnect();
+			}
+		}, { threshold: .2 });
+		obs.observe(wrapperEl);
+		cleanupTrigger = () => obs.disconnect();
+	} else if (opts.trigger === "hover") {
+		const onEnter = () => start();
+		wrapperEl.addEventListener("mouseenter", onEnter);
+		cleanupTrigger = () => wrapperEl.removeEventListener("mouseenter", onEnter);
+	} else if (opts.trigger === "tap") {
+		const onTap = () => start();
+		wrapperEl.addEventListener("click", onTap);
+		cleanupTrigger = () => wrapperEl.removeEventListener("click", onTap);
+	} else start();
+	return () => {
+		cancelled = true;
+		cancelAnimationFrame(rafId);
+		cleanupTrigger?.();
+	};
+}
+//#endregion
+export { CursorPortal, playSketchDraw, useStaticCanvas, withCursor, withResponsiveProps };
+
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../src/withResponsiveProps.tsx","../src/cursor-runtime.tsx","../src/useStaticCanvas.ts","../src/sketch-draw.ts"],"sourcesContent":["'use client';\n\nimport { useState, useEffect, type ComponentType } from 'react';\n\n/**\n * HOC that reads a `data-responsive` JSON prop and merges per-viewport overrides.\n * Usage: `export default withResponsiveProps(MyComponent)`\n *\n * On the canvas, CodeComponentHost injects `__canvasViewportWidth` to simulate viewport size.\n * In production, uses `window.innerWidth`.\n *\n * data-responsive='{\"768\":{\"fontSize\":32},\"375\":{\"fontSize\":24}}'\n * Breakpoints are max-width: if viewport <= 768, the 768 overrides apply.\n */\nexport default function withResponsiveProps<P extends Record<string, any>>(\n  Component: ComponentType<P>\n): ComponentType<P & { 'data-responsive'?: string; __canvasViewportWidth?: number }> {\n  return function ResponsiveSpark(props: any) {\n    const canvasVpWidth = props.__canvasViewportWidth as number | undefined;\n    const [windowWidth, setWindowWidth] = useState(\n      typeof window !== 'undefined' ? window.innerWidth : 1440\n    );\n\n    useEffect(() => {\n      if (canvasVpWidth !== undefined) return;\n      const handler = () => setWindowWidth(window.innerWidth);\n      window.addEventListener('resize', handler);\n      return () => window.removeEventListener('resize', handler);\n    }, [canvasVpWidth]);\n\n    const vpWidth = canvasVpWidth ?? windowWidth;\n    const responsiveStr = props['data-responsive'];\n    let mergedProps = { ...props };\n\n    if (responsiveStr) {\n      try {\n        const overrides = typeof responsiveStr === 'string'\n          ? JSON.parse(responsiveStr) : responsiveStr;\n        // _bp contains all viewport breakpoint widths for range computation.\n        // Each breakpoint's range is (prev_bp, bp]. Prevents cascade.\n        const allBp = Array.isArray(overrides._bp)\n          ? overrides._bp : Object.keys(overrides).filter(k => k !== '_bp').map(Number);\n        const sortedBp = [...allBp].sort((a, b) => a - b);\n        let matchedBp;\n        for (let i = 0; i < sortedBp.length; i++) {\n          const lower = i > 0 ? sortedBp[i - 1] : 0;\n          if (vpWidth > lower && vpWidth <= sortedBp[i]) {\n            matchedBp = sortedBp[i];\n            break;\n          }\n        }\n        if (matchedBp !== undefined && overrides[matchedBp]) {\n          mergedProps = { ...mergedProps, ...overrides[matchedBp] };\n        }\n      } catch {}\n    }\n\n    delete mergedProps['data-responsive'];\n    delete mergedProps['__canvasViewportWidth'];\n    return <Component {...mergedProps} />;\n  };\n}\n","'use client';\n\nimport { useEffect, useSyncExternalStore, type ComponentType } from 'react';\nimport { motion, AnimatePresence, useMotionValue, useSpring } from 'framer-motion';\n\nexport type CursorMode = 'follow' | 'replace';\nexport type CursorSide = 'top' | 'bottom' | 'left' | 'right';\nexport type CursorAlign = 'start' | 'center' | 'end';\n\nexport interface CursorTransition {\n  type?: 'spring' | 'tween' | 'instant';\n  stiffness?: number;\n  damping?: number;\n  mass?: number;\n  duration?: number;\n  ease?: string;\n}\n\nexport interface CursorOpts<P = any> {\n  variant?: string;\n  mode?: CursorMode;\n  /**\n   * Which side of the mouse the cursor wrapper anchors to (Follow mode).\n   * Replace mode ignores side / align / offset — it auto-centers on the mouse.\n   */\n  side?: CursorSide;\n  /**\n   * Alignment along the perpendicular axis to `side`.\n   * top/bottom: start = left, center = horizontal center, end = right.\n   * left/right: start = top,  center = vertical center,   end = bottom.\n   */\n  align?: CursorAlign;\n  offsetX?: number;\n  offsetY?: number;\n  transition?: CursorTransition;\n  props?: Partial<P>;\n  /**\n   * Wrapper width / height applied to the cursor's outer motion.div. Useful\n   * for code components (canvases, sparks) that fill their parent — without\n   * this they'd render at their intrinsic size, which is often the whole\n   * viewport. Plain numbers are interpreted as px; pass a string ('100%',\n   * '4rem') to use other CSS units.\n   */\n  width?: number | string;\n  height?: number | string;\n  /**\n   * When true, fade/scale on enter and exit via AnimatePresence. Default\n   * false: appear and disappear instantly. The follow movement is always\n   * smoothed by the spring config above — `enterExit` only controls the\n   * mount/unmount transition.\n   */\n  enterExit?: boolean;\n}\n\ninterface ActiveCursor {\n  key: number;\n  Component: ComponentType<any>;\n  opts: CursorOpts;\n}\n\n// ─── Global store (vanilla, no React) ───────────────────────────────────────\nlet _active: ActiveCursor | null = null;\nconst _listeners = new Set<() => void>();\nlet _nextKey = 0;\n\nfunction _setActive(next: ActiveCursor | null) {\n  _active = next;\n  _listeners.forEach((l) => l());\n}\n\nfunction _subscribe(l: () => void) {\n  _listeners.add(l);\n  return () => { _listeners.delete(l); };\n}\n\nfunction _getActive() {\n  return _active;\n}\n\n/**\n * Spread the return value into an element to give it a component cursor.\n * Returns onMouseEnter/onMouseLeave handlers that push/pop the global store.\n *\n * <button {...withCursor(Pointer, { mode: 'follow', transition: { type: 'spring', stiffness: 300 } })}>\n */\nexport function withCursor<P>(Component: ComponentType<P>, opts: CursorOpts<P> = {}) {\n  return {\n    onMouseEnter: () => {\n      _setActive({ key: ++_nextKey, Component: Component as ComponentType<any>, opts });\n    },\n    onMouseLeave: () => {\n      _setActive(null);\n    },\n  };\n}\n\n// ─── Portal (mount once in LayoutClient) ────────────────────────────────────\n\nfunction _springConfig(t?: CursorTransition) {\n  if (!t || t.type === 'instant') return { stiffness: 1000, damping: 50, mass: 0.1 };\n  if (t.type === 'tween' && t.duration) {\n    // Map a tween duration to roughly-equivalent spring values.\n    const stiffness = Math.max(50, 400 / Math.max(0.1, t.duration));\n    return { stiffness, damping: 30, mass: 1 };\n  }\n  return {\n    stiffness: t.stiffness ?? 300,\n    damping: t.damping ?? 30,\n    mass: t.mass ?? 1,\n  };\n}\n\nexport function CursorPortal() {\n  const cursor = useSyncExternalStore(_subscribe, _getActive, _getActive);\n\n  const x = useMotionValue(0);\n  const y = useMotionValue(0);\n  const sx = useSpring(x, _springConfig(cursor?.opts.transition));\n  const sy = useSpring(y, _springConfig(cursor?.opts.transition));\n\n  useEffect(() => {\n    const onMove = (e: MouseEvent) => {\n      x.set(e.clientX + (cursor?.opts.offsetX ?? 0));\n      y.set(e.clientY + (cursor?.opts.offsetY ?? 0));\n    };\n    window.addEventListener('mousemove', onMove);\n    return () => window.removeEventListener('mousemove', onMove);\n  }, [cursor, x, y]);\n\n  useEffect(() => {\n    if (cursor?.opts.mode === 'replace') {\n      const prev = document.body.style.cursor;\n      document.body.style.cursor = 'none';\n      return () => { document.body.style.cursor = prev; };\n    }\n  }, [cursor]);\n\n  // Wrapper width/height — numbers become px, strings pass through. Falls\n  // back to undefined so intrinsic sizing kicks in if the user hasn't set it.\n  const wrapW = typeof cursor?.opts.width === 'number' ? cursor.opts.width + 'px' : cursor?.opts.width;\n  const wrapH = typeof cursor?.opts.height === 'number' ? cursor.opts.height + 'px' : cursor?.opts.height;\n\n  // The OUTER motion.div carries the spring x/y (mouse position). The INNER\n  // div applies a percentage transform for side+align (or auto-center in\n  // Replace mode). Splitting them avoids fighting with framer-motion's own\n  // transform handling on the x/y motion values.\n  const outerStyle = {\n    position: 'fixed' as const,\n    top: 0,\n    left: 0,\n    x: sx,\n    y: sy,\n    pointerEvents: 'none' as const,\n    zIndex: 9999,\n  };\n  const innerTransform = _innerTransform(cursor?.opts);\n  const innerStyle = {\n    width: wrapW,\n    height: wrapH,\n    transform: innerTransform,\n  };\n\n  // Default: instant in/out (no AnimatePresence wrapping). Wrap only when\n  // the active cursor opts in via `enterExit: true` — keeps mount/unmount\n  // snappy by default and avoids the brief fade-out from the previous cursor\n  // when hovering between adjacent elements.\n  if (!cursor?.opts.enterExit) {\n    return cursor ? (\n      <motion.div key={cursor.key} style={outerStyle}>\n        <div style={innerStyle}>\n          <cursor.Component {...(cursor.opts.props ?? {})} />\n        </div>\n      </motion.div>\n    ) : null;\n  }\n\n  return (\n    <AnimatePresence>\n      {cursor && (\n        <motion.div\n          key={cursor.key}\n          style={outerStyle}\n          initial={{ opacity: 0, scale: 0.8 }}\n          animate={{ opacity: 1, scale: 1 }}\n          exit={{ opacity: 0, scale: 0.8 }}\n        >\n          <div style={innerStyle}>\n            <cursor.Component {...(cursor.opts.props ?? {})} />\n          </div>\n        </motion.div>\n      )}\n    </AnimatePresence>\n  );\n}\n\n/**\n * Build the inner-wrapper transform from side + align + mode. Pure CSS\n * percentage translates so it works regardless of whether width/height are\n * set explicitly. Replace mode auto-centers; Follow mode anchors a corner /\n * edge / center based on the chosen side and alignment.\n */\nfunction _innerTransform(opts?: CursorOpts) {\n  if (!opts || opts.mode === 'replace') return 'translate(-50%, -50%)';\n  const side = opts.side ?? 'bottom';\n  const align = opts.align ?? 'center';\n  let tx = 0;\n  let ty = 0;\n  if (side === 'top') ty = -100;\n  else if (side === 'left') tx = -100;\n  // 'bottom' and 'right' default to 0 on the main axis.\n  // Align controls the perpendicular axis.\n  if (side === 'top' || side === 'bottom') {\n    if (align === 'center') tx = -50;\n    else if (align === 'end') tx = -100;\n  } else {\n    if (align === 'center') ty = -50;\n    else if (align === 'end') ty = -100;\n  }\n  return 'translate(' + tx + '%, ' + ty + '%)';\n}\n","'use client';\n\n/**\n * `useStaticCanvas()` — returns `true` when the component is being rendered\n * inside the Revyme canvas editor, `false` in the live preview, published\n * site, or any other consumer environment.\n *\n * Sparks / code components use this to skip GPU-expensive animation work\n * (continuous rAF loops, big CSS blur layers, WebGL frames) on the editor\n * canvas where the user only needs a representative still — paint once,\n * stop. The full animated version still runs in preview and production.\n *\n * Mechanics: this default implementation always returns `false`. The canvas\n * editor's spark loader (`code-component-runtime.ts` MODULE_MAP) overrides\n * the export at compile time so it returns `true` in the canvas iframe and\n * `false` in the spark editor's preview pane (which sets `previewMode`).\n *\n * Mirrors Framer's `useIsStaticRenderer` pattern.\n */\nexport function useStaticCanvas(): boolean {\n  return false;\n}\n","// sketch-draw.ts — Runtime player for Revyme sketch draw animations.\n//\n// Replays a brush-stroke sketch over time by feeding the original\n// pointer samples (persisted on each `<path>` as a `data-points`\n// attribute) back through perfect-freehand's `getStroke` at\n// progressively-increasing slice lengths. The result is the visible\n// equivalent of watching the user draw the sketch.\n//\n// Why a runtime function instead of an inline useEffect block in the\n// generated source: the orchestrator is ~80 LOC of imperative timing\n// + easing + RAF logic. Inlining it in every page that has a sketch\n// animation buries the page's actual logic. Living in\n// `@revyme/runtime` means the generated source is just one line:\n//\n//   useEffect(() => playSketchDraw(el, opts), []);\n//\n// which reads the same way as `withResponsiveProps` / `withCursor`\n// already do for other generated patterns.\n\nimport { getStroke } from 'perfect-freehand';\n\nexport type SketchAnimMode = 'sequential' | 'staggered' | 'simultaneous';\nexport type SketchAnimTrigger = 'mount' | 'inView' | 'hover' | 'tap';\n\nexport interface SketchAnimTransition {\n  type: 'tween' | 'spring';\n  duration?: number;\n  ease?: string;\n  stiffness?: number;\n  damping?: number;\n  mass?: number;\n}\n\nexport interface SketchAnimOpts {\n  trigger?: SketchAnimTrigger;\n  mode?: SketchAnimMode;\n  /** Multiplier on per-stroke duration. Per-stroke duration scales\n   *  with point count so a long stroke takes longer than a flick;\n   *  this dials the overall pace. */\n  durationScale?: number;\n  /** 0–1, only meaningful in staggered mode. 0 = fully sequential,\n   *  1 = fully simultaneous. */\n  stagger?: number;\n  transition?: SketchAnimTransition;\n  /** Brush size used for the intermediate-frame outline replay. The\n   *  final-frame `d` is restored from source so the end state is\n   *  pixel-exact regardless of this value. */\n  brushSize?: number;\n}\n\nconst DEFAULT_OPTS: Required<Omit<SketchAnimOpts, 'transition'>> & { transition: SketchAnimTransition } = {\n  trigger: 'inView',\n  mode: 'sequential',\n  durationScale: 1,\n  stagger: 0.5,\n  transition: { type: 'tween', duration: 1, ease: 'easeOut' },\n  brushSize: 8,\n};\n\nfunction applyEase(t: number, transition: SketchAnimTransition): number {\n  if (transition.type === 'spring') {\n    const damping = transition.damping ?? 10;\n    const stiffness = transition.stiffness ?? 100;\n    const dampedT = 1 - Math.exp(-damping * t * 0.1);\n    const oscillation = Math.cos(t * Math.sqrt(stiffness) * 0.3);\n    return Math.min(1, dampedT * (1 - 0.1 * oscillation * (1 - t)));\n  }\n  switch (transition.ease ?? 'easeOut') {\n    case 'linear': return t;\n    case 'easeIn': return t * t;\n    case 'easeOut': return 1 - (1 - t) * (1 - t);\n    case 'easeInOut': return t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;\n    case 'circIn': return 1 - Math.sqrt(1 - t * t);\n    case 'circOut': return Math.sqrt(1 - Math.pow(t - 1, 2));\n    case 'backOut': {\n      const c1 = 1.70158;\n      const c3 = c1 + 1;\n      return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2);\n    }\n    default: return 1 - (1 - t) * (1 - t);\n  }\n}\n\nfunction parsePoints(raw: string): number[][] {\n  if (!raw) return [];\n  return raw.split(/\\s+/).filter(Boolean).map(s => {\n    const [x, y, p] = s.split(',');\n    return [parseFloat(x) || 0, parseFloat(y) || 0, p != null ? parseFloat(p) : 0.5];\n  });\n}\n\nfunction outlineToD(outline: number[][]): string {\n  if (outline.length === 0) return '';\n  let d = `M ${outline[0][0].toFixed(2)} ${outline[0][1].toFixed(2)}`;\n  for (let i = 1; i < outline.length; i++) {\n    d += ` L ${outline[i][0].toFixed(2)} ${outline[i][1].toFixed(2)}`;\n  }\n  return d + ' Z';\n}\n\n/**\n * Play a sketch draw animation on the given wrapper SVG. Pass the\n * options the generator emitted in source.\n *\n * Returns a cleanup function — wire as your useEffect's return value\n * so re-mounts cancel an in-flight animation cleanly:\n *\n *   useEffect(() => playSketchDraw(svgEl, opts), []);\n *\n * If `wrapperEl` is null or the wrapper has no path children with\n * `data-points`, this is a no-op and returns a noop cleanup.\n */\nexport function playSketchDraw(\n  wrapperEl: SVGSVGElement | null,\n  userOpts: SketchAnimOpts = {},\n): () => void {\n  const noop = () => {};\n  if (!wrapperEl) return noop;\n  const opts = { ...DEFAULT_OPTS, ...userOpts, transition: { ...DEFAULT_OPTS.transition, ...userOpts.transition } };\n\n  const paths = Array.from(wrapperEl.querySelectorAll('path[data-points]')) as SVGPathElement[];\n  if (paths.length === 0) return noop;\n\n  // Snapshot the final d so the last frame is pixel-exact regardless\n  // of the replay-with-default-brush approximation we use during\n  // intermediate frames.\n  const finalDs = paths.map(p => p.getAttribute('d') || '');\n  const pointsList = paths.map(p => parsePoints(p.getAttribute('data-points') || ''));\n\n  // Hide everything up front so the first frame doesn't flash.\n  paths.forEach(p => p.setAttribute('d', ''));\n\n  // Per-stroke duration — point count drives length so a long stroke\n  // takes longer than a flick.\n  const baseDur = (opts.transition.duration ?? 1) * 1000 * opts.durationScale;\n  const maxPoints = pointsList.reduce((m, p) => Math.max(m, p.length), 1);\n  const perStrokeDur = pointsList.map(p => baseDur * (p.length / maxPoints));\n  const startMs: number[] = [];\n  let cursor = 0;\n  for (let i = 0; i < paths.length; i++) {\n    if (opts.mode === 'simultaneous') {\n      startMs.push(0);\n    } else if (opts.mode === 'staggered') {\n      const overlap = Math.max(0, Math.min(1, opts.stagger));\n      const start = i === 0 ? 0 : startMs[i - 1] + perStrokeDur[i - 1] * (1 - overlap);\n      startMs.push(start);\n    } else {\n      // sequential\n      startMs.push(cursor);\n      cursor += perStrokeDur[i];\n    }\n  }\n\n  let cancelled = false;\n  let rafId = 0;\n  let started = false;\n  let cleanupTrigger: (() => void) | null = null;\n  let startTs = 0;\n\n  const tick = (now: number) => {\n    if (cancelled) return;\n    const elapsed = now - startTs;\n    let allDone = true;\n    for (let i = 0; i < paths.length; i++) {\n      const local = elapsed - startMs[i];\n      if (local < 0) { allDone = false; continue; }\n      const t = Math.min(1, local / Math.max(1, perStrokeDur[i]));\n      if (t < 1) allDone = false;\n      let d: string;\n      if (t >= 1) {\n        d = finalDs[i];\n      } else {\n        const eased = applyEase(t, opts.transition);\n        const sliceCount = Math.max(2, Math.floor(pointsList[i].length * eased));\n        const subset = pointsList[i].slice(0, sliceCount);\n        if (subset.length < 2) {\n          d = '';\n        } else {\n          const outline = getStroke(subset, {\n            size: opts.brushSize, thinning: 0.5, smoothing: 0.5, streamline: 0.5,\n          });\n          d = outlineToD(outline);\n        }\n      }\n      paths[i].setAttribute('d', d);\n    }\n    if (!allDone) rafId = requestAnimationFrame(tick);\n  };\n\n  const start = () => {\n    if (started) return;\n    started = true;\n    startTs = performance.now();\n    rafId = requestAnimationFrame(tick);\n  };\n\n  if (opts.trigger === 'inView') {\n    const obs = new IntersectionObserver((entries) => {\n      if (entries.some(e => e.isIntersecting)) {\n        start();\n        obs.disconnect();\n      }\n    }, { threshold: 0.2 });\n    obs.observe(wrapperEl);\n    cleanupTrigger = () => obs.disconnect();\n  } else if (opts.trigger === 'hover') {\n    const onEnter = () => start();\n    wrapperEl.addEventListener('mouseenter', onEnter);\n    cleanupTrigger = () => wrapperEl.removeEventListener('mouseenter', onEnter);\n  } else if (opts.trigger === 'tap') {\n    const onTap = () => start();\n    wrapperEl.addEventListener('click', onTap);\n    cleanupTrigger = () => wrapperEl.removeEventListener('click', onTap);\n  } else {\n    // mount\n    start();\n  }\n\n  return () => {\n    cancelled = true;\n    cancelAnimationFrame(rafId);\n    cleanupTrigger?.();\n  };\n}\n"],"mappings":"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"}

package/dist/sketch-draw.d.ts

@@ -0,0 +1,39 @@
+export type SketchAnimMode = 'sequential' | 'staggered' | 'simultaneous';
+export type SketchAnimTrigger = 'mount' | 'inView' | 'hover' | 'tap';
+export interface SketchAnimTransition {
+    type: 'tween' | 'spring';
+    duration?: number;
+    ease?: string;
+    stiffness?: number;
+    damping?: number;
+    mass?: number;
+}
+export interface SketchAnimOpts {
+    trigger?: SketchAnimTrigger;
+    mode?: SketchAnimMode;
+    /** Multiplier on per-stroke duration. Per-stroke duration scales
+     *  with point count so a long stroke takes longer than a flick;
+     *  this dials the overall pace. */
+    durationScale?: number;
+    /** 0–1, only meaningful in staggered mode. 0 = fully sequential,
+     *  1 = fully simultaneous. */
+    stagger?: number;
+    transition?: SketchAnimTransition;
+    /** Brush size used for the intermediate-frame outline replay. The
+     *  final-frame `d` is restored from source so the end state is
+     *  pixel-exact regardless of this value. */
+    brushSize?: number;
+}
+/**
+ * Play a sketch draw animation on the given wrapper SVG. Pass the
+ * options the generator emitted in source.
+ *
+ * Returns a cleanup function — wire as your useEffect's return value
+ * so re-mounts cancel an in-flight animation cleanly:
+ *
+ *   useEffect(() => playSketchDraw(svgEl, opts), []);
+ *
+ * If `wrapperEl` is null or the wrapper has no path children with
+ * `data-points`, this is a no-op and returns a noop cleanup.
+ */
+export declare function playSketchDraw(wrapperEl: SVGSVGElement | null, userOpts?: SketchAnimOpts): () => void;

package/dist/useStaticCanvas.d.ts

@@ -0,0 +1,18 @@
+/**
+ * `useStaticCanvas()` — returns `true` when the component is being rendered
+ * inside the Revyme canvas editor, `false` in the live preview, published
+ * site, or any other consumer environment.
+ *
+ * Sparks / code components use this to skip GPU-expensive animation work
+ * (continuous rAF loops, big CSS blur layers, WebGL frames) on the editor
+ * canvas where the user only needs a representative still — paint once,
+ * stop. The full animated version still runs in preview and production.
+ *
+ * Mechanics: this default implementation always returns `false`. The canvas
+ * editor's spark loader (`code-component-runtime.ts` MODULE_MAP) overrides
+ * the export at compile time so it returns `true` in the canvas iframe and
+ * `false` in the spark editor's preview pane (which sets `previewMode`).
+ *
+ * Mirrors Framer's `useIsStaticRenderer` pattern.
+ */
+export declare function useStaticCanvas(): boolean;

package/dist/withResponsiveProps.d.ts

@@ -0,0 +1,15 @@
+import { type ComponentType } from 'react';
+/**
+ * HOC that reads a `data-responsive` JSON prop and merges per-viewport overrides.
+ * Usage: `export default withResponsiveProps(MyComponent)`
+ *
+ * On the canvas, CodeComponentHost injects `__canvasViewportWidth` to simulate viewport size.
+ * In production, uses `window.innerWidth`.
+ *
+ * data-responsive='{"768":{"fontSize":32},"375":{"fontSize":24}}'
+ * Breakpoints are max-width: if viewport <= 768, the 768 overrides apply.
+ */
+export default function withResponsiveProps<P extends Record<string, any>>(Component: ComponentType<P>): ComponentType<P & {
+    'data-responsive'?: string;
+    __canvasViewportWidth?: number;
+}>;

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@revyme/runtime",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "vite build && tsc -p tsconfig.build.json --emitDeclarationOnly",
+    "dev": "vite build --watch"
+  },
+  "peerDependencies": {
+    "framer-motion": ">=11",
+    "perfect-freehand": ">=1.2",
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "peerDependenciesMeta": {
+    "perfect-freehand": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "perfect-freehand": "^1.2.3",
+    "typescript": "^5.9.3",
+    "vite": "^8.0.1"
+  }
+}

package/src/cursor-runtime.tsx

@@ -0,0 +1,220 @@
+'use client';
+
+import { useEffect, useSyncExternalStore, type ComponentType } from 'react';
+import { motion, AnimatePresence, useMotionValue, useSpring } from 'framer-motion';
+
+export type CursorMode = 'follow' | 'replace';
+export type CursorSide = 'top' | 'bottom' | 'left' | 'right';
+export type CursorAlign = 'start' | 'center' | 'end';
+
+export interface CursorTransition {
+  type?: 'spring' | 'tween' | 'instant';
+  stiffness?: number;
+  damping?: number;
+  mass?: number;
+  duration?: number;
+  ease?: string;
+}
+
+export interface CursorOpts<P = any> {
+  variant?: string;
+  mode?: CursorMode;
+  /**
+   * Which side of the mouse the cursor wrapper anchors to (Follow mode).
+   * Replace mode ignores side / align / offset — it auto-centers on the mouse.
+   */
+  side?: CursorSide;
+  /**
+   * Alignment along the perpendicular axis to `side`.
+   * top/bottom: start = left, center = horizontal center, end = right.
+   * left/right: start = top,  center = vertical center,   end = bottom.
+   */
+  align?: CursorAlign;
+  offsetX?: number;
+  offsetY?: number;
+  transition?: CursorTransition;
+  props?: Partial<P>;
+  /**
+   * Wrapper width / height applied to the cursor's outer motion.div. Useful
+   * for code components (canvases, sparks) that fill their parent — without
+   * this they'd render at their intrinsic size, which is often the whole
+   * viewport. Plain numbers are interpreted as px; pass a string ('100%',
+   * '4rem') to use other CSS units.
+   */
+  width?: number | string;
+  height?: number | string;
+  /**
+   * When true, fade/scale on enter and exit via AnimatePresence. Default
+   * false: appear and disappear instantly. The follow movement is always
+   * smoothed by the spring config above — `enterExit` only controls the
+   * mount/unmount transition.
+   */
+  enterExit?: boolean;
+}
+
+interface ActiveCursor {
+  key: number;
+  Component: ComponentType<any>;
+  opts: CursorOpts;
+}
+
+// ─── Global store (vanilla, no React) ───────────────────────────────────────
+let _active: ActiveCursor | null = null;
+const _listeners = new Set<() => void>();
+let _nextKey = 0;
+
+function _setActive(next: ActiveCursor | null) {
+  _active = next;
+  _listeners.forEach((l) => l());
+}
+
+function _subscribe(l: () => void) {
+  _listeners.add(l);
+  return () => { _listeners.delete(l); };
+}
+
+function _getActive() {
+  return _active;
+}
+
+/**
+ * Spread the return value into an element to give it a component cursor.
+ * Returns onMouseEnter/onMouseLeave handlers that push/pop the global store.
+ *
+ * <button {...withCursor(Pointer, { mode: 'follow', transition: { type: 'spring', stiffness: 300 } })}>
+ */
+export function withCursor<P>(Component: ComponentType<P>, opts: CursorOpts<P> = {}) {
+  return {
+    onMouseEnter: () => {
+      _setActive({ key: ++_nextKey, Component: Component as ComponentType<any>, opts });
+    },
+    onMouseLeave: () => {
+      _setActive(null);
+    },
+  };
+}
+
+// ─── Portal (mount once in LayoutClient) ────────────────────────────────────
+
+function _springConfig(t?: CursorTransition) {
+  if (!t || t.type === 'instant') return { stiffness: 1000, damping: 50, mass: 0.1 };
+  if (t.type === 'tween' && t.duration) {
+    // Map a tween duration to roughly-equivalent spring values.
+    const stiffness = Math.max(50, 400 / Math.max(0.1, t.duration));
+    return { stiffness, damping: 30, mass: 1 };
+  }
+  return {
+    stiffness: t.stiffness ?? 300,
+    damping: t.damping ?? 30,
+    mass: t.mass ?? 1,
+  };
+}
+
+export function CursorPortal() {
+  const cursor = useSyncExternalStore(_subscribe, _getActive, _getActive);
+
+  const x = useMotionValue(0);
+  const y = useMotionValue(0);
+  const sx = useSpring(x, _springConfig(cursor?.opts.transition));
+  const sy = useSpring(y, _springConfig(cursor?.opts.transition));
+
+  useEffect(() => {
+    const onMove = (e: MouseEvent) => {
+      x.set(e.clientX + (cursor?.opts.offsetX ?? 0));
+      y.set(e.clientY + (cursor?.opts.offsetY ?? 0));
+    };
+    window.addEventListener('mousemove', onMove);
+    return () => window.removeEventListener('mousemove', onMove);
+  }, [cursor, x, y]);
+
+  useEffect(() => {
+    if (cursor?.opts.mode === 'replace') {
+      const prev = document.body.style.cursor;
+      document.body.style.cursor = 'none';
+      return () => { document.body.style.cursor = prev; };
+    }
+  }, [cursor]);
+
+  // Wrapper width/height — numbers become px, strings pass through. Falls
+  // back to undefined so intrinsic sizing kicks in if the user hasn't set it.
+  const wrapW = typeof cursor?.opts.width === 'number' ? cursor.opts.width + 'px' : cursor?.opts.width;
+  const wrapH = typeof cursor?.opts.height === 'number' ? cursor.opts.height + 'px' : cursor?.opts.height;
+
+  // The OUTER motion.div carries the spring x/y (mouse position). The INNER
+  // div applies a percentage transform for side+align (or auto-center in
+  // Replace mode). Splitting them avoids fighting with framer-motion's own
+  // transform handling on the x/y motion values.
+  const outerStyle = {
+    position: 'fixed' as const,
+    top: 0,
+    left: 0,
+    x: sx,
+    y: sy,
+    pointerEvents: 'none' as const,
+    zIndex: 9999,
+  };
+  const innerTransform = _innerTransform(cursor?.opts);
+  const innerStyle = {
+    width: wrapW,
+    height: wrapH,
+    transform: innerTransform,
+  };
+
+  // Default: instant in/out (no AnimatePresence wrapping). Wrap only when
+  // the active cursor opts in via `enterExit: true` — keeps mount/unmount
+  // snappy by default and avoids the brief fade-out from the previous cursor
+  // when hovering between adjacent elements.
+  if (!cursor?.opts.enterExit) {
+    return cursor ? (
+      <motion.div key={cursor.key} style={outerStyle}>
+        <div style={innerStyle}>
+          <cursor.Component {...(cursor.opts.props ?? {})} />
+        </div>
+      </motion.div>
+    ) : null;
+  }
+
+  return (
+    <AnimatePresence>
+      {cursor && (
+        <motion.div
+          key={cursor.key}
+          style={outerStyle}
+          initial={{ opacity: 0, scale: 0.8 }}
+          animate={{ opacity: 1, scale: 1 }}
+          exit={{ opacity: 0, scale: 0.8 }}
+        >
+          <div style={innerStyle}>
+            <cursor.Component {...(cursor.opts.props ?? {})} />
+          </div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}
+
+/**
+ * Build the inner-wrapper transform from side + align + mode. Pure CSS
+ * percentage translates so it works regardless of whether width/height are
+ * set explicitly. Replace mode auto-centers; Follow mode anchors a corner /
+ * edge / center based on the chosen side and alignment.
+ */
+function _innerTransform(opts?: CursorOpts) {
+  if (!opts || opts.mode === 'replace') return 'translate(-50%, -50%)';
+  const side = opts.side ?? 'bottom';
+  const align = opts.align ?? 'center';
+  let tx = 0;
+  let ty = 0;
+  if (side === 'top') ty = -100;
+  else if (side === 'left') tx = -100;
+  // 'bottom' and 'right' default to 0 on the main axis.
+  // Align controls the perpendicular axis.
+  if (side === 'top' || side === 'bottom') {
+    if (align === 'center') tx = -50;
+    else if (align === 'end') tx = -100;
+  } else {
+    if (align === 'center') ty = -50;
+    else if (align === 'end') ty = -100;
+  }
+  return 'translate(' + tx + '%, ' + ty + '%)';
+}

package/src/index.ts

@@ -0,0 +1,30 @@
+// @revyme/runtime — runtime utilities used by Revyme-generated React code.
+//
+// Lives outside `canvas-poc` so design components and code components in
+// any Revyme project (and eventually any external React project, once
+// published to npm) can import from a stable `@revyme/runtime` package
+// name instead of a project-local `@/lib/...` alias.
+//
+// Inside Revyme's own monorepo: linked via `file:../runtime` in
+// `canvas-poc/package.json`. No npm publish needed for in-house use.
+// External consumers will install via `npm i @revyme/runtime` once we
+// publish — same shape as `framer-motion`.
+
+export { default as withResponsiveProps } from './withResponsiveProps';
+export {
+  withCursor,
+  CursorPortal,
+  type CursorMode,
+  type CursorSide,
+  type CursorAlign,
+  type CursorTransition,
+  type CursorOpts,
+} from './cursor-runtime';
+export { useStaticCanvas } from './useStaticCanvas';
+export {
+  playSketchDraw,
+  type SketchAnimOpts,
+  type SketchAnimMode,
+  type SketchAnimTrigger,
+  type SketchAnimTransition,
+} from './sketch-draw';

package/src/sketch-draw.ts

@@ -0,0 +1,224 @@
+// sketch-draw.ts — Runtime player for Revyme sketch draw animations.
+//
+// Replays a brush-stroke sketch over time by feeding the original
+// pointer samples (persisted on each `<path>` as a `data-points`
+// attribute) back through perfect-freehand's `getStroke` at
+// progressively-increasing slice lengths. The result is the visible
+// equivalent of watching the user draw the sketch.
+//
+// Why a runtime function instead of an inline useEffect block in the
+// generated source: the orchestrator is ~80 LOC of imperative timing
+// + easing + RAF logic. Inlining it in every page that has a sketch
+// animation buries the page's actual logic. Living in
+// `@revyme/runtime` means the generated source is just one line:
+//
+//   useEffect(() => playSketchDraw(el, opts), []);
+//
+// which reads the same way as `withResponsiveProps` / `withCursor`
+// already do for other generated patterns.
+
+import { getStroke } from 'perfect-freehand';
+
+export type SketchAnimMode = 'sequential' | 'staggered' | 'simultaneous';
+export type SketchAnimTrigger = 'mount' | 'inView' | 'hover' | 'tap';
+
+export interface SketchAnimTransition {
+  type: 'tween' | 'spring';
+  duration?: number;
+  ease?: string;
+  stiffness?: number;
+  damping?: number;
+  mass?: number;
+}
+
+export interface SketchAnimOpts {
+  trigger?: SketchAnimTrigger;
+  mode?: SketchAnimMode;
+  /** Multiplier on per-stroke duration. Per-stroke duration scales
+   *  with point count so a long stroke takes longer than a flick;
+   *  this dials the overall pace. */
+  durationScale?: number;
+  /** 0–1, only meaningful in staggered mode. 0 = fully sequential,
+   *  1 = fully simultaneous. */
+  stagger?: number;
+  transition?: SketchAnimTransition;
+  /** Brush size used for the intermediate-frame outline replay. The
+   *  final-frame `d` is restored from source so the end state is
+   *  pixel-exact regardless of this value. */
+  brushSize?: number;
+}
+
+const DEFAULT_OPTS: Required<Omit<SketchAnimOpts, 'transition'>> & { transition: SketchAnimTransition } = {
+  trigger: 'inView',
+  mode: 'sequential',
+  durationScale: 1,
+  stagger: 0.5,
+  transition: { type: 'tween', duration: 1, ease: 'easeOut' },
+  brushSize: 8,
+};
+
+function applyEase(t: number, transition: SketchAnimTransition): number {
+  if (transition.type === 'spring') {
+    const damping = transition.damping ?? 10;
+    const stiffness = transition.stiffness ?? 100;
+    const dampedT = 1 - Math.exp(-damping * t * 0.1);
+    const oscillation = Math.cos(t * Math.sqrt(stiffness) * 0.3);
+    return Math.min(1, dampedT * (1 - 0.1 * oscillation * (1 - t)));
+  }
+  switch (transition.ease ?? 'easeOut') {
+    case 'linear': return t;
+    case 'easeIn': return t * t;
+    case 'easeOut': return 1 - (1 - t) * (1 - t);
+    case 'easeInOut': return t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
+    case 'circIn': return 1 - Math.sqrt(1 - t * t);
+    case 'circOut': return Math.sqrt(1 - Math.pow(t - 1, 2));
+    case 'backOut': {
+      const c1 = 1.70158;
+      const c3 = c1 + 1;
+      return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2);
+    }
+    default: return 1 - (1 - t) * (1 - t);
+  }
+}
+
+function parsePoints(raw: string): number[][] {
+  if (!raw) return [];
+  return raw.split(/\s+/).filter(Boolean).map(s => {
+    const [x, y, p] = s.split(',');
+    return [parseFloat(x) || 0, parseFloat(y) || 0, p != null ? parseFloat(p) : 0.5];
+  });
+}
+
+function outlineToD(outline: number[][]): string {
+  if (outline.length === 0) return '';
+  let d = `M ${outline[0][0].toFixed(2)} ${outline[0][1].toFixed(2)}`;
+  for (let i = 1; i < outline.length; i++) {
+    d += ` L ${outline[i][0].toFixed(2)} ${outline[i][1].toFixed(2)}`;
+  }
+  return d + ' Z';
+}
+
+/**
+ * Play a sketch draw animation on the given wrapper SVG. Pass the
+ * options the generator emitted in source.
+ *
+ * Returns a cleanup function — wire as your useEffect's return value
+ * so re-mounts cancel an in-flight animation cleanly:
+ *
+ *   useEffect(() => playSketchDraw(svgEl, opts), []);
+ *
+ * If `wrapperEl` is null or the wrapper has no path children with
+ * `data-points`, this is a no-op and returns a noop cleanup.
+ */
+export function playSketchDraw(
+  wrapperEl: SVGSVGElement | null,
+  userOpts: SketchAnimOpts = {},
+): () => void {
+  const noop = () => {};
+  if (!wrapperEl) return noop;
+  const opts = { ...DEFAULT_OPTS, ...userOpts, transition: { ...DEFAULT_OPTS.transition, ...userOpts.transition } };
+
+  const paths = Array.from(wrapperEl.querySelectorAll('path[data-points]')) as SVGPathElement[];
+  if (paths.length === 0) return noop;
+
+  // Snapshot the final d so the last frame is pixel-exact regardless
+  // of the replay-with-default-brush approximation we use during
+  // intermediate frames.
+  const finalDs = paths.map(p => p.getAttribute('d') || '');
+  const pointsList = paths.map(p => parsePoints(p.getAttribute('data-points') || ''));
+
+  // Hide everything up front so the first frame doesn't flash.
+  paths.forEach(p => p.setAttribute('d', ''));
+
+  // Per-stroke duration — point count drives length so a long stroke
+  // takes longer than a flick.
+  const baseDur = (opts.transition.duration ?? 1) * 1000 * opts.durationScale;
+  const maxPoints = pointsList.reduce((m, p) => Math.max(m, p.length), 1);
+  const perStrokeDur = pointsList.map(p => baseDur * (p.length / maxPoints));
+  const startMs: number[] = [];
+  let cursor = 0;
+  for (let i = 0; i < paths.length; i++) {
+    if (opts.mode === 'simultaneous') {
+      startMs.push(0);
+    } else if (opts.mode === 'staggered') {
+      const overlap = Math.max(0, Math.min(1, opts.stagger));
+      const start = i === 0 ? 0 : startMs[i - 1] + perStrokeDur[i - 1] * (1 - overlap);
+      startMs.push(start);
+    } else {
+      // sequential
+      startMs.push(cursor);
+      cursor += perStrokeDur[i];
+    }
+  }
+
+  let cancelled = false;
+  let rafId = 0;
+  let started = false;
+  let cleanupTrigger: (() => void) | null = null;
+  let startTs = 0;
+
+  const tick = (now: number) => {
+    if (cancelled) return;
+    const elapsed = now - startTs;
+    let allDone = true;
+    for (let i = 0; i < paths.length; i++) {
+      const local = elapsed - startMs[i];
+      if (local < 0) { allDone = false; continue; }
+      const t = Math.min(1, local / Math.max(1, perStrokeDur[i]));
+      if (t < 1) allDone = false;
+      let d: string;
+      if (t >= 1) {
+        d = finalDs[i];
+      } else {
+        const eased = applyEase(t, opts.transition);
+        const sliceCount = Math.max(2, Math.floor(pointsList[i].length * eased));
+        const subset = pointsList[i].slice(0, sliceCount);
+        if (subset.length < 2) {
+          d = '';
+        } else {
+          const outline = getStroke(subset, {
+            size: opts.brushSize, thinning: 0.5, smoothing: 0.5, streamline: 0.5,
+          });
+          d = outlineToD(outline);
+        }
+      }
+      paths[i].setAttribute('d', d);
+    }
+    if (!allDone) rafId = requestAnimationFrame(tick);
+  };
+
+  const start = () => {
+    if (started) return;
+    started = true;
+    startTs = performance.now();
+    rafId = requestAnimationFrame(tick);
+  };
+
+  if (opts.trigger === 'inView') {
+    const obs = new IntersectionObserver((entries) => {
+      if (entries.some(e => e.isIntersecting)) {
+        start();
+        obs.disconnect();
+      }
+    }, { threshold: 0.2 });
+    obs.observe(wrapperEl);
+    cleanupTrigger = () => obs.disconnect();
+  } else if (opts.trigger === 'hover') {
+    const onEnter = () => start();
+    wrapperEl.addEventListener('mouseenter', onEnter);
+    cleanupTrigger = () => wrapperEl.removeEventListener('mouseenter', onEnter);
+  } else if (opts.trigger === 'tap') {
+    const onTap = () => start();
+    wrapperEl.addEventListener('click', onTap);
+    cleanupTrigger = () => wrapperEl.removeEventListener('click', onTap);
+  } else {
+    // mount
+    start();
+  }
+
+  return () => {
+    cancelled = true;
+    cancelAnimationFrame(rafId);
+    cleanupTrigger?.();
+  };
+}

package/src/useStaticCanvas.ts

@@ -0,0 +1,22 @@
+'use client';
+
+/**
+ * `useStaticCanvas()` — returns `true` when the component is being rendered
+ * inside the Revyme canvas editor, `false` in the live preview, published
+ * site, or any other consumer environment.
+ *
+ * Sparks / code components use this to skip GPU-expensive animation work
+ * (continuous rAF loops, big CSS blur layers, WebGL frames) on the editor
+ * canvas where the user only needs a representative still — paint once,
+ * stop. The full animated version still runs in preview and production.
+ *
+ * Mechanics: this default implementation always returns `false`. The canvas
+ * editor's spark loader (`code-component-runtime.ts` MODULE_MAP) overrides
+ * the export at compile time so it returns `true` in the canvas iframe and
+ * `false` in the spark editor's preview pane (which sets `previewMode`).
+ *
+ * Mirrors Framer's `useIsStaticRenderer` pattern.
+ */
+export function useStaticCanvas(): boolean {
+  return false;
+}

package/src/withResponsiveProps.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import { useState, useEffect, type ComponentType } from 'react';
+
+/**
+ * HOC that reads a `data-responsive` JSON prop and merges per-viewport overrides.
+ * Usage: `export default withResponsiveProps(MyComponent)`
+ *
+ * On the canvas, CodeComponentHost injects `__canvasViewportWidth` to simulate viewport size.
+ * In production, uses `window.innerWidth`.
+ *
+ * data-responsive='{"768":{"fontSize":32},"375":{"fontSize":24}}'
+ * Breakpoints are max-width: if viewport <= 768, the 768 overrides apply.
+ */
+export default function withResponsiveProps<P extends Record<string, any>>(
+  Component: ComponentType<P>
+): ComponentType<P & { 'data-responsive'?: string; __canvasViewportWidth?: number }> {
+  return function ResponsiveSpark(props: any) {
+    const canvasVpWidth = props.__canvasViewportWidth as number | undefined;
+    const [windowWidth, setWindowWidth] = useState(
+      typeof window !== 'undefined' ? window.innerWidth : 1440
+    );
+
+    useEffect(() => {
+      if (canvasVpWidth !== undefined) return;
+      const handler = () => setWindowWidth(window.innerWidth);
+      window.addEventListener('resize', handler);
+      return () => window.removeEventListener('resize', handler);
+    }, [canvasVpWidth]);
+
+    const vpWidth = canvasVpWidth ?? windowWidth;
+    const responsiveStr = props['data-responsive'];
+    let mergedProps = { ...props };
+
+    if (responsiveStr) {
+      try {
+        const overrides = typeof responsiveStr === 'string'
+          ? JSON.parse(responsiveStr) : responsiveStr;
+        // _bp contains all viewport breakpoint widths for range computation.
+        // Each breakpoint's range is (prev_bp, bp]. Prevents cascade.
+        const allBp = Array.isArray(overrides._bp)
+          ? overrides._bp : Object.keys(overrides).filter(k => k !== '_bp').map(Number);
+        const sortedBp = [...allBp].sort((a, b) => a - b);
+        let matchedBp;
+        for (let i = 0; i < sortedBp.length; i++) {
+          const lower = i > 0 ? sortedBp[i - 1] : 0;
+          if (vpWidth > lower && vpWidth <= sortedBp[i]) {
+            matchedBp = sortedBp[i];
+            break;
+          }
+        }
+        if (matchedBp !== undefined && overrides[matchedBp]) {
+          mergedProps = { ...mergedProps, ...overrides[matchedBp] };
+        }
+      } catch {}
+    }
+
+    delete mergedProps['data-responsive'];
+    delete mergedProps['__canvasViewportWidth'];
+    return <Component {...mergedProps} />;
+  };
+}