@wix/motion 1.659.0 → 2.0.0-rc.2

package/dist/es/library/entrance/FlipIn.js

@@ -0,0 +1,80 @@
+import { getAdjustedDirection, INITIAL_FRAME_OFFSET } from '../../utils';
+export function getNames(_) {
+    return ['motion-fadeIn', 'motion-flipIn'];
+}
+const DIRECTIONS = ['top', 'right', 'bottom', 'left'];
+const POWER_TO_ROTATE_MAP = {
+    soft: 45,
+    medium: 90,
+    hard: 270,
+};
+function getRotateFrom(direction, rotate) {
+    return {
+        x: ROTATE_MAP[direction].x * rotate,
+        y: ROTATE_MAP[direction].y * rotate,
+    };
+}
+const ROTATE_MAP = {
+    top: { x: 1, y: 0 },
+    right: { x: 0, y: 1 },
+    bottom: { x: -1, y: 0 },
+    left: { x: 0, y: -1 },
+};
+export function web(options, dom) {
+    prepare(options, dom);
+    return style(options);
+}
+export function style(options) {
+    const { direction = 'top', power, initialRotate = 90 } = options.namedEffect;
+    const [fadeIn, flipIn] = getNames(options);
+    const rotate = (power && POWER_TO_ROTATE_MAP[power]) || initialRotate;
+    const easing = options.easing || 'backOut';
+    const from = getRotateFrom(direction, rotate);
+    const custom = {
+        '--motion-rotate-x': `${from.x}deg`,
+        '--motion-rotate-y': `${from.y}deg`,
+    };
+    return [
+        {
+            ...options,
+            easing: 'quadOut',
+            name: fadeIn,
+            custom: {},
+            keyframes: [{ offset: 0, opacity: 0 }, { opacity: 'var(--comp-opacity, 1)' }],
+        },
+        {
+            ...options,
+            easing,
+            name: flipIn,
+            custom,
+            keyframes: [
+                {
+                    offset: INITIAL_FRAME_OFFSET,
+                    transform: `perspective(800px) rotate(var(--comp-rotate-z, 0deg)) rotateX(var(--motion-rotate-x , ${custom['--motion-rotate-x']})) rotateY(var(--motion-rotate-y , ${custom['--motion-rotate-y']}))`,
+                },
+                {
+                    transform: `perspective(800px) rotate(var(--comp-rotate-z, 0deg)) rotateX(0deg) rotateY(0deg)`,
+                },
+            ],
+        },
+    ];
+}
+export function prepare(options, dom) {
+    const { direction = 'top', power, initialRotate = 90 } = options.namedEffect;
+    const rotate = (power && POWER_TO_ROTATE_MAP[power]) || initialRotate;
+    if (dom) {
+        let adjustedDirection = direction;
+        dom.measure((target) => {
+            if (!target) {
+                return;
+            }
+            const rotation = getComputedStyle(target).getPropertyValue('--comp-rotate-z') || '0deg';
+            adjustedDirection = getAdjustedDirection(DIRECTIONS, direction, parseInt(rotation, 10));
+        });
+        dom.mutate((target) => {
+            const from = getRotateFrom(adjustedDirection, rotate);
+            target?.style.setProperty('--motion-rotate-x', `${from.x}deg`);
+            target?.style.setProperty('--motion-rotate-y', `${from.y}deg`);
+        });
+    }
+}

package/dist/es/library/entrance/FloatIn.js

