[{"data":1,"prerenderedAt":123},["ShallowReactive",2],{"mdc-kdphqz-key":3,"mdc--rcx9jt-key":16,"mdc--8r3dtt-key":25,"mdc-2196et-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 y TypeScript",{"data":17,"body":18},{},{"type":6,"children":19},[20],{"type":9,"tag":10,"props":21,"children":22},{},[23],{"type":14,"value":24},"Arrastrar desde la paleta, conectar puertos, pan y 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 en 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},"Un editor de nodos dibujado con Three.js: tarjetas con sombra, miniatura y campos enlazables que se elevan y se mueven con física al interactuar. Los puertos de salida se conectan a los de entrada por color arrastrando un cable entre ellos.",{"type":9,"tag":51,"props":52,"children":55},"section",{"eyebrow":53,"title":54},"01","Cómo funciona",[56],{"type":9,"tag":10,"props":57,"children":58},{},[59],{"type":14,"value":60},"Los nodos se arrastran desde la paleta al canvas; cada tarjeta define sus puertos y sus campos. Al levantar un nodo, la elevación y la animación física hacen que la tarjeta reaccione a la interacción. Un nodo puede crearse desde la propia interfaz definiendo sus puertos y tipos. Arrastrar un nodo a la esquina inferior derecha lo elimina; el fondo del canvas se mueve arrastrando y se escala con la rueda del ratón.",{"type":9,"tag":51,"props":62,"children":65},{"eyebrow":63,"title":64},"02","En acción",[66],{"type":9,"tag":10,"props":67,"children":68},{},[69],{"type":14,"value":70},"Cuatro tomas del editor: la estructura de nodos y cables, la creación de tipos desde la paleta, la física de las tarjetas al arrastrar y el canvas con pan y zoom.",{"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},"Nodos conectados con cables sobre el canvas del editor","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},"Nodos y cables",{"type":9,"tag":78,"props":91,"children":95},{"alt":92,"effect":81,"poster":93,"src":94},"Creación de un tipo de nodo personalizado desde la paleta","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},"Paleta y tipos de nodo",{"type":9,"tag":78,"props":102,"children":106},{"alt":103,"effect":81,"poster":104,"src":105},"Tarjetas de nodo elevándose con animación física al arrastrar","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},"Física de tarjetas",{"type":9,"tag":78,"props":113,"children":117},{"alt":114,"effect":81,"poster":115,"src":116},"Recorrido del canvas con pan y zoom sobre la red de nodos","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 y zoom",1794317809959]