motion 13.1.1-alpha.0 → 13.2.0

package/dist/cjs/three.js

@@ -0,0 +1,192 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var dom = require('framer-motion/dom');
+
+/**
+ * Binds motion values to Three.js objects, materials and uniforms.
+ *
+ * Register with `animate.addEffect(threeEffect)` so `animate()` can target
+ * meshes, lights, cameras, materials and uniforms directly, or call it
+ * yourself to wire up existing motion values:
+ *
+ * ```ts
+ * threeEffect(mesh, { x, rotateY, color })
+ * threeEffect(uniforms, { progress })
+ * ```
+ *
+ * Writes happen once per frame in `frame.preRender`, ahead of render loops
+ * scheduled with `frame.render`.
+ */
+const threeEffect = dom.createEffect((subject, state, key, value) => state.set(key, value, () => setObjectValue(subject, key, state.latest[key]), undefined, false), {
+    test: isThreeSubject,
+    read: getObjectValue,
+    step: dom.frame.preRender,
+});
+/**
+ * Claims Three.js objects, materials and uniforms objects. Vectors, colors
+ * and Eulers aren't claimed so `animate(mesh.position, { x })` keeps working
+ * as a plain object animation.
+ */
+function isThreeSubject(subject) {
+    if (!subject || typeof subject !== "object")
+        return false;
+    const object = subject;
+    return Boolean(object.isObject3D || object.isMaterial || isUniforms(object));
+}
+function isUniforms(object) {
+    const keys = Object.keys(object);
+    return keys.length > 0 && keys.every((key) => isUniform(object[key]));
+}
+const transformMap = {
+    x: ["position", "x"],
+    y: ["position", "y"],
+    z: ["position", "z"],
+    rotateX: ["rotation", "x"],
+    rotateY: ["rotation", "y"],
+    rotateZ: ["rotation", "z"],
+    scaleX: ["scale", "x"],
+    scaleY: ["scale", "y"],
+    scaleZ: ["scale", "z"],
+};
+function getObjectValue(object, key) {
+    if (isUniform(object[key]))
+        return getAnimatableValue(object[key].value);
+    const transform = transformMap[key];
+    if (transform) {
+        const [name, axis] = transform;
+        const value = object[name]?.[axis];
+        return key.startsWith("rotate") && typeof value === "number"
+            ? value * (180 / Math.PI)
+            : getAnimatableValue(value);
+    }
+    if (key === "scale") {
+        return getAnimatableValue(object.scale?.x);
+    }
+    const node = getNodeUniform(object, key);
+    if (node)
+        return getAnimatableValue(node.value);
+    const uniforms = getUniforms(object);
+    return (getProperty(object, key) ??
+        getProperty(object.material, key) ??
+        getUniformValue(uniforms, key) ??
+        getVectorComponent(object, key) ??
+        getVectorComponent(object.material, key) ??
+        getUniformComponent(uniforms, key) ??
+        getUniformComponent(object, key));
+}
+/**
+ * Uniforms live on ShaderMaterials, on the mesh itself or the subject can
+ * be a bare uniforms object.
+ */
+function getUniforms(object) {
+    return object.material?.uniforms ?? object.uniforms;
+}
+/**
+ * Resolves TSL uniform nodes assigned to node material slots, e.g.
+ * material.colorNode = uniform(color). Non-uniform nodes are compiled
+ * into the shader so can't be animated via their value.
+ */
+function getNodeUniform(object, key) {
+    const node = object[key + "Node"] ?? object.material?.[key + "Node"];
+    return node?.isUniformNode ? node : undefined;
+}
+function getProperty(target, key) {
+    return target && key in target ? getAnimatableValue(target[key]) : undefined;
+}
+function getUniformValue(uniforms, key) {
+    return getAnimatableValue(uniforms?.[key]?.value);
+}
+function getVectorComponent(target, key) {
+    const axis = key.slice(-1).toLowerCase();
+    const vector = target?.[key.slice(0, -1)];
+    return vector && ["x", "y", "z", "w"].includes(axis)
+        ? getAnimatableValue(vector[axis])
+        : undefined;
+}
+function getUniformComponent(uniforms, key) {
+    const uniform = uniforms?.[key.slice(0, -1)];
+    return isUniform(uniform)
+        ? getVectorComponent(uniform, `value${key.slice(-1)}`)
+        : undefined;
+}
+function getAnimatableValue(value) {
+    if (typeof value === "string" || typeof value === "number")
+        return value;
+    return value && typeof value.getStyle === "function"
+        ? value.getStyle()
+        : undefined;
+}
+function isUniform(value) {
+    return Boolean(value && typeof value === "object" && "value" in value);
+}
+function setObjectValue(object, key, value) {
+    if (isUniform(object[key])) {
+        setProperty(object[key], "value", value);
+        return;
+    }
+    const transform = transformMap[key];
+    if (transform) {
+        const [name, axis] = transform;
+        object[name][axis] = key.startsWith("rotate")
+            ? value * (Math.PI / 180)
+            : value;
+        return;
+    }
+    if (key === "scale") {
+        object.scale.x = object.scale.y = object.scale.z = value;
+        return;
+    }
+    const node = getNodeUniform(object, key);
+    if (node) {
+        setProperty(node, "value", value);
+        return;
+    }
+    if (setProperty(object, key, value))
+        return;
+    const material = object.material;
+    if (setProperty(material, key, value))
+        return;
+    const uniforms = getUniforms(object);
+    const uniform = uniforms?.[key];
+    if (uniform) {
+        setProperty(uniform, "value", value);
+        return;
+    }
+    if (setVectorComponent(object, key, value) ||
+        setVectorComponent(material, key, value) ||
+        setUniformComponent(uniforms, key, value) ||
+        setUniformComponent(object, key, value)) {
+        return;
+    }
+    object[key] = value;
+}
+function setProperty(target, key, value) {
+    if (!target || !(key in target))
+        return false;
+    const current = target[key];
+    if (current && typeof current.set === "function") {
+        Array.isArray(value) ? current.set(...value) : current.set(value);
+    }
+    else {
+        target[key] = value;
+    }
+    return true;
+}
+function setVectorComponent(target, key, value) {
+    const axis = key.slice(-1).toLowerCase();
+    const vector = target?.[key.slice(0, -1)];
+    if (!vector || !["x", "y", "z", "w"].includes(axis))
+        return false;
+    vector[axis] = value;
+    return true;
+}
+function setUniformComponent(uniforms, key, value) {
+    const uniform = uniforms?.[key.slice(0, -1)];
+    return isUniform(uniform)
+        ? setVectorComponent(uniform, `value${key.slice(-1)}`, value)
+        : false;
+}
+
+exports.threeEffect = threeEffect;