@@ -0,0 +1,48 @@
+import { INITIAL_FRAME_OFFSET, toKeyframeValue } from '../../utils';
+export function getNames(_) {
+    return ['motion-floatIn'];
+}
+const PARAMS_MAP = {
+    top: { dx: 0, dy: -1, distance: 120 },
+    right: { dx: 1, dy: 0, distance: 120 },
+    bottom: { dx: 0, dy: 1, distance: 120 },
+    left: { dx: -1, dy: 0, distance: 120 },
+};
+export function web(options) {
+    return style(options, true);
+}
+export function style(options, asWeb = false) {
+    const { direction = 'left' } = options.namedEffect;
+    const [floatIn] = getNames(options);
+    const fromParams = PARAMS_MAP[direction];
+    const translateX = fromParams.dx * fromParams.distance;
+    const translateY = fromParams.dy * fromParams.distance;
+    const custom = {
+        '--motion-translate-x': `${translateX}px`,
+        '--motion-translate-y': `${translateY}px`,
+    };
+    return [
+        {
+            ...options,
+            name: floatIn,
+            easing: 'sineInOut',
+            custom,
+            keyframes: [
+                {
+                    offset: 0,
+                    opacity: 0,
+                    easing: 'step-end',
+                },
+                {
+                    offset: INITIAL_FRAME_OFFSET,
+                    opacity: 0,
+                    transform: `translate(${toKeyframeValue(custom, '--motion-translate-x', asWeb)}, ${toKeyframeValue(custom, '--motion-translate-y', asWeb)}) rotate(var(--comp-rotate-z, 0deg))`,
+                },
+                {
+                    opacity: 'var(--comp-opacity, 1)',
+                    transform: 'translate(0, 0) rotate(var(--comp-rotate-z, 0deg))',
+                },
+            ],
+        },
+    ];
+}

package/dist/es/library/entrance/FoldIn.js

@@ -0,0 +1,86 @@
+import { getAdjustedDirection, INITIAL_FRAME_OFFSET } from '../../utils';
+export function getNames(_) {
+    return ['motion-fadeIn', 'motion-foldIn'];
+}
+const POWER_TO_ROTATE_MAP = {
+    soft: 35,
+    medium: 60,
+    hard: 90,
+};
+const DIRECTIONS = ['top', 'right', 'bottom', 'left'];
+const PARAM_MAP = {
+    top: { x: -1, y: 0, origin: { x: 0, y: -50 } },
+    right: { x: 0, y: -1, origin: { x: 50, y: 0 } },
+    bottom: { x: 1, y: 0, origin: { x: 0, y: 50 } },
+    left: { x: 0, y: 1, origin: { x: -50, y: 0 } },
+};
+function getRotateFrom(direction, rotate) {
+    return {
+        x: PARAM_MAP[direction].x * rotate,
+        y: PARAM_MAP[direction].y * rotate,
+    };
+}
+export function web(options, dom) {
+    prepare(options, dom);
+    return style(options);
+}
+export function style(options) {
+    const { direction = 'top', power, initialRotate = 90 } = options.namedEffect;
+    const [fadeIn, foldIn] = getNames(options);
+    const easing = options.easing || 'backOut';
+    const rotate = (power && POWER_TO_ROTATE_MAP[power]) || initialRotate;
+    const { x, y } = PARAM_MAP[direction].origin;
+    const from = getRotateFrom(direction, rotate);
+    const custom = {
+        '--motion-origin-x': `${x}%`,
+        '--motion-origin-y': `${y}%`,
+        '--motion-rotate-x': `${from.x}deg`,
+        '--motion-rotate-y': `${from.y}deg`,
+    };
+    return [
+        {
+            ...options,
+            easing: 'quadOut',
+            name: fadeIn,
+            custom: {},
+            keyframes: [{ offset: 0, opacity: 0 }, { opacity: 'var(--comp-opacity, 1)' }],
+        },
+        {
+            ...options,
+            easing,
+            name: foldIn,
+            custom,
+            keyframes: [
+                {
+                    offset: INITIAL_FRAME_OFFSET,
+                    transform: `rotate(var(--comp-rotate-z, 0deg)) translate(var(--motion-origin-x ,${custom['--motion-origin-x']}), var(--motion-origin-y, ${custom['--motion-origin-y']})) perspective(800px) rotateX(var(--motion-rotate-x, ${custom['--motion-rotate-x']})) rotateY(var(--motion-rotate-y, ${custom['--motion-rotate-y']})) translate(calc(-1 * var(--motion-origin-x ,${custom['--motion-origin-x']})), calc(-1 * var(--motion-origin-y, ${custom['--motion-origin-y']})))`,
+                },
+                {
+                    transform: `rotate(var(--comp-rotate-z, 0deg)) translate(var(--motion-origin-x ,${custom['--motion-origin-x']}), var(--motion-origin-y, ${custom['--motion-origin-y']})) perspective(800px) rotateX(0deg) rotateY(0deg) translate(calc(-1 * var(--motion-origin-x ,${custom['--motion-origin-x']})), calc(-1 * var(--motion-origin-y, ${custom['--motion-origin-y']})))`,
+                },
+            ],
+        },
+    ];
+}
+export function prepare(options, dom) {
+    const { direction = 'top', power, initialRotate = 90 } = options.namedEffect;
+    const rotate = (power && POWER_TO_ROTATE_MAP[power]) || initialRotate;
+    if (dom) {
+        let adjustedDirection = direction;
+        dom.measure((target) => {
+            if (!target) {
+                return;
+            }
+            const rotation = getComputedStyle(target).getPropertyValue('--comp-rotate-z') || '0deg';
+            adjustedDirection = getAdjustedDirection(DIRECTIONS, direction, parseInt(rotation, 10));
+        });
+        dom.mutate((target) => {
+            const { origin } = PARAM_MAP[adjustedDirection];
+            const newRotate = getRotateFrom(adjustedDirection, rotate);
+            target?.style.setProperty('--motion-origin-x', `${origin.x}%`);
+            target?.style.setProperty('--motion-origin-y', `${origin.y}%`);
+            target?.style.setProperty('--motion-rotate-x', `${newRotate.x}deg`);
+            target?.style.setProperty('--motion-rotate-y', `${newRotate.y}deg`);
+        });
+    }
+}

