[{"data":1,"prerenderedAt":123},["ShallowReactive",2],{"mdc--l650oz-key":3,"mdc--pev4nb-key":16,"mdc--6bgy17-key":25,"mdc-iv75it-key":41},{"data":4,"body":5},{},{"type":6,"children":7},"root",[8],{"type":9,"tag":10,"props":11,"children":12},"element","p",{},[13],{"type":14,"value":15},"text","Three.js, Vite and TypeScript",{"data":17,"body":18},{},{"type":6,"children":19},[20],{"type":9,"tag":10,"props":21,"children":22},{},[23],{"type":14,"value":24},"Drag from the palette, connect ports, pan and zoom",{"data":26,"body":27},{},{"type":6,"children":28},[29],{"type":9,"tag":10,"props":30,"children":31},{},[32],{"type":9,"tag":33,"props":34,"children":38},"a",{"href":35,"rel":36},"https:\u002F\u002Fgithub.com\u002Fklich3\u002FAI-nodes",[37],"nofollow",[39],{"type":14,"value":40},"klich3\u002FAI-nodes on GitHub",{"data":42,"body":43},{},{"type":6,"children":44},[45,50,61,71],{"type":9,"tag":10,"props":46,"children":47},{},[48],{"type":14,"value":49},"A node editor drawn with Three.js: cards with shadows, thumbnails and bindable fields that lift and move with physics when you interact with them. Output ports connect to input ports by colour, dragging a cable between them.",{"type":9,"tag":51,"props":52,"children":55},"section",{"eyebrow":53,"title":54},"01","How it works",[56],{"type":9,"tag":10,"props":57,"children":58},{},[59],{"type":14,"value":60},"Nodes are dragged from the palette onto the canvas; each card defines its ports and fields. Lifting a node triggers elevation and physics animation, so the card reacts to the interaction. New node types can be created from the interface itself, defining their ports and types. Dragging a node to the bottom-right corner deletes it; the canvas background pans by dragging and scales with the scroll wheel.",{"type":9,"tag":51,"props":62,"children":65},{"eyebrow":63,"title":64},"02","In action",[66],{"type":9,"tag":10,"props":67,"children":68},{},[69],{"type":14,"value":70},"Four recordings of the editor: the node and cable structure, creating types from the palette, card physics while dragging, and panning and zooming across the canvas.",{"type":9,"tag":72,"props":73,"children":76},"grid",{"cols":74,"gap":75},2,"md",[77,90,101,112],{"type":9,"tag":78,"props":79,"children":84},"media",{"alt":80,"effect":81,"poster":82,"src":83},"Nodes connected with cables on the editor canvas","bend","https:\u002F\u002Fres.cloudinary.com\u002Fddwpkkaqv\u002Fvideo\u002Fupload\u002Fso_2,w_1280,q_auto\u002Fv1793886364\u002F26ai-nodes-0_f3mjiw.webp","https:\u002F\u002Fres.cloudinary.com\u002Fddwpkkaqv\u002Fvideo\u002Fupload\u002Fvc_h264,q_auto,w_1280\u002Fv1793886364\u002F26ai-nodes-0_f3mjiw.mp4",[85],{"type":9,"tag":10,"props":86,"children":87},{},[88],{"type":14,"value":89},"Nodes and cables",{"type":9,"tag":78,"props":91,"children":95},{"alt":92,"effect":81,"poster":93,"src":94},"Creating a custom node type from the palette","https:\u002F\u002Fres.cloudinary.com\u002Fddwpkkaqv\u002Fvideo\u002Fupload\u002Fso_2,w_1280,q_auto\u002Fv1793886364\u002F26ai-nodes-1_ncvvpm.webp","https:\u002F\u002Fres.cloudinary.com\u002Fddwpkkaqv\u002Fvideo\u002Fupload\u002Fvc_h264,q_auto,w_1280\u002Fv1793886364\u002F26ai-nodes-1_ncvvpm.mp4",[96],{"type":9,"tag":10,"props":97,"children":98},{},[99],{"type":14,"value":100},"Palette and node types",{"type":9,"tag":78,"props":102,"children":106},{"alt":103,"effect":81,"poster":104,"src":105},"Node cards lifting with physics animation while being dragged","https:\u002F\u002Fres.cloudinary.com\u002Fddwpkkaqv\u002Fvideo\u002Fupload\u002Fso_2,w_1280,q_auto\u002Fv1793886364\u002F26ai-nodes-2_g56vap.webp","https:\u002F\u002Fres.cloudinary.com\u002Fddwpkkaqv\u002Fvideo\u002Fupload\u002Fvc_h264,q_auto,w_1280\u002Fv1793886364\u002F26ai-nodes-2_g56vap.mp4",[107],{"type":9,"tag":10,"props":108,"children":109},{},[110],{"type":14,"value":111},"Card physics",{"type":9,"tag":78,"props":113,"children":117},{"alt":114,"effect":81,"poster":115,"src":116},"Moving across the canvas with pan and zoom over the node network","https:\u002F\u002Fres.cloudinary.com\u002Fddwpkkaqv\u002Fvideo\u002Fupload\u002Fso_2,w_1280,q_auto\u002Fv1793886364\u002F26ai-nodes-3_jhtxya.webp","https:\u002F\u002Fres.cloudinary.com\u002Fddwpkkaqv\u002Fvideo\u002Fupload\u002Fvc_h264,q_auto,w_1280\u002Fv1793886364\u002F26ai-nodes-3_jhtxya.mp4",[118],{"type":9,"tag":10,"props":119,"children":120},{},[121],{"type":14,"value":122},"Pan and zoom",1794317809960]