Animated wrapper

Aşağıdaki alan düzeyi katalog tabloları İngilizce kalır — düzenleyici, API ve MCP’nin kullandığı makine tasarım şemasıyla birebir uyumludur.

Visibility uses Dekorasyon ve görünürlük (BlockShell). This block draws its own decoration.

Wraps a content slot and, by default, moves between decoration states with Motion (motionMode omitted or variable). motionMode: "keyframe" plays author @keyframes instead: keyframeRules is rendered in a style tag in the first HTML, and animation is the animation shorthand (it may include animation-timeline). Playback uses Motion keyframes, and scroll-linked values use Motion's scroll API. Rules that close a style tag or are not @keyframes are dropped. The animation value is one declaration, not a selector. The frame comes from states.defaultDecoration / states.stateDecorations, not from the shell Customize decoration: shell.box, shell.background, shell.border, shell.spacing, and shell.animation are not applied to this block. A marquee needs schema clipping (shell.box.overflow: "hidden", which renders data-schema-overflow) on the element that scrolls; put it on the scrolling child, not on this wrapper.

Fields

states

variableId

Variable Id.

defaultDecoration

Decoration used when no state matches. Same shape as shell decoration (background, border, spacing, overflow).

stateDecorations

Per-state decoration keyed by the state value (true, false, or a list option id). Replaces defaultDecoration while that state is active.

motion

layoutMotion

Motion transition between decoration states in variable mode. Durations are milliseconds.

motion: {
  layoutMotion: { type: "tween", durationMs: 300, delayMs: 0, ease: "easeOut" }
}

motionMode

"variable" (default) moves between decoration states. "keyframe" plays keyframeRules with animation.

motion: {
  motionMode: "keyframe"
}

keyframeRules

One or more @keyframes rules. Included in the initial HTML. Anything that is not an @keyframes rule, or that contains </style, is dropped.

motion: {
  keyframeRules: "@keyframes rise { from { opacity: 0 } to { opacity: 1 } }"
}

animation

CSS animation shorthand applied inline. May include animation-timeline. Not a selector.

motion: {
  animation: "rise 800ms ease-out both"
}

<details><summary>Default props</summary>

{
  "shell": {
    "visibility": {
      "authVisibility": "all",
      "routeLockVisibility": "all",
      "roleVisibility": [],
      "entryActionVisibility": "all",
      "queryPageVisibility": "all",
      "hideWhenEmpty": ""
    },
    "anchor": {
      "anchorId": "",
      "anchorKey": ""
    },
    "spacing": {
      "padding": {
        "value": "none",
        "enabled": false
      },
      "margin": {
        "enabled": false
      }
    },
    "box": {
      "enabled": false
    },
    "background": {
      "enabled": false,
      "width": "page",
      "kind": "solid",
      "solid": {
        "color": {
          "light": "",
          "dark": ""
        }
      },
      "gradient": {
        "angle": 180,
        "type": "linear",
        "colors": [
          {
            "light": "",
            "dark": "",
            "offset": 50
          },
          {
            "light": "",
            "dark": "",
            "offset": 50
          }
        ],
        "color1Light": "",
        "color1Dark": "",
        "color2Light": "",
        "color2Dark": ""
      },
      "image": {
        "src": "",
        "mode": "cover",
        "repeatSize": 100,
        "position": "center"
      },
      "motion": {
        "enabled": false,
        "directionDeg": 0,
        "speed": 20,
        "rotateDegPerSec": 0,
        "animationMode": "particle"
      },
      "video": {
        "src": "",
        "source": "file",
        "youtubeUrl": "",
        "fit": "cover",
        "loop": true,
        "repeatSize": 100
      },
      "particles": {
        "shape": "circle",
        "svgSrc": "",
        "colorMode": "solid",
        "colorLight": "#ffffff88",
        "colorDark": "#ffffff66",
        "size": 12,
        "jitter": 0.2,
        "count": 40,
        "lifetimeSec": 4,
        "speed": 40,
        "animType": "fade",
        "fromSide": "left",
        "toSide": "right"
      },
      "grid": {
        "style": "cells",
        "motionDirectionDeg": 0,
        "motionSpeed": 0,
        "rotateDegPerSec": 0,
        "hoverGrowLimitPct": 50,
        "hoverRotateLimitDeg": 0,
        "reactionTimeSec": 1,
        "hoverGrow": true,
        "hoverRotate": false,
        "hoverColor": false,
        "hoverColorLight": "#ffffff55",
        "hoverColorDark": "#ffffff33",
        "reactionSpeed": 1
      },
      "backdrop": {
        "enabled": false,
        "blurPx": 0,
        "brightness": 1,
        "contrast": 1,
        "saturate": 1,
        "grayscale": 0,
        "sepia": 0,
        "hueRotateDeg": 0
      }
    },
    "pointerEvents": "auto",
    "effects": {
      "enabled": false,
      "opacity": 1,
      "blurPx": 0,
      "brightness": 1,
      "contrast": 1,
      "saturate": 1,
      "grayscale": 0,
      "sepia": 0,
      "hueRotateDeg": 0,
      "dropShadowOffsetX": 0,
      "dropShadowOffsetY": 0,
      "dropShadowBlur": 0,
      "dropShadowColorLight": "",
      "dropShadowColorDark": "",
      "mixBlendMode": "normal"
    },
    "animation": {
      "scroll": {
        "enabled": false,
        "type": "fadeIn",
        "duration": 600,
        "delay": 0
      },
      "tilt": {
        "enabled": false,
        "intensity": 12
      },
      "wander": {
        "enabled": false,
        "speed": 40,
        "jitter": 40,
        "turnRadius": 50,
        "turnSmoothness": 40,
        "limits": "parent"
      },
      "transform": {
        "enabled": false,
        "rotateX": 0,
        "rotateY": 0,
        "rotateZ": 0,
        "translateX": 0,
        "translateY": 0,
        "translateZ": 0,
        "scale": 1
      }
    }
  },
  "appearance": {
    "border": {
      "enabled": false,
      "style": "solid",
      "colorLight": "",
      "colorDark": ""
    },
    "shadow": {
      "enabled": false,
      "valueLight": "",
      "valueDark": ""
    }
  },
  "states": {
    "variableId": "",
    "textStates": []
  },
  "motion": {
    "layoutMotion": {
      "type": "tween",
      "durationMs": 300,
      "delayMs": 0,
      "ease": "easeOut",
      "bounce": 0.25
    }
  }
}

</details>