package/dist/es/library/entrance/GlideIn.js

@@ -0,0 +1,75 @@
+import { getCssUnits, getOutOfScreenDistance, INITIAL_FRAME_OFFSET, toKeyframeValue, } from '../../utils';
+export function getNames(_) {
+    return ['motion-glideIn'];
+}
+const EASING_MAP = {
+    soft: 'cubicInOut',
+    medium: 'quintInOut',
+    hard: 'backOut',
+};
+export function web(options, dom) {
+    prepare(options, dom);
+    return style(options, true);
+}
+export function style(options, asWeb = false) {
+    const { direction = 0, distance = { value: 100, type: 'percentage' }, power, startFromOffScreen = false, } = options.namedEffect;
+    const [glideIn] = getNames(options);
+    const angleInRad = (direction * Math.PI) / 180;
+    const unit = getCssUnits(distance.type);
+    const easing = (power && EASING_MAP[power]) || options.easing || 'quintInOut';
+    const { x, y } = getOutOfScreenDistance(direction);
+    const translateX = startFromOffScreen
+        ? x
+        : `${(Math.sin(angleInRad) * distance.value) | 0}${unit}`;
+    const translateY = startFromOffScreen
+        ? y
+        : `${(Math.cos(angleInRad) * distance.value * -1) | 0}${unit}`;
+    const custom = {
+        '--motion-translate-x': `${translateX}`,
+        '--motion-translate-y': `${translateY}`,
+    };
+    return [
+        {
+            ...options,
+            name: glideIn,
+            easing,
+            custom,
+            keyframes: [
+                {
+                    offset: 0,
+                    opacity: 0,
+                    easing: 'step-end',
+                },
+                {
+                    offset: INITIAL_FRAME_OFFSET,
+                    // TODO: remove opacity when not necessary to override hard-coded opacity:0 in style
+                    opacity: 'var(--comp-opacity, 1)',
+                    transform: `translate(${toKeyframeValue(custom, '--motion-translate-x', asWeb)}, ${toKeyframeValue(custom, '--motion-translate-y', asWeb)}) rotate(var(--comp-rotate-z, 0deg))`,
+                },
+                {
+                    opacity: 'var(--comp-opacity, 1)',
+                    transform: 'translate(0, 0) rotate(var(--comp-rotate-z, 0deg))',
+                },
+            ],
+        },
+    ];
+}
+export function prepare(options, dom) {
+    const { startFromOffScreen = false } = options.namedEffect;
+    if (dom && startFromOffScreen) {
+        let left = 0;
+        let top = 0;
+        dom.measure((target) => {
+            if (!target) {
+                return;
+            }
+            const { left: targetLeft, top: targetTop } = target.getBoundingClientRect();
+            left = targetLeft;
+            top = targetTop;
+        });
+        dom.mutate((target) => {
+            target?.style.setProperty('--motion-left', `${left}px`);
+            target?.style.setProperty('--motion-top', `${top}px`);
+        });
+    }
+}

package/dist/es/library/entrance/GlitchIn.js

