@cntrl-site/sdk-nextjs 0.14.2 → 0.14.4

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.4",
   "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/common/useCurrentLayout.ts

@@ -8,7 +8,7 @@ interface LayoutData {
   end: number;
 }
 
-export const useCurrentLayout = (): string => {
+export const useCurrentLayout = (): string | undefined => {
   const { layouts } = useCntrlContext();
   const articleRectObserver = useContext(ArticleRectContext);
   const layoutRanges = useMemo(() => {
@@ -28,14 +28,7 @@ export const useCurrentLayout = (): string => {
   const getCurrentLayout = useCallback((articleWidth: number) => {
     return layoutRanges.find(l => articleWidth >= l.start && articleWidth < l.end)!.layoutId;
   }, [layoutRanges]);
-  const [layoutId, setLayoutId] = useState<string>(getCurrentLayout(0));
-
-  useEffect(() => {
-    if (typeof window !== 'undefined') {
-      getCurrentLayout(window.innerWidth);
-    }
-  }, []);
-
+  const [layoutId, setLayoutId] = useState<string | undefined>(undefined);
   useEffect(() => {
     if (!articleRectObserver) return;
     return articleRectObserver.on('resize', () => {

package/src/common/useKeyframeValue.ts

@@ -2,12 +2,12 @@ import { KeyframeType, TArticleItemAny } from '@cntrl-site/sdk';
 import isEqual from 'lodash.isequal';
 import { DependencyList, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { ArticleRectContext } from '../provider/ArticleRectContext';
-import { useCurrentLayout } from './useCurrentLayout';
 import { KeyframesContext } from '../provider/KeyframesContext';
 import { AnimationData, Animator } from '../utils/Animator/Animator';
+import { useLayoutContext } from '../components/useLayoutContext';
 
 export type AnimatorGetter<T> = (animator: Animator, scroll: number, value: T) => T;
-type ItemParamGetter<T> = (item: TArticleItemAny, layoutId: string) => T;
+type ItemParamGetter<T> = (item: TArticleItemAny, layoutId: string | undefined) => T;
 const emptyDeps: DependencyList = [];
 
 export const useKeyframeValue = <T>(
@@ -24,7 +24,7 @@ export const useKeyframeValue = <T>(
   itemParamsGetterRef.current = itemParamsGetter;
 
   const articleRectObserver = useContext(ArticleRectContext);
-  const layoutId = useCurrentLayout();
+  const layoutId = useLayoutContext();
   const keyframesRepo = useContext(KeyframesContext);
   const keyframes = useMemo(() => keyframesRepo.getItemKeyframes(item.id), [item.id, keyframesRepo]);
   const paramValue = useMemo<T>(() => {

package/src/components/Article.tsx

@@ -5,6 +5,7 @@ import { Section } from './Section';
 import { Item } from './Item';
 import { useArticleRectObserver } from '../utils/ArticleRectManager/useArticleRectObserver';
 import { ArticleRectContext } from '../provider/ArticleRectContext';
+import { ArticleWrapper } from './ArticleWrapper';
 
 interface Props {
   article: TArticle;
@@ -18,18 +19,20 @@ export const Article: FC<Props> = ({ article, sectionData }) => {
 
   return (
     <ArticleRectContext.Provider value={articleRectObserver}>
-      <div className="article" ref={articleRef}>
-        {article.sections.map((section, i) => {
-          const data = section.name ? sectionData[section.name] : {};
-          return (
-            <Section section={section} key={section.id} data={data}>
-              {article.sections[i].items.map(item => (
-                <Item item={item} key={item.id} sectionId={section.id} />
-              ))}
-            </Section>
-          );
-        })}
-      </div>
+      <ArticleWrapper>
+        <div className="article" ref={articleRef}>
+          {article.sections.map((section, i) => {
+            const data = section.name ? sectionData[section.name] : {};
+            return (
+              <Section section={section} key={section.id} data={data}>
+                {article.sections[i].items.map(item => (
+                  <Item item={item} key={item.id} sectionId={section.id} />
+                ))}
+              </Section>
+            );
+          })}
+        </div>
+      </ArticleWrapper>
       <JSXStyle id={id}>{`
        .article {
             position: relative;

package/src/components/ArticleWrapper.tsx

@@ -0,0 +1,36 @@
+import React, { FC, PropsWithChildren, useEffect, useId, useState } from 'react';
+import JSXStyle from 'styled-jsx/style';
+import { useCurrentLayout } from '../common/useCurrentLayout';
+import { LayoutContext } from '../provider/LayoutContext';
+
+export const ArticleWrapper: FC<PropsWithChildren<{}>> = ({ children }) => {
+  const id = useId();
+  const [isPageLoaded, setIsPageLoaded] = useState(false);
+  const layoutId = useCurrentLayout();
+
+  useEffect(() => {
+    const onPageLoad = () => {
+      setIsPageLoaded(true);
+    };
+    if (document.readyState === 'complete') {
+      onPageLoad();
+    } else {
+      window.addEventListener('load', onPageLoad);
+      return () => window.removeEventListener('load', onPageLoad);
+    }
+  }, []);
+
+  return (
+    <LayoutContext.Provider value={layoutId}>
+      <div className="article-wrapper" style={{ opacity: layoutId && isPageLoaded ? 1 : 0 }}>
+        {children}
+      </div>
+      <JSXStyle id={id}>{`
+        .article-wrapper {
+          opacity: 1;
+          transition: opacity 0.2s ease; 
+        }
+      `}</JSXStyle>
+    </LayoutContext.Provider>
+  );
+};

package/src/components/Item.tsx

@@ -20,7 +20,6 @@ import { CustomItem } from './items/CustomItem';
 import { useCntrlContext } from '../provider/useCntrlContext';
 import { useItemPosition } from './useItemPosition';
 import { useItemDimensions } from './useItemDimensions';
-import { useCurrentLayout } from '../common/useCurrentLayout';
 import { useItemScale } from './useItemScale';
 import { ScaleAnchorMap } from '../utils/ScaleAnchorMap';
 import { useSectionHeightData } from './useSectionHeightMap';
@@ -28,6 +27,7 @@ import { getHoverStyles, getTransitions } from '../utils/HoverStyles/HoverStyles
 import { getItemTopStyle } from '../utils/getItemTopStyle';
 import { useStickyItemTop } from './items/useStickyItemTop';
 import { getAnchoredItemTop } from '../utils/getAnchoredItemTop';
+import { useLayoutContext } from './useLayoutContext';
 
 export interface ItemProps<I extends TArticleItemAny> {
   item: I;
@@ -50,12 +50,12 @@ const noop = () => null;
 export const Item: FC<ItemProps<TArticleItemAny>> = ({ item, sectionId}) => {
   const id = useId();
   const { layouts } = useCntrlContext();
+  const layout = useLayoutContext();
   const [wrapperHeight, setWrapperHeight] = useState<undefined | number>(undefined);
   const { scale, scaleAnchor } = useItemScale(item, sectionId);
   const { top, left } = useItemPosition(item, sectionId);
   const sectionHeight = useSectionHeightData(sectionId);
   const stickyTop = useStickyItemTop(item, sectionHeight, sectionId);
-  const layout = useCurrentLayout();
   const { width, height } = useItemDimensions(item, sectionId);
   const layoutValues: Record<string, any>[] = [item.area, item.hidden, item.state.hover];
   const isInitialRef = useRef(true);
@@ -65,13 +65,14 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item, sectionId}) => {
     layoutValues.push(item.layoutParams);
   }
 
-  const sizing = isItemType(item, ArticleItemType.RichText)
+  const sizing = layout && isItemType(item, ArticleItemType.RichText)
     ? item.layoutParams[layout].sizing
     : undefined;
   const sizingAxis = parseSizing(sizing);
   const ItemComponent = itemsMap[item.type] || noop;
 
   const handleItemResize = (height: number) => {
+    if (!layout) return;
     const sticky = item.sticky[layout];
     if (!sticky) {
       setWrapperHeight(undefined);
@@ -96,7 +97,7 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item, sectionId}) => {
   return (
     <div
       className={`item-wrapper-${item.id}`}
-      style={{ top, left, ...(wrapperHeight ? { height: `${wrapperHeight * 100}vw` } : {}) }}
+      style={isInitialRef.current ? {} : { top, left, ...(wrapperHeight ? { height: `${wrapperHeight * 100}vw` } : {}) }}
     >
       <div
         suppressHydrationWarning={true}

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

@@ -1,20 +1,31 @@
 import { TVimeoEmbedItem, TYoutubeEmbedItem } from '@cntrl-site/core';
-import { useCurrentLayout } from '../../common/useCurrentLayout';
 import { useKeyframeValue } from '../../common/useKeyframeValue';
+import { useLayoutContext } from '../useLayoutContext';
 
 export const useEmbedVideoItem = (item: TVimeoEmbedItem | TYoutubeEmbedItem, sectionId: string) => {
-  const layoutId = useCurrentLayout();
+  const layoutId = useLayoutContext();
   const radius = useKeyframeValue(
     item,
     (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

@@ -1,11 +1,11 @@
 import { TImageItem, TVideoItem } from '@cntrl-site/sdk';
 import { useKeyframeValue } from '../../common/useKeyframeValue';
-import { useCurrentLayout } from '../../common/useCurrentLayout';
+import { useLayoutContext } from '../useLayoutContext';
 
 const defaultColor = 'rgba(0, 0, 0, 1)';
 
 export const useFileItem = (item: TImageItem | TVideoItem, sectionId: string) => {
-  const layoutId = useCurrentLayout();
+  const layoutId = useLayoutContext();
   const radius = useKeyframeValue(
     item,
     (item, layoutId) => {
@@ -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

@@ -1,11 +1,11 @@
 import { TRectangleItem } from '@cntrl-site/sdk';
 import { useKeyframeValue } from '../../common/useKeyframeValue';
-import { useCurrentLayout } from '../../common/useCurrentLayout';
+import { useLayoutContext } from '../useLayoutContext';
 
 const defaultColor = 'rgba(0, 0, 0, 1)';
 
 export const useRectangleItem = (item: TRectangleItem, sectionId: string) => {
-  const layoutId = useCurrentLayout();
+  const layoutId = useLayoutContext();
   const radius = useKeyframeValue(
     item,
     (item, layoutId) => {
@@ -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/useRichTextItem.ts

@@ -1,15 +1,15 @@
 import { TRichTextItem, TTypePresetEntry } from '@cntrl-site/sdk';
-import { useCurrentLayout } from '../../common/useCurrentLayout';
 import { RichTextConverter } from '../../utils/RichTextConverter/RichTextConverter';
 import { useCntrlContext } from '../../provider/useCntrlContext';
 import { ReactNode } from 'react';
+import { useLayoutContext } from '../useLayoutContext';
 
 const richTextConv = new RichTextConverter();
 
 export const useRichTextItem = (item: TRichTextItem): [ReactNode[], string, TTypePresetEntry | null] => {
-  const layoutId = useCurrentLayout();
+  const layoutId = useLayoutContext();
   const { layouts, typePresets } = useCntrlContext();
-  const presetId = item.layoutParams[layoutId].preset;
+  const presetId = layoutId ? item.layoutParams[layoutId].preset : null;
   const preset = presetId
     ? typePresets?.presets.find(p => p.id === presetId) ?? null
     : null;

package/src/components/items/useRichTextItemValues.ts

@@ -0,0 +1,27 @@
+import { useKeyframeValue } from '../../common/useKeyframeValue';
+import { TRichTextItem } from '@cntrl-site/sdk';
+import { useLayoutContext } from '../useLayoutContext';
+
+export const useRichTextItemValues = (item: TRichTextItem, sectionId: string) => {
+  const layoutId = useLayoutContext();
+  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 };
+};