Dínamo es una guía de estilo: te dice cómo se mueve una web premium. Lo que buscábamos es la otra mitad: los pedazos de código ya hechos que producen esos movimientos — letras que suben, cajas que se inclinan, bordes que giran, botones que brillan. Esta es la caja con las herramientas que encontré, todas funcionando acá abajo.
No es un programa que se instala ni un servicio que se paga. Son recetas de código: se copian adentro de la página y listo. Es como una caja de tornillos surtidos: no comprás la ferretería, sacás el tornillo que necesitás.
Mirás las cuatro familias de abajo. Cada tarjeta se mueve de verdad: no es un dibujo ni un video.
Botón verde de cada tarjeta: copia un texto corto que le explica a Claude Code qué hacer y con qué reglas.
Hay tres que no sirven para webs de clientes. Están marcadas en rojo y amarillo más abajo.
Es lo que más se nota en una web premium: el título no aparece de golpe, entra. Sirve para el nombre del negocio y para los títulos de sección.
Cada letra entra desde abajo, una atrás de otra. Es el gesto más usado en las webs que te gustan.
Escribe, borra y vuelve a escribir. Sirve para decir tres cosas distintas en el mismo lugar.
Un marcador pasa por atrás de la palabra clave. Da sensación de anotado a mano, no de diseño de fábrica.
El color del título se desplaza solo. Pesa poquísimo: son cuatro líneas de CSS.
Tiembla y se separa en colores, como una tele vieja. Usalo poco: cansa si está en todos lados.
La caja es donde vive el dato que importa: el precio, la medida, el plazo. Que reaccione al mouse hace que se sienta un objeto y no un rectángulo.
Sigue al mouse en 3D y se ilumina del lado donde estás. Es el efecto estrella de las webs de autos.
Pedidos antes de las 15 h salen hoy mismo desde el corralón.
Una luz acompaña el cursor por dentro de la tarjeta. Se nota premium y no cansa la vista.
La caja aparece cuando la persona llega a ella. Se arma de a una, en cascada.
Sube de cero al número real cuando la caja entra en pantalla. Sirve para obras hechas, años, bolsas vendidas.
El borde es el detalle más barato de todos: unas líneas y la misma caja pasa de común a costosa. Es lo que usan las webs de tecnología.
Una luz gira alrededor de la caja sin parar. Ideal para la tarjeta que querés que se mire primero.
La línea se traza sola como si alguien la dibujara, y se cierra. Perfecto para marcar una sección nueva.
Cuatro ángulos en vez de un marco entero. Al pasar el mouse las esquinas crecen. Muy usado en estudios de diseño.
El degradé del borde se mueve despacio, como respirando. Menos agresivo que el rayo, más elegante.
El botón es lo único que se toca. Un botón que responde al mouse da confianza; uno muerto parece roto.
El color sube desde abajo y llena el botón. Es el más confiable de todos: funciona en cualquier navegador.
Una franja de luz cruza el botón al pasar el mouse, como el reflejo en un vidrio.
El botón se acerca un poco al cursor. Da la sensación de que te está escuchando.
Tiene volumen y se hunde al apretarlo. Se siente como un botón de verdad, de plástico.
Suelta papelitos al confirmar. Va perfecto después de mandar un presupuesto o un pedido.
Esto es lo que casi nadie mira y después trae problemas. Las tres primeras columnas son gratis de verdad. Las otras dos hay que leerlas con cuidado porque vos vendés las webs. Es como alquilar un taladro: prestado no es lo mismo que comprado.
MIT, ISC y Apache. Podés meterlas en la web de un cliente, cobrar por eso y no avisarle a nadie. Solo no podés decir que el código es tuyo.
Son gratis para usar en una web, pero prohíben revender los componentes sueltos o cobrar la licencia comercial aparte. Si armás una web para un cliente: adelante. Si querés vender la biblioteca como producto: no.
Licencias GPL o AGPL: obligan a liberar el código de todo lo que las usa. Si la metés en la web de un cliente, esa web tendría que ser pública. Hay alternativa a mano en los tres casos.
Todas revisadas hoy: estrellas, licencia real y última actualización. Escribí una palabra para filtrar.
Un efecto mal puesto no se ve premium: se ve lento. Estas son las reglas que uso en los moldes y que le pido a Claude Code que respete siempre.
Un gesto para el título, uno para las cajas y uno para el botón. Si todo se mueve, no se mira nada. Es como una vidriera: si movés los 40 productos, no ves ninguno.
Que el código mueva únicamente posición y transparencia. Si anima el ancho o el margen, el teléfono se traba. Es la diferencia entre empujar una caja y desarmarla entera.
Hay gente a la que el movimiento le marea. El sistema operativo tiene un interruptor: la web tiene que respetarlo o queda inservible para esa persona.
Los efectos de esta página, todos juntos, pesan menos que una sola foto. Si una librería te pide 100 KB, preguntá si de verdad hace falta.
Un solo bloque con los 18 efectos y las reglas. Se lo pegás en la ventana de Claude Code y él decide qué tocar. Botón grande: copia todo.
Elegí tres efectos: uno de texto, uno de caja y uno de botón. Con esos tres ya cambia la cara de cualquier molde.
Mi recomendación para el molde de ferretería: letras que suben en el título, rayo en el borde de la tarjeta de oferta y relleno que sube en el botón de WhatsApp. Son los tres que más se notan y los tres son gratis y livianos.