@@ -0,0 +1,20 @@
+import { web as glideInWeb, style as glideInStyle } from './GlideIn';
+export { prepare, getNames } from './GlideIn';
+function getFixedDirection(options) {
+    // TODO replace with structuredClone() when possible
+    const duplicate = JSON.parse(JSON.stringify(options));
+    const { direction } = duplicate.namedEffect;
+    if (duplicate.namedEffect.startFromOffScreen) {
+        duplicate.namedEffect.direction = (direction ?? 270) - 90;
+    }
+    else if (typeof direction === 'undefined') {
+        duplicate.namedEffect.direction = 270;
+    }
+    return duplicate;
+}
+export function web(options, dom) {
+    return glideInWeb(getFixedDirection(options), dom);
+}
+export function style(options) {
+    return glideInStyle(getFixedDirection(options));
+}

package/dist/es/library/entrance/GrowIn.js

@@ -0,0 +1,52 @@
+import { getCssUnits, INITIAL_FRAME_OFFSET, toKeyframeValue } from '../../utils';
+export function getNames(_) {
+    return ['motion-fadeIn', 'motion-growIn'];
+}
+const SCALE_MAP = {
+    soft: 0.8,
+    medium: 0.6,
+    hard: 0,
+};
+export function web(options) {
+    return style(options, true);
+}
+export function style(options, asWeb = false) {
+    const { power, initialScale = 0, distance = { value: 120, type: 'percentage' }, direction = 0, } = options.namedEffect;
+    const [fadeIn, growIn] = getNames(options);
+    const easing = options.easing || 'cubicInOut';
+    const scale = typeof power !== 'undefined' ? SCALE_MAP[power] : initialScale;
+    const angleInRad = (direction * Math.PI) / 180;
+    const unit = getCssUnits(distance.type);
+    const x = `${(Math.sin(angleInRad) * distance.value) | 0}${unit}`;
+    const y = `${(Math.cos(angleInRad) * distance.value * -1) | 0}${unit}`;
+    const custom = {
+        '--motion-translate-x': `${x}`,
+        '--motion-translate-y': `${y}`,
+        '--motion-scale': `${scale}`,
+    };
+    return [
+        {
+            ...options,
+            easing,
+            duration: options.duration * scale,
+            name: fadeIn,
+            custom: {},
+            keyframes: [{ offset: 0, opacity: 0 }, { opacity: 'var(--comp-opacity, 1)' }],
+        },
+        {
+            ...options,
+            easing,
+            name: growIn,
+            custom,
+            keyframes: [
+                {
+                    offset: INITIAL_FRAME_OFFSET,
+                    transform: `translate(${toKeyframeValue(custom, '--motion-translate-x', asWeb)}, ${toKeyframeValue(custom, '--motion-translate-y', asWeb)}) rotate(var(--comp-rotate-z, 0deg)) scale(${toKeyframeValue(custom, '--motion-scale', asWeb)})`,
+                },
+                {
+                    transform: 'translate(0px, 0px) rotate(var(--comp-rotate-z, 0deg)) scale(1)',
+                },
+            ],
+        },
+    ];
+}

package/dist/es/library/entrance/PunchIn.js