package/dist/cjs/vgpu.js

@@ -0,0 +1,248 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var dom = require('framer-motion/dom');
+
+const axes = "xyzw";
+const radiansPerDegree = Math.PI / 180;
+const transforms = {
+    x: ["position", 0],
+    y: ["position", 1],
+    z: ["position", 2],
+    rotateX: ["rotation", 0, true],
+    rotateY: ["rotation", 1, true],
+    rotateZ: ["rotation", 2, true],
+    scaleX: ["scale", 0],
+    scaleY: ["scale", 1],
+    scaleZ: ["scale", 2],
+};
+/**
+ * Last vector written to each path. vgpu subjects like Effect and
+ * SharedUniforms have no getters, and SceneNode stores rotation as a
+ * quaternion, so this is how single components find their siblings.
+ */
+const shadows = new WeakMap();
+/**
+ * Values changed this frame, flushed into one set() per subject.
+ */
+const pending = new Map();
+function flush() {
+    pending.forEach(applyValues);
+    pending.clear();
+}
+/**
+ * Binds motion values to vgpu shared uniforms, Effect/Draw/Compute bindings
+ * ("params.time"), scene nodes (x, rotateY, scale), cameras, lights,
+ * materials, orbit controls and target clear colors.
+ *
+ * Register with `animate.addEffect(vgpuEffect)` so `animate()` can target
+ * these subjects directly, or call it yourself to wire up existing motion
+ * values:
+ *
+ * ```ts
+ * vgpuEffect(wave, { "params.time": time })
+ * vgpuEffect(cube, { x, rotateY })
+ * ```
+ *
+ * Changed values are batched into a single set() per subject per frame in
+ * `frame.preRender`, ahead of render loops scheduled with `frame.render`.
+ */
+const vgpuEffect = dom.createEffect((subject, state, key, value) => state.set(key, value, () => {
+    const bag = pending.get(subject) ?? {};
+    bag[key] = state.latest[key];
+    pending.set(subject, bag);
+    dom.frame.preRender(flush, false, true);
+}, undefined, false), {
+    test: isVGPUSubject,
+    read: readInitial,
+    step: dom.frame.preRender,
+});
+/**
+ * Claims vgpu shader units (Effect, Draw, Compute), shared uniforms, scene
+ * nodes, materials, orbit controls and targets. Everything else, including
+ * Three.js vectors and plain objects, is left alone.
+ */
+function isVGPUSubject(subject) {
+    if (!subject || typeof subject !== "object")
+        return false;
+    const s = subject;
+    return typeof s.set === "function"
+        ? typeof s.kind === "string" ||
+            "gpu" in s ||
+            "reflection" in s ||
+            typeof s.yaw === "number"
+        : "clearColor" in s && "gpu" in s;
+}
+function isNode(subject) {
+    return "quaternion" in subject;
+}
+function isVector(value) {
+    return Array.isArray(value) || ArrayBuffer.isView(value);
+}
+function resolveKey(subject, key) {
+    const transform = isNode(subject) && transforms[key];
+    if (transform) {
+        return {
+            path: [transform[0]],
+            index: transform[1],
+            degrees: transform[2],
+        };
+    }
+    const path = key.split(".");
+    const last = path[path.length - 1];
+    const index = axes.indexOf(last.slice(-1).toLowerCase());
+    if (last.length > 1 && index !== -1) {
+        const base = [...path.slice(0, -1), last.slice(0, -1)];
+        if (getVector(subject, base))
+            return { path: base, index };
+    }
+    return { path };
+}
+function readPath(subject, path) {
+    return path.reduce((value, key) => value?.[key], subject);
+}
+/**
+ * Reads a subject property, falling back to ShaderMaterial's `values` record.
+ */
+function readValue(subject, path) {
+    return (readPath(subject, path) ??
+        (subject.values && readPath(subject.values, path)));
+}
+function getVector(subject, path) {
+    const value = readValue(subject, path);
+    if (isVector(value))
+        return Array.from(value);
+    const shadow = shadows.get(subject)?.[path.join(".")];
+    if (shadow)
+        return shadow;
+    return path[0] === "rotation" && isNode(subject)
+        ? eulerFromQuaternion(subject.quaternion)
+        : undefined;
+}
+function setShadow(subject, path, vector) {
+    const shadow = shadows.get(subject) ?? {};
+    shadow[path.join(".")] = vector;
+    shadows.set(subject, shadow);
+}
+function setPath(target, path, value) {
+    var _a;
+    const last = path.length - 1;
+    let current = target;
+    for (let i = 0; i < last; i++) {
+        current = current[_a = path[i]] ?? (current[_a] = {});
+    }
+    current[path[last]] = value;
+}
+function isColorTarget(target) {
+    const sample = Array.isArray(target)
+        ? target.find((value) => typeof value === "string")
+        : target;
+    return typeof sample === "string" && dom.color.test(sample);
+}
+function readInitial(subject, key, target) {
+    const { path, index, degrees } = resolveKey(subject, key);
+    if (index !== undefined) {
+        const value = getVector(subject, path)?.[index];
+        return degrees && value !== undefined ? value / radiansPerDegree : value;
+    }
+    const value = readValue(subject, path);
+    if (typeof value === "number")
+        return value;
+    if (!isVector(value))
+        return undefined;
+    if (isColorTarget(target))
+        return toColorString(value);
+    const sample = Array.isArray(target)
+        ? target.find((keyframe) => keyframe !== null)
+        : target;
+    // A numeric target on a vector reads the first component (uniform scale)
+    return typeof sample === "string" ? Array.from(value).join(" ") : value[0];
+}
+function applyValues(values, subject) {
+    const bag = {};
+    const vectors = new Map();
+    for (const key in values) {
+        const target = resolveKey(subject, key);
+        const { path, index, degrees } = target;
+        const value = values[key];
+        if (index === undefined) {
+            const parsed = parseValue(value, getVector(subject, path));
+            Array.isArray(parsed) && setShadow(subject, path, parsed);
+            setPath(bag, path, parsed);
+            continue;
+        }
+        const id = path.join(".");
+        const entry = vectors.get(id) ?? {
+            ...target,
+            vector: getVector(subject, path) ?? [],
+        };
+        vectors.set(id, entry);
+        entry.vector[index] = degrees
+            ? value * radiansPerDegree
+            : value;
+    }
+    vectors.forEach(({ path, vector }) => {
+        setShadow(subject, path, vector);
+        setPath(bag, path, vector);
+    });
+    typeof subject.set === "function"
+        ? subject.set(bag)
+        : Object.assign(subject, bag);
+}
+/**
+ * Converts animated strings into vgpu values: CSS colors become linear RGB
+ * (matching vgpu/scene's srgb()), "1 0 0" becomes [1, 0, 0].
+ */
+function parseValue(value, current) {
+    if (typeof value !== "string")
+        return value;
+    if (dom.color.test(value)) {
+        const parsed = dom.color.parse(value);
+        const { red, green, blue, alpha = 1, } = "hue" in parsed ? dom.hslaToRgba(parsed) : parsed;
+        const linear = [red, green, blue].map((channel) => toLinear(channel / 255));
+        return current?.length === 4 ? [...linear, alpha] : linear;
+    }
+    const parts = value
+        .split(",")
+        .join(" ")
+        .split(" ")
+        .filter(Boolean)
+        .map(Number);
+    return parts.length > 1 && parts.every((part) => !isNaN(part))
+        ? parts
+        : value;
+}
+function toLinear(channel) {
+    return channel <= 0.04045
+        ? channel / 12.92
+        : ((channel + 0.055) / 1.055) ** 2.4;
+}
+function toSRGB(channel) {
+    return channel <= 0.0031308
+        ? channel * 12.92
+        : 1.055 * channel ** (1 / 2.4) - 0.055;
+}
+function toColorString(linear) {
+    const [red, green, blue, alpha = 1] = Array.from(linear).map((channel, i) => i < 3 ? toSRGB(channel) * 255 : channel);
+    return dom.rgba.transform({ red, green, blue, alpha });
+}
+/**
+ * Inverse of vgpu's quatFromEuler (intrinsic XYZ).
+ */
+function eulerFromQuaternion(quaternion) {
+    const [x, y, z, w] = Array.from(quaternion);
+    const m13 = 2 * (x * z + w * y);
+    const singular = Math.abs(m13) > 0.9999999;
+    return [
+        singular
+            ? Math.atan2(2 * (y * z + w * x), 1 - 2 * (x * x + z * z))
+            : Math.atan2(-2 * (y * z - w * x), 1 - 2 * (x * x + y * y)),
+        Math.asin(dom.clamp(-1, 1, m13)),
+        singular
+            ? 0
+            : Math.atan2(-2 * (x * y - w * z), 1 - 2 * (y * y + z * z)),
+    ];
+}
+
+exports.vgpuEffect = vgpuEffect;

