@remotion/animation-utils 4.0.90

package/dist/transformation-helpers/make-transform/transform-functions.d.ts

@@ -0,0 +1,46 @@
+import type { AngleUnit, AngleUnitString, LengthPercentageUnit, LengthPercentageUnitString, LengthUnit, LengthUnitString } from '../../type';
+declare function matrix(a: number, b: number, c: number, d: number, tx: number, ty: number): string;
+declare function matrix3d(a1: number, b1: number, c1: number, d1: number, a2: number, b2: number, c2: number, d2: number, a3: number, b3: number, c3: number, d3: number, a4: number, b4: number, c4: number, d4: number): string;
+declare function perspective(length: LengthPercentageUnitString): string;
+declare function perspective(length: number, unit?: LengthUnit): string;
+declare function rotate(angle: AngleUnitString): string;
+declare function rotate(angle: number, unit?: AngleUnit): string;
+declare function rotate3d(x: number, y: number, z: number, angle: number): string;
+declare function rotate3d(x: number, y: number, z: number, angle: AngleUnitString): string;
+declare function rotate3d(x: number, y: number, z: number, angle: number, unit?: AngleUnit): string;
+declare function rotateX(angle: AngleUnitString): string;
+declare function rotateX(angle: number, unit?: AngleUnit): string;
+declare function rotateY(angle: AngleUnitString): string;
+declare function rotateY(angle: number, unit?: AngleUnit): string;
+declare function rotateZ(angle: AngleUnitString): string;
+declare function rotateZ(angle: number, unit?: AngleUnit): string;
+declare function scale(x: number, y?: number): string;
+declare function scale3d(x: number, y: number, z: number): string;
+declare function scaleX(x: number): string;
+declare function scaleY(y: number): string;
+declare function scaleZ(z: number): string;
+declare function skew(angle: number): string;
+declare function skew(angle: AngleUnitString): string;
+declare function skew(angle: AngleUnitString, angle2: AngleUnitString): string;
+declare function skew(angle: number, unit: AngleUnit): string;
+declare function skew(angleX: number, angleY: number): string;
+declare function skew(angleX: number, unitX: AngleUnit, angleY: number, unitY: AngleUnit): string;
+declare function skewX(angle: AngleUnitString): string;
+declare function skewX(angle: number, unit?: AngleUnit): string;
+declare function skewY(angle: AngleUnitString): string;
+declare function skewY(angle: number, unit?: AngleUnit): string;
+declare function translate(x: LengthPercentageUnitString): string;
+declare function translate(x: number): string;
+declare function translate(x: number, y: number): string;
+declare function translate(x: LengthPercentageUnitString, y: LengthPercentageUnitString): string;
+declare function translate(translation: number, unit: LengthPercentageUnit): string;
+declare function translate(x: number, unitX: LengthPercentageUnit, y: number, unitY: LengthPercentageUnit): string;
+declare function translate3d(x: LengthPercentageUnitString | number, y: LengthPercentageUnitString | number, z: LengthPercentageUnitString | number): string;
+declare function translate3d(x: number, unitX: LengthPercentageUnit, y: number, unitY: LengthPercentageUnit, z: number, unitZ: LengthUnit): string;
+declare function translateX(x: LengthPercentageUnitString): string;
+declare function translateX(x: number, unit?: LengthPercentageUnit): string;
+declare function translateY(y: LengthPercentageUnitString): string;
+declare function translateY(y: number, unit?: LengthPercentageUnit): string;
+declare function translateZ(z: LengthUnitString): string;
+declare function translateZ(z: number, unit?: LengthUnit): string;
+export { matrix, matrix3d, perspective, rotate, rotate3d, rotateX, rotateY, rotateZ, scale, scale3d, scaleX, scaleY, scaleZ, skew, skewX, skewY, translate, translate3d, translateX, translateY, translateZ, };

package/dist/transformation-helpers/make-transform/transform-functions.js