@@ -0,0 +1,103 @@
+import { getEasingFamily, getEasing, toKeyframeValue, INITIAL_FRAME_OFFSET } from '../../utils';
+import { cssEasings as easings } from '../../easings';
+export function getNames(_) {
+    return ['motion-fadeIn', 'motion-punchIn'];
+}
+const TRANSLATION_FACTORS_MAP = {
+    'top-left': { y: -1, x: -1 },
+    'top-right': { y: -1, x: 1 },
+    'bottom-right': { y: 1, x: 1 },
+    'bottom-left': { y: 1, x: -1 },
+    center: { y: 0, x: 0 },
+};
+const POWER_MAP = {
+    soft: 'sineIn',
+    medium: 'quadIn',
+    hard: 'quintIn',
+};
+function getMidPoint(x, y, factor) {
+    return {
+        x: `calc(var(--motion-width, 100%) * 1.1 / 3 * ${x} * ${factor})`,
+        y: `calc(var(--motion-height, 100%) * 1.1 / 3 * ${y} * ${factor})`,
+    };
+}
+export function web(options, dom) {
+    prepare(options, dom);
+    return style(options, true);
+}
+export function style(options, asWeb = false) {
+    const { direction = 'top-right', power = 'medium' } = options.namedEffect;
+    const [fadeIn, punchIn] = getNames(options);
+    const translationFactors = TRANSLATION_FACTORS_MAP[direction];
+    const sourcePoint = {
+        x: `calc(var(--motion-width, 100%) * 1.1 / 2 * ${translationFactors.x})`,
+        y: `calc(var(--motion-height, 100%) * 1.1 / 2 * ${translationFactors.y})`,
+    };
+    const { in: _in, out: _out } = getEasingFamily(POWER_MAP[power]);
+    const KEYFRAMES = [
+        { offset: 30, scale: 0.3, factor: 1, ease: 'linear' },
+        { offset: 45, scale: 1.4, factor: -0.4, ease: _out },
+        { offset: 62.65, scale: 0.8, factor: 0.2, ease: _in },
+        { offset: 77.27, scale: 1.1, factor: -0.1, ease: _out },
+        { offset: 86.23, scale: 0.94, factor: 0.06, ease: _in },
+        { offset: 91.73, scale: 1.03, factor: -0.03, ease: _out },
+        { offset: 95.11, scale: 0.98, factor: 0.02, ease: _in },
+        { offset: 97.18, scale: 1.01, factor: -0.01, ease: _out },
+        { offset: 98.45, scale: 0.99, factor: 0.01, ease: _in },
+        { offset: 100, scale: 1, factor: 0, ease: _out },
+    ];
+    const keyframes = KEYFRAMES.map(({ offset, scale, ease, factor }) => {
+        const { x, y } = getMidPoint(translationFactors.x, translationFactors.y, factor);
+        return {
+            offset: offset / 100,
+            easing: getEasing(ease),
+            scale: `${scale}`,
+            translate: `${x} ${y}`,
+        };
+    });
+    const custom = {
+        '--motion-translate': `${sourcePoint.x} ${sourcePoint.y}`,
+    };
+    return [
+        {
+            ...options,
+            easing: 'cubicIn',
+            duration: options.duration * 0.3,
+            name: fadeIn,
+            custom: {},
+            keyframes: [{ offset: 0, opacity: 0 }, { opacity: 'var(--comp-opacity, 1)' }],
+        },
+        {
+            ...options,
+            easing: 'linear',
+            name: punchIn,
+            custom,
+            keyframes: [
+                {
+                    offset: INITIAL_FRAME_OFFSET,
+                    translate: toKeyframeValue(custom, '--motion-translate', asWeb),
+                    scale: '0',
+                    easing: easings.expoIn,
+                },
+                ...keyframes,
+            ],
+        },
+    ];
+}
+export function prepare(_, dom) {
+    if (dom) {
+        let width, height;
+        dom.measure((target) => {
+            if (!target) {
+                return;
+            }
+            const rect = target.getBoundingClientRect();
+            width = rect.width;
+            height = rect.height;
+        });
+        dom.mutate((target) => {
+            target?.style.setProperty('--motion-width', `${width}px`);
+            target?.style.setProperty('--motion-height', `${height}px`);
+        });
+    }
+}

package/dist/es/library/entrance/RevealIn.js

@@ -0,0 +1,64 @@
+import { getAdjustedDirection, getClipPolygonParams, INITIAL_FRAME_OFFSET } from '../../utils';
+export function getNames(_) {
+    return ['motion-revealIn'];
+}
+const DIRECTIONS = ['top', 'right', 'bottom', 'left'];
+function getClipStart(rotateZ, direction) {
+    const clipDirection = getAdjustedDirection(DIRECTIONS, direction, rotateZ);
+    return getClipPolygonParams({
+        direction: clipDirection,
+        minimum: 0,
+    });
+}
+export function web(options, dom) {
+    prepare(options, dom);
+    return style(options);
+}
+export function style(options) {
+    const { direction = 'left' } = options.namedEffect;
+    const [revealIn] = getNames(options);
+    const easing = options.easing || 'cubicInOut';
+    const start = getClipStart(0, direction);
+    const end = getClipPolygonParams({ direction: 'initial' });
+    const custom = {
+        '--motion-clip-start': start,
+    };
+    return [
+        {
+            ...options,
+            easing,
+            name: revealIn,
+            custom,
+            keyframes: [
+                {
+                    offset: 0,
+                    opacity: 0,
+                    easing: 'step-end',
+                },
+                {
+                    offset: INITIAL_FRAME_OFFSET,
+                    opacity: 'var(--comp-opacity, 1)',
+                    clipPath: `var(--motion-clip-start, ${start})`,
+                },
+                {
+                    clipPath: end,
+                },
+            ],
+        },
+    ];
+}
+export function prepare(options, dom) {
+    const { direction = 'left' } = options.namedEffect;
+    if (dom) {
+        let rotation = '0deg';
+        dom.measure((target) => {
+            if (!target) {
+                return;
+            }
+            rotation = getComputedStyle(target).getPropertyValue('--comp-rotate-z') || '0deg';
+        });
+        dom.mutate((target_) => {
+            target_?.style.setProperty('--motion-clip-start', getClipStart(parseInt(rotation, 10), direction));
+        });
+    }
+}

