@cntrl-site/sdk-nextjs 0.14.2 → 0.14.3

package/.idea/codeStyles/codeStyleConfig.xml

@@ -0,0 +1,5 @@
+<component name="ProjectCodeStyleConfiguration">
+  <state>
+    <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
+  </state>
+</component>

package/lib/components/items/ImageItem.js

@@ -16,7 +16,7 @@ const HoverStyles_1 = require("../../utils/HoverStyles/HoverStyles");
 const ImageItem = ({ item, sectionId }) => {
     const id = (0, react_1.useId)();
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
-    const { radius, strokeWidth, opacity, strokeColor } = (0, useFileItem_1.useFileItem)(item, sectionId);
+    const { radius, strokeWidth, opacity, strokeColor, blur } = (0, useFileItem_1.useFileItem)(item, sectionId);
     const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
     const borderColor = (0, react_1.useMemo)(() => sdk_1.CntrlColor.parse(strokeColor), [strokeColor]);
     return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: item.link?.url, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `image-wrapper-${item.id}`, style: {
@@ -24,7 +24,8 @@ const ImageItem = ({ item, sectionId }) => {
                         borderWidth: `${strokeWidth * 100}vw`,
                         opacity: `${opacity}`,
                         borderColor: `${borderColor.toCss()}`,
-                        transform: `rotate(${angle}deg)`
+                        transform: `rotate(${angle}deg)`,
+                        filter: `blur(${blur * 100}vw)`
                     }, children: (0, jsx_runtime_1.jsx)("img", { className: "image", src: item.commonParams.url }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         @supports not (color: oklch(42% 0.3 90 / 1)) {
           .image-wrapper-${item.id} {
@@ -50,10 +51,10 @@ const ImageItem = ({ item, sectionId }) => {
           ${(0, sdk_1.getLayoutStyles)(layouts, [item.state.hover], ([hoverParams]) => {
                         return (`
               .image-wrapper-${item.id} {
-                transition: ${(0, HoverStyles_1.getTransitions)(['angle', 'strokeWidth', 'radius', 'strokeColor', 'opacity'], hoverParams)};
+                transition: ${(0, HoverStyles_1.getTransitions)(['angle', 'strokeWidth', 'radius', 'strokeColor', 'opacity', 'blur'], hoverParams)};
               }
               .image-wrapper-${item.id}:hover {
-                ${(0, HoverStyles_1.getHoverStyles)(['angle', 'strokeWidth', 'radius', 'strokeColor', 'opacity'], hoverParams)}
+                ${(0, HoverStyles_1.getHoverStyles)(['angle', 'strokeWidth', 'radius', 'strokeColor', 'opacity', 'blur'], hoverParams)}
               }
             `);
                     })}

package/lib/components/items/RectangleItem.js

@@ -16,7 +16,7 @@ const HoverStyles_1 = require("../../utils/HoverStyles/HoverStyles");
 const RectangleItem = ({ item, sectionId }) => {
     const id = (0, react_1.useId)();
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
-    const { fillColor, radius, strokeWidth, strokeColor } = (0, useRectangleItem_1.useRectangleItem)(item, sectionId);
+    const { fillColor, radius, strokeWidth, strokeColor, blur, backdropBlur } = (0, useRectangleItem_1.useRectangleItem)(item, sectionId);
     const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
     const backgroundColor = (0, react_1.useMemo)(() => sdk_1.CntrlColor.parse(fillColor), [fillColor]);
     const borderColor = (0, react_1.useMemo)(() => sdk_1.CntrlColor.parse(strokeColor), [strokeColor]);
@@ -25,7 +25,9 @@ const RectangleItem = ({ item, sectionId }) => {
                         borderRadius: `${radius * 100}vw`,
                         borderWidth: `${strokeWidth * 100}vw`,
                         borderColor: `${borderColor.toCss()}`,
-                        transform: `rotate(${angle}deg)`
+                        transform: `rotate(${angle}deg)`,
+                        filter: blur !== 0 ? `blur(${blur * 100}vw)` : '',
+                        backdropFilter: backdropBlur !== 0 ? `blur(${backdropBlur * 100}vw)` : ''
                     } }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         @supports not (color: oklch(42% 0.3 90 / 1)) {
           .rectangle-${item.id} {
@@ -43,10 +45,10 @@ const RectangleItem = ({ item, sectionId }) => {
         ${(0, sdk_1.getLayoutStyles)(layouts, [item.state.hover], ([hoverParams]) => {
                         return (`
             .rectangle-${item.id} {
-              transition: ${(0, HoverStyles_1.getTransitions)(['angle', 'fillColor', 'strokeWidth', 'radius', 'strokeColor'], hoverParams)};
+              transition: ${(0, HoverStyles_1.getTransitions)(['angle', 'fillColor', 'strokeWidth', 'radius', 'strokeColor', 'blur', 'backdropBlur'], hoverParams)};
             }
             .rectangle-${item.id}:hover {
-              ${(0, HoverStyles_1.getHoverStyles)(['angle', 'fillColor', 'strokeWidth', 'radius', 'strokeColor'], hoverParams)}
+              ${(0, HoverStyles_1.getHoverStyles)(['angle', 'fillColor', 'strokeWidth', 'radius', 'strokeColor', 'blur', 'backdropBlur'], hoverParams)}
             }
           `);
                     })}

package/lib/components/items/RichTextItem.js

@@ -9,16 +9,16 @@ const react_1 = require("react");
 const sdk_1 = require("@cntrl-site/sdk");
 const style_1 = __importDefault(require("styled-jsx/style"));
 const useRichTextItem_1 = require("./useRichTextItem");
-const useItemAngle_1 = require("../useItemAngle");
 const useCntrlContext_1 = require("../../provider/useCntrlContext");
 const HoverStyles_1 = require("../../utils/HoverStyles/HoverStyles");
+const useRichTextItemValues_1 = require("./useRichTextItemValues");
 const RichTextItem = ({ item, sectionId, onResize }) => {
     const [content, styles, preset] = (0, useRichTextItem_1.useRichTextItem)(item);
     const id = (0, react_1.useId)();
     const [ref, setRef] = (0, react_1.useState)(null);
-    const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const className = preset ? `cntrl-preset-${preset.id}` : undefined;
+    const { angle, blur } = (0, useRichTextItemValues_1.useRichTextItemValues)(item, sectionId);
     (0, react_1.useEffect)(() => {
         if (!ref || !onResize)
             return;
@@ -32,14 +32,15 @@ const RichTextItem = ({ item, sectionId, onResize }) => {
         };
     }, [ref, onResize]);
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { ref: setRef, className: `${className} rich-text-wrapper-${item.id}`, style: {
-                    transform: `rotate(${angle}deg)`
+                    transform: `rotate(${angle}deg)`,
+                    filter: `blur(${blur * 100}vw)`
                 }, children: content }), (0, jsx_runtime_1.jsxs)(style_1.default, { id: id, children: [styles, `${(0, sdk_1.getLayoutStyles)(layouts, [item.state.hover], ([hoverParams]) => {
                         return (`
             .rich-text-wrapper-${item.id} {
-              transition: ${(0, HoverStyles_1.getTransitions)(['angle'], hoverParams)};
+              transition: ${(0, HoverStyles_1.getTransitions)(['angle', 'blur'], hoverParams)};
             }
             .rich-text-wrapper-${item.id}:hover {
-              ${(0, HoverStyles_1.getHoverStyles)(['angle'], hoverParams)}
+              ${(0, HoverStyles_1.getHoverStyles)(['angle', 'blur'], hoverParams)}
             }
           `);
                     })}`] })] }));

package/lib/components/items/VideoItem.js

@@ -16,7 +16,7 @@ const HoverStyles_1 = require("../../utils/HoverStyles/HoverStyles");
 const VideoItem = ({ item, sectionId }) => {
     const id = (0, react_1.useId)();
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
-    const { radius, strokeWidth, strokeColor, opacity } = (0, useFileItem_1.useFileItem)(item, sectionId);
+    const { radius, strokeWidth, strokeColor, opacity, blur } = (0, useFileItem_1.useFileItem)(item, sectionId);
     const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
     const borderColor = (0, react_1.useMemo)(() => sdk_1.CntrlColor.parse(strokeColor), [strokeColor]);
     return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: item.link?.url, children: [(0, jsx_runtime_1.jsx)("div", { className: `video-wrapper-${item.id}`, style: {
@@ -24,7 +24,8 @@ const VideoItem = ({ item, sectionId }) => {
                     borderWidth: `${strokeWidth * 100}vw`,
                     opacity: `${opacity}`,
                     borderColor: `${borderColor.toCss()}`,
-                    transform: `rotate(${angle}deg)`
+                    transform: `rotate(${angle}deg)`,
+                    filter: `blur(${blur * 100}vw)`
                 }, children: (0, jsx_runtime_1.jsx)("video", { autoPlay: true, muted: true, loop: true, playsInline: true, className: "video", children: (0, jsx_runtime_1.jsx)("source", { src: item.commonParams.url }) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         @supports not (color: oklch(42% 0.3 90 / 1)) {
           .video-wrapper-${item.id} {
@@ -51,10 +52,10 @@ const VideoItem = ({ item, sectionId }) => {
         ${(0, sdk_1.getLayoutStyles)(layouts, [item.state.hover], ([hoverParams]) => {
                     return (`
             .video-wrapper-${item.id} {
-              transition: ${(0, HoverStyles_1.getTransitions)(['angle', 'strokeWidth', 'radius', 'strokeColor', 'opacity'], hoverParams)};
+              transition: ${(0, HoverStyles_1.getTransitions)(['angle', 'strokeWidth', 'radius', 'strokeColor', 'opacity', 'blur'], hoverParams)};
             }
             .video-wrapper-${item.id}:hover {
-              ${(0, HoverStyles_1.getHoverStyles)(['angle', 'strokeWidth', 'radius', 'strokeColor', 'opacity'], hoverParams)}
+              ${(0, HoverStyles_1.getHoverStyles)(['angle', 'strokeWidth', 'radius', 'strokeColor', 'opacity', 'blur'], hoverParams)}
             }
           `);
                 })}

package/lib/components/items/VimeoEmbed.js

@@ -17,7 +17,7 @@ const HoverStyles_1 = require("../../utils/HoverStyles/HoverStyles");
 const VimeoEmbedItem = ({ item, sectionId }) => {
     const id = (0, react_1.useId)();
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
-    const { radius } = (0, useEmbedVideoItem_1.useEmbedVideoItem)(item, sectionId);
+    const { radius, blur } = (0, useEmbedVideoItem_1.useEmbedVideoItem)(item, sectionId);
     const [iframeRef, setIframeRef] = (0, react_1.useState)(null);
     const vimeoPlayer = (0, react_1.useMemo)(() => iframeRef ? new player_1.default(iframeRef) : undefined, [iframeRef]);
     const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
@@ -38,7 +38,8 @@ const VimeoEmbedItem = ({ item, sectionId }) => {
     const validUrl = getValidVimeoUrl(url);
     return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: item.link?.url, children: [(0, jsx_runtime_1.jsx)("div", { className: `embed-video-wrapper-${item.id}`, style: {
                     borderRadius: `${radius * 100}vw`,
-                    transform: `rotate(${angle}deg)`
+                    transform: `rotate(${angle}deg)`,
+                    filter: `blur(${blur * 100}vw)`
                 }, onMouseEnter: () => {
                     if (!vimeoPlayer || play !== 'on-hover')
                         return;
@@ -63,10 +64,10 @@ const VimeoEmbedItem = ({ item, sectionId }) => {
       ${(0, sdk_1.getLayoutStyles)(layouts, [item.state.hover], ([hoverParams]) => {
                     return (`
           .embed-video-wrapper-${item.id} {
-            transition: ${(0, HoverStyles_1.getTransitions)(['angle', 'radius'], hoverParams)};
+            transition: ${(0, HoverStyles_1.getTransitions)(['angle', 'radius', 'blur'], hoverParams)};
           }
           .embed-video-wrapper-${item.id}:hover {
-            ${(0, HoverStyles_1.getHoverStyles)(['angle', 'radius'], hoverParams)}
+            ${(0, HoverStyles_1.getHoverStyles)(['angle', 'radius', 'blur'], hoverParams)}
           }
         `);
                 })}

package/lib/components/items/YoutubeEmbed.js

@@ -19,7 +19,7 @@ const YoutubeEmbedItem = ({ item, sectionId }) => {
     const id = (0, react_1.useId)();
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const { play, controls, url } = item.commonParams;
-    const { radius } = (0, useEmbedVideoItem_1.useEmbedVideoItem)(item, sectionId);
+    const { radius, blur } = (0, useEmbedVideoItem_1.useEmbedVideoItem)(item, sectionId);
     const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
     const YT = (0, useYouTubeIframeApi_1.useYouTubeIframeApi)();
     const [div, setDiv] = (0, react_1.useState)(null);
@@ -63,7 +63,8 @@ const YoutubeEmbedItem = ({ item, sectionId }) => {
                     player.pauseVideo();
                 }, ref: setDiv, style: {
                     borderRadius: `${radius * 100}vw`,
-                    transform: `rotate(${angle}deg)`
+                    transform: `rotate(${angle}deg)`,
+                    filter: `blur(${blur * 100}vw)`
                 } }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         .embed-youtube-video-wrapper-${item.id} {
           position: absolute;
@@ -80,10 +81,10 @@ const YoutubeEmbedItem = ({ item, sectionId }) => {
         ${(0, sdk_1.getLayoutStyles)(layouts, [item.state.hover], ([hoverParams]) => {
                     return (`
             .embed-youtube-video-wrapper-${item.id} {
-              transition: ${(0, HoverStyles_1.getTransitions)(['angle', 'radius'], hoverParams)};
+              transition: ${(0, HoverStyles_1.getTransitions)(['angle', 'radius', 'blur'], hoverParams)};
             }
             .embed-youtube-video-wrapper-${item.id}:hover {
-              ${(0, HoverStyles_1.getHoverStyles)(['angle', 'radius'], hoverParams)}
+              ${(0, HoverStyles_1.getHoverStyles)(['angle', 'radius', 'blur'], hoverParams)}
             }
           `);
                 })}

package/lib/components/items/useEmbedVideoItem.js

@@ -11,6 +11,12 @@ const useEmbedVideoItem = (item, sectionId) => {
         const layoutParams = item.layoutParams[layoutId];
         return 'radius' in layoutParams ? layoutParams.radius : 0;
     }, (animator, scroll, value) => animator.getRadius({ radius: value }, scroll).radius, sectionId, [layoutId]);
-    return { radius };
+    const blur = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => {
+        if (!layoutId)
+            return 0;
+        const layoutParams = item.layoutParams[layoutId];
+        return 'blur' in layoutParams ? layoutParams.blur : 0;
+    }, (animator, scroll, value) => animator.getBlur({ blur: value }, scroll).blur, sectionId, [layoutId]);
+    return { radius, blur };
 };
 exports.useEmbedVideoItem = useEmbedVideoItem;

package/lib/components/items/useFileItem.js

@@ -30,6 +30,12 @@ const useFileItem = (item, sectionId) => {
         const layoutParams = item.layoutParams[layoutId];
         return 'strokeColor' in layoutParams ? layoutParams.strokeColor : defaultColor;
     }, (animator, scroll, value) => animator.getBorderColor({ color: value }, scroll).color, sectionId);
-    return { radius, strokeWidth, opacity, strokeColor };
+    const blur = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => {
+        if (!layoutId)
+            return 0;
+        const layoutParams = item.layoutParams[layoutId];
+        return 'blur' in layoutParams ? layoutParams.blur : 0;
+    }, (animator, scroll, value) => animator.getBlur({ blur: value }, scroll).blur, sectionId);
+    return { radius, strokeWidth, opacity, strokeColor, blur };
 };
 exports.useFileItem = useFileItem;

package/lib/components/items/useRectangleItem.js

@@ -30,6 +30,18 @@ const useRectangleItem = (item, sectionId) => {
         const layoutParams = item.layoutParams[layoutId];
         return 'strokeColor' in layoutParams ? layoutParams.strokeColor : defaultColor;
     }, (animator, scroll, value) => animator.getBorderColor({ color: value }, scroll).color, sectionId, [layoutId]);
-    return { fillColor, strokeWidth, radius, strokeColor };
+    const blur = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => {
+        if (!layoutId)
+            return 0;
+        const layoutParams = item.layoutParams[layoutId];
+        return 'blur' in layoutParams ? layoutParams.blur : 0;
+    }, (animator, scroll, value) => animator.getBlur({ blur: value }, scroll).blur, sectionId, [layoutId]);
+    const backdropBlur = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => {
+        if (!layoutId)
+            return 0;
+        const layoutParams = item.layoutParams[layoutId];
+        return 'backdropBlur' in layoutParams ? layoutParams.backdropBlur : 0;
+    }, (animator, scroll, value) => animator.getBackdropBlur({ backdropBlur: value }, scroll).backdropBlur, sectionId, [layoutId]);
+    return { fillColor, strokeWidth, radius, strokeColor, blur, backdropBlur };
 };
 exports.useRectangleItem = useRectangleItem;

package/lib/components/items/useRichTextItemValues.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRichTextItemValues = void 0;
+const useCurrentLayout_1 = require("../../common/useCurrentLayout");
+const useKeyframeValue_1 = require("../../common/useKeyframeValue");
+const useRichTextItemValues = (item, sectionId) => {
+    const layoutId = (0, useCurrentLayout_1.useCurrentLayout)();
+    const angle = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => ({ angle: layoutId ? item.area[layoutId].angle : 0 }), (animator, scroll, value) => animator.getRotation(value, scroll), sectionId);
+    const blur = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => {
+        if (!layoutId)
+            return 0;
+        const layoutParams = item.layoutParams[layoutId];
+        return 'blur' in layoutParams ? layoutParams.blur : 0;
+    }, (animator, scroll, value) => animator.getBlur({ blur: value }, scroll).blur, sectionId, [layoutId]);
+    return { angle, blur };
+};
+exports.useRichTextItemValues = useRichTextItemValues;

package/lib/utils/Animator/Animator.js

@@ -153,6 +153,36 @@ class Animator {
             scale: rangeMap(pos, start.position, end.position, start.value.scale, end.value.scale, true)
         };
     }
+    getBlur(values, pos) {
+        const keyframes = this.keyframesMap[sdk_1.KeyframeType.Blur];
+        if (!keyframes || !keyframes.length)
+            return values;
+        if (keyframes.length === 1) {
+            const [keyframe] = keyframes;
+            return {
+                blur: keyframe.value.blur
+            };
+        }
+        const { start, end } = this.getStartEnd(pos, keyframes);
+        return {
+            blur: rangeMap(pos, start.position, end.position, start.value.blur, end.value.blur, true)
+        };
+    }
+    getBackdropBlur(values, pos) {
+        const keyframes = this.keyframesMap[sdk_1.KeyframeType.BackdropBlur];
+        if (!keyframes || !keyframes.length)
+            return values;
+        if (keyframes.length === 1) {
+            const [keyframe] = keyframes;
+            return {
+                backdropBlur: keyframe.value.backdropBlur
+            };
+        }
+        const { start, end } = this.getStartEnd(pos, keyframes);
+        return {
+            backdropBlur: rangeMap(pos, start.position, end.position, start.value.backdropBlur, end.value.backdropBlur, true)
+        };
+    }
     getStartEnd(position, keyframes) {
         const index = (0, binSearchInsertAt_1.binSearchInsertAt)(keyframes, { position }, compare);
         const end = index === keyframes.length ? index - 1 : index;
@@ -184,7 +214,9 @@ function createKeyframesMap() {
         [sdk_1.KeyframeType.Rotation]: [],
         [sdk_1.KeyframeType.BorderColor]: [],
         [sdk_1.KeyframeType.Opacity]: [],
-        [sdk_1.KeyframeType.Scale]: []
+        [sdk_1.KeyframeType.Scale]: [],
+        [sdk_1.KeyframeType.Blur]: [],
+        [sdk_1.KeyframeType.BackdropBlur]: []
     };
 }
 function rangeMap(n, start1, stop1, start2, stop2, withinBounds = false) {

package/lib/utils/HoverStyles/HoverStyles.js

@@ -15,6 +15,8 @@ const hoverTransformationMap = {
     'strokeWidth': (strokeWidth) => `border-width: ${strokeWidth * 100}vw !important;`,
     'strokeColor': (strokeColor) => `border-color: ${sdk_1.CntrlColor.parse(strokeColor).toCss()} !important;`,
     'fillColor': (fillColor) => `background-color: ${sdk_1.CntrlColor.parse(fillColor).toCss()} !important;`,
+    'blur': (blur) => `filter: blur(${blur * 100}vw) !important;`,
+    'backdropBlur': (backdropBlur) => `backdrop-filter: blur(${backdropBlur * 100}vw) !important;`
 };
 const CSSPropertyNameMap = {
     'width': 'width',
@@ -27,7 +29,9 @@ const CSSPropertyNameMap = {
     'radius': 'border-radius',
     'strokeWidth': 'border-width',
     'strokeColor': 'border-color',
-    'fillColor': 'background-color'
+    'fillColor': 'background-color',
+    'blur': 'filter',
+    'backdropBlur': 'backdrop-filter'
 };
 function getTransitions(values, hover) {
     if (!hover)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "0.14.2",
+  "version": "0.14.3",
   "description": "SDK for Next.js",
   "main": "lib/index.js",
   "types": "src/index.ts",
@@ -21,8 +21,8 @@
   },
   "homepage": "https://github.com/cntrl-site/sdk-nextjs#readme",
   "dependencies": {
+    "@cntrl-site/sdk": "^1.1.9",
     "@types/vimeo__player": "^2.18.0",
-    "@cntrl-site/sdk": "^1.1.8",
     "@vimeo/player": "^2.20.1",
     "html-react-parser": "^3.0.1",
     "styled-jsx": "^5.0.2"

package/src/components/items/ImageItem.tsx

@@ -11,7 +11,7 @@ import { getHoverStyles, getTransitions } from '../../utils/HoverStyles/HoverSty
 export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId }) => {
   const id = useId();
   const { layouts } = useCntrlContext();
-  const { radius, strokeWidth, opacity, strokeColor } = useFileItem(item, sectionId);
+  const { radius, strokeWidth, opacity, strokeColor, blur } = useFileItem(item, sectionId);
   const angle = useItemAngle(item, sectionId);
   const borderColor = useMemo(() => CntrlColor.parse(strokeColor), [strokeColor]);
   return (
@@ -24,7 +24,8 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId }) => {
             borderWidth: `${strokeWidth * 100}vw`,
             opacity: `${opacity}`,
             borderColor: `${borderColor.toCss()}`,
-            transform: `rotate(${angle}deg)`
+            transform: `rotate(${angle}deg)`,
+            filter: `blur(${blur * 100}vw)`
           }}
         >
           <img className="image" src={item.commonParams.url} />
@@ -54,10 +55,10 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId }) => {
           ${getLayoutStyles(layouts, [item.state.hover], ([hoverParams]) => {
             return (`
               .image-wrapper-${item.id} {
-                transition: ${getTransitions<ArticleItemType.Image>(['angle', 'strokeWidth', 'radius', 'strokeColor', 'opacity'], hoverParams)};
+                transition: ${getTransitions<ArticleItemType.Image>(['angle', 'strokeWidth', 'radius', 'strokeColor', 'opacity', 'blur'], hoverParams)};
               }
               .image-wrapper-${item.id}:hover {
-                ${getHoverStyles<ArticleItemType.Image>(['angle', 'strokeWidth', 'radius', 'strokeColor', 'opacity'], hoverParams)}
+                ${getHoverStyles<ArticleItemType.Image>(['angle', 'strokeWidth', 'radius', 'strokeColor', 'opacity', 'blur'], hoverParams)}
               }
             `);
          })}

package/src/components/items/RectangleItem.tsx

@@ -11,7 +11,7 @@ import { getHoverStyles, getTransitions } from '../../utils/HoverStyles/HoverSty
 export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId }) => {
   const id = useId();
   const { layouts } = useCntrlContext();
-  const { fillColor, radius, strokeWidth, strokeColor } = useRectangleItem(item, sectionId);
+  const { fillColor, radius, strokeWidth, strokeColor, blur, backdropBlur } = useRectangleItem(item, sectionId);
   const angle = useItemAngle(item, sectionId);
   const backgroundColor = useMemo(() => CntrlColor.parse(fillColor), [fillColor]);
   const borderColor = useMemo(() => CntrlColor.parse(strokeColor), [strokeColor]);
@@ -25,7 +25,9 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId }
             borderRadius: `${radius * 100}vw`,
             borderWidth: `${strokeWidth * 100}vw`,
             borderColor: `${borderColor.toCss()}`,
-            transform: `rotate(${angle}deg)`
+            transform: `rotate(${angle}deg)`,
+            filter: blur !== 0 ? `blur(${blur * 100}vw)` : '',
+            backdropFilter: backdropBlur !== 0 ? `blur(${backdropBlur * 100}vw)`: ''
           }}
         />
         <JSXStyle id={id}>{`
@@ -45,10 +47,10 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId }
         ${getLayoutStyles(layouts, [item.state.hover], ([hoverParams]) => {
           return (`
             .rectangle-${item.id} {
-              transition: ${getTransitions<ArticleItemType.Rectangle>(['angle', 'fillColor', 'strokeWidth', 'radius', 'strokeColor'], hoverParams)};
+              transition: ${getTransitions<ArticleItemType.Rectangle>(['angle', 'fillColor', 'strokeWidth', 'radius', 'strokeColor', 'blur', 'backdropBlur'], hoverParams)};
             }
             .rectangle-${item.id}:hover {
-              ${getHoverStyles<ArticleItemType.Rectangle>(['angle', 'fillColor', 'strokeWidth', 'radius', 'strokeColor'], hoverParams)}
+              ${getHoverStyles<ArticleItemType.Rectangle>(['angle', 'fillColor', 'strokeWidth', 'radius', 'strokeColor', 'blur', 'backdropBlur'], hoverParams)}
             }
           `);
         })}

package/src/components/items/RichTextItem.tsx

@@ -3,17 +3,17 @@ import { ArticleItemType, getLayoutStyles, TRichTextItem } from '@cntrl-site/sdk
 import JSXStyle from 'styled-jsx/style';
 import { ItemProps } from '../Item';
 import { useRichTextItem } from './useRichTextItem';
-import { useItemAngle } from '../useItemAngle';
 import { useCntrlContext } from '../../provider/useCntrlContext';
 import { getHoverStyles, getTransitions } from '../../utils/HoverStyles/HoverStyles';
+import { useRichTextItemValues } from './useRichTextItemValues';
 
 export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, onResize }) => {
   const [content, styles, preset] = useRichTextItem(item);
   const id = useId();
   const [ref, setRef] = useState<HTMLDivElement | null>(null);
-  const angle = useItemAngle(item, sectionId);
   const { layouts } = useCntrlContext();
   const className = preset ? `cntrl-preset-${preset.id}` : undefined;
+  const { angle, blur } = useRichTextItemValues(item, sectionId);
 
   useEffect(() => {
     if (!ref || !onResize) return;
@@ -33,7 +33,8 @@ export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, on
         ref={setRef}
         className={`${className} rich-text-wrapper-${item.id}`}
         style={{
-          transform: `rotate(${angle}deg)`
+          transform: `rotate(${angle}deg)`,
+          filter: `blur(${blur * 100}vw)`
         }}
       >
         {content}
@@ -43,10 +44,10 @@ export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, on
         {`${getLayoutStyles(layouts, [item.state.hover], ([hoverParams]) => {
           return (`
             .rich-text-wrapper-${item.id} {
-              transition: ${getTransitions<ArticleItemType.RichText>(['angle'], hoverParams)};
+              transition: ${getTransitions<ArticleItemType.RichText>(['angle', 'blur'], hoverParams)};
             }
             .rich-text-wrapper-${item.id}:hover {
-              ${getHoverStyles<ArticleItemType.RichText>(['angle'], hoverParams)}
+              ${getHoverStyles<ArticleItemType.RichText>(['angle', 'blur'], hoverParams)}
             }
           `);
         })}`}

package/src/components/items/VideoItem.tsx

@@ -11,7 +11,7 @@ import { getHoverStyles, getTransitions } from '../../utils/HoverStyles/HoverSty
 export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId }) => {
   const id = useId();
   const { layouts } = useCntrlContext();
-  const { radius, strokeWidth, strokeColor, opacity } = useFileItem(item, sectionId);
+  const { radius, strokeWidth, strokeColor, opacity, blur } = useFileItem(item, sectionId);
   const angle = useItemAngle(item, sectionId);
   const borderColor = useMemo(() => CntrlColor.parse(strokeColor), [strokeColor]);
   return (
@@ -23,7 +23,8 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId }) => {
           borderWidth: `${strokeWidth * 100}vw`,
           opacity: `${opacity}`,
           borderColor: `${borderColor.toCss()}`,
-          transform: `rotate(${angle}deg)`
+          transform: `rotate(${angle}deg)`,
+          filter: `blur(${blur * 100}vw)`
         }}
       >
         <video autoPlay muted loop playsInline className="video">
@@ -56,10 +57,10 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId }) => {
         ${getLayoutStyles(layouts, [item.state.hover], ([hoverParams]) => {
           return (`
             .video-wrapper-${item.id} {
-              transition: ${getTransitions<ArticleItemType.Video>(['angle', 'strokeWidth', 'radius', 'strokeColor', 'opacity'], hoverParams)};
+              transition: ${getTransitions<ArticleItemType.Video>(['angle', 'strokeWidth', 'radius', 'strokeColor', 'opacity', 'blur'], hoverParams)};
             }
             .video-wrapper-${item.id}:hover {
-              ${getHoverStyles<ArticleItemType.Video>(['angle', 'strokeWidth', 'radius', 'strokeColor', 'opacity'], hoverParams)}
+              ${getHoverStyles<ArticleItemType.Video>(['angle', 'strokeWidth', 'radius', 'strokeColor', 'opacity', 'blur'], hoverParams)}
             }
           `);
         })}

package/src/components/items/VimeoEmbed.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect, useId, useMemo, useRef, useState } from 'react';
+import { FC, useId, useMemo, useState } from 'react';
 import Player from '@vimeo/player';
 import JSXStyle from 'styled-jsx/style';
 import { TVimeoEmbedItem } from '@cntrl-site/core';
@@ -9,12 +9,11 @@ import { useItemAngle } from '../useItemAngle';
 import { ArticleItemType, getLayoutStyles } from '@cntrl-site/sdk';
 import { useCntrlContext } from '../../provider/useCntrlContext';
 import { getHoverStyles, getTransitions } from '../../utils/HoverStyles/HoverStyles';
-import { useCurrentLayout } from '../../common/useCurrentLayout';
 
 export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId }) => {
   const id = useId();
   const { layouts } = useCntrlContext();
-  const { radius } = useEmbedVideoItem(item, sectionId);
+  const { radius, blur } = useEmbedVideoItem(item, sectionId);
   const [iframeRef, setIframeRef] = useState<HTMLIFrameElement | null>(null);
   const vimeoPlayer = useMemo(() => iframeRef ? new Player(iframeRef) : undefined, [iframeRef]);
   const angle = useItemAngle(item, sectionId);
@@ -40,7 +39,8 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
       <div className={`embed-video-wrapper-${item.id}`}
         style={{
           borderRadius: `${radius * 100}vw`,
-          transform: `rotate(${angle}deg)`
+          transform: `rotate(${angle}deg)`,
+          filter: `blur(${blur * 100}vw)`
         }}
         onMouseEnter={() => {
           if (!vimeoPlayer || play !== 'on-hover') return;
@@ -75,10 +75,10 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
       ${getLayoutStyles(layouts, [item.state.hover], ([hoverParams]) => {
         return (`
           .embed-video-wrapper-${item.id} {
-            transition: ${getTransitions<ArticleItemType.VimeoEmbed>(['angle', 'radius'], hoverParams)};
+            transition: ${getTransitions<ArticleItemType.VimeoEmbed>(['angle', 'radius', 'blur'], hoverParams)};
           }
           .embed-video-wrapper-${item.id}:hover {
-            ${getHoverStyles<ArticleItemType.VimeoEmbed>(['angle', 'radius'], hoverParams)}
+            ${getHoverStyles<ArticleItemType.VimeoEmbed>(['angle', 'radius', 'blur'], hoverParams)}
           }
         `);
       })}

package/src/components/items/YoutubeEmbed.tsx

@@ -16,7 +16,7 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
   const id = useId();
   const { layouts } = useCntrlContext();
   const { play, controls, url } = item.commonParams;
-  const { radius } = useEmbedVideoItem(item, sectionId);
+  const { radius, blur } = useEmbedVideoItem(item, sectionId);
   const angle = useItemAngle(item, sectionId);
   const YT = useYouTubeIframeApi();
   const [div, setDiv] = useState<HTMLDivElement | null>(null);
@@ -65,7 +65,8 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
          ref={setDiv}
          style={{
            borderRadius: `${radius * 100}vw`,
-           transform: `rotate(${angle}deg)`
+           transform: `rotate(${angle}deg)`,
+           filter: `blur(${blur * 100}vw)`
          }}
       ></div>
       <JSXStyle id={id}>{`
@@ -84,10 +85,10 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
         ${getLayoutStyles(layouts, [item.state.hover], ([hoverParams]) => {
           return (`
             .embed-youtube-video-wrapper-${item.id} {
-              transition: ${getTransitions<ArticleItemType.YoutubeEmbed>(['angle', 'radius'], hoverParams)};
+              transition: ${getTransitions<ArticleItemType.YoutubeEmbed>(['angle', 'radius', 'blur'], hoverParams)};
             }
             .embed-youtube-video-wrapper-${item.id}:hover {
-              ${getHoverStyles<ArticleItemType.YoutubeEmbed>(['angle', 'radius'], hoverParams)}
+              ${getHoverStyles<ArticleItemType.YoutubeEmbed>(['angle', 'radius', 'blur'], hoverParams)}
             }
           `);
       })}

package/src/components/items/useEmbedVideoItem.ts

@@ -9,12 +9,23 @@ export const useEmbedVideoItem = (item: TVimeoEmbedItem | TYoutubeEmbedItem, sec
     (item, layoutId) => {
       if (!layoutId) return 0;
       const layoutParams = item.layoutParams[layoutId];
-      return  'radius' in layoutParams ? layoutParams.radius : 0;
+      return 'radius' in layoutParams ? layoutParams.radius : 0;
     },
     (animator, scroll, value) => animator.getRadius({ radius: value }, scroll).radius,
     sectionId,
     [layoutId]
   );
+  const blur = useKeyframeValue(
+    item,
+    (item, layoutId) => {
+      if (!layoutId) return 0;
+      const layoutParams = item.layoutParams[layoutId];
+      return 'blur' in layoutParams ? layoutParams.blur : 0;
+    },
+    (animator, scroll, value) => animator.getBlur({ blur: value }, scroll).blur,
+    sectionId,
+    [layoutId]
+  );
 
-  return { radius };
+  return { radius, blur };
 };

package/src/components/items/useFileItem.ts

@@ -52,5 +52,16 @@ export const useFileItem = (item: TImageItem | TVideoItem, sectionId: string) =>
     sectionId
   );
 
-  return { radius, strokeWidth, opacity, strokeColor };
+  const blur = useKeyframeValue(
+    item,
+    (item, layoutId) => {
+      if (!layoutId) return 0;
+      const layoutParams = item.layoutParams[layoutId];
+      return 'blur' in layoutParams ? layoutParams.blur : 0;
+    },
+    (animator, scroll, value) => animator.getBlur({ blur: value }, scroll).blur,
+    sectionId
+  );
+
+  return { radius, strokeWidth, opacity, strokeColor, blur };
 };

package/src/components/items/useRectangleItem.ts

@@ -50,5 +50,27 @@ export const useRectangleItem = (item: TRectangleItem, sectionId: string) => {
     sectionId,
     [layoutId]
   );
-  return { fillColor, strokeWidth, radius, strokeColor };
+  const blur = useKeyframeValue(
+    item,
+    (item, layoutId) => {
+      if (!layoutId) return 0;
+      const layoutParams = item.layoutParams[layoutId];
+      return 'blur' in layoutParams ? layoutParams.blur : 0;
+    },
+    (animator, scroll, value) => animator.getBlur({ blur: value }, scroll).blur,
+    sectionId,
+    [layoutId]
+  );
+  const backdropBlur = useKeyframeValue(
+    item,
+    (item, layoutId) => {
+      if (!layoutId) return 0;
+      const layoutParams = item.layoutParams[layoutId];
+      return 'backdropBlur' in layoutParams ? layoutParams.backdropBlur : 0;
+    },
+    (animator, scroll, value) => animator.getBackdropBlur({ backdropBlur: value }, scroll).backdropBlur,
+    sectionId,
+    [layoutId]
+  );
+  return { fillColor, strokeWidth, radius, strokeColor, blur, backdropBlur };
 };

package/src/components/items/useRichTextItemValues.ts

@@ -0,0 +1,28 @@
+import { useCurrentLayout } from '../../common/useCurrentLayout';
+import { useKeyframeValue } from '../../common/useKeyframeValue';
+import { TRichTextItem } from '@cntrl-site/sdk';
+
+export const useRichTextItemValues = (item: TRichTextItem, sectionId: string) => {
+  const layoutId = useCurrentLayout();
+
+  const angle = useKeyframeValue(
+    item,
+    (item, layoutId) => ({ angle: layoutId ? item.area[layoutId].angle : 0 }),
+    (animator, scroll, value) => animator.getRotation(value, scroll),
+    sectionId
+  );
+
+  const blur = useKeyframeValue(
+    item,
+    (item, layoutId) => {
+      if (!layoutId) return 0;
+      const layoutParams = item.layoutParams[layoutId];
+      return 'blur' in layoutParams ? layoutParams.blur : 0;
+    },
+    (animator, scroll, value) => animator.getBlur({ blur: value }, scroll).blur,
+    sectionId,
+    [layoutId]
+  );
+
+  return { angle, blur };
+};

package/src/utils/Animator/Animator.ts

@@ -196,6 +196,42 @@ export class Animator {
     };
   }
 
+  getBlur(
+    values: TKeyframeValueMap[KeyframeType.Blur],
+    pos: number
+  ): TKeyframeValueMap[KeyframeType.Blur] {
+    const keyframes = this.keyframesMap[KeyframeType.Blur];
+    if (!keyframes || !keyframes.length) return values;
+    if (keyframes.length === 1) {
+      const [keyframe] = keyframes;
+      return {
+        blur: keyframe.value.blur
+      };
+    }
+    const { start, end } = this.getStartEnd<KeyframeType.Blur>(pos, keyframes);
+    return {
+      blur: rangeMap(pos, start.position, end.position, start.value.blur, end.value.blur, true)
+    };
+  }
+
+  getBackdropBlur(
+    values: TKeyframeValueMap[KeyframeType.BackdropBlur],
+    pos: number
+  ): TKeyframeValueMap[KeyframeType.BackdropBlur] {
+    const keyframes = this.keyframesMap[KeyframeType.BackdropBlur];
+    if (!keyframes || !keyframes.length) return values;
+    if (keyframes.length === 1) {
+      const [keyframe] = keyframes;
+      return {
+        backdropBlur: keyframe.value.backdropBlur
+      };
+    }
+    const { start, end } = this.getStartEnd<KeyframeType.BackdropBlur>(pos, keyframes);
+    return {
+      backdropBlur: rangeMap(pos, start.position, end.position, start.value.backdropBlur, end.value.backdropBlur, true)
+    };
+  }
+
   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;
@@ -234,7 +270,9 @@ function createKeyframesMap(): KeyframesMap {
     [KeyframeType.Rotation]: [],
     [KeyframeType.BorderColor]: [],
     [KeyframeType.Opacity]: [],
-    [KeyframeType.Scale]: []
+    [KeyframeType.Scale]: [],
+    [KeyframeType.Blur]: [],
+    [KeyframeType.BackdropBlur]: []
   };
 }
 

package/src/utils/HoverStyles/HoverStyles.ts

@@ -17,6 +17,8 @@ const hoverTransformationMap: Record<keyof ItemHoverParams, HoverParamsGetter> =
   'strokeWidth': (strokeWidth: number) => `border-width: ${strokeWidth * 100}vw !important;`,
   'strokeColor': (strokeColor: string) => `border-color: ${CntrlColor.parse(strokeColor).toCss()} !important;`,
   'fillColor': (fillColor: string) => `background-color: ${CntrlColor.parse(fillColor).toCss()} !important;`,
+  'blur': (blur: number) => `filter: blur(${blur * 100}vw) !important;`,
+  'backdropBlur': (backdropBlur: number) => `backdrop-filter: blur(${backdropBlur * 100}vw) !important;`
 };
 
 const CSSPropertyNameMap: Record<keyof ItemHoverParams, string> = {
@@ -30,7 +32,9 @@ const CSSPropertyNameMap: Record<keyof ItemHoverParams, string> = {
   'radius': 'border-radius',
   'strokeWidth': 'border-width',
   'strokeColor': 'border-color',
-  'fillColor': 'background-color'
+  'fillColor': 'background-color',
+  'blur': 'filter',
+  'backdropBlur': 'backdrop-filter'
 };
 
 export function getTransitions<T extends ArticleItemType>(