@cntrl-site/sdk-nextjs 1.6.2 → 1.6.4

package/lib/common/useItemFXData.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useItemFXData = void 0;
+const sdk_1 = require("@cntrl-site/sdk");
+const useKeyframeValue_1 = require("./useKeyframeValue");
+const baseVariables = `precision mediump float;
+uniform sampler2D u_image;
+uniform sampler2D u_pattern;
+uniform vec2 u_imgDimensions;
+uniform vec2 u_patternDimensions;
+uniform float u_time;
+uniform vec2 u_cursor;
+varying vec2 v_texCoord;`;
+function useItemFXData(item, sectionId) {
+    const { fragmentShader: shaderBody, FXControls } = item.commonParams;
+    const controls = FXControls !== null && FXControls !== void 0 ? FXControls : [];
+    const controlsVariables = controls.map((c) => `uniform ${c.type} ${c.shaderParam};`)
+        .join('\n');
+    const fragmentShader = `${baseVariables}\n${controlsVariables}\n${shaderBody}`;
+    const controlsValues = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.FXParams, () => {
+        const defaultValue = controls.reduce((acc, control) => {
+            if (Array.isArray(control.value)) {
+                acc[control.shaderParam] = control.value[0];
+            }
+            else {
+                acc[control.shaderParam] = control.value;
+            }
+            return acc;
+        }, {});
+        return defaultValue;
+    }, (animator, scroll, value) => animator.getFXParams(value, scroll), sectionId);
+    return {
+        fragmentShader,
+        controlsValues
+    };
+}
+exports.useItemFXData = useItemFXData;

package/lib/common/useKeyframeValue.js

@@ -11,7 +11,7 @@ const KeyframesContext_1 = require("../provider/KeyframesContext");
 const Animator_1 = require("../utils/Animator/Animator");
 const useLayoutContext_1 = require("../components/useLayoutContext");
 const emptyDeps = [];
-const useKeyframeValue = (item, type, itemParamsGetter, animatorGetter, sectionId, deps = emptyDeps) => {
+function useKeyframeValue(item, type, itemParamsGetter, animatorGetter, sectionId, deps = emptyDeps) {
     const animatorGetterRef = (0, react_1.useRef)(animatorGetter);
     const itemParamsGetterRef = (0, react_1.useRef)(itemParamsGetter);
     animatorGetterRef.current = animatorGetter;
@@ -72,5 +72,5 @@ const useKeyframeValue = (item, type, itemParamsGetter, animatorGetter, sectionI
         });
     }, [handleKeyframeValue, articleRectObserver, animator]);
     return keyframes.length ? adjustedValue : paramValue;
-};
+}
 exports.useKeyframeValue = useKeyframeValue;

package/lib/components/items/CompoundItem/CompoundChild.js

