@cntrl-site/sdk-nextjs 1.5.1 → 1.6.0

package/.idea/codeStyles/codeStyleConfig.xml

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

package/.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/sdk-nextjs.iml" filepath="$PROJECT_DIR$/.idea/sdk-nextjs.iml" />
+    </modules>
+  </component>
+</project>

package/.idea/sdk-nextjs.iml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

package/.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>

package/lib/components/items/GroupItem/GroupItem.js

@@ -16,23 +16,24 @@ const useItemAngle_1 = require("../useItemAngle");
 const useGroupItem_1 = require("./useGroupItem");
 const getStyleFromItemStateAndParams_1 = require("../../../utils/getStyleFromItemStateAndParams");
 const GroupItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f;
     const id = (0, react_1.useId)();
     const { items } = item;
     const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
-    const { opacity: itemOpacity } = (0, useGroupItem_1.useGroupItem)(item, sectionId);
+    const { opacity: itemOpacity, blur: itemBlur } = (0, useGroupItem_1.useGroupItem)(item, sectionId);
     const layoutValues = [item.area, item.layoutParams];
     const [ref, setRef] = (0, react_1.useState)(null);
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
-    const stateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['opacity', 'angle']);
+    const stateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['opacity', 'angle', 'blur']);
     const angle = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_a = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) === null || _a === void 0 ? void 0 : _a.angle, itemAngle);
     const opacity = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_b = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) === null || _b === void 0 ? void 0 : _b.opacity, itemOpacity);
+    const blur = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_c = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) === null || _c === void 0 ? void 0 : _c.blur, itemBlur);
     const isInteractive = opacity !== 0 && opacity !== undefined;
     (0, react_1.useEffect)(() => {
         onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
     }, [isInteractive, onVisibilityChange]);
-    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_c = item.link) === null || _c === void 0 ? void 0 : _c.url, target: (_d = item.link) === null || _d === void 0 ? void 0 : _d.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `group-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), { transition: (_e = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _e !== void 0 ? _e : 'none' }), children: items && items.map(item => ((0, jsx_runtime_1.jsx)(Item_1.Item, { item: item, sectionId: sectionId, isParentVisible: isInteractive, isInGroup: true }, item.id))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_d = item.link) === null || _d === void 0 ? void 0 : _d.url, target: (_e = item.link) === null || _e === void 0 ? void 0 : _e.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `group-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { transition: (_f = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _f !== void 0 ? _f : 'none' }), children: items && items.map(item => ((0, jsx_runtime_1.jsx)(Item_1.Item, { item: item, sectionId: sectionId, isParentVisible: isInteractive, isInGroup: true }, item.id))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         .group-${item.id} {
           position: absolute;
           width: 100%;

package/lib/components/items/GroupItem/useGroupItem.js

@@ -12,6 +12,12 @@ function useGroupItem(item, sectionId) {
         const layoutParams = item.layoutParams[layoutId];
         return 'opacity' in layoutParams ? layoutParams.opacity : 1;
     }, (animator, scroll, value) => value !== undefined ? animator.getOpacity({ opacity: value }, scroll).opacity : undefined, sectionId, [layoutId]);
-    return { opacity };
+    const blur = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.Blur, (item, layoutId) => {
+        if (!layoutId)
+            return;
+        const layoutParams = item.layoutParams[layoutId];
+        return 'blur' in layoutParams ? layoutParams.blur : 0;
+    }, (animator, scroll, value) => value !== undefined ? animator.getBlur({ blur: value }, scroll).blur : undefined, sectionId, [layoutId]);
+    return { opacity, blur };
 }
 exports.useGroupItem = useGroupItem;

package/lib/components/items/Item.js

@@ -27,6 +27,7 @@ const useItemTriggers_1 = require("./useItemTriggers");
 const useSizing_1 = require("./useSizing");
 const useItemPointerEvents_1 = require("./useItemPointerEvents");
 const useItemArea_1 = require("./useItemArea");
