Custom DOM, Canvas and WebGL blocks

Use a custom block for a procedural background, data visualization or 3D visual that ordinary layers cannot express. Its geometry, timing, opacity and transitions still live on a normal custom layer, so Studio can position and animate the result.

Layer and block

<div id="network-field" data-jc-clip data-jc-kind="custom"
  data-jc-name="Network field" data-jc-start="0" data-jc-duration="10"
  data-jc-track="1"
  style="left:0;top:0;width:1920px;height:1080px"></div>

{
  "customBlocks": [
    {
      "layerId": "network-field",
      "adapter": "canvas-2d",
      "javascript": "const {context,width,height,time,inputs}=api; context.clearRect(0,0,width,height); context.fillStyle=inputs.color; context.beginPath(); context.arc(width/2+Math.sin(time)*180,height/2,120,0,Math.PI*2); context.fill();",
      "inputs": { "color": "#ff9418" }
    }
  ]
}

Adapters are dom, svg, canvas-2d and webgl. The block receives project-controlled time, dimensions and declared inputs. Network access, storage, workers, navigation and parent-document access are blocked.

Keep ordinary concerns outside the code:

• use layer CSS for position and size;
• use data-jc-animation for editable motion;
• use normal transitions for clip changes;
• expose user-editable settings as block inputs;
• prefer ordinary text, media, vector and group layers whenever possible.