Efectos visuales · control de proveedores
Es como cuando te dan una lista de proveedores por teléfono: hay que llamar a cada uno antes de comprar. Llamé a los ocho. Tres números no existen.
No me fié del nombre. Para cada uno busqué el sitio oficial, miré si abre, cuántas estrellas tiene en GitHub y sobre todo qué licencia tiene. La licencia es el papel que dice si podés usar eso en una web que cobrás, o si te pueden reclamar.
Un nombre inventado no tiene sitio, no tiene repositorio y no aparece en ninguna búsqueda. Eso es lo que pasó con tres de la lista.
Ojo con un detalle: la lista decía animshelf.com. Ese no existe. El bueno es animshelf.dev.
Lo usás en webs de clientes sin pedir permiso a nadie.
Se puede, pero con una condición escrita.
No existe, o no se puede usar como pensás.
Es el más grande de todos. Como una ferretería que tiene todo: textos animados (33), animaciones (38), bloques (48), botones y detalles chicos (34) y fondos (63).
La condición: podés usar los componentes en cualquier web que cobres. Lo que no podés es vender los componentes sueltos como si fueran tuyos, ni armar un paquete para revender.
Más chico que React Bits pero muy prolijo. Brillos en textos, bordes luminosos, marquesinas, partículas, fondos animados.
MIT es la licencia más generosa que hay: usalo, cambialo, cobralo. Solo no borres el aviso de autoría.
Es el que más te conviene. La clave está en la letra chica: está hecho en HTML, CSS, JavaScript y Canvas puro. O sea, no necesita React ni compilador. Lo copiás y funciona.
Los siete estantes: texto (35 piezas), animaciones (51), componentes (67), fondos (59), esqueletos de carga (18), herramientas y bloques de página.
Es distinto a los demás: no es una biblioteca, es una máquina expendedora. Elegís el efecto en pantalla, movés la duración, la velocidad y la dirección, ves cómo queda en el acto, y te llevás el pedacito de código justo para eso.
Su propia página dice, textual: el código generado es libre para uso personal y comercial, con licencia FreeBSD.
Este hace una sola cosa y la hace bien: dibuja líneas. Le pegás el logo o el ícono y te devuelve el código para que el trazo se vaya dibujando solo en pantalla.
No hay sitio, no hay repositorio, no aparece en ninguna búsqueda. Los "más de 400 componentes" no se pueden comprobar en ningún lado.
Probé cuatro dominios posibles y ninguno abre. Tampoco aparece en búsquedas. Los efectos que describe (matriz, VHS, fuego) sí existen, pero no con ese nombre ni en un solo lugar: están repartidos entre React Bits y Animshelf.
Nada. Ni sitio, ni repositorio, ni menciones. La idea de "animaciones de bordes sin dependencias" es buena, pero este nombre no la tiene nadie.
Una lista así la puede escribir una persona o una máquina. Cuando una máquina inventa, los nombres suenan perfectos: cortos, modernos, con aire técnico. El problema es que después perdés una tarde buscando algo que nunca existió.
La regla simple que te sirve para siempre: si no tiene sitio que abra y repositorio con estrellas, no lo uses. Y si lo tiene, mirá la licencia antes de ponerlo en una web de cliente.
Es el catálogo comunitario de botones, bordes y tarjetas: miles de piezas hechas por gente, todas en HTML y CSS puro, gratis y con licencia MIT. Es justo lo que la lista inventada quería decir con "Bortx".
Para tus páginas de venta (moldes, calculadoras, home center, lo que publicás en Cloudflare):
Animshelf + Animista + SVG Artista + Uiverse. Las cuatro son gratis, las cuatro son HTML y CSS puro, las cuatro se pueden usar cobrando.
Para el panel de ferreterías (que ya está hecho en Next.js):
React Bits + Magic UI. Ahí sí rinden, porque el panel ya habla el idioma de React.
Copiá esto y pegáselo. Van solo los cinco verdaderos, con la regla de licencia escrita adentro para que no haya dudas después.
PEDIDO: suma efectos visuales a las webs, solo con fuentes verificadas Regla de licencia: usar únicamente bibliotecas MIT, FreeBSD o equivalente que permitan uso comercial. No incluir nada cuya licencia prohíba cobrar por la web, y no revender componentes sueltos. Grupo A — páginas HTML/CSS estáticas (moldes, calculadoras, home center): 1. Animshelf (animshelf.dev) — MIT. 131 piezas en HTML, CSS, JS y Canvas. Traer: 2 animaciones de texto para títulos, 1 fondo suave para el hero, 1 esqueleto de carga para la grilla de productos. 2. Animista (animista.net) — FreeBSD, libre para uso comercial. Generar entradas y salidas: que el título entre desde abajo, que las tarjetas de oferta aparezcan una por una, con duración 600 ms. 3. SVG Artista (svgartista.net) — el código generado es MIT. Animar el logo del negocio para que se dibuje el trazo al cargar. 4. Uiverse (uiverse.io) — MIT. Un botón "Pedir por WhatsApp" con borde animado y un efecto de brillo al pasar el mouse. HTML y CSS puro, sin JavaScript. Grupo B — panel Next.js (ferrero-web): 5. React Bits (reactbits.dev) — MIT con cláusula de no reventa, se puede usar en webs que se cobran. Traer el componente Split Text para el título del panel y un Border Beam para las tarjetas destacadas. 6. Magic UI (magicui.design) — MIT. Traer el Shiny Text para el saludo del dashboard y el Marquee para la tira de productos. Reglas de ejecución: - Tres efectos de movimiento por página como máximo. Si se mueve todo, no se mira nada. - Cada animación debe respetar prefers-reduced-motion. - Peso total de los efectos por página: menos de 100 KB. - Verificar que la página siga andando sin internet lenta (probar con conexión simulada). - No tocar el molde original: trabajar sobre una copia en clientes/.
Mi recomendación, en un solo paso: agarrá el molde de ferretería con calculadora y ponele tres cosas de Animshelf. El título que entra, el botón con brillo de Uiverse y el logo que se dibuja de SVG Artista.
Son gratis, pesan menos que una foto y se notan en el primer segundo. Si te gusta cómo queda, lo copiamos al resto de los moldes.