package/dist/es/three.mjs

@@ -0,0 +1,188 @@
+import { createEffect, frame } from 'framer-motion/dom';
+
+/**
+ * Binds motion values to Three.js objects, materials and uniforms.
+ *
+ * Register with `animate.addEffect(threeEffect)` so `animate()` can target
+ * meshes, lights, cameras, materials and uniforms directly, or call it
+ * yourself to wire up existing motion values:
+ *
+ * ```ts
+ * threeEffect(mesh, { x, rotateY, color })
+ * threeEffect(uniforms, { progress })
+ * ```
+ *
+ * Writes happen once per frame in `frame.preRender`, ahead of render loops
+ * scheduled with `frame.render`.
+ */
+const threeEffect = createEffect((subject, state, key, value) => state.set(key, value, () => setObjectValue(subject, key, state.latest[key]), undefined, false), {
+    test: isThreeSubject,
+    read: getObjectValue,
+    step: frame.preRender,
+});
+/**
+ * Claims Three.js objects, materials and uniforms objects. Vectors, colors
+ * and Eulers aren't claimed so `animate(mesh.position, { x })` keeps working
+ * as a plain object animation.
+ */
+function isThreeSubject(subject) {
+    if (!subject || typeof subject !== "object")
+        return false;
+    const object = subject;
+    return Boolean(object.isObject3D || object.isMaterial || isUniforms(object));
+}
+function isUniforms(object) {
+    const keys = Object.keys(object);
+    return keys.length > 0 && keys.every((key) => isUniform(object[key]));
+}
+const transformMap = {
+    x: ["position", "x"],
+    y: ["position", "y"],
+    z: ["position", "z"],
+    rotateX: ["rotation", "x"],
+    rotateY: ["rotation", "y"],
+    rotateZ: ["rotation", "z"],
+    scaleX: ["scale", "x"],
+    scaleY: ["scale", "y"],
+    scaleZ: ["scale", "z"],
+};
+function getObjectValue(object, key) {
+    if (isUniform(object[key]))
+        return getAnimatableValue(object[key].value);
+    const transform = transformMap[key];
+    if (transform) {
+        const [name, axis] = transform;
+        const value = object[name]?.[axis];
+        return key.startsWith("rotate") && typeof value === "number"
+            ? value * (180 / Math.PI)
+            : getAnimatableValue(value);
+    }
+    if (key === "scale") {
+        return getAnimatableValue(object.scale?.x);
+    }
+    const node = getNodeUniform(object, key);
+    if (node)
+        return getAnimatableValue(node.value);
+    const uniforms = getUniforms(object);
+    return (getProperty(object, key) ??
+        getProperty(object.material, key) ??
+        getUniformValue(uniforms, key) ??
+        getVectorComponent(object, key) ??
+        getVectorComponent(object.material, key) ??
+        getUniformComponent(uniforms, key) ??
+        getUniformComponent(object, key));
+}
+/**
+ * Uniforms live on ShaderMaterials, on the mesh itself or the subject can
+ * be a bare uniforms object.
+ */
+function getUniforms(object) {
+    return object.material?.uniforms ?? object.uniforms;
+}
+/**
+ * Resolves TSL uniform nodes assigned to node material slots, e.g.
+ * material.colorNode = uniform(color). Non-uniform nodes are compiled
+ * into the shader so can't be animated via their value.
+ */
+function getNodeUniform(object, key) {
+    const node = object[key + "Node"] ?? object.material?.[key + "Node"];
+    return node?.isUniformNode ? node : undefined;
+}
+function getProperty(target, key) {
+    return target && key in target ? getAnimatableValue(target[key]) : undefined;
+}
+function getUniformValue(uniforms, key) {
+    return getAnimatableValue(uniforms?.[key]?.value);
+}
+function getVectorComponent(target, key) {
+    const axis = key.slice(-1).toLowerCase();
+    const vector = target?.[key.slice(0, -1)];
+    return vector && ["x", "y", "z", "w"].includes(axis)
+        ? getAnimatableValue(vector[axis])
+        : undefined;
+}
+function getUniformComponent(uniforms, key) {
+    const uniform = uniforms?.[key.slice(0, -1)];
+    return isUniform(uniform)
+        ? getVectorComponent(uniform, `value${key.slice(-1)}`)
+        : undefined;
+}
+function getAnimatableValue(value) {
+    if (typeof value === "string" || typeof value === "number")
+        return value;
+    return value && typeof value.getStyle === "function"
+        ? value.getStyle()
+        : undefined;
+}
+function isUniform(value) {
+    return Boolean(value && typeof value === "object" && "value" in value);
+}
+function setObjectValue(object, key, value) {
+    if (isUniform(object[key])) {
+        setProperty(object[key], "value", value);
+        return;
+    }
+    const transform = transformMap[key];
+    if (transform) {
+        const [name, axis] = transform;
+        object[name][axis] = key.startsWith("rotate")
+            ? value * (Math.PI / 180)
+            : value;
+        return;
+    }
+    if (key === "scale") {
+        object.scale.x = object.scale.y = object.scale.z = value;
+        return;
+    }
+    const node = getNodeUniform(object, key);
+    if (node) {
+        setProperty(node, "value", value);
+        return;
+    }
+    if (setProperty(object, key, value))
+        return;
+    const material = object.material;
+    if (setProperty(material, key, value))
+        return;
+    const uniforms = getUniforms(object);
+    const uniform = uniforms?.[key];
+    if (uniform) {
+        setProperty(uniform, "value", value);
+        return;
+    }
+    if (setVectorComponent(object, key, value) ||
+        setVectorComponent(material, key, value) ||
+        setUniformComponent(uniforms, key, value) ||
+        setUniformComponent(object, key, value)) {
+        return;
+    }
+    object[key] = value;
+}
+function setProperty(target, key, value) {
+    if (!target || !(key in target))
+        return false;
+    const current = target[key];
+    if (current && typeof current.set === "function") {
+        Array.isArray(value) ? current.set(...value) : current.set(value);
+    }
+    else {
+        target[key] = value;
+    }
+    return true;
+}
+function setVectorComponent(target, key, value) {
+    const axis = key.slice(-1).toLowerCase();
+    const vector = target?.[key.slice(0, -1)];
+    if (!vector || !["x", "y", "z", "w"].includes(axis))
+        return false;
+    vector[axis] = value;
+    return true;
+}
+function setUniformComponent(uniforms, key, value) {
+    const uniform = uniforms?.[key.slice(0, -1)];
+    return isUniform(uniform)
+        ? setVectorComponent(uniform, `value${key.slice(-1)}`, value)
+        : false;
+}
+
+export { threeEffect };