+const useDraggable_1 = require("./useDraggable");
 const stickyFix = `
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
@@ -49,6 +50,8 @@ const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGrou
     const itemScale = (0, useItemScale_1.useItemScale)(item, sectionId);
     const interactionCtrl = (0, useItemInteractionCtrl_1.useItemInteractionCtrl)(item.id);
     const triggers = (0, useItemTriggers_1.useItemTriggers)(interactionCtrl);
+    const [position, setPosition] = (0, react_1.useState)({ x: 0, y: 0 });
+    const [isDraggingActive, setIsDraggingActive] = (0, react_1.useState)(false);
     const wrapperStateProps = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['top', 'left']);
     const innerStateProps = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['width', 'height', 'scale', 'top', 'left']);
     const { width, height, top, left } = (0, useItemArea_1.useItemArea)(item, sectionId, {
@@ -68,6 +71,23 @@ const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGrou
     const sizingAxis = (0, useSizing_1.useSizing)(item);
     const ItemComponent = itemsMap_1.itemsMap[item.type] || noop;
     const sectionTop = rectObserver ? rectObserver.getSectionTop(sectionId) : 0;
+    const layoutParams = layout ? item.layoutParams[layout] : undefined;
+    const isDraggable = layoutParams && 'isDraggable' in layoutParams ? layoutParams.isDraggable : undefined;
+    (0, useDraggable_1.useDraggable)({ draggableRef: itemInnerRef.current, isEnabled: isDraggable !== null && isDraggable !== void 0 ? isDraggable : false }, ({ startX, startY, currentX, currentY, lastX, lastY, drag }) => {
+        const item = itemInnerRef.current;
+        if (!item)
+            return;
+        if (drag) {
+            setIsDraggingActive(true);
+            setPosition({
+                x: (currentX - startX) + lastX,
+                y: (currentY - startY) + lastY
+            });
+        }
+        else {
+            setIsDraggingActive(false);
+        }
+    });
     const handleItemResize = (height) => {
         if (!layout)
             return;
@@ -99,7 +119,7 @@ const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGrou
                     opacity: (keyframes.length !== 0 && !layout) ? 0 : 1,
                     top: `${stickyTop * 100}vw`,
                     height: isRichText && itemHeight !== undefined ? `${itemHeight * 100}vw` : 'unset',
-                }, children: (0, jsx_runtime_1.jsx)(RichTextWrapper_1.RichTextWrapper, { isRichText: isRichText, children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `item-${item.id}-inner`, ref: itemInnerRef, style: Object.assign(Object.assign(Object.assign({}, ((width !== undefined && height !== undefined)
+                }, children: (0, jsx_runtime_1.jsx)(RichTextWrapper_1.RichTextWrapper, { isRichText: isRichText, children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `item-${item.id}-inner`, ref: itemInnerRef, style: Object.assign(Object.assign(Object.assign({ top: `${position.y}px`, left: `${position.x}px` }, ((width !== undefined && height !== undefined)
                             ? {
                                 width: `${sizingAxis.x === 'manual'
                                     ? isRichText
@@ -108,7 +128,13 @@ const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGrou
                                     : 'max-content'}`,
                                 height: `${sizingAxis.y === 'manual' ? `${height * 100}vw` : 'unset'}`
                             }
-                            : {})), (scale !== undefined ? { transform: `scale(${scale})`, WebkitTransform: `scale(${scale})` } : {})), { transition: (_l = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.transition) !== null && _l !== void 0 ? _l : 'none', cursor: hasClickTriggers ? 'pointer' : 'unset', pointerEvents: allowPointerEvents ? 'auto' : 'none' }) }, triggers, { children: (0, jsx_runtime_1.jsx)(ItemComponent, { item: item, sectionId: sectionId, onResize: handleItemResize, articleHeight: articleHeight, interactionCtrl: interactionCtrl, onVisibilityChange: handleVisibilityChange }) })) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+                            : {})), (scale !== undefined ? { transform: `scale(${scale})`, WebkitTransform: `scale(${scale})` } : {})), { transition: (_l = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.transition) !== null && _l !== void 0 ? _l : 'none', cursor: isDraggingActive
+                                ? 'grabbing'
+                                : isDraggable
+                                    ? 'grab'
+                                    : hasClickTriggers
+                                        ? 'pointer'
+                                        : 'unset', pointerEvents: allowPointerEvents ? 'auto' : 'none', userSelect: isDraggable ? 'none' : 'unset', WebkitUserSelect: isDraggable ? 'none' : 'unset', MozUserSelect: isDraggable ? 'none' : 'unset', msUserSelect: isDraggable ? 'none' : 'unset' }) }, triggers, { children: (0, jsx_runtime_1.jsx)(ItemComponent, { item: item, sectionId: sectionId, onResize: handleItemResize, articleHeight: articleHeight, interactionCtrl: interactionCtrl, onVisibilityChange: handleVisibilityChange }) })) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
         ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, hidden, sticky, sectionHeight, layoutParams]) => {
                     const sizingAxis = (0, useSizing_1.parseSizing)(layoutParams.sizing);
                     const isScreenBasedBottom = area.positionType === sdk_1.PositionType.ScreenBased && area.anchorSide === sdk_1.AnchorSide.Bottom;
@@ -129,6 +155,7 @@ const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGrou
               height: ${sizingAxis.y === 'manual' ? `${area.height * 100}vw` : 'unset'};
               transform-origin: ${ScaleAnchorMap_1.ScaleAnchorMap[scaleAnchor]};
               transform: scale(${area.scale});
+              position: relative;
             }
             .item-wrapper-${item.id} {
               position: ${area.positionType === sdk_1.PositionType.ScreenBased ? 'fixed' : 'absolute'};

package/lib/components/items/useDraggable.js

@@ -0,0 +1,178 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDraggable = void 0;
+const react_1 = require("react");
+const INITIAL_STATE = {
+    drag: false,
+    startX: 0,
+    startY: 0,
+    currentX: 0,
+    currentY: 0,
+    pivotX: 0,
+    pivotY: 0,
+    lastX: 0,
+    lastY: 0
+};
+function useDraggable(data, dragHandler, preventDragOnChildren = false) {
+    const dragStateRef = (0, react_1.useRef)(INITIAL_STATE);
+    const prevDragStateRef = (0, react_1.useRef)();
+    const dragHandlerRef = (0, react_1.useRef)();
+    const untrackMouseMoveRef = (0, react_1.useRef)();
+    const animationFrameRef = (0, react_1.useRef)();
+    dragHandlerRef.current = dragHandler;
+    const setDragState = (0, react_1.useCallback)(action => {
+        const state = isStateGetter(action)
+            ? action(dragStateRef.current)
+            : action;
+        if (!prevDragStateRef.current) {
+            prevDragStateRef.current = dragStateRef.current;
+        }
+        dragStateRef.current = state;
+        if (animationFrameRef.current !== undefined)
+            return;
+        animationFrameRef.current = window.requestAnimationFrame(() => {
+            var _a;
+            animationFrameRef.current = undefined;
+            (_a = dragHandlerRef.current) === null || _a === void 0 ? void 0 : _a.call(dragHandlerRef, dragStateRef.current, prevDragStateRef.current);
+            prevDragStateRef.current = dragStateRef.current;
+        });
+    }, []);
+    const handleMouseMove = (0, react_1.useCallback)(event => {
+        event.stopPropagation();
+        const el = event.target;
+        if (!(el instanceof HTMLElement))
+            return;
+        setDragState(state => {
+            if (!state.drag) {
+                const clientRect = el.getBoundingClientRect();
+                return {
+                    drag: true,
+                    startX: event.clientX,
+                    startY: event.clientY,
+                    currentX: event.clientX,
+                    currentY: event.clientY,
+                    pivotX: event.clientX - clientRect.x,
+                    pivotY: event.clientY - clientRect.y,
+                    lastX: state.lastX,
+                    lastY: state.lastY
+                };
+            }
+            return Object.assign(Object.assign({}, state), { currentX: state.currentX + event.movementX, currentY: state.currentY + event.movementY });
+        });
+    }, [setDragState, data.draggableRef, preventDragOnChildren]);
+    const handleMouseUp = (0, react_1.useCallback)(event => {
+        var _a;
+        event.stopPropagation();
+        setDragState(state => (Object.assign(Object.assign({}, state), { drag: false, lastX: state.currentX - state.startX + state.lastX, lastY: state.currentY - state.startY + state.lastY })));
+        (_a = untrackMouseMoveRef.current) === null || _a === void 0 ? void 0 : _a.call(untrackMouseMoveRef);
+    }, [setDragState]);
+    const handleScroll = (0, react_1.useCallback)((event) => {
+        setDragState(state => state);
+    }, [setDragState]);
+    const trackMouseMove = (0, react_1.useCallback)(() => {
+        window.addEventListener('mousemove', handleMouseMove, { capture: true });
+        window.addEventListener('mouseup', handleMouseUp, { capture: true });
+        window.addEventListener('scroll', handleScroll, { capture: true, passive: true });
+        return () => {
+            window.removeEventListener('mousemove', handleMouseMove, { capture: true });
+            window.removeEventListener('mouseup', handleMouseUp, { capture: true });
+            window.removeEventListener('scroll', handleScroll, { capture: true });
+        };
+    }, [handleMouseMove, handleMouseUp, handleScroll]);
+    const handleMouseDown = (0, react_1.useCallback)(event => {
+        var _a;
+        event.stopPropagation();
+        if (preventDragOnChildren && event.target instanceof Node && data.draggableRef instanceof Node) {
+            if (event.target !== data.draggableRef && data.draggableRef.contains(event.target))
+                return;
+        }
+        if (event.button !== 0)
+            return;
+        (_a = untrackMouseMoveRef.current) === null || _a === void 0 ? void 0 : _a.call(untrackMouseMoveRef);
+        untrackMouseMoveRef.current = trackMouseMove();
+    }, [trackMouseMove]);
+    const handleTouchMove = (0, react_1.useCallback)(event => {
+        event.stopPropagation();
+        event.preventDefault();
+        const touch = event.touches[0];
+        const el = event.target;
+        if (!(el instanceof HTMLElement))
+            return;
+        setDragState(state => {
+            if (!state.drag) {
+                const clientRect = el.getBoundingClientRect();
+                return {
+                    drag: true,
+                    startX: touch.clientX,
+                    startY: touch.clientY,
+                    currentX: touch.clientX,
+                    currentY: touch.clientY,
+                    pivotX: touch.clientX - clientRect.x,
+                    pivotY: touch.clientY - clientRect.y,
+                    lastX: state.lastX,
+                    lastY: state.lastY
+                };
+            }
+            const movementX = touch.clientX - state.currentX;
+            const movementY = touch.clientY - state.currentY;
+            return Object.assign(Object.assign({}, state), { currentX: state.currentX + movementX, currentY: state.currentY + movementY });
+        });
+    }, [setDragState]);
+    const handleTouchEnd = (0, react_1.useCallback)(event => {
+        var _a;
+        event.stopPropagation();
+        document.body.style.overflow = '';
+        document.documentElement.style.overflow = '';
+        setDragState(state => (Object.assign(Object.assign({}, state), { drag: false, lastX: state.currentX - state.startX + state.lastX, lastY: state.currentY - state.startY + state.lastY })));
+        (_a = untrackMouseMoveRef.current) === null || _a === void 0 ? void 0 : _a.call(untrackMouseMoveRef);
+    }, [setDragState]);
+    const trackTouchMove = (0, react_1.useCallback)(() => {
+        window.addEventListener('touchmove', handleTouchMove, { capture: true, passive: false });
+        window.addEventListener('touchend', handleTouchEnd, { capture: true });
+        window.addEventListener('touchcancel', handleTouchEnd, { capture: true });
+        return () => {
+            window.removeEventListener('touchmove', handleTouchMove, { capture: true });
+            window.removeEventListener('touchend', handleTouchEnd, { capture: true });
+            window.removeEventListener('touchcancel', handleTouchEnd, { capture: true });
+        };
+    }, [handleTouchMove, handleTouchEnd]);
+    const handleTouchStart = (0, react_1.useCallback)(event => {
+        var _a;
+        event.stopPropagation();
+        if (preventDragOnChildren && event.target instanceof Node && data.draggableRef instanceof Node) {
+            if (event.target !== data.draggableRef && data.draggableRef.contains(event.target))
+                return;
+        }
+        document.body.style.overflow = 'hidden';
+        document.documentElement.style.overflow = 'hidden';
+        const selection = document.getSelection();
+        if (selection) {
+            selection.removeAllRanges();
+        }
+        (_a = untrackMouseMoveRef.current) === null || _a === void 0 ? void 0 : _a.call(untrackMouseMoveRef);
+        untrackMouseMoveRef.current = trackTouchMove();
+    }, [trackTouchMove]);
+    (0, react_1.useEffect)(() => {
+        if (!data.draggableRef || !data.isEnabled)
+            return;
+        const mouseHandler = handleMouseDown;
+        const touchHandler = handleTouchStart;
+        data.draggableRef.addEventListener('mousedown', mouseHandler);
+        data.draggableRef.addEventListener('touchstart', touchHandler);
+        return () => {
+            var _a, _b, _c;
+            (_a = data.draggableRef) === null || _a === void 0 ? void 0 : _a.removeEventListener('mousedown', mouseHandler);
+            (_b = data.draggableRef) === null || _b === void 0 ? void 0 : _b.removeEventListener('touchstart', touchHandler);
+            (_c = untrackMouseMoveRef.current) === null || _c === void 0 ? void 0 : _c.call(untrackMouseMoveRef);
+            if (animationFrameRef.current !== undefined) {
+                window.cancelAnimationFrame(animationFrameRef.current);
+            }
+            document.body.style.overflow = '';
+            document.documentElement.style.overflow = '';
+        };
+    }, [data.draggableRef, data.isEnabled, handleMouseDown, handleTouchStart]);
+}
+exports.useDraggable = useDraggable;
+function isStateGetter(action) {
+    return typeof action === 'function';
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "1.5.1",
+  "version": "1.6.0",
   "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.17.0",
+    "@cntrl-site/sdk": "^1.19.2",
     "@types/vimeo__player": "^2.18.0",
     "@vimeo/player": "^2.25.0",
     "html-react-parser": "^3.0.1",

package/src/components/items/GroupItem/GroupItem.tsx

@@ -14,13 +14,14 @@ export const GroupItem: FC<ItemProps<TGroupItem>> = ({ item, sectionId, onResize
   const { items } = item;
   const itemAngle = useItemAngle(item, sectionId);
   const { layouts } = useCntrlContext();
-  const { opacity: itemOpacity } = useGroupItem(item, sectionId);
+  const { opacity: itemOpacity, blur: itemBlur } = useGroupItem(item, sectionId);
   const layoutValues: Record<string, any>[] = [item.area, item.layoutParams];
   const [ref, setRef] = useState<HTMLDivElement | null>(null);
   useRegisterResize(ref, onResize);
-  const stateParams = interactionCtrl?.getState(['opacity', 'angle']);
+  const stateParams = interactionCtrl?.getState(['opacity', 'angle', 'blur']);
   const angle = getStyleFromItemStateAndParams(stateParams?.styles?.angle, itemAngle);
   const opacity = getStyleFromItemStateAndParams(stateParams?.styles?.opacity, itemOpacity);
+  const blur = getStyleFromItemStateAndParams(stateParams?.styles?.blur, itemBlur);
   const isInteractive = opacity !== 0 && opacity !== undefined;
   useEffect(() => {
     onVisibilityChange?.(isInteractive);
@@ -34,6 +35,7 @@ export const GroupItem: FC<ItemProps<TGroupItem>> = ({ item, sectionId, onResize
           style={{
             ...(opacity !== undefined ? { opacity } : {}),
             ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
+            ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
             transition: stateParams?.transition ?? 'none'
           }}
         >

package/src/components/items/GroupItem/useGroupItem.ts

@@ -17,5 +17,18 @@ export function useGroupItem(item: GroupItem, sectionId: string) {
     [layoutId]
   );
 
-  return { opacity };
+  const blur = useKeyframeValue(
+    item,
+    KeyframeType.Blur,
+    (item, layoutId) => {
+      if (!layoutId) return;
+      const layoutParams = item.layoutParams[layoutId];
+      return 'blur' in layoutParams ? layoutParams.blur : 0;
+    },
+    (animator, scroll, value) => value !== undefined ? animator.getBlur({ blur: value }, scroll).blur : undefined,
+    sectionId,
+    [layoutId]
+  );
+
+  return { opacity, blur };
 }

package/src/components/items/Item.tsx

@@ -34,6 +34,7 @@ import { useItemTriggers } from './useItemTriggers';
 import { parseSizing, useSizing } from './useSizing';
 import { useItemPointerEvents } from './useItemPointerEvents';
 import { useItemArea } from './useItemArea';
+import { useDraggable } from './useDraggable';
 
 export interface ItemProps<I extends ItemAny> {
   item: I;
@@ -78,6 +79,8 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isP
   const itemScale = useItemScale(item, sectionId);
   const interactionCtrl = useItemInteractionCtrl(item.id);
   const triggers = useItemTriggers(interactionCtrl);
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const [isDraggingActive, setIsDraggingActive] = useState(false);
   const wrapperStateProps = interactionCtrl?.getState(['top', 'left']);
   const innerStateProps = interactionCtrl?.getState(['width', 'height', 'scale', 'top', 'left']);
   const { width, height, top, left } = useItemArea(item, sectionId, {
@@ -97,6 +100,21 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isP
   const sizingAxis = useSizing(item);
   const ItemComponent = itemsMap[item.type] || noop;
   const sectionTop = rectObserver ? rectObserver.getSectionTop(sectionId) : 0;
+  const layoutParams = layout ? item.layoutParams[layout] : undefined;
+  const isDraggable = layoutParams && 'isDraggable' in layoutParams ? layoutParams.isDraggable : undefined;
+  useDraggable({ draggableRef: itemInnerRef.current, isEnabled: isDraggable ?? false }, ({ startX, startY, currentX, currentY, lastX, lastY, drag }) => {
+    const item = itemInnerRef.current;
+    if (!item) return;
+    if (drag) {
+      setIsDraggingActive(true);
+      setPosition({ 
+        x: (currentX - startX) + lastX,
+        y: (currentY - startY) + lastY
+      });
+    } else {
+      setIsDraggingActive(false);
+    }
+  });
 
   const handleItemResize = (height: number) => {
     if (!layout) return;
@@ -151,6 +169,8 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isP
             className={`item-${item.id}-inner`}
             ref={itemInnerRef}
             style={{
+              top: `${position.y}px`,
+              left: `${position.x}px`,
               ...((width !== undefined && height !== undefined)
                 ? {
                     width: `${sizingAxis.x === 'manual'
@@ -163,8 +183,18 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isP
                 : {}),
               ...(scale !== undefined ? { transform: `scale(${scale})`, WebkitTransform: `scale(${scale})` } : {}),
               transition: innerStateProps?.transition ?? 'none',