@@ -69,11 +69,15 @@ const CompoundChild = ({ item, sectionId, isParentVisible = true }) => {
             ? { height: `${sizingAxis.y === 'manual'
                     ? (0, getCompoundBondaryStyles_1.getCompoundHeight)(compoundSettings, height)
                     : 'unset'}` }
-            : {})), (scale !== undefined && compoundSettings ? { transform: `scale(${scale}) ${(0, getCompoundBondaryStyles_1.getCompoundTransform)(compoundSettings)}` } : {})), { transition: (_k = stateProps === null || stateProps === void 0 ? void 0 : stateProps.transition) !== null && _k !== void 0 ? _k : 'none', cursor: hasClickTriggers ? 'pointer' : 'unset', pointerEvents: allowPointerEvents ? 'auto' : 'none' }) }, triggers, { children: [(0, jsx_runtime_1.jsx)(RichTextWrapper_1.RichTextWrapper, { isRichText: isRichText, transformOrigin: transformOrigin, children: (0, jsx_runtime_1.jsx)(ItemComponent, { item: item, sectionId: sectionId, interactionCtrl: interactionCtrl, onVisibilityChange: handleVisibilityChange }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+            : {})), (compoundSettings ? { transform: `${(0, getCompoundBondaryStyles_1.getCompoundTransform)(compoundSettings)}` } : {})), { transition: (_k = stateProps === null || stateProps === void 0 ? void 0 : stateProps.transition) !== null && _k !== void 0 ? _k : 'none', cursor: hasClickTriggers ? 'pointer' : 'unset', pointerEvents: allowPointerEvents ? 'auto' : 'none' }) }, triggers, { children: [(0, jsx_runtime_1.jsx)("div", { className: `item-${item.id}-inner`, style: Object.assign({}, (scale !== undefined ? { transform: `scale(${scale})` } : {})), children: (0, jsx_runtime_1.jsx)(RichTextWrapper_1.RichTextWrapper, { isRichText: isRichText, transformOrigin: transformOrigin, children: (0, jsx_runtime_1.jsx)(ItemComponent, { item: item, sectionId: sectionId, interactionCtrl: interactionCtrl, onVisibilityChange: handleVisibilityChange }) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, hidden, compoundSettings, layoutParams]) => {
                     const sizingAxis = (0, useSizing_1.parseSizing)(layoutParams.sizing);
                     const scaleAnchor = area.scaleAnchor;
                     return (`
+            .item-${item.id}-inner {
+              transform-origin: ${ScaleAnchorMap_1.ScaleAnchorMap[scaleAnchor]};
+              transform: scale(${area.scale});
+            }
             .item-${item.id} {
               position: absolute;
               top: ${(0, getCompoundBondaryStyles_1.getCompoundTop)(compoundSettings, area.top)};
@@ -84,8 +88,7 @@ const CompoundChild = ({ item, sectionId, isParentVisible = true }) => {
                         ? `${(0, getCompoundBondaryStyles_1.getCompoundWidth)(compoundSettings, area.width, isRichText)}`
                         : 'max-content'};
               height: ${sizingAxis.y === 'manual' ? `${(0, getCompoundBondaryStyles_1.getCompoundHeight)(compoundSettings, area.height)}` : 'unset'};
-              transform-origin: ${ScaleAnchorMap_1.ScaleAnchorMap[scaleAnchor]};
-              transform: scale(${area.scale}) ${(0, getCompoundBondaryStyles_1.getCompoundTransform)(compoundSettings)};
+              transform: ${(0, getCompoundBondaryStyles_1.getCompoundTransform)(compoundSettings)};
               z-index: ${area.zIndex};
             }
           `);

package/lib/components/items/FileItem/ImageItem.js

@@ -18,7 +18,7 @@ const useImageFx_1 = require("../../../utils/effects/useImageFx");
 const useElementRect_1 = require("../../../utils/useElementRect");
 const useLayoutContext_1 = require("../../useLayoutContext");
 const getStyleFromItemStateAndParams_1 = require("../../../utils/getStyleFromItemStateAndParams");
-const shaderBaseVars_1 = require("./shaderBaseVars");
+const useItemFXData_1 = require("../../../common/useItemFXData");
 const ImageItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     const id = (0, react_1.useId)();
@@ -28,18 +28,11 @@ const ImageItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
     const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
     const [wrapperRef, setWrapperRef] = (0, react_1.useState)(null);
     (0, useRegisterResize_1.useRegisterResize)(wrapperRef, onResize);
-    const { url, hasGLEffect, fragmentShader, FXControls, FXCursor } = item.commonParams;
+    const { url, hasGLEffect } = item.commonParams;
     const fxCanvas = (0, react_1.useRef)(null);
     const isInitialRef = (0, react_1.useRef)(true);
-    const controls = FXControls !== null && FXControls !== void 0 ? FXControls : [];
-    const controlsVariables = controls.map((c) => `uniform ${c.type} ${c.shaderParam};`)
-        .join('\n');
-    const controlValues = controls.reduce((acc, control) => {
-        acc[control.shaderParam] = control.value;
-        return acc;
-    }, {});
     const layoutValues = [item.area, item.layoutParams];
-    const fullShaderCode = `${shaderBaseVars_1.baseVariables}\n${controlsVariables}\n${fragmentShader}`;
+    const { controlsValues, fragmentShader } = (0, useItemFXData_1.useItemFXData)(item, sectionId);
     const area = layoutId ? item.area[layoutId] : null;
     const exemplary = (_a = layouts === null || layouts === void 0 ? void 0 : layouts.find(l => l.id === layoutId)) === null || _a === void 0 ? void 0 : _a.exemplary;
     const width = area && exemplary ? area.width * exemplary : 0;
@@ -51,9 +44,8 @@ const ImageItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
     }, []);
     const isFXAllowed = (0, useImageFx_1.useImageFx)(fxCanvas.current, !!(hasGLEffect && !isInitialRef.current), {
         imageUrl: url,
-        fragmentShader: fullShaderCode,
-        cursor: FXCursor,
-        controls: controlValues
+        fragmentShader,
+        controlsValues
     }, width, height);
     const rect = (0, useElementRect_1.useElementRect)(wrapperRef);
     const rectWidth = Math.floor((_b = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _b !== void 0 ? _b : 0);

package/lib/components/items/FileItem/VideoItem.js

@@ -17,9 +17,9 @@ const useRegisterResize_1 = require("../../../common/useRegisterResize");
 const useLayoutContext_1 = require("../../useLayoutContext");
 const ScrollPlaybackVideo_1 = require("../../ScrollPlaybackVideo");
 const getStyleFromItemStateAndParams_1 = require("../../../utils/getStyleFromItemStateAndParams");
-const shaderBaseVars_1 = require("./shaderBaseVars");
 const useVideoFx_1 = require("../../../utils/effects/useVideoFx");
 const useElementRect_1 = require("../../../utils/useElementRect");
+const useItemFXData_1 = require("../../../common/useItemFXData");
 const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
     const id = (0, react_1.useId)();
@@ -30,20 +30,13 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
     const [ref, setRef] = (0, react_1.useState)(null);
     const videoRef = (0, react_1.useRef)(null);
     const fxCanvas = (0, react_1.useRef)(null);
-    const { url, hasGLEffect, fragmentShader, FXControls, FXCursor } = item.commonParams;
+    const { url, hasGLEffect } = item.commonParams;
     const isInitialRef = (0, react_1.useRef)(true);
     const area = layoutId ? item.area[layoutId] : null;
     const exemplary = (_a = layouts === null || layouts === void 0 ? void 0 : layouts.find(l => l.id === layoutId)) === null || _a === void 0 ? void 0 : _a.exemplary;
     const width = area && exemplary ? area.width * exemplary : 0;
     const height = area && exemplary ? area.height * exemplary : 0;
-    const controls = FXControls !== null && FXControls !== void 0 ? FXControls : [];
-    const controlsVariables = controls.map((c) => `uniform ${c.type} ${c.shaderParam};`)
-        .join('\n');
-    const controlValues = controls.reduce((acc, control) => {
-        acc[control.shaderParam] = control.value;
-        return acc;
-    }, {});
-    const fullShaderCode = `${shaderBaseVars_1.baseVariables}\n${controlsVariables}\n${fragmentShader}`;
+    const { controlsValues, fragmentShader } = (0, useItemFXData_1.useItemFXData)(item, sectionId);
     const rect = (0, useElementRect_1.useElementRect)(ref);
     const rectWidth = Math.floor((_b = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _b !== void 0 ? _b : 0);
     const rectHeight = Math.floor((_c = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _c !== void 0 ? _c : 0);
@@ -67,9 +60,8 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
     }, []);
     const isFXAllowed = (0, useVideoFx_1.useVideoFx)(fxCanvas.current, !!(hasGLEffect && !isInitialRef.current), {
         videoUrl: url,
-        fragmentShader: fullShaderCode,
-        cursor: FXCursor,
-        controls: controlValues
+        fragmentShader,
+        controls: controlsValues
     }, width, height);
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
     const inlineStyles = Object.assign(Object.assign(Object.assign(Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), (strokeWidth !== undefined ? { borderWidth: `${strokeWidth * 100}vw` } : {})), (borderColor ? { borderColor: `${borderColor.toCss()}` } : {})), { transition: (_k = videoStateParams === null || videoStateParams === void 0 ? void 0 : videoStateParams.transition) !== null && _k !== void 0 ? _k : 'none' });

package/lib/components/items/FileItem/useFileItem.js

@@ -5,7 +5,7 @@ const sdk_1 = require("@cntrl-site/sdk");
 const useKeyframeValue_1 = require("../../../common/useKeyframeValue");
 const useLayoutContext_1 = require("../../useLayoutContext");
 const DEFAULT_COLOR = 'rgba(0, 0, 0, 1)';
-const useFileItem = (item, sectionId) => {
+function useFileItem(item, sectionId) {
     const layoutId = (0, useLayoutContext_1.useLayoutContext)();
     const radius = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.BorderRadius, (item, layoutId) => {
         if (!layoutId)
@@ -38,5 +38,5 @@ const useFileItem = (item, sectionId) => {
         return 'blur' in layoutParams ? layoutParams.blur : 0;
     }, (animator, scroll, value) => value !== undefined ? animator.getBlur({ blur: value }, scroll).blur : undefined, sectionId, [layoutId]);
     return { radius, strokeWidth, opacity, strokeColor, blur };
-};
+}
 exports.useFileItem = useFileItem;

package/lib/utils/Animator/Animator.js

@@ -16,6 +16,25 @@ class Animator {
         this.keyframesMap = createKeyframesMap();
         this.fillKeyframesMap();
     }
+    getFXParams(valuesMap, pos) {
+        const keyframes = this.keyframesMap[sdk_1.KeyframeType.FXParams];
+        if (!keyframes.length)
+            return valuesMap;
+        if (keyframes.length === 1) {
+            const [keyframe] = keyframes;
+            return Object.entries(valuesMap).reduce((acc, [key, fallbackValue]) => {
+                var _a;
+                acc[key] = (_a = keyframe.value[key]) !== null && _a !== void 0 ? _a : fallbackValue;
+                return acc;
+            }, {});
+        }
+        const { start, end } = this.getStartEnd(pos, keyframes);
+        return Object.entries(valuesMap).reduce((acc, [key, fallbackValue]) => {
+            var _a, _b;
+            acc[key] = (0, rangeMap_1.rangeMap)(pos, start.position, end.position, (_a = start.value[key]) !== null && _a !== void 0 ? _a : fallbackValue, (_b = end.value[key]) !== null && _b !== void 0 ? _b : fallbackValue, true);
+            return acc;
+        }, {});
+    }
     getDimensions(values, pos) {
         const keyframes = this.keyframesMap[sdk_1.KeyframeType.Dimensions];
         if (!keyframes || !keyframes.length)
@@ -266,6 +285,7 @@ function createKeyframesMap() {
         [sdk_1.KeyframeType.BackdropBlur]: [],
         [sdk_1.KeyframeType.LetterSpacing]: [],
         [sdk_1.KeyframeType.WordSpacing]: [],
-        [sdk_1.KeyframeType.TextColor]: []
+        [sdk_1.KeyframeType.TextColor]: [],
+        [sdk_1.KeyframeType.FXParams]: []
     };
 }

package/lib/utils/effects/useImageFx.js

@@ -6,22 +6,27 @@ const effects_1 = require("@cntrl-site/effects");
 const rangeMap_1 = require("../rangeMap");
 const PATTERN_URL = 'https://cdn.cntrl.site/client-app-files/texture2.png';
 const PATTERN_2_URL = 'https://cdn.cntrl.site/client-app-files/bayer16.png';
-function useImageFx(canvas, enabled, { imageUrl, fragmentShader, cursor, controls }, width, height) {
+function useImageFx(canvas, enabled, { imageUrl, fragmentShader, controlsValues }, width, height) {
     const [isFXAllowed, setIsFXAllowed] = (0, react_1.useState)(true);
-    const mousePos = (0, react_1.useRef)([0.0, 0.0]);
     const imageTextureManager = (0, react_1.useMemo)(() => {
         if (!imageUrl || !enabled)
             return;
         return new effects_1.ImageTextureManager(imageUrl);
     }, [imageUrl, enabled]);
     const imageFx = (0, react_1.useMemo)(() => {
-        if (!cursor || !imageTextureManager)
+        if (!imageTextureManager)
             return;
-        const { type, x, y } = cursor;
-        return new effects_1.MediaEffect(imageTextureManager, PATTERN_URL, PATTERN_2_URL, fragmentShader, Object.assign({ time: 0, cursor: type === 'mouse' ? mousePos.current : [x, y] }, controls), width, height);
+        return new effects_1.MediaEffect(imageTextureManager, PATTERN_URL, PATTERN_2_URL, fragmentShader, Object.assign({ time: 0, cursor: [0, 0] }, controlsValues), width, height);
     }, [imageTextureManager, fragmentShader, width, height]);
     (0, react_1.useEffect)(() => {
-        if (!cursor || cursor.type !== 'mouse' || !canvas || !imageFx)
+        if (!imageFx || !controlsValues)
+            return;
+        for (const [key, value] of Object.entries(controlsValues)) {
+            imageFx.setParam(key, value);
+        }
+    }, [imageFx, controlsValues]);
+    (0, react_1.useEffect)(() => {
+        if (!canvas || !imageFx)
             return;
         const handleMouseMove = (evt) => {
             const rect = canvas.getBoundingClientRect();
@@ -33,7 +38,7 @@ function useImageFx(canvas, enabled, { imageUrl, fragmentShader, cursor, control
         return () => {
             window.removeEventListener('mousemove', handleMouseMove);
         };
-    }, [canvas, imageFx, cursor === null || cursor === void 0 ? void 0 : cursor.type]);
+    }, [canvas, imageFx]);
     (0, react_1.useEffect)(() => {
         const gl = canvas === null || canvas === void 0 ? void 0 : canvas.getContext('webgl2');
         if (!enabled || !canvas || !gl || !imageFx)

package/lib/utils/effects/useVideoFx.js

@@ -6,11 +6,10 @@ const effects_1 = require("@cntrl-site/effects");
 const rangeMap_1 = require("../rangeMap");
 const PATTERN_URL = 'https://cdn.cntrl.site/client-app-files/texture2.png';
 const PATTERN_2_URL = 'https://cdn.cntrl.site/client-app-files/bayer16.png';
-function useVideoFx(canvas, enabled, { videoUrl, fragmentShader, cursor, controls }, width, height) {
+function useVideoFx(canvas, enabled, { videoUrl, fragmentShader, controls }, width, height) {
     const [isFXAllowed, setIsFXAllowed] = (0, react_1.useState)(true);
     const [isReady, setIsReady] = (0, react_1.useState)(false);
     const active = enabled && isReady;
-    const mousePos = (0, react_1.useRef)([0.0, 0.0]);
     const videoTextureManager = (0, react_1.useMemo)(() => {
         if (!videoUrl || !enabled)
             return;
@@ -20,10 +19,9 @@ function useVideoFx(canvas, enabled, { videoUrl, fragmentShader, cursor, control
         return new effects_1.VideoTextureManager(videoUrl, handlePlayError);
     }, [videoUrl, enabled]);
     const videoFx = (0, react_1.useMemo)(() => {
-        if (!cursor || !videoTextureManager)
+        if (!videoTextureManager)
             return;
-        const { type, x, y } = cursor;
-        return new effects_1.MediaEffect(videoTextureManager, PATTERN_URL, PATTERN_2_URL, fragmentShader, Object.assign({ time: 0, cursor: type === 'mouse' ? mousePos.current : [x, y] }, controls), width, height);
+        return new effects_1.MediaEffect(videoTextureManager, PATTERN_URL, PATTERN_2_URL, fragmentShader, Object.assign({ time: 0, cursor: [0, 0] }, controls), width, height);
     }, [videoTextureManager, fragmentShader, width, height]);
     (0, react_1.useEffect)(() => {
         if (!videoTextureManager)
@@ -31,7 +29,7 @@ function useVideoFx(canvas, enabled, { videoUrl, fragmentShader, cursor, control
         videoTextureManager.onReadyStatusChange(setIsReady);
     }, [videoTextureManager]);
     (0, react_1.useEffect)(() => {
-        if (!cursor || cursor.type !== 'mouse' || !canvas || !videoFx)
+        if (!canvas || !videoFx)
             return;
         const handleMouseMove = (evt) => {
             const rect = canvas.getBoundingClientRect();
@@ -43,7 +41,7 @@ function useVideoFx(canvas, enabled, { videoUrl, fragmentShader, cursor, control
         return () => {
             window.removeEventListener('mousemove', handleMouseMove);
         };
-    }, [canvas, videoFx, cursor === null || cursor === void 0 ? void 0 : cursor.type]);
+    }, [canvas, videoFx]);
     (0, react_1.useEffect)(() => {
         const gl = canvas === null || canvas === void 0 ? void 0 : canvas.getContext('webgl2');
         if (!active || !canvas || !gl || !videoFx)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "1.6.2",
+  "version": "1.6.4",
   "description": "SDK for Next.js",
   "author": "arsen@momdesign.nyc",
   "license": "MIT",
@@ -31,7 +31,7 @@
     "@antfu/eslint-config": "^3.8.0",
     "@cntrl-site/color": "^1.0.0",
     "@cntrl-site/effects": "^1.3.2",
-    "@cntrl-site/sdk": "^1.19.3",
+    "@cntrl-site/sdk": "^1.19.4",
     "@types/vimeo__player": "^2.18.0",
     "@vimeo/player": "^2.25.0",
     "html-react-parser": "^3.0.1",

package/src/common/useItemFXData.ts

@@ -0,0 +1,47 @@
+import { ImageItem, KeyframeType, VideoItem } from '@cntrl-site/sdk';
+import { useKeyframeValue } from './useKeyframeValue';
+
+const baseVariables = `precision mediump float;
+uniform sampler2D u_image;
+uniform sampler2D u_pattern;
+uniform vec2 u_imgDimensions;
+uniform vec2 u_patternDimensions;
+uniform float u_time;
+uniform vec2 u_cursor;
+varying vec2 v_texCoord;`;
+
+export function useItemFXData(item: ImageItem | VideoItem, sectionId: string): FXData {
+  const { fragmentShader: shaderBody, FXControls } = item.commonParams;
+  const controls = FXControls ?? [];
+  const controlsVariables = controls.map((c) => `uniform ${c.type} ${c.shaderParam};`)
+    .join('\n');
+  const fragmentShader = `${baseVariables}\n${controlsVariables}\n${shaderBody}`;
+  const controlsValues = useKeyframeValue(
+    item,
+    KeyframeType.FXParams,
+    () => {
+      const defaultValue = controls.reduce<Record<string, ControlValue>>((acc, control) => {
+        if (Array.isArray(control.value)) {
+          acc[control.shaderParam] = control.value[0];
+        } else {
+          acc[control.shaderParam] = control.value;
+        }
+        return acc;
+      }, {});
+      return defaultValue;
+    },
+    (animator, scroll, value) => animator.getFXParams(value, scroll),
+    sectionId,
+  );
+  return {
+    fragmentShader,
+    controlsValues
+  };
+}
+
+type FXData = {
+  fragmentShader: string;
+  controlsValues: Record<string, ControlValue>;
+}
+
+type ControlValue = number;

package/src/common/useKeyframeValue.ts

@@ -10,14 +10,14 @@ export type AnimatorGetter<T> = (animator: Animator, scroll: number, value: T) =
 type ItemParamGetter<T> = (item: ItemAny, layoutId: string | undefined) => T;
 const emptyDeps: DependencyList = [];
 
-export const useKeyframeValue = <T>(
+export function useKeyframeValue<T>(
   item: ItemAny,
   type: KeyframeType,
   itemParamsGetter: ItemParamGetter<T>,
   animatorGetter: AnimatorGetter<T>,
   sectionId: string,
   deps: DependencyList = emptyDeps
-): T => {
+): T {
   const animatorGetterRef = useRef(animatorGetter);
   const itemParamsGetterRef = useRef(itemParamsGetter);
 
@@ -64,7 +64,7 @@ export const useKeyframeValue = <T>(
     if (!articleRectObserver || !animator) return;
     const scroll = articleRectObserver.getSectionScroll(sectionId);
     handleKeyframeValue(scroll);
-  }, [articleRectObserver, handleKeyframeValue, animator])
+  }, [articleRectObserver, handleKeyframeValue, animator]);
 
   useEffect(() => {
     if (!articleRectObserver || !animator) return;
@@ -82,5 +82,4 @@ export const useKeyframeValue = <T>(
     });
   }, [handleKeyframeValue, articleRectObserver, animator]);
   return keyframes.length ? adjustedValue : paramValue;
-};
-
+}

package/src/components/items/CompoundItem/CompoundChild.tsx

@@ -92,13 +92,18 @@ export const CompoundChild: FC<ChildItemProps> = ({ item, sectionId, isParentVis
               ? getCompoundHeight(compoundSettings, height) 
               : 'unset'}` }
           : {}),
-        ...(scale !== undefined && compoundSettings ? { transform: `scale(${scale}) ${getCompoundTransform(compoundSettings)}` } : {}),
+        ...(compoundSettings ? { transform: `${getCompoundTransform(compoundSettings)}` } : {}),
         transition: stateProps?.transition ?? 'none',
         cursor: hasClickTriggers ? 'pointer' : 'unset',
         pointerEvents: allowPointerEvents ? 'auto' : 'none'
       }}
       {...triggers}
     >
+      <div className={`item-${item.id}-inner`}
+        style={{
+          ...(scale !== undefined ? { transform: `scale(${scale})` } : {}),
+        }}
+      >
       <RichTextWrapper isRichText={isRichText} transformOrigin={transformOrigin}>
         <ItemComponent
           item={item}
@@ -107,11 +112,16 @@ export const CompoundChild: FC<ChildItemProps> = ({ item, sectionId, isParentVis
           onVisibilityChange={handleVisibilityChange}
         />
       </RichTextWrapper>
+      </div>
       <JSXStyle id={id}>{`
         ${getLayoutStyles(layouts, layoutValues, ([area, hidden, compoundSettings, layoutParams]) => {
           const sizingAxis = parseSizing(layoutParams.sizing);
           const scaleAnchor = area.scaleAnchor as AreaAnchor;
           return (`
+            .item-${item.id}-inner {
+              transform-origin: ${ScaleAnchorMap[scaleAnchor]};
+              transform: scale(${area.scale});
+            }
             .item-${item.id} {
               position: absolute;
               top: ${getCompoundTop(compoundSettings, area.top)};
@@ -122,8 +132,7 @@ export const CompoundChild: FC<ChildItemProps> = ({ item, sectionId, isParentVis
                 ? `${getCompoundWidth(compoundSettings, area.width, isRichText)}`
                 : 'max-content'};
               height: ${sizingAxis.y === 'manual' ? `${getCompoundHeight(compoundSettings, area.height)}` : 'unset'};
-              transform-origin: ${ScaleAnchorMap[scaleAnchor]};
-              transform: scale(${area.scale}) ${getCompoundTransform(compoundSettings)};
+              transform: ${getCompoundTransform(compoundSettings)};
               z-index: ${area.zIndex};
             }
           `);

package/src/components/items/FileItem/ImageItem.tsx

@@ -12,7 +12,7 @@ import { useImageFx } from '../../../utils/effects/useImageFx';
 import { useElementRect } from '../../../utils/useElementRect';
 import { useLayoutContext } from '../../useLayoutContext';
 import { getStyleFromItemStateAndParams } from '../../../utils/getStyleFromItemStateAndParams';
-import { baseVariables } from './shaderBaseVars';
+import { useItemFXData } from '../../../common/useItemFXData';
 
 export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
   const id = useId();
@@ -28,18 +28,12 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
   const itemAngle = useItemAngle(item, sectionId);
   const [wrapperRef, setWrapperRef] = useState<HTMLDivElement | null>(null);
   useRegisterResize(wrapperRef, onResize);
-  const { url, hasGLEffect, fragmentShader, FXControls, FXCursor } = item.commonParams;
+  const { url, hasGLEffect } = item.commonParams;
   const fxCanvas = useRef<HTMLCanvasElement | null>(null);
   const isInitialRef = useRef(true);
-  const controls = FXControls ?? [];
-  const controlsVariables = controls.map((c) => `uniform ${c.type} ${c.shaderParam};`)
-    .join('\n');
-  const controlValues = controls.reduce<Record<string, ControlValue>>((acc, control) => {
-    acc[control.shaderParam] = control.value;
-    return acc;
-  }, {});
+
   const layoutValues: Record<string, any>[] = [item.area, item.layoutParams];
-  const fullShaderCode = `${baseVariables}\n${controlsVariables}\n${fragmentShader}`;
+  const { controlsValues, fragmentShader } = useItemFXData(item, sectionId);
   const area = layoutId ? item.area[layoutId] : null;
   const exemplary = layouts?.find(l => l.id === layoutId)?.exemplary;
   const width = area && exemplary ? area.width * exemplary : 0;
@@ -55,9 +49,8 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
     !!(hasGLEffect && !isInitialRef.current),
     {
       imageUrl: url,
-      fragmentShader: fullShaderCode,
-      cursor: FXCursor,
-      controls: controlValues
+      fragmentShader,
+      controlsValues
     },
     width,
     height
@@ -143,7 +136,7 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
           box-sizing: border-box;
         }
         ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams]) => {
-          return (`
+      return (`
             .image-wrapper-${item.id} {
               opacity: ${layoutParams.opacity};
               transform: rotate(${area.angle}deg);
@@ -155,11 +148,9 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
               border-width: ${layoutParams.strokeWidth * 100}vw;
             }
           `);
-        })}
+    })}
       `}</JSXStyle>
       </>
     </LinkWrapper>
   );
 };
-
-type ControlValue = number | [number, number];

package/src/components/items/FileItem/VideoItem.tsx

@@ -11,9 +11,9 @@ import { useRegisterResize } from '../../../common/useRegisterResize';
 import { useLayoutContext } from '../../useLayoutContext';
 import { ScrollPlaybackVideo } from '../../ScrollPlaybackVideo';
 import { getStyleFromItemStateAndParams } from '../../../utils/getStyleFromItemStateAndParams';
-import { baseVariables } from './shaderBaseVars';
 import { useVideoFx } from '../../../utils/effects/useVideoFx';
 import { useElementRect } from '../../../utils/useElementRect';
+import { useItemFXData } from '../../../common/useItemFXData';
 
 export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
   const id = useId();
@@ -30,20 +30,13 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
   const [ref, setRef] = useState<HTMLDivElement | null>(null);
   const videoRef = useRef<HTMLVideoElement | null>(null);
   const fxCanvas = useRef<HTMLCanvasElement | null>(null);
-  const { url, hasGLEffect, fragmentShader, FXControls, FXCursor } = item.commonParams;
+  const { url, hasGLEffect } = item.commonParams;
   const isInitialRef = useRef(true);
   const area = layoutId ? item.area[layoutId] : null;
   const exemplary = layouts?.find(l => l.id === layoutId)?.exemplary;
   const width = area && exemplary ? area.width * exemplary : 0;
   const height = area && exemplary ? area.height * exemplary : 0;
-  const controls = FXControls ?? [];
-  const controlsVariables = controls.map((c) => `uniform ${c.type} ${c.shaderParam};`)
-    .join('\n');
-  const controlValues = controls.reduce<Record<string, ControlValue>>((acc, control) => {
-    acc[control.shaderParam] = control.value;
-    return acc;
-  }, {});
-  const fullShaderCode = `${baseVariables}\n${controlsVariables}\n${fragmentShader}`;
+  const { controlsValues, fragmentShader } = useItemFXData(item, sectionId);
   const rect = useElementRect(ref);
   const rectWidth = Math.floor(rect?.width ?? 0);
   const rectHeight = Math.floor(rect?.height ?? 0);
@@ -69,9 +62,8 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
     !!(hasGLEffect && !isInitialRef.current),
     {
       videoUrl: url,
-      fragmentShader: fullShaderCode,
-      cursor: FXCursor,
-      controls: controlValues
+      fragmentShader,
+      controls: controlsValues
     },
     width,
     height
@@ -191,5 +183,3 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
     </LinkWrapper>
   );
 };
-
-type ControlValue = number | [number, number];

package/src/components/items/FileItem/useFileItem.ts

@@ -3,7 +3,7 @@ import { useKeyframeValue } from '../../../common/useKeyframeValue';
 import { useLayoutContext } from '../../useLayoutContext';
 
 const DEFAULT_COLOR = 'rgba(0, 0, 0, 1)';
-export const useFileItem = (item: ImageItem | VideoItem, sectionId: string) => {
+export function useFileItem(item: ImageItem | VideoItem, sectionId: string) {
   const layoutId = useLayoutContext();
   const radius = useKeyframeValue(
     item,
@@ -11,7 +11,7 @@ export const useFileItem = (item: ImageItem | VideoItem, sectionId: string) => {
     (item, layoutId) => {
       if (!layoutId) return;
       const layoutParams = item.layoutParams[layoutId];
-      return  'radius' in layoutParams ? layoutParams.radius : 0;
+      return 'radius' in layoutParams ? layoutParams.radius : 0;
     },
     (animator, scroll, value) => value !== undefined ? animator.getRadius({ radius: value }, scroll).radius : undefined,
     sectionId,
@@ -70,4 +70,4 @@ export const useFileItem = (item: ImageItem | VideoItem, sectionId: string) => {
   );
 
   return { radius, strokeWidth, opacity, strokeColor, blur };
-};
+}

package/src/utils/Animator/Animator.ts

@@ -25,6 +25,7 @@ export class Animator {
   private static pushKeyframeToMap<T extends KeyframeType>(keyframe: AnimationData<T>, map: KeyframesMap): void {
     insertBin(map[keyframe.type], keyframe);
   }
+
   private keyframesMap: KeyframesMap = createKeyframesMap();
   constructor(
     private keyframes: AnimationData<KeyframeType>[]
@@ -32,6 +33,26 @@ export class Animator {
     this.fillKeyframesMap();
   }
 
+  getFXParams(
+    valuesMap: Record<string, number>,
+    pos: number
+  ): KeyframeValueMap[KeyframeType.FXParams] {
+    const keyframes = this.keyframesMap[KeyframeType.FXParams];
+    if (!keyframes.length) return valuesMap;
+    if (keyframes.length === 1) {
+      const [keyframe] = keyframes;
+      return Object.entries(valuesMap).reduce<Record<string, number>>((acc, [key, fallbackValue]) => {
+        acc[key] = keyframe.value[key] ?? fallbackValue;
+        return acc;
+      }, {});
+    }
+    const { start, end } = this.getStartEnd<KeyframeType.FXParams>(pos, keyframes);
+    return Object.entries(valuesMap).reduce<Record<string, number>>((acc, [key, fallbackValue]) => {
+      acc[key] = rangeMap(pos, start.position, end.position, start.value[key] ?? fallbackValue, end.value[key] ?? fallbackValue, true);
+      return acc;
+    }, {});
+  }
+
   getDimensions(
     values: KeyframeValueMap[KeyframeType.Dimensions],
     pos: number
@@ -302,7 +323,6 @@ export class Animator {
     };
   }
 
-
   getStartEnd<T extends KeyframeType>(position: number, keyframes: AnimationData<T>[]): PositionKeyframes<T> {
     const index = binSearchInsertAt(keyframes, { position }, compare);
     const end = index === keyframes.length ? index - 1 : index;
@@ -330,7 +350,6 @@ export class Animator {
   }
 }
 
-
 function createKeyframesMap(): KeyframesMap {
   return {
     [KeyframeType.Dimensions]: [],
@@ -346,6 +365,7 @@ function createKeyframesMap(): KeyframesMap {
     [KeyframeType.BackdropBlur]: [],
     [KeyframeType.LetterSpacing]: [],
     [KeyframeType.WordSpacing]: [],
-    [KeyframeType.TextColor]: []
+    [KeyframeType.TextColor]: [],
+    [KeyframeType.FXParams]: []
   };
 }

package/src/utils/effects/useImageFx.ts

@@ -1,18 +1,11 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { MediaEffect, ImageTextureManager } from '@cntrl-site/effects';
 import { rangeMap } from '../rangeMap';
 
-export interface FXCursor {
-  type: 'mouse' | 'manual';
-  x: number;
-  y: number;
-}
-
 interface FxParams {
   imageUrl?: string;
   fragmentShader: string | null;
-  cursor: FXCursor | null;
-  controls?: Record<string, number | [number, number]>;
+  controlsValues?: Record<string, number | [number, number]>;
 }
 
 const PATTERN_URL = 'https://cdn.cntrl.site/client-app-files/texture2.png';
@@ -24,21 +17,18 @@ export function useImageFx(
   {
     imageUrl,
     fragmentShader,
-    cursor,
-    controls
+    controlsValues
   }: FxParams,
   width: number,
   height: number
 ): boolean {
   const [isFXAllowed, setIsFXAllowed] = useState(true);
-  const mousePos = useRef<[number, number]>([0.0, 0.0]);
   const imageTextureManager = useMemo(() => {
     if (!imageUrl || !enabled) return;
     return new ImageTextureManager(imageUrl);
   }, [imageUrl, enabled]);
   const imageFx = useMemo<MediaEffect | undefined>(() => {
-    if (!cursor || !imageTextureManager) return;
-    const { type, x, y } = cursor;
+    if (!imageTextureManager) return;
     return new MediaEffect(
       imageTextureManager,
       PATTERN_URL,
@@ -46,8 +36,8 @@ export function useImageFx(
       fragmentShader!,
       {
         time: 0,
-        cursor: type === 'mouse' ? mousePos.current : [x, y],
-        ...controls
+        cursor: [0, 0],
+        ...controlsValues
       },
       width,
       height
@@ -55,7 +45,14 @@ export function useImageFx(
   }, [imageTextureManager, fragmentShader, width, height]);
 
   useEffect(() => {
-    if (!cursor || cursor.type !== 'mouse' || !canvas || !imageFx) return;
+    if (!imageFx || !controlsValues) return;
+    for (const [key, value] of Object.entries(controlsValues)) {
+      imageFx.setParam(key, value);
+    }
+  }, [imageFx, controlsValues]);
+
+  useEffect(() => {
+    if (!canvas || !imageFx) return;
     const handleMouseMove = (evt: MouseEvent) => {
       const rect = canvas.getBoundingClientRect();
       const x = rangeMap(evt.clientX, rect.left, rect.left + rect.width, 0, 1, true);
@@ -66,7 +63,7 @@ export function useImageFx(
     return () => {
       window.removeEventListener('mousemove', handleMouseMove);
     };
-  }, [canvas, imageFx, cursor?.type]);
+  }, [canvas, imageFx]);
 
   useEffect(() => {
     const gl = canvas?.getContext('webgl2');

package/src/utils/effects/useVideoFx.ts

@@ -1,17 +1,10 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { MediaEffect, VideoTextureManager } from '@cntrl-site/effects';
 import { rangeMap } from '../rangeMap';
 
-export interface FXCursor {
-  type: 'mouse' | 'manual';
-  x: number;
-  y: number;
-}
-
 interface FxParams {
   videoUrl?: string;
   fragmentShader: string | null;
-  cursor: FXCursor | null;
   controls?: Record<string, number | [number, number]>;
 }
 
@@ -24,7 +17,6 @@ export function useVideoFx(
   {
     videoUrl,
     fragmentShader,
-    cursor,
     controls
   }: FxParams,
   width: number,
@@ -33,7 +25,6 @@ export function useVideoFx(
   const [isFXAllowed, setIsFXAllowed] = useState(true);
   const [isReady, setIsReady] = useState(false);
   const active = enabled && isReady;
-  const mousePos = useRef<[number, number]>([0.0, 0.0]);
   const videoTextureManager = useMemo(() => {
     if (!videoUrl || !enabled) return;
     const handlePlayError = () => {
@@ -42,8 +33,7 @@ export function useVideoFx(
     return new VideoTextureManager(videoUrl, handlePlayError);
   }, [videoUrl, enabled]);
   const videoFx = useMemo<MediaEffect | undefined>(() => {
-    if (!cursor || !videoTextureManager) return;
-    const { type, x, y } = cursor;
+    if (!videoTextureManager) return;
     return new MediaEffect(
       videoTextureManager,
       PATTERN_URL,
@@ -51,7 +41,7 @@ export function useVideoFx(
       fragmentShader!,
       {
         time: 0,
-        cursor: type === 'mouse' ? mousePos.current : [x, y],
+        cursor: [0, 0],
         ...controls
       },
       width,
@@ -65,7 +55,7 @@ export function useVideoFx(
   }, [videoTextureManager]);
 
   useEffect(() => {
-    if (!cursor || cursor.type !== 'mouse' || !canvas || !videoFx) return;
+    if (!canvas || !videoFx) return;
     const handleMouseMove = (evt: MouseEvent) => {
       const rect = canvas.getBoundingClientRect();
       const x = rangeMap(evt.clientX, rect.left, rect.left + rect.width, 0, 1, true);
@@ -76,7 +66,7 @@ export function useVideoFx(
     return () => {
       window.removeEventListener('mousemove', handleMouseMove);
     };
-  }, [canvas, videoFx, cursor?.type]);
+  }, [canvas, videoFx]);
 
   useEffect(() => {
     const gl = canvas?.getContext('webgl2');

package/lib/components/items/FileItem/shaderBaseVars.js

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.baseVariables = void 0;
-exports.baseVariables = `precision mediump float;
-uniform sampler2D u_image;
-uniform sampler2D u_pattern;
-uniform vec2 u_imgDimensions;
-uniform vec2 u_patternDimensions;
-uniform float u_time;
-uniform vec2 u_cursor;
-varying vec2 v_texCoord;`;

package/src/components/items/FileItem/shaderBaseVars.ts

@@ -1,8 +0,0 @@
-export const baseVariables = `precision mediump float;
-uniform sampler2D u_image;
-uniform sampler2D u_pattern;
-uniform vec2 u_imgDimensions;
-uniform vec2 u_patternDimensions;
-uniform float u_time;
-uniform vec2 u_cursor;
-varying vec2 v_texCoord;`;