@@ -0,0 +1,302 @@
+"use strict";
+/* eslint-disable no-redeclare */
+/* eslint-disable max-params */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.translateZ = exports.translateY = exports.translateX = exports.translate3d = exports.translate = exports.skewY = exports.skewX = exports.skew = exports.scaleZ = exports.scaleY = exports.scaleX = exports.scale3d = exports.scale = exports.rotateZ = exports.rotateY = exports.rotateX = exports.rotate3d = exports.rotate = exports.perspective = exports.matrix3d = exports.matrix = void 0;
+const type_1 = require("../../type");
+const is_unit_with_string_1 = require("./is-unit-with-string");
+/* Matrix transformation */
+const checkNumber = ({ num, param, api, }) => {
+    if (typeof num === 'undefined') {
+        throw new TypeError(`Argument passed to "${api}" for param "${param}" is undefined`);
+    }
+    if (typeof num !== 'number') {
+        throw new TypeError(`Argument passed to "${api}" for param "${param}" is ${JSON.stringify(num)}`);
+    }
+    if (!Number.isFinite(num)) {
+        throw new TypeError(`Argument passed to "${api}" for param "${param}" is ${JSON.stringify(num)} (must be finite)`);
+    }
+};
+function matrix(a, b, c, d, tx, ty) {
+    checkNumber({ num: a, param: 'a', api: 'matrix' });
+    checkNumber({ num: b, param: 'b', api: 'matrix' });
+    checkNumber({ num: c, param: 'c', api: 'matrix' });
+    checkNumber({ num: d, param: 'd', api: 'matrix' });
+    checkNumber({ num: tx, param: 'tx', api: 'matrix' });
+    checkNumber({ num: ty, param: 'ty', api: 'matrix' });
+    return `matrix(${a}, ${b}, ${c}, ${d}, ${tx}, ${ty})`;
+}
+exports.matrix = matrix;
+function matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4) {
+    checkNumber({ num: a1, param: 'a1', api: 'matrix3d' });
+    checkNumber({ num: b1, param: 'b1', api: 'matrix3d' });
+    checkNumber({ num: c1, param: 'c1', api: 'matrix3d' });
+    checkNumber({ num: d1, param: 'd1', api: 'matrix3d' });
+    checkNumber({ num: a2, param: 'a2', api: 'matrix3d' });
+    checkNumber({ num: b2, param: 'b2', api: 'matrix3d' });
+    checkNumber({ num: c2, param: 'c2', api: 'matrix3d' });
+    checkNumber({ num: d2, param: 'd2', api: 'matrix3d' });
+    checkNumber({ num: a3, param: 'a3', api: 'matrix3d' });
+    checkNumber({ num: b3, param: 'b3', api: 'matrix3d' });
+    checkNumber({ num: c3, param: 'c3', api: 'matrix3d' });
+    checkNumber({ num: d3, param: 'd3', api: 'matrix3d' });
+    checkNumber({ num: a4, param: 'a4', api: 'matrix3d' });
+    checkNumber({ num: b4, param: 'b4', api: 'matrix3d' });
+    checkNumber({ num: c4, param: 'c4', api: 'matrix3d' });
+    checkNumber({ num: d4, param: 'd4', api: 'matrix3d' });
+    return `matrix3d(${a1}, ${b1}, ${c1}, ${d1}, ${a2}, ${b2}, ${c2}, ${d2}, ${a3}, ${b3}, ${c3}, ${d3}, ${a4}, ${b4}, ${c4}, ${d4})`;
+}
+exports.matrix3d = matrix3d;
+function perspective(length, unit = 'px') {
+    if ((0, is_unit_with_string_1.isUnitWithString)(length, type_1.lengthUnits)) {
+        return `perspective(${length})`;
+    }
+    checkNumber({ num: length, param: 'length', api: 'perspective' });
+    return `perspective(${length}${unit})`;
+}
+exports.perspective = perspective;
+function rotate(angle, unit = 'deg') {
+    if ((0, is_unit_with_string_1.isUnitWithString)(angle, type_1.angleUnits)) {
+        return `rotate(${angle})`;
+    }
+    checkNumber({ num: angle, param: 'angle', api: 'rotate' });
+    return `rotate(${angle}${unit})`;
+}
+exports.rotate = rotate;
+function rotate3d(x, y, z, angle, unit = 'deg') {
+    checkNumber({ num: x, param: 'x', api: 'rotate3d' });
+    checkNumber({ num: y, param: 'y', api: 'rotate3d' });
+    checkNumber({ num: z, param: 'z', api: 'rotate3d' });
+    if ((0, is_unit_with_string_1.isUnitWithString)(angle, type_1.angleUnits)) {
+        return `rotate3d(${x}, ${y}, ${z}, ${angle})`;
+    }
+    checkNumber({ num: angle, param: 'angle', api: 'rotate3d' });
+    return `rotate3d(${x}, ${y}, ${z}, ${angle}${unit})`;
+}
+exports.rotate3d = rotate3d;
+function rotateX(angle, unit = 'deg') {
+    if ((0, is_unit_with_string_1.isUnitWithString)(angle, type_1.angleUnits)) {
+        return `rotateX(${angle})`;
+    }
+    checkNumber({ num: angle, param: 'angle', api: 'rotateX' });
+    return `rotateX(${angle}${unit})`;
+}
+exports.rotateX = rotateX;
+function rotateY(angle, unit = 'deg') {
+    if ((0, is_unit_with_string_1.isUnitWithString)(angle, type_1.angleUnits)) {
+        return `rotateY(${angle})`;
+    }
+    checkNumber({ num: angle, param: 'angle', api: 'rotateY' });
+    return `rotateY(${angle}${unit})`;
+}
+exports.rotateY = rotateY;
+function rotateZ(angle, unit = 'deg') {
+    if ((0, is_unit_with_string_1.isUnitWithString)(angle, type_1.angleUnits)) {
+        return `rotateZ(${angle})`;
+    }
+    checkNumber({ num: angle, param: 'angle', api: 'rotateZ' });
+    return `rotateZ(${angle}${unit})`;
+}
+exports.rotateZ = rotateZ;
+/* Scale */
+function scale(x, y = x) {
+    checkNumber({ num: x, param: 'x', api: 'scale' });
+    return `scale(${x}, ${y})`;
+}
+exports.scale = scale;
+function scale3d(x, y, z) {
+    checkNumber({ num: x, param: 'x', api: 'scale3d' });
+    checkNumber({ num: y, param: 'y', api: 'scale3d' });
+    checkNumber({ num: z, param: 'z', api: 'scale3d' });
+    return `scale3d(${x}, ${y}, ${z})`;
+}
+exports.scale3d = scale3d;
+function scaleX(x) {
+    checkNumber({ num: x, param: 'x', api: 'scaleX' });
+    return `scaleX(${x})`;
+}
+exports.scaleX = scaleX;
+function scaleY(y) {
+    checkNumber({ num: y, param: 'y', api: 'scaleY' });
+    return `scaleY(${y})`;
+}
+exports.scaleY = scaleY;
+function scaleZ(z) {
+    checkNumber({ num: z, param: 'z', api: 'scaleZ' });
+    return `scaleZ(${z})`;
+}
+exports.scaleZ = scaleZ;
+function skew(...args) {
+    const [arg1, arg2, arg3, arg4] = args;
+    if (arguments.length === 1) {
+        // Case A
+        if ((0, is_unit_with_string_1.isUnitWithString)(arg1, type_1.angleUnits)) {
+            return `skew(${arg1}, ${arg1})`;
+        }
+        // Case Z
+        checkNumber({ num: arg1, param: 'angle', api: 'skew' });
+        return `skew(${arg1}deg, ${arg1}deg)`;
+    }
+    if (arguments.length === 2) {
+        // Case B
+        if ((0, is_unit_with_string_1.isUnitWithString)(arg1, type_1.angleUnits) &&
+            (0, is_unit_with_string_1.isUnitWithString)(arg2, type_1.angleUnits)) {
+            return `skew(${arg1}, ${arg2})`;
+        }
+        // Case C
+        if (typeof arg1 === 'number' && typeof arg2 !== 'number') {
+            checkNumber({ num: arg1, param: 'angle', api: 'skew' });
+            return `skew(${arg1}${arg2}, ${arg1}${arg2})`;
+        }
+        // Case D
+        if (typeof arg1 === 'number' && typeof arg2 === 'number') {
+            checkNumber({ num: arg1, param: 'angle', api: 'skew' });
+            checkNumber({ num: arg2, param: 'angle', api: 'skew' });
+            return `skew(${arg1}deg, ${arg2}deg)`;
+        }
+    }
+    if (arguments.length === 4) {
+        // Case E
+        if (typeof arg1 === 'number' &&
+            (0, is_unit_with_string_1.isUnitWithString)(arg2, type_1.angleUnits) &&
+            typeof arg3 === 'number' &&
+            (0, is_unit_with_string_1.isUnitWithString)(arg4, type_1.angleUnits)) {
+            checkNumber({ num: arg1, param: 'angle', api: 'skew' });
+            checkNumber({ num: arg3, param: 'angle', api: 'skew' });
+            return `skew(${arg1}${arg2}, ${arg3}${arg4})`;
+        }
+    }
+    throw new TypeError([
+        'skew() supports only the following signatures:',
+        'skew(angle: AngleUnitString): string;',
+        'skew(angle: AngleUnitString, angle2: AngleUnitString): string;',
+        'skew(angle: number, unit: AngleUnit): string;',
+        'skew(angleX: number, angleY: number): string;',
+        'skew(angleX: number, unitX: AngleUnit, angleY: number, unitY: AngleUnit): string;',
+    ].join('\n'));
+}
+exports.skew = skew;
+function skewX(angle, unit = 'deg') {
+    if ((0, is_unit_with_string_1.isUnitWithString)(angle, type_1.angleUnits)) {
+        return `skewX(${angle})`;
+    }
+    checkNumber({ num: angle, param: 'angle', api: 'skewX' });
+    return `skewX(${angle}${unit})`;
+}
+exports.skewX = skewX;
+function skewY(angle, unit = 'deg') {
+    if ((0, is_unit_with_string_1.isUnitWithString)(angle, type_1.angleUnits)) {
+        return `skewY(${angle})`;
+    }
+    checkNumber({ num: angle, param: 'angle', api: 'skewY' });
+    return `skewY(${angle}${unit})`;
+}
+exports.skewY = skewY;
+function translate(...args) {
+    const [arg1, arg2, arg3, arg4] = args;
+    if (arguments.length === 1) {
+        // Case A
+        if ((0, is_unit_with_string_1.isUnitWithString)(arg1, type_1.lengthPercentageUnits)) {
+            return `translate(${arg1})`;
+        }
+        // Case B
+        checkNumber({ num: arg1, param: 'x', api: 'translate' });
+        return `translate(${arg1}px)`;
+    }
+    if (arguments.length === 2) {
+        // Case C
+        if (typeof arg1 === 'number' && typeof arg2 === 'number') {
+            checkNumber({ num: arg1, param: 'x', api: 'translate' });
+            checkNumber({ num: arg2, param: 'y', api: 'translate' });
+            return `translate(${arg1}px, ${arg2}px)`;
+        }
+        // Case C.1
+        if ((0, is_unit_with_string_1.isUnitWithString)(arg1, type_1.lengthPercentageUnits) &&
+            (0, is_unit_with_string_1.isUnitWithString)(arg2, type_1.lengthPercentageUnits)) {
+            return `translate(${arg1}, ${arg2})`;
+        }
+        // Case D
+        if (typeof arg1 === 'number' && typeof arg2 !== 'number') {
+            checkNumber({ num: arg1, param: 'x', api: 'translate' });
+            return `translate(${arg1}${arg2})`;
+        }
+    }
+    if (arguments.length === 4) {
+        // Case E
+        if (typeof arg1 === 'number' && typeof arg3 === 'number') {
+            checkNumber({ num: arg1, param: 'x', api: 'translate' });
+            checkNumber({ num: arg3, param: 'y', api: 'translate' });
+            return `translate(${arg1}${arg2}, ${arg3}${arg4})`;
+        }
+    }
+    throw new TypeError([
+        `translate() supports only the following signatures:`,
+        `translate(x: LengthPercentageUnitString)`,
+        `translate(x: number)`,
+        `translate(x: number, y: number)`,
+        `translate(translation: number, unit: LengthPercentageUnit)`,
+        `translate(x: number, unitX: LengthPercentageUnit, y: number, unitY: LengthPercentageUnit): string;`,
+    ].join('\n'));
+}
+exports.translate = translate;
+function translate3d(...args) {
+    if (arguments.length === 3) {
+        const [x, y, z] = args;
+        const vars = [x, y, z].map((arg, i) => {
+            if ((0, is_unit_with_string_1.isUnitWithString)(arg, type_1.lengthPercentageUnits)) {
+                return arg;
+            }
+            checkNumber({
+                num: arg,
+                param: i === 0 ? 'x' : i === 1 ? 'y' : 'z',
+                api: 'translate3d',
+            });
+            if (typeof arg === 'number') {
+                return `${arg}px`;
+            }
+            return arg;
+        });
+        return `translate3d(${vars.join(', ')})`;
+    }
+    if (arguments.length === 6) {
+        const [x, unitX, y, unitY, z, unitZ] = args;
+        if (typeof x === 'number' &&
+            typeof y === 'number' &&
+            typeof z === 'number') {
+            checkNumber({ num: x, param: 'x', api: 'translate3d' });
+            checkNumber({ num: y, param: 'y', api: 'translate3d' });
+            checkNumber({ num: z, param: 'z', api: 'translate3d' });
+            return `translate3d(${x}${unitX}, ${y}${unitY}, ${z}${unitZ})`;
+        }
+    }
+    throw new TypeError([
+        `translate3d() supports only the following signatures:`,
+        `translate3d(x: LengthPercentageUnitString, y: LengthPercentageUnitString, z: LengthPercentageUnitString)`,
+        `translate3d(x: number, unitX: LengthPercentageUnit, y: number, unitY: LengthPercentageUnit, z: number, unitZ: LengthUnit)`,
+    ].join('\n'));
+}
+exports.translate3d = translate3d;
+function translateX(x, unit = 'px') {
+    if ((0, is_unit_with_string_1.isUnitWithString)(x, type_1.lengthPercentageUnits)) {
+        return `translateX(${x})`;
+    }
+    checkNumber({ num: x, param: 'x', api: 'translateX' });
+    return `translateX(${x}${unit})`;
+}
+exports.translateX = translateX;
+function translateY(y, unit = 'px') {
+    if ((0, is_unit_with_string_1.isUnitWithString)(y, type_1.lengthPercentageUnits)) {
+        return `translateY(${y})`;
+    }
+    checkNumber({ num: y, param: 'y', api: 'translateY' });
+    return `translateY(${y}${unit})`;
+}
+exports.translateY = translateY;
+function translateZ(z, unit = 'px') {
+    if ((0, is_unit_with_string_1.isUnitWithString)(z, type_1.lengthUnits)) {
+        return `translateZ(${z})`;
+    }
+    checkNumber({ num: z, param: 'z', api: 'translateZ' });
+    return `translateZ(${z}${unit})`;
+}
+exports.translateZ = translateZ;