-              cursor: hasClickTriggers ? 'pointer' : 'unset',
-              pointerEvents: allowPointerEvents ? 'auto' : 'none'
+              cursor: isDraggingActive 
+                ? 'grabbing' 
+                : isDraggable 
+                  ? 'grab'
+                  : hasClickTriggers 
+                    ? 'pointer' 
+                    : 'unset',
+              pointerEvents: allowPointerEvents ? 'auto' : 'none',
+              userSelect: isDraggable ? 'none' : 'unset',
+              WebkitUserSelect: isDraggable ? 'none' : 'unset',
+              MozUserSelect: isDraggable ? 'none' : 'unset',
+              msUserSelect: isDraggable ? 'none' : 'unset'
             }}
             {...triggers}
           >
@@ -200,6 +230,7 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isP
               height: ${sizingAxis.y === 'manual' ? `${area.height * 100}vw` : 'unset'};
               transform-origin: ${ScaleAnchorMap[scaleAnchor]};
               transform: scale(${area.scale});
+              position: relative;
             }
             .item-wrapper-${item.id} {
               position: ${area.positionType === PositionType.ScreenBased ? 'fixed' : 'absolute'};

package/src/components/items/useDraggable.ts

@@ -0,0 +1,252 @@
+import {
+  Dispatch,
+  SetStateAction,
+  useCallback,
+  useEffect,
+  useRef
+} from 'react';
+
+const INITIAL_STATE: DragState = {
+  drag: false,
+  startX: 0,
+  startY: 0,
+  currentX: 0,
+  currentY: 0,
+  pivotX: 0,
+  pivotY: 0,
+  lastX: 0,
+  lastY: 0
+};
+
+export function useDraggable(
+  data: {
+    draggableRef: HTMLElement | null | undefined,
+    isEnabled: boolean
+  },
+  dragHandler?: DragHandler,
+  preventDragOnChildren: boolean = false,
+) {
+  const dragStateRef = useRef<DragState>(INITIAL_STATE);
+  const prevDragStateRef = useRef<DragState | undefined>();
+  const dragHandlerRef = useRef<DragHandler | undefined>();
+  const untrackMouseMoveRef = useRef<(() => void) | undefined>();
+  const animationFrameRef = useRef<number | undefined>();
+  dragHandlerRef.current = dragHandler;
+
+  const setDragState = useCallback<Dispatch<SetStateAction<DragState>>>(
+    action => {
+      const state = isStateGetter<DragState>(action)
+        ? action(dragStateRef.current)
+        : action;
+      if (!prevDragStateRef.current) {
+        prevDragStateRef.current = dragStateRef.current;
+      }
+      dragStateRef.current = state;
+      if (animationFrameRef.current !== undefined) return;
+      animationFrameRef.current = window.requestAnimationFrame(() => {
+        animationFrameRef.current = undefined;
+        dragHandlerRef.current?.(
+          dragStateRef.current,
+          prevDragStateRef.current
+        );
+        prevDragStateRef.current = dragStateRef.current;
+      });
+    },
+    []
+  );
+
+  const handleMouseMove = useCallback<EventHandler<MouseEvent>>(
+    event => {
+      event.stopPropagation();
+      const el = event.target;
+      if (!(el instanceof HTMLElement)) return;
+      setDragState(state => {
+        if (!state.drag) {
+          const clientRect = el.getBoundingClientRect();
+          return {
+            drag: true,
+            startX: event.clientX,
+            startY: event.clientY,
+            currentX: event.clientX,
+            currentY: event.clientY,
+            pivotX: event.clientX - clientRect.x,
+            pivotY: event.clientY - clientRect.y,
+            lastX: state.lastX,
+            lastY: state.lastY
+          };
+        }
+        return {
+          ...state,
+          currentX: state.currentX + event.movementX,
+          currentY: state.currentY + event.movementY
+        };
+      });
+    },
+    [setDragState, data.draggableRef, preventDragOnChildren]
+  );
+
+  const handleMouseUp = useCallback<EventHandler<MouseEvent>>(
+    event => {
+      event.stopPropagation();
+      setDragState(state => ({
+        ...state,
+        drag: false,
+        lastX: state.currentX - state.startX + state.lastX,
+        lastY: state.currentY - state.startY + state.lastY
+      }));
+      untrackMouseMoveRef.current?.();
+    },
+    [ setDragState]
+  );
+
+  const handleScroll = useCallback<EventHandler<Event>>((event) => {
+    setDragState(state => state);
+  }, [setDragState]);
+
+  const trackMouseMove = useCallback(() => {
+    window.addEventListener('mousemove', handleMouseMove, { capture: true });
+    window.addEventListener('mouseup', handleMouseUp, { capture: true });
+    window.addEventListener('scroll', handleScroll, { capture: true, passive: true });
+    return () => {
+      window.removeEventListener('mousemove', handleMouseMove, { capture: true });
+      window.removeEventListener('mouseup', handleMouseUp, { capture: true });
+      window.removeEventListener('scroll', handleScroll, { capture: true });
+    };
+  }, [handleMouseMove, handleMouseUp, handleScroll]);
+
+  const handleMouseDown = useCallback<EventHandler<MouseEvent>>(
+    event => {
+      event.stopPropagation();
+      if (preventDragOnChildren && event.target instanceof Node && data.draggableRef instanceof Node) {
+        if (event.target !== data.draggableRef && data.draggableRef.contains(event.target)) return;
+      }
+      if (event.button !== 0) return;
+      untrackMouseMoveRef.current?.();
+      untrackMouseMoveRef.current = trackMouseMove();
+    },
+    [trackMouseMove]
+  );
+
+  const handleTouchMove = useCallback<EventHandler<TouchEvent>>(
+    event => {
+      event.stopPropagation();
+      event.preventDefault();
+      const touch = event.touches[0];
+      const el = event.target;
+      if (!(el instanceof HTMLElement)) return;
+
+      setDragState(state => {
+        if (!state.drag) {
+          const clientRect = el.getBoundingClientRect();
+          return {
+            drag: true,
+            startX: touch.clientX,
+            startY: touch.clientY,
+            currentX: touch.clientX,
+            currentY: touch.clientY,
+            pivotX: touch.clientX - clientRect.x,
+            pivotY: touch.clientY - clientRect.y,
+            lastX: state.lastX,
+            lastY: state.lastY
+          };
+        }
+        
+        const movementX = touch.clientX - state.currentX;
+        const movementY = touch.clientY - state.currentY;
+        
+        return {
+          ...state,
+          currentX: state.currentX + movementX,
+          currentY: state.currentY + movementY
+        };
+      });
+    },
+    [setDragState]
+  );
+
+  const handleTouchEnd = useCallback<EventHandler<TouchEvent>>(
+    event => {
+      event.stopPropagation();
+      document.body.style.overflow = '';
+      document.documentElement.style.overflow = '';
+      setDragState(state => ({
+        ...state,
+        drag: false,
+        lastX: state.currentX - state.startX + state.lastX,
+        lastY: state.currentY - state.startY + state.lastY
+      }));
+      untrackMouseMoveRef.current?.();
+    },
+    [setDragState]
+  );
+
+  const trackTouchMove = useCallback(() => {
+    window.addEventListener('touchmove', handleTouchMove, { capture: true, passive: false });
+    window.addEventListener('touchend', handleTouchEnd, { capture: true });
+    window.addEventListener('touchcancel', handleTouchEnd, { capture: true });
+    return () => {
+      window.removeEventListener('touchmove', handleTouchMove, { capture: true });
+      window.removeEventListener('touchend', handleTouchEnd, { capture: true });
+      window.removeEventListener('touchcancel', handleTouchEnd, { capture: true });
+    };
+  }, [handleTouchMove, handleTouchEnd]);
+
+  const handleTouchStart = useCallback<EventHandler<TouchEvent>>(
+    event => {
+      event.stopPropagation();
+      if (preventDragOnChildren && event.target instanceof Node && data.draggableRef instanceof Node) {
+        if (event.target !== data.draggableRef && data.draggableRef.contains(event.target)) return;
+      }
+      document.body.style.overflow = 'hidden';
+      document.documentElement.style.overflow = 'hidden'; 
+      const selection = document.getSelection();
+      if (selection) {
+        selection.removeAllRanges();
+      }
+      untrackMouseMoveRef.current?.();
+      untrackMouseMoveRef.current = trackTouchMove();
+    },
+    [trackTouchMove]
+  );
+
+  useEffect(() => {
+    if (!data.draggableRef || !data.isEnabled) return;
+    const mouseHandler = handleMouseDown;
+    const touchHandler = handleTouchStart;
+
+    data.draggableRef.addEventListener('mousedown', mouseHandler);
+    data.draggableRef.addEventListener('touchstart', touchHandler);
+
+    return () => {
+      data.draggableRef?.removeEventListener('mousedown', mouseHandler);
+      data.draggableRef?.removeEventListener('touchstart', touchHandler);
+      untrackMouseMoveRef.current?.();
+      if (animationFrameRef.current !== undefined) {
+        window.cancelAnimationFrame(animationFrameRef.current);
+      }
+      document.body.style.overflow = '';
+      document.documentElement.style.overflow = '';
+    };
+  }, [data.draggableRef, data.isEnabled, handleMouseDown, handleTouchStart]);
+}
+
+interface DragState {
+  drag: boolean;
+  startX: number;
+  startY: number;
+  currentX: number;
+  currentY: number;
+  pivotX: number;
+  pivotY: number;
+  lastX: number;
+  lastY: number;
+}
+
+type EventHandler<E extends Event> = (event: E) => void;
+type DragHandler = (state: DragState, prevState?: DragState) => void;
+
+function isStateGetter<T>(
+  action: SetStateAction<T>
+): action is (prevState: T) => T {
+  return typeof action === 'function';
+}