package/dist/es/library/entrance/ShapeIn.js

@@ -0,0 +1,55 @@
+import { INITIAL_FRAME_OFFSET, toKeyframeValue } from '../../utils';
+export function getNames(_) {
+    return ['motion-fadeIn', 'motion-shapeIn'];
+}
+const shapes = {
+    diamond: {
+        start: 'polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%)',
+        end: 'polygon(50% -50%, 150% 50%, 50% 150%, -50% 50%)',
+    },
+    window: {
+        start: 'inset(50% round 50% 50% 0% 0%)',
+        end: 'inset(-20% round 50% 50% 0% 0%)',
+    },
+    rectangle: { start: 'inset(50%)', end: 'inset(0%)' },
+    circle: { start: 'circle(0%)', end: 'circle(75%)' },
+    ellipse: { start: 'ellipse(0% 0%)', end: 'ellipse(75% 75%)' },
+};
+export function web(options) {
+    return style(options, true);
+}
+export function style(options, asWeb = false) {
+    const { shape = 'rectangle' } = options.namedEffect;
+    const [fadeIn, shapeIn] = getNames(options);
+    const easing = options.easing || 'cubicInOut';
+    const { start, end } = shapes[shape];
+    const custom = {
+        '--motion-shape-start': start,
+        '--motion-shape-end': end,
+    };
+    return [
+        {
+            ...options,
+            name: fadeIn,
+            easing: 'quadOut',
+            duration: options.duration * 0.8,
+            custom: {},
+            keyframes: [{ offset: 0, opacity: 0 }, { opacity: 'var(--comp-opacity, 1)' }],
+        },
+        {
+            ...options,
+            name: shapeIn,
+            easing,
+            custom,
+            keyframes: [
+                {
+                    offset: INITIAL_FRAME_OFFSET,
+                    clipPath: toKeyframeValue(custom, '--motion-shape-start', asWeb),
+                },
+                {
+                    clipPath: toKeyframeValue(custom, '--motion-shape-end', asWeb),
+                },
+            ],
+        },
+    ];
+}

package/dist/es/library/entrance/ShuttersIn.js

@@ -0,0 +1,40 @@
+import { getShuttersClipPaths, getEasing, toKeyframeValue, INITIAL_FRAME_OFFSET, } from '../../utils';
+export function getNames(_) {
+    return ['motion-shuttersIn'];
+}
+export function web(options) {
+    return style(options, true);
+}
+export function style(options, asWeb = false) {
+    const { direction = 'right', shutters = 12, staggered = true, } = options.namedEffect;
+    const [shuttersIn] = getNames(options);
+    const { clipStart, clipEnd } = getShuttersClipPaths(direction, shutters, staggered);
+    const custom = {
+        '--motion-shutters-start': clipStart,
+        '--motion-shutters-end': clipEnd,
+    };
+    const easing = getEasing(options.easing || 'sineIn');
+    return [
+        {
+            ...options,
+            easing,
+            name: shuttersIn,
+            custom,
+            keyframes: [
+                {
+                    offset: 0,
+                    opacity: 0,
+                    easing: 'step-end',
+                },
+                {
+                    offset: INITIAL_FRAME_OFFSET,
+                    opacity: 'var(--comp-opacity, 1)',
+                    clipPath: toKeyframeValue(custom, '--motion-shutters-start', asWeb),
+                },
+                {
+                    clipPath: toKeyframeValue(custom, '--motion-shutters-end', asWeb),
+                },
+            ],
+        },
+    ];
+}