package/dist/type.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+import type { breakDownValueIntoUnitNumberAndFunctions } from './transformation-helpers/interpolate-styles/utils';
+import type { matrix, matrix3d, perspective, rotate, rotate3d, rotateX, rotateY, rotateZ, scale, scale3d, scaleX, scaleY, scaleZ, skew, skewX, skewY, translate, translate3d, translateX, translateY, translateZ } from './transformation-helpers/make-transform';
+export declare const lengthUnits: readonly ["px", "em", "rem", "pt", "cap", "ch", "ex", "ic", "lh", "rlh", "vmax", "vmin", "vb", "vi", "cqw", "vh", "vw", "cqh", "cqi", "cqb", "cqmin", "cqmax", "cm", "mm", "Q", "in", "pc"];
+export declare const angleUnits: readonly ["rad", "deg", "grad", "turn"];
+export declare const lengthPercentageUnits: readonly ["%", "px", "em", "rem", "pt", "cap", "ch", "ex", "ic", "lh", "rlh", "vmax", "vmin", "vb", "vi", "cqw", "vh", "vw", "cqh", "cqi", "cqb", "cqmin", "cqmax", "cm", "mm", "Q", "in", "pc"];
+type LengthUnit = (typeof lengthUnits)[number];
+type AngleUnit = (typeof angleUnits)[number];
+type LengthPercentageUnit = (typeof lengthPercentageUnits)[number];
+export type LengthUnitString = `${number}${LengthUnit}`;
+export type LengthPercentageUnitString = `${number}${LengthPercentageUnit}`;
+export type AngleUnitString = `${number}${AngleUnit}`;
+type TransformFunctionReturnType = ReturnType<typeof matrix | typeof matrix3d | typeof perspective | typeof rotate | typeof rotate3d | typeof rotateX | typeof rotateY | typeof rotateZ | typeof scale | typeof scale3d | typeof scaleX | typeof scaleY | typeof scaleZ | typeof skew | typeof skewX | typeof skewY | typeof translate | typeof translate3d | typeof translateX | typeof translateY | typeof translateZ>;
+type MatcherType = RegExp | undefined;
+type ColorMatchers = {
+    rgb: MatcherType;
+    rgba: MatcherType;
+    hsl: MatcherType;
+    hsla: MatcherType;
+    hex3: MatcherType;
+    hex4: MatcherType;
+    hex5: MatcherType;
+    hex6: MatcherType;
+    hex8: MatcherType;
+};
+type Style = React.CSSProperties;
+type CSSPropertiesKey = keyof Style;
+type CSSPropertiesValue = Style[CSSPropertiesKey];
+type UnitNumberAndFunctions = ReturnType<typeof breakDownValueIntoUnitNumberAndFunctions>;
+type UnitNumberAndFunction = UnitNumberAndFunctions[0];
+export type { LengthUnit, LengthPercentageUnit, AngleUnit, TransformFunctionReturnType, ColorMatchers, Style, CSSPropertiesKey, CSSPropertiesValue, UnitNumberAndFunction, };

package/dist/type.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.lengthPercentageUnits = exports.angleUnits = exports.lengthUnits = void 0;
+exports.lengthUnits = [
+    'px',
+    'em',
+    'rem',
+    'pt',
+    'cap',
+    'ch',
+    'ex',
+    'ic',
+    'lh',
+    'rlh',
+    'vmax',
+    'vmin',
+    'vb',
+    'vi',
+    'cqw',
+    'vh',
+    'vw',
+    'cqh',
+    'cqi',
+    'cqb',
+    'cqmin',
+    'cqmax',
+    'cm',
+    'mm',
+    'Q',
+    'in',
+    'pc',
+];
+exports.angleUnits = ['rad', 'deg', 'grad', 'turn'];
+exports.lengthPercentageUnits = ['%', ...exports.lengthUnits];

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@remotion/animation-utils",
+  "author": {
+    "name": "Chetan Karwa",
+    "email": "cbkarwa@gmail.com"
+  },
+  "version": "4.0.90",
+  "description": "A set of animation utilities for Remotion",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "dependencies": {
+    "remotion": "4.0.90"
+  },
+  "files": [
+    "dist",
+    "!dist/tsconfig-esm.tsbuildinfo",
+    "!dist/test"
+  ],
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "devDependencies": {
+    "@types/react": "18.2.48",
+    "@types/node": "18.14.6",
+    "prettier": "3.1.1",
+    "prettier-plugin-organize-imports": "3.2.4",
+    "eslint": "8.42.0",
+    "@jonny/eslint-config": "3.0.276",
+    "vitest": "0.31.1",
+    "rollup": "^2.70.1"
+  },
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "module": "./dist/esm/index.mjs",
+      "import": "./dist/esm/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "remotion",
+    "animation-utils"
+  ],
+  "scripts": {
+    "dev": "tsup src/index.ts --format cjs,esm --dts --watch",
+    "formatting": "prettier src --check",
+    "lint": "eslint src --ext ts,tsx",
+    "watch": "tsc -w",
+    "build": "tsc -d && rollup --config rollup.config.js",
+    "test": "vitest --run"
+  }
+}