[{"data":1,"prerenderedAt":837},["ShallowReactive",2],{"biblioteca-\u002Fbiblioteca\u002Fmotion-graphics-con-claude":3},{"id":4,"title":5,"author":6,"body":7,"cover":34,"description":822,"extension":823,"meta":824,"navigation":825,"nivel":826,"path":827,"publishedAt":828,"seo":829,"stem":830,"tags":831,"__hash__":836},"biblioteca\u002Fbiblioteca\u002Fmotion-graphics-con-claude.md","Motion graphics con Claude · 16 animaciones y cómo pedirlas","Miguel Santa",{"type":8,"value":9,"toc":788},"minimark",[10,28,36,41,44,47,50,53,56,60,63,71,78,85,109,112,114,118,121,126,132,135,141,167,171,176,179,184,203,207,212,215,220,235,239,244,247,252,271,273,277,280,284,289,292,297,319,323,328,331,336,355,359,364,367,372,387,391,396,399,404,420,422,426,429,433,438,441,446,468,472,477,480,485,499,503,508,511,516,535,539,544,547,552,567,569,573,576,580,585,588,593,607,611,616,619,624,639,643,648,651,656,671,675,680,683,688,703,705,709,712,725,731,733,737,754,756,760,775],[11,12,15,19,25],"callout",{"title":13,"type":14},"¿Apurado? Que Claude te haga un resumen rápido.","claude",[16,17,18],"p",{},"Copia el link de esta página y pégalo en Claude. Le pides algo así:",[16,20,21],{},[22,23,24],"strong",{},"\"Resúmeme esta guía y dime cuáles de estas 16 animaciones le servirían a mi negocio.\"",[16,26,27],{},"En 30 segundos sabes por cuál empezar.",[16,29,30],{},[31,32],"img",{"alt":33,"src":34,"width":35},"Las 16 animaciones de la serie, hechas con Claude sobre los diseños de santa-ia.com","\u002Fbiblioteca\u002Fmotion-graphics\u002Fportada.webp",480,[37,38,40],"h2",{"id":39},"no-tienes-que-saber-animar","No tienes que saber animar",[16,42,43],{},"Ves animaciones en el feed todos los días. Un botón que se abre. Unas barras que se vuelven línea. Un logo que se arma con puntos. Y piensas que eso es trabajo de un diseñador, o de una semana en After Effects.",[16,45,46],{},"Ya no. Desde que salió Claude Opus 5.5, el 22 de septiembre de 2026, Claude escribe esas animaciones en código. Charlie Hills publicó un tablero con 16. Yo tomé las mismas 16 y las rehice con los diseños y los datos de mi web.",[16,48,49],{},"Lo que aprendí haciéndolas: el trabajo ya no es animar. Es saber nombrar lo que quieres. Cada movimiento tiene un nombre. Cuando lo dices, Claude escribe justo ese movimiento.",[16,51,52],{},"Aquí van las 16, en 4 grupos. Cada una con su nombre, para qué sirve y un prompt listo para copiar.",[54,55],"hr",{},[37,57,59],{"id":58},"cómo-se-pide-una-animación","Cómo se pide una animación",[16,61,62],{},"No me salieron con un solo prompt. Cada una pasó por varias rondas. Estos son los 3 pasos que funcionaron.",[64,65,68],"step-card",{"number":66,"title":67},"1","Escoge un solo movimiento",[16,69,70],{},"No le pidas \"hazme algo bonito\". Pídele una cosa: un botón que se abre, una lista que entra, un número que crece. Una animación, un movimiento.",[64,72,75],{"number":73,"title":74},"2","Nombra cada momento",[16,76,77],{},"Dile cómo empieza, qué cambia en el medio y cómo termina. Si tienes una referencia, una captura o un video, pásasela. Y usa el nombre del movimiento: morph, stagger, spring. Con el nombre, Claude usa la técnica correcta de una.",[64,79,82],{"number":80,"title":81},"3","Pídela en HTML y corrígela por rondas",[16,83,84],{},"Pide un solo archivo HTML. Míralo moverse y dile qué cambiar: \"más lento al final\", \"que la tarjeta no se salga del marco\". La primera versión casi nunca queda. Ajustas hasta que se vea como la imaginaste.",[11,86,90,101],{"title":87,"type":88,"icon":89},"¿Dónde lo pego? Te ahorro la decisión","tip","lucide:mouse-pointer-click",[16,91,92,93,100],{},"Si nunca has abierto una terminal, en ",[94,95,99],"a",{"href":96,"rel":97},"https:\u002F\u002Fclaude.ai",[98],"nofollow","claude.ai",". Te devuelve el HTML y lo ves moverse ahí mismo. Si ya usas Claude Code, ahí: el archivo queda guardado en tu proyecto.",[16,102,103,104,108],{},"¿Por qué HTML? Lo explico en ",[94,105,107],{"href":106},"\u002Fbiblioteca\u002Fpidele-html-a-claude-no-texto-plano","Pídele a Claude que te devuelva la respuesta en HTML",".",[16,110,111],{},"En cada prompt de abajo, lo que va entre corchetes lo cambias por lo tuyo: tus palabras, tus colores, tus datos.",[54,113],{},[37,115,117],{"id":116},"grupo-1-cómo-se-mueven-las-cosas","Grupo 1 · Cómo se mueven las cosas",[16,119,120],{},"Las 4 básicas. Si solo aprendes cuatro nombres, que sean estos.",[122,123,125],"h3",{"id":124},"_1-morph-una-forma-que-se-vuelve-otra","1 · Morph · una forma que se vuelve otra",[127,128],"clip-loop",{"label":129,"poster":130,"src":131},"Morph: el botón Reserva tu llamada se estira hasta volverse la tarjeta de la agenda con las opciones de 20 y 40 dólares","\u002Fbiblioteca\u002Fmotion-graphics\u002F01-morph.webp","\u002Fbiblioteca\u002Fmotion-graphics\u002F01-morph.mp4",[16,133,134],{},"El botón de mi web se vuelve la agenda. Tiene tres momentos: empieza como botón, la caja se estira y termina en la agenda. El truco es que la caja nunca desaparece. Es la misma, cambiando de tamaño.",[16,136,137,140],{},[22,138,139],{},"Úsalo para:"," el botón \"agenda\", \"ver demo\" o \"comprar\" de tu página, que se abre en lo que promete.",[11,142,145],{"title":143,"type":14,"icon":144},"Prompt para copiar","lucide:copy",[16,146,147],{},[22,148,149,150,154,155,158,159,162,163,166],{},"\"Hazme un archivo HTML con una animación de 8 segundos en loop. Usa un morph: el botón ",[151,152,153],"span",{},"Agenda tu llamada"," se estira hasta volverse ",[151,156,157],{},"una tarjeta con dos opciones de precio",". Tres momentos: empieza como botón, la caja se estira, termina en la tarjeta. La caja nunca desaparece. Colores: ",[151,160,161],{},"tu color principal"," sobre ",[151,164,165],{},"tu color de fondo",".\"",[122,168,170],{"id":169},"_2-stagger-en-cascada","2 · Stagger · en cascada",[127,172],{"label":173,"poster":174,"src":175},"Stagger: el buscador de la Biblioteca escribe claude code y las guías entran una detrás de otra","\u002Fbiblioteca\u002Fmotion-graphics\u002F02-stagger.webp","\u002Fbiblioteca\u002Fmotion-graphics\u002F02-stagger.mp4",[16,177,178],{},"El buscador de mi Biblioteca. Primero el texto se escribe letra por letra. Después las guías entran una detrás de otra, con una décima de segundo entre cada una. Si entran todas juntas, se ve plano.",[16,180,181,183],{},[22,182,139],{}," listas, resultados de búsqueda, menús, la sección de servicios de tu página.",[11,185,186],{"title":143,"type":14,"icon":144},[16,187,188],{},[22,189,190,191,194,195,198,199,162,201,166],{},"\"Hazme un archivo HTML con una animación de 8 segundos en loop. Un buscador escribe ",[151,192,193],{},"tu búsqueda"," letra por letra. Después entran ",[151,196,197],{},"3 resultados"," en stagger: uno detrás de otro, con una décima de segundo entre cada uno. Colores: ",[151,200,161],{},[151,202,165],{},[122,204,206],{"id":205},"_3-spring-el-resorte","3 · Spring · el resorte",[127,208],{"label":209,"poster":210,"src":211},"Spring: las tarjetas Brand Company, Biblioteca y Digital Soul caen, se pasan un poco de su lugar y vuelven","\u002Fbiblioteca\u002Fmotion-graphics\u002F03-spring.webp","\u002Fbiblioteca\u002Fmotion-graphics\u002F03-spring.mp4",[16,213,214],{},"Las tarjetas que caen. Cada una se pasa un poquito de su lugar y vuelve, como si pesara. Ese rebotecito la hace sentir real.",[16,216,217,219],{},[22,218,139],{}," notificaciones, tarjetas que llegan, un logo que aterriza al final de un video.",[11,221,222],{"title":143,"type":14,"icon":144},[16,223,224],{},[22,225,226,227,230,231,162,233,166],{},"\"Hazme un archivo HTML con una animación de 8 segundos en loop. Caen ",[151,228,229],{},"3 tarjetas: tus productos o servicios"," una por una, con spring: cada tarjeta se pasa un poco de su lugar y vuelve, como si pesara. Colores: ",[151,232,161],{},[151,234,165],{},[122,236,238],{"id":237},"_4-easing-sale-rápido-frena-suave","4 · Easing · sale rápido, frena suave",[127,240],{"label":241,"poster":242,"src":243},"Easing: la cámara hace zoom a las cifras de santa-ia.com, sale rápido y frena suave, comparado con una velocidad constante","\u002Fbiblioteca\u002Fmotion-graphics\u002F04-easing.webp","\u002Fbiblioteca\u002Fmotion-graphics\u002F04-easing.mp4",[16,245,246],{},"El zoom a mis cifras. La cámara sale rápido y frena suave, como un carro que llega al semáforo. En una buena animación, nada se mueve a velocidad constante.",[16,248,249,251],{},[22,250,139],{}," cualquier cosa que se desplace. Zooms, entradas, cambios de lugar. Si algo se ve robótico, casi siempre le falta easing.",[11,253,254],{"title":143,"type":14,"icon":144},[16,255,256],{},[22,257,258,259,262,263,266,267,162,269,166],{},"\"Hazme un archivo HTML con una animación de 8 segundos en loop. Muestra ",[151,260,261],{},"tus cifras"," y haz un zoom a ",[151,264,265],{},"la cifra más importante",". Usa easing: el movimiento sale rápido y frena suave al llegar. Nada a velocidad constante. Colores: ",[151,268,161],{},[151,270,165],{},[54,272],{},[37,274,276],{"id":275},"grupo-2-interfaces","Grupo 2 · Interfaces",[16,278,279],{},"Lo que hace que una web se sienta cara. No es el diseño quieto. Es cómo se mueve cuando la tocas.",[122,281,283],{"id":282},"_5-crossfade-fundido-cruzado","5 · Crossfade · fundido cruzado",[127,285],{"label":286,"poster":287,"src":288},"Crossfade: las pestañas Brand Company, Biblioteca y Digital Soul cambian de panel; lo viejo se desvanece mientras lo nuevo aparece","\u002Fbiblioteca\u002Fmotion-graphics\u002F05-crossfade.webp","\u002Fbiblioteca\u002Fmotion-graphics\u002F05-crossfade.mp4",[16,290,291],{},"Las pestañas. Tocas otra, y lo viejo se desvanece mientras lo nuevo aparece, al mismo tiempo. Sin crossfade, el cambio da un salto.",[16,293,294,296],{},[22,295,139],{}," pestañas, testimonios que rotan, un antes y después.",[11,298,299],{"title":143,"type":14,"icon":144},[16,300,301],{},[22,302,303,304,307,308,307,311,314,315,162,317,166],{},"\"Hazme un archivo HTML con una animación de 8 segundos en loop. Tres pestañas: ",[151,305,306],{},"nombre 1",", ",[151,309,310],{},"nombre 2",[151,312,313],{},"nombre 3",", cada una con su panel. Cambia de pestaña con crossfade: el panel viejo se desvanece mientras el nuevo aparece, al mismo tiempo. La marca de la pestaña activa se desliza. Colores: ",[151,316,161],{},[151,318,165],{},[122,320,322],{"id":321},"_6-shared-element-elemento-compartido","6 · Shared element · elemento compartido",[127,324],{"label":325,"poster":326,"src":327},"Shared element: la tarjeta Guía completa de Claude Code se abre y su título viaja hasta arriba de la página de la guía","\u002Fbiblioteca\u002Fmotion-graphics\u002F06-shared-element.webp","\u002Fbiblioteca\u002Fmotion-graphics\u002F06-shared-element.mp4",[16,329,330],{},"La guía que se abre. Tocas la tarjeta y su título viaja hasta arriba de la página nueva. Tu ojo lo sigue y no se pierde.",[16,332,333,335],{},[22,334,139],{}," una tarjeta de producto que se abre en su página, un portafolio, un catálogo.",[11,337,338],{"title":143,"type":14,"icon":144},[16,339,340],{},[22,341,342,343,346,347,350,351,162,353,166],{},"\"Hazme un archivo HTML con una animación de 8 segundos en loop. Una tarjeta que dice ",[151,344,345],{},"nombre de tu producto"," se abre en su página. Usa shared element: el título de la tarjeta viaja hasta su lugar arriba de la página, y después aparece ",[151,348,349],{},"el contenido de la página",". Colores: ",[151,352,161],{},[151,354,165],{},[122,356,358],{"id":357},"_7-magnification-la-lupa","7 · Magnification · la lupa",[127,360],{"label":361,"poster":362,"src":363},"Magnification: un menú de íconos con las secciones de santa-ia.com; los íconos crecen cuando el cursor se acerca","\u002Fbiblioteca\u002Fmotion-graphics\u002F07-magnification.webp","\u002Fbiblioteca\u002Fmotion-graphics\u002F07-magnification.mp4",[16,365,366],{},"El menú de abajo. Los íconos crecen cuando el cursor se acerca, y el más cercano crece más. Como una lupa que viaja contigo.",[16,368,369,371],{},[22,370,139],{}," menús de íconos, una fila de logos de clientes, una galería.",[11,373,374],{"title":143,"type":14,"icon":144},[16,375,376],{},[22,377,378,379,382,383,162,385,166],{},"\"Hazme un archivo HTML con una animación de 8 segundos en loop. Un menú de íconos con ",[151,380,381],{},"tus secciones",". Un cursor pasa de lado a lado y los íconos crecen con magnification: más cerca del cursor, más grandes. El ícono bajo el cursor muestra su nombre. Colores: ",[151,384,161],{},[151,386,165],{},[122,388,390],{"id":389},"_8-blur-el-desenfoque","8 · Blur · el desenfoque",[127,392],{"label":393,"poster":394,"src":395},"Blur: las cifras de santa-ia.com en lista; todo se desenfoca menos la cifra que importa","\u002Fbiblioteca\u002Fmotion-graphics\u002F08-blur.webp","\u002Fbiblioteca\u002Fmotion-graphics\u002F08-blur.mp4",[16,397,398],{},"Las cifras. Todo se desenfoca menos la que importa: más de 250 personas formadas. El desenfoque le dice al ojo dónde mirar.",[16,400,401,403],{},[22,402,139],{}," resaltar un dato en una presentación, el plan recomendado en tu tabla de precios.",[11,405,406],{"title":143,"type":14,"icon":144},[16,407,408],{},[22,409,410,411,413,414,350,416,162,418,166],{},"\"Hazme un archivo HTML con una animación de 8 segundos en loop. Una lista con ",[151,412,261],{},". El foco recorre la lista y todo lo demás se desenfoca con blur. Termina enfocado en ",[151,415,265],{},[151,417,161],{},[151,419,165],{},[54,421],{},[37,423,425],{"id":424},"grupo-3-texto-e-imagen","Grupo 3 · Texto e imagen",[16,427,428],{},"Las letras también se animan. Y las fotos.",[122,430,432],{"id":431},"_9-mask-la-máscara","9 · Mask · la máscara",[127,434],{"label":435,"poster":436,"src":437},"Mask: la palabra CONTROL del titular de santa-ia.com funciona como ventana y el color naranja sube por dentro","\u002Fbiblioteca\u002Fmotion-graphics\u002F09-mask.webp","\u002Fbiblioteca\u002Fmotion-graphics\u002F09-mask.mp4",[16,439,440],{},"La palabra \"control\" de mi web. El texto funciona como una ventana, y por dentro sube el color. La letra no cambia. Cambia lo que se ve a través de ella.",[16,442,443,445],{},[22,444,139],{}," el titular de tu página, la portada de un Reel, una palabra clave que quieras que se recuerde.",[11,447,448],{"title":143,"type":14,"icon":144},[16,449,450],{},[22,451,452,453,456,457,460,461,350,464,162,466,166],{},"\"Hazme un archivo HTML con una animación de 8 segundos en loop. Escribe ",[151,454,455],{},"tu titular"," y en la palabra ",[151,458,459],{},"palabra clave"," usa una mask: las letras son una ventana y por dentro sube ",[151,462,463],{},"un color o una imagen",[151,465,161],{},[151,467,165],{},[122,469,471],{"id":470},"_10-variable-font-la-fuente-variable","10 · Variable font · la fuente variable",[127,473],{"label":474,"poster":475,"src":476},"Variable font: el logotipo SANTA-IA se estira y engruesa, con dos perillas de grosor y ancho moviéndose","\u002Fbiblioteca\u002Fmotion-graphics\u002F10-variable-font.webp","\u002Fbiblioteca\u002Fmotion-graphics\u002F10-variable-font.mp4",[16,478,479],{},"El logo que se estira. Es una sola fuente con perillas de grosor y de ancho, y Claude las mueve. Una sola fuente, muchas formas.",[16,481,482,484],{},[22,483,139],{}," tu logo o un titular que respira en la intro de un video.",[11,486,487],{"title":143,"type":14,"icon":144},[16,488,489],{},[22,490,452,491,494,495,162,497,166],{},[151,492,493],{},"tu marca"," con una variable font de Google Fonts que tenga ejes de grosor y de ancho, por ejemplo Instrument Sans. Anima las dos perillas para que el texto se estire y engruese, y muestra los números de cada perilla. Colores: ",[151,496,161],{},[151,498,165],{},[122,500,502],{"id":501},"_11-layout-animation-todo-se-reacomoda","11 · Layout animation · todo se reacomoda",[127,504],{"label":505,"poster":506,"src":507},"Layout animation: el inicio de santa-ia.com pasa de la versión de celular a la de computador y cada bloque viaja a su nuevo lugar","\u002Fbiblioteca\u002Fmotion-graphics\u002F11-layout.webp","\u002Fbiblioteca\u002Fmotion-graphics\u002F11-layout.mp4",[16,509,510],{},"Mi web, del celular al computador. Cada bloque viaja a su nuevo lugar, en vez de saltar. Así el ojo entiende que es la misma página.",[16,512,513,515],{},[22,514,139],{}," mostrar tu web en celular y en computador, reorganizar un tablero, ordenar una lista.",[11,517,518],{"title":143,"type":14,"icon":144},[16,519,520],{},[22,521,522,523,526,527,530,531,162,533,166],{},"\"Hazme un archivo HTML con una animación de 8 segundos en loop. El inicio de ",[151,524,525],{},"tu página",", con ",[151,528,529],{},"título, subtítulo y botón",", pasa de versión celular a versión computador. Usa layout animation: cada bloque viaja a su nuevo lugar, sin saltos, y ninguno se sale del marco. Colores: ",[151,532,161],{},[151,534,165],{},[122,536,538],{"id":537},"_12-clip-path-el-recorte","12 · Clip path · el recorte",[127,540],{"label":541,"poster":542,"src":543},"Clip path: la portada del Módulo 01 Construye tu cerebro aparece por un círculo que se va abriendo","\u002Fbiblioteca\u002Fmotion-graphics\u002F12-clip-path.webp","\u002Fbiblioteca\u002Fmotion-graphics\u002F12-clip-path.mp4",[16,545,546],{},"La foto del curso. Aparece por una ventana que se va abriendo. Como destapar un regalo.",[16,548,549,551],{},[22,550,139],{}," revelar la portada de un curso, un producto nuevo, el resultado de un antes y después.",[11,553,554],{"title":143,"type":14,"icon":144},[16,555,556],{},[22,557,558,559,562,563,162,565,166],{},"\"Hazme un archivo HTML con una animación de 8 segundos en loop. ",[151,560,561],{},"Tu imagen"," aparece con clip path: un círculo que nace en el centro y crece hasta mostrarla completa. Al lado, un diagrama pequeño con el radio del círculo creciendo. Colores: ",[151,564,161],{},[151,566,165],{},[54,568],{},[37,570,572],{"id":571},"grupo-4-datos-y-3d","Grupo 4 · Datos y 3D",[16,574,575],{},"Los números también se mueven. Y una pantalla plana puede tener fondo.",[122,577,579],{"id":578},"_13-path-morph-de-barras-a-línea","13 · Path morph · de barras a línea",[127,581],{"label":582,"poster":583,"src":584},"Path morph: las cifras de santa-ia.com en barras se vuelven una línea y la punta de cada barra viaja hasta su punto","\u002Fbiblioteca\u002Fmotion-graphics\u002F13-path-morph.webp","\u002Fbiblioteca\u002Fmotion-graphics\u002F13-path-morph.mp4",[16,586,587],{},"Mis cifras en barras: 10 empresas, 30 aplicaciones, 31 tableros, 50 flujos y agentes. Las barras se vuelven una línea: la punta de cada barra viaja hasta su punto. El dato es el mismo, cambia la forma.",[16,589,590,592],{},[22,591,139],{}," un reporte de ventas, el crecimiento de tu cuenta, cualquier dato donde importe la tendencia.",[11,594,595],{"title":143,"type":14,"icon":144},[16,596,597],{},[22,598,258,599,602,603,162,605,166],{},[151,600,601],{},"tus datos, por ejemplo ventas por mes"," en barras. Con path morph, las barras se vuelven una línea: la punta de cada barra viaja hasta su punto. Numera cada punta. Colores: ",[151,604,161],{},[151,606,165],{},[122,608,610],{"id":609},"_14-stroke-draw-el-trazo","14 · Stroke draw · el trazo",[127,612],{"label":613,"poster":614,"src":615},"Stroke draw: el flujo Procesos y Datos hacia Cerebro y Decisiones se dibuja y un punto de luz corre por las líneas","\u002Fbiblioteca\u002Fmotion-graphics\u002F14-stroke-draw.webp","\u002Fbiblioteca\u002Fmotion-graphics\u002F14-stroke-draw.mp4",[16,617,618],{},"El cerebro de una empresa. Las líneas se van dibujando, y un punto de luz corre de los procesos a las decisiones. Así se ve que algo fluye.",[16,620,621,623],{},[22,622,139],{}," explicar un proceso, tu forma de trabajar, una automatización, un embudo de ventas.",[11,625,626],{"title":143,"type":14,"icon":144},[16,627,628],{},[22,629,630,631,634,635,162,637,166],{},"\"Hazme un archivo HTML con una animación de 8 segundos en loop. Un diagrama de ",[151,632,633],{},"tu proceso, por ejemplo: pedido, cocina, entrega",". Usa stroke draw: las líneas entre las cajas se van dibujando y después un punto de luz corre de la primera a la última. Colores: ",[151,636,161],{},[151,638,165],{},[122,640,642],{"id":641},"_15-perspective-la-profundidad","15 · Perspective · la profundidad",[127,644],{"label":645,"poster":646,"src":647},"Perspective: tres páginas de santa-ia.com giran en abanico 3D; la de adelante se ve grande y la de atrás pequeña","\u002Fbiblioteca\u002Fmotion-graphics\u002F15-perspective.webp","\u002Fbiblioteca\u002Fmotion-graphics\u002F15-perspective.mp4",[16,649,650],{},"Las páginas de mi web. Giran con profundidad: la de adelante se ve grande y la de atrás, pequeña. Una pantalla plana que parece tener fondo.",[16,652,653,655],{},[22,654,139],{}," mostrar varias pantallas de tu web o tu app de un solo golpe.",[11,657,658],{"title":143,"type":14,"icon":144},[16,659,660],{},[22,661,662,663,666,667,162,669,166],{},"\"Hazme un archivo HTML con una animación de 8 segundos en loop. Pon ",[151,664,665],{},"3 capturas de tu web o tu app"," como tarjetas en un abanico 3D con perspective. Que giren despacio: la de adelante se ve grande y la de atrás pequeña. Colores: ",[151,668,161],{},[151,670,165],{},[122,672,674],{"id":673},"_16-particles-las-partículas","16 · Particles · las partículas",[127,676],{"label":677,"poster":678,"src":679},"Particles: 372 puntos naranjas sueltos se acomodan hasta formar el logotipo SANTA-IA","\u002Fbiblioteca\u002Fmotion-graphics\u002F16-particles.webp","\u002Fbiblioteca\u002Fmotion-graphics\u002F16-particles.mp4",[16,681,682],{},"Mi logo. 372 puntos sueltos se acomodan hasta formarlo. Hecho con mucho amor, como dice mi web.",[16,684,685,687],{},[22,686,139],{}," la intro o el cierre de un video, un lanzamiento, la pantalla de carga de tu app.",[11,689,690],{"title":143,"type":14,"icon":144},[16,691,692],{},[22,693,694,695,698,699,162,701,166],{},"\"Hazme un archivo HTML con una animación de 8 segundos en loop. Cientos de particles sueltos se acomodan hasta formar ",[151,696,697],{},"tu logo o tu marca en texto",", se quedan un momento y se vuelven a soltar. Las posiciones salen siempre iguales, nada al azar. Colores: ",[151,700,161],{},[151,702,165],{},[54,704],{},[37,706,708],{"id":707},"lo-que-esto-no-hace","Lo que esto no hace",[16,710,711],{},"Prefiero que lo sepas antes de pegar el primer prompt.",[713,714,715,719,722],"ul",{},[716,717,718],"li",{},"No sale de un solo prompt. Cada una de mis 16 pasó por varias rondas de corrección.",[716,720,721],{},"No es un video todavía. Claude te entrega la animación en código. Para el Reel, la grabas en pantalla o la conviertes en video. Yo uso Remotion, una herramienta que convierte código en video, y también la manejo con Claude.",[716,723,724],{},"No trae tu marca. Sin tus colores, tus palabras y tus datos, te entrega algo genérico. Por eso cada prompt trae corchetes.",[11,726,728],{"title":727,"type":88},"Patrón aplicado · nombrar es dirigir",[16,729,730],{},"No tienes que saber diseñar ni programar. Tienes que saber pedir. Y para pedir una animación, el nombre del movimiento vale más que cualquier adjetivo. \"Que se vea elegante\" no le dice nada. \"Morph, tres momentos, la caja nunca desaparece\" sí.",[54,732],{},[37,734,736],{"id":735},"lo-que-tienes-que-recordar","Lo que tienes que recordar",[713,738,739,742,745,748,751],{},[716,740,741],{},"Un movimiento por animación. Nada de \"hazme algo bonito\".",[716,743,744],{},"Nombra cómo empieza, qué cambia en el medio y cómo termina.",[716,746,747],{},"Pídela en un solo archivo HTML y corrígela por rondas.",[716,749,750],{},"Los 16 nombres: morph, stagger, spring, easing, crossfade, shared element, magnification, blur, mask, variable font, layout animation, clip path, path morph, stroke draw, perspective y particles.",[716,752,753],{},"Ponle siempre tus colores, tus palabras y tus datos.",[54,755],{},[37,757,759],{"id":758},"quieres-que-lo-hagamos-con-tu-marca","¿Quieres que lo hagamos con tu marca?",[11,761,765,768],{"title":762,"type":763,"icon":764},"Animaciones con tus diseños y tus datos","success","lucide:calendar-check",[16,766,767],{},"Si quieres que tu web, tus Reels o tus presentaciones se muevan así, las armamos contigo, con tu marca y tus números reales.",[16,769,770,774],{},[94,771,773],{"href":772},"\u002Fagenda","Agenda una llamada"," y lo revisamos juntos.",[16,776,777,778,782,783,108],{},"Si te quedó alguna duda concreta: comenta ",[779,780,781],"code",{},"MOTION"," en el Reel o escríbeme por DM en ",[94,784,787],{"href":785,"rel":786},"https:\u002F\u002Finstagram.com\u002Fsantaia.lab",[98],"@santaia.lab",{"title":789,"searchDepth":790,"depth":790,"links":791},"",2,[792,793,794,801,807,813,819,820,821],{"id":39,"depth":790,"text":40},{"id":58,"depth":790,"text":59},{"id":116,"depth":790,"text":117,"children":795},[796,798,799,800],{"id":124,"depth":797,"text":125},3,{"id":169,"depth":797,"text":170},{"id":205,"depth":797,"text":206},{"id":237,"depth":797,"text":238},{"id":275,"depth":790,"text":276,"children":802},[803,804,805,806],{"id":282,"depth":797,"text":283},{"id":321,"depth":797,"text":322},{"id":357,"depth":797,"text":358},{"id":389,"depth":797,"text":390},{"id":424,"depth":790,"text":425,"children":808},[809,810,811,812],{"id":431,"depth":797,"text":432},{"id":470,"depth":797,"text":471},{"id":501,"depth":797,"text":502},{"id":537,"depth":797,"text":538},{"id":571,"depth":790,"text":572,"children":814},[815,816,817,818],{"id":578,"depth":797,"text":579},{"id":609,"depth":797,"text":610},{"id":641,"depth":797,"text":642},{"id":673,"depth":797,"text":674},{"id":707,"depth":790,"text":708},{"id":735,"depth":790,"text":736},{"id":758,"depth":790,"text":759},"Hice 16 animaciones con Claude usando los diseños de mi web. Te cuento cómo se llama cada una, para qué sirve y el prompt para pedirla con tu marca.","md",{},true,"principiante","\u002Fbiblioteca\u002Fmotion-graphics-con-claude","2026-10-01",{"title":5,"description":822},"biblioteca\u002Fmotion-graphics-con-claude",[14,832,833,834,835],"motion-graphics","animacion","diseno","prompts","xvqKCtYvw4sNpRQIWEvqVgb1lsrGDac6YF2MvcZCihw",1790913107362]