{
 "id": 4422,
 "status": "publish",
 "lang": "es",
 "slug": "react-bits-review-componentes-animados-ia",
 "url": "https://soymarketingultra.com/react-bits-review-componentes-animados-ia/",
 "title": "React Bits: componentes animados para Claude Code y Codex",
 "excerpt": "Probamos React Bits y DotGrid: catálogo, peso, licencia, límites en móvil y cómo conectarlo con Claude Code mediante el MCP de shadcn.",
 "date_gmt": "2026-09-19T11:20:30Z",
 "modified_gmt": "2026-09-19T12:49:20Z",
 "categories": [
  {
   "slug": "ia-aplicada-es",
   "name": "IA Aplicada",
   "url": "https://soymarketingultra.com/category/ia-aplicada-es/"
  }
 ],
 "tags": [
  {
   "slug": "react-bits",
   "name": "react-bits"
  },
  {
   "slug": "claude-code",
   "name": "claude-code"
  },
  {
   "slug": "inteligencia-artificial-es",
   "name": "Inteligencia artificial"
  }
 ],
 "featured_image": {
  "url": "https://soymarketingultra.com/wp-content/uploads/react-bits-cover-es-16x9-20260919.png",
  "alt": "Mascota mecánica de Marketing Ultra controlando un campo de puntos animados para la review de React Bits",
  "width": 1536,
  "height": 864
 },
 "translation": {
  "lang": "en",
  "url": "https://soymarketingultra.com/en/react-bits-review-animated-components-ai/",
  "id": 4427
 },
 "seo": {
  "title": "React Bits review 2026: componentes, MCP y prueba real",
  "description": "Probamos React Bits y DotGrid: catálogo, peso, licencia, límites en móvil y cómo conectarlo con Claude Code mediante el MCP de shadcn.",
  "focus_keyword": "React Bits review"
 },
 "html": "<p>React Bits es una de esas bibliotecas que entran por los ojos. Abres el catálogo, mueves el ratón y en dos minutos ya quieres poner fondos animados, textos que aparecen por letras y cursores con partículas por toda la web. El peligro está justo ahí: confundir una demo bonita con una buena decisión de diseño.</p>\n<p>La he revisado como la usaría en un proyecto real con Claude Code o Codex: mirando el código actual, la licencia, el sistema de instalación, el MCP y una pieza concreta. He elegido <strong>DotGrid</strong>, un fondo de puntos interactivo. La conclusión corta es que React Bits puede ahorrar mucho trabajo, siempre que el agente reciba límites claros y tú no conviertas la página en un parque de atracciones.</p>\n\n<div class=\"mu-tldr\"><div class=\"mu-tldr__header\"><img src=\"https://soymarketingultra.com/wp-content/themes/astra-child/assets/brand/despiram-sorprendido.png\" alt=\"Marketing Ultra\" class=\"mu-tldr__mascot\"><p class=\"mu-tldr__title\">TL;DR: El resumen sin rodeos</p></div><div class=\"mu-tldr__body\"><ul><li><strong>Qué es:</strong> una colección abierta de más de 200 componentes animados e interactivos para React.</li>\n<li><strong>Qué aporta a un agente:</strong> componentes con el código a la vista, cuatro variantes habituales y un registro compatible con shadcn.</li>\n<li><strong>Qué he probado:</strong> la build completa del repositorio y una integración aislada de DotGrid desde el código oficial actual.</li>\n<li><strong>Resultado:</strong> ambas builds terminaron correctamente. DotGrid añade GSAP y genera un paquete JavaScript considerable para un solo fondo.</li>\n<li><strong>MCP:</strong> React Bits se conecta mediante el MCP de shadcn y su registro <code>@react-bits</code>. No mantiene un servidor MCP independiente.</li>\n<li><strong>Límite principal:</strong> el componente probado escucha ratón y clic, pero no incluye una respuesta propia a <code>prefers-reduced-motion</code> ni una interacción táctil equivalente al movimiento del ratón.</li>\n<li><strong>Licencia:</strong> MIT con Commons Clause. Puedes usar los componentes dentro de un producto, pero no venderlos o redistribuirlos como biblioteca.</li>\n<li><strong>Valoración:</strong> pendiente de Dani. La ficha debe mostrar <code>--/100</code> hasta que exista una nota aprobada.</li></ul></div></div>\n<h2 id=\"en-cristiano-que-hace-react-bits\">En cristiano: qué hace React Bits</h2>\n<p>React Bits te da piezas visuales ya construidas. No es un constructor de páginas ni una plantilla completa. Tú eliges un efecto, te llevas el código al proyecto y lo adaptas a tu diseño.</p>\n<p>Esa diferencia le viene muy bien a un agente de código. Claude Code o Codex no tienen que imaginar cómo programar desde cero un fondo de puntos, una galería circular o una entrada de texto. Pueden partir de una implementación conocida y concentrarse en colocarla, ajustar colores, reducir movimiento y encajarla con tu sistema visual.</p>\n<p>También evita una trampa habitual: instalar una dependencia opaca y confiar en ella para siempre. Aquí el componente acaba dentro de tu repositorio. Lo puedes leer, modificar y quitar. A cambio, el mantenimiento también pasa a ser tuyo.</p>\n<h2 id=\"que-incluye-y-por-que-encaja-con-agentes-de-codigo\">Qué incluye y por qué encaja con agentes de código</h2>\n<p>El repositorio oficial agrupa los componentes en animaciones de texto, fondos, cursores, animaciones generales y componentes. La cifra cambia con el catálogo, así que prefiero quedarme con el dato estable: hoy supera las 200 piezas.</p>\n<figure class=\"mu-captura\"><img src=\"https://soymarketingultra.com/wp-content/uploads/react-bits-catalog-20260919.png\" alt=\"Catálogo oficial de React Bits con fondos, microinteracciones, carruseles y animaciones de texto\" loading=\"lazy\"><figcaption>Catálogo oficial de React Bits consultado el 19 de septiembre de 2026. La captura enseña la variedad del índice, no evalúa cada componente.</figcaption></figure><p>Cada componente suele ofrecer combinaciones de JavaScript o TypeScript con CSS o Tailwind. Esto importa más de lo que parece. Un agente puede escoger una variante cercana al proyecto en lugar de traducirla a ciegas y dejar media integración a medias.</p>\n<p>React Bits admite instalación con shadcn y jsrepo. En shadcn, por ejemplo, el patrón oficial es este:</p>\n<pre><code class=\"language-bash\">npx shadcn@latest add @react-bits/BlurText-TS-TW\n</code></pre>\n<p>No usaría ese comando sin más. Antes le diría al agente qué componente quiero, en qué sección va, qué dependencia añade y qué comportamiento debe conservar cuando el usuario reduce las animaciones.</p>\n<h2 id=\"prueba-real-dotgrid-desde-el-codigo-actual\">Prueba real: DotGrid desde el código actual</h2>\n<p>Para esta review descargué el repositorio oficial en su revisión actual del 19 de septiembre de 2026. La build completa generó el registro con <strong>816 archivos</strong>, el sitemap con <strong>217 URL</strong> y compiló <strong>12.649 módulos</strong>. Terminó correctamente, aunque Vite avisó de fragmentos grandes.</p>\n<p>Después saqué DotGrid del catálogo y lo monté en una aplicación React mínima. La build aislada también terminó correctamente. El componente ocupa unas 8 KB de fuente sin minificar, pero depende de GSAP e InertiaPlugin. En esa prueba mínima, el JavaScript final quedó en unos <strong>304 KB sin comprimir y 101 KB con gzip</strong>. No todo ese peso pertenece a DotGrid, porque también están React y el pequeño armazón de la prueba, pero sirve para desmontar una idea: un fondo llamativo no sale gratis.</p>\n<p>DotGrid dibuja el patrón en un <code>canvas</code>, sigue el movimiento del ratón y responde al clic. El efecto funciona y es fácil de personalizar. En una cabecera corta puede aportar profundidad sin robar protagonismo al texto.</p>\n<figure class=\"mu-captura\"><img src=\"https://soymarketingultra.com/wp-content/uploads/react-bits-dotgrid-page-20260919.png\" alt=\"Ficha oficial de DotGrid con una cabecera real, controles de personalización y acceso al código\" loading=\"lazy\"><figcaption>Ficha oficial de DotGrid consultada el 19 de septiembre de 2026. Se ve el efecto dentro de una cabecera y los controles que puede ajustar el agente; la captura no prueba rendimiento ni accesibilidad.</figcaption></figure><p>El código actual no consulta <code>prefers-reduced-motion</code>. Tampoco usa eventos de puntero o táctiles para reproducir en móvil la interacción basada en <code>mousemove</code>. Un toque puede acabar generando un clic, pero la experiencia no equivale a mover un cursor. Si lo añades a producción, el agente debe preparar una versión estática o desactivada para movimiento reducido y revisar el comportamiento en una pantalla táctil real.</p>\n<h2 id=\"react-bits-en-video\">React Bits en vídeo</h2>\n<p>El vídeo de Code Like Dev sirve como recorrido visual rápido por varios efectos, entre ellos Strands, Cubes, Galaxy, Circular Gallery, Border Glow y Lightfall. Dura 14 segundos. Es útil para entender el tipo de catálogo, pero no es una prueba del MCP ni de la calidad técnica de cada componente.</p>\n<figure class=\"mu-video-embed\"><div class=\"mu-video-embed__frame\"><iframe src=\"https://www.youtube.com/embed/b5oKcO3yIHg\" title=\"React Bits visual tour by Code Like Dev\" loading=\"lazy\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen></iframe></div><figcaption>Recorrido visual de Code Like Dev por varios componentes de React Bits. Enseña el catálogo, no prueba el MCP ni el rendimiento. <a href=\"https://www.youtube.com/watch?v=b5oKcO3yIHg\">YouTube</a>.</figcaption></figure><h2 id=\"mcp-de-react-bits-que-hace-y-como-se-conecta\">MCP de React Bits: qué hace y cómo se conecta</h2>\n<p>React Bits no tiene un servidor MCP propio separado. Su documentación propone usar el <strong>MCP de shadcn</strong> y registrar el catálogo de React Bits. Esta precisión importa porque decir “instala el MCP de React Bits” puede hacer pensar que existe otro servicio o proceso.</p>\n<p>Primero se añade el registro a <code>components.json</code>:</p>\n<pre><code class=\"language-json\">{\n  &quot;registries&quot;: {\n    &quot;@react-bits&quot;: &quot;https://reactbits.dev/r/{name}.json&quot;\n  }\n}\n</code></pre>\n<p>Para Claude Code, el comando oficial de inicialización es:</p>\n<pre><code class=\"language-bash\">npx shadcn@latest mcp init --client claude\n</code></pre>\n<p>Después hay que reiniciar Claude Code. El comando <code>/mcp</code> permite comprobar si la conexión aparece activa. A partir de ahí se le puede pedir al agente que liste fondos disponibles en el registro o que añada un componente concreto.</p>\n<p>Con Codex usaría la misma idea: conectar un servidor MCP compatible con shadcn y conservar el registro en <code>components.json</code>. La parte verdaderamente útil no es que el agente conozca un nombre comercial. Es que pueda consultar el registro y traer la variante correcta al repositorio.</p>\n<h3 id=\"orden-que-le-daria-al-agente\">Orden que le daría al agente</h3>\n<pre><code class=\"language-text\">Consulta el registro oficial de React Bits mediante shadcn y localiza DotGrid en TypeScript con Tailwind. Antes de instalarlo, dime qué archivos y dependencias añadirá. Intégralo solo en la cabecera, mantén intactos el texto y la llamada a la acción, y crea una alternativa estática para prefers-reduced-motion. Comprueba desbordamiento horizontal, contraste, interacción táctil y coste de renderizado. Al terminar, enumera los archivos modificados y las pruebas realizadas.\n</code></pre>\n<h2 id=\"lo-que-me-gusta\">Lo que me gusta</h2>\n<p>La primera ventaja es la velocidad. Un efecto que exigiría varias iteraciones aparece ya resuelto y parametrizado. Para prototipos y páginas con una dirección visual clara, eso puede recortar bastante trabajo.</p>\n<p>La segunda es que ves el código. No dependes de una caja cerrada ni de una suscripción para que el fondo siga funcionando. El agente puede explicarte la implementación y adaptarla.</p>\n<p>La tercera es la variedad de formatos. JavaScript, TypeScript, CSS y Tailwind cubren una parte amplia de los proyectos React actuales. El registro de shadcn añade una ruta razonable para trabajar desde Claude Code.</p>\n<h2 id=\"lo-que-vigilaria-antes-de-publicarlo\">Lo que vigilaría antes de publicarlo</h2>\n<p><strong>Movimiento.</strong> Un efecto puede ser agradable durante cinco segundos y cansar durante una lectura completa. La alternativa para movimiento reducido debe formar parte de la integración.</p>\n<p><strong>Peso.</strong> Algunos componentes añaden GSAP, Three.js u otras dependencias. El agente debe revisar el paquete concreto, no asumir que toda la biblioteca pesa lo mismo.</p>\n<p><strong>Dependencias del repositorio.</strong> <code>npm audit</code> informó de 28 avisos al instalar el proyecto completo. No los atribuyo a DotGrid: esa cifra mezcla la web de documentación, herramientas de build y dependencias que no viajan necesariamente con el componente. Si clonas el proyecto entero, toca revisar el árbol real que vas a desplegar.</p>\n<p><strong>Móvil.</strong> Un componente diseñado alrededor del cursor pierde parte de su interacción en táctil. Hay que decidir si conserva valor como fondo estático.</p>\n<p><strong>Accesibilidad.</strong> Un resultado visualmente atractivo no garantiza contraste, foco, lectura con teclado o ausencia de mareo. React Bits aporta la pieza, no la validación de la página completa.</p>\n<p><strong>Mantenimiento.</strong> Copiar el componente te da control y también responsabilidad. Las mejoras posteriores del repositorio no llegan solas a tu versión.</p>\n<h2 id=\"precio-y-licencia\">Precio y licencia</h2>\n<p>El repositorio y sus componentes se pueden usar gratuitamente. La licencia combina MIT con Commons Clause. Permite incorporar el código a una web, una aplicación o un producto comercial. La restricción relevante es que no puedes vender, sublicenciar o redistribuir los componentes como producto por sí mismos, ni empaquetarlos para competir con la colección.</p>\n<p>No sustituye una revisión legal si tu negocio consiste precisamente en vender componentes. Para una web propia o de cliente, el caso habitual encaja con el uso permitido que describe la licencia.</p>\n<h2 id=\"que-dice-la-gente-que-lo-usa\">Qué dice la gente que lo usa</h2>\n<aside class=\"mu-social-quote\"><blockquote>“An open source collection of high quality, animated, interactive &amp; fully customizable React components.”</blockquote><p>La descripción compartida por Next.js Weekly resume bien el atractivo del proyecto. Habla del catálogo, no demuestra rendimiento ni accesibilidad.</p><footer><a href=\"https://www.reddit.com/r/reactjs/comments/1ix5pkx/\">Publicación original en Reddit</a>, 24 de febrero de 2025.</footer></aside><aside class=\"mu-social-quote\"><blockquote>“A Vue port of componentry.fun and React Bits.”</blockquote><p>El creador de nxui explica que reconstruyó para Vue ideas procedentes de React Bits. Es una señal de influencia, no una certificación de calidad.</p><footer><a href=\"https://www.reddit.com/r/vuejs/comments/1u6gy8u/nxui_180_animated_copypaste_ui_components_for_vue/\">Publicación original en Reddit</a>, 15 de junio de 2026.</footer></aside><h2 id=\"react-bits-frente-a-otras-opciones\">React Bits frente a otras opciones</h2>\n<p>Si buscas componentes de interfaz más sobrios y estructurales, <a href=\"https://ui.shadcn.com/\">shadcn/ui</a> es una base más lógica. Si quieres bloques de marketing y patrones decorativos, <a href=\"https://magicui.design/\">Magic UI</a> se acerca bastante. Si tu prioridad es explorar referencias antes de diseñar, <a href=\"https://soymarketingultra.com/refero-review-diseno-web-ia-mcp/\">Refero</a> resuelve otro momento del proceso.</p>\n<p>React Bits encaja cuando ya sabes qué sección quieres mejorar y necesitas movimiento con personalidad. No lo usaría como excusa para decidir toda la dirección visual desde el catálogo.</p>\n<p>Puedes comparar el resto de opciones en el <a href=\"https://soymarketingultra.com/bibliotecas-componentes-ui-ia/\">recopilatorio de bibliotecas de componentes UI para crear webs con IA</a>.</p>\n<h2 id=\"veredicto\">Veredicto</h2>\n<p>React Bits es un buen acelerador para diseño con agentes. El código abierto, las variantes y el registro de shadcn hacen que Claude Code o Codex puedan trabajar con piezas concretas sin inventarlas desde cero.</p>\n<p>Mi regla sería sencilla: un componente, una función y una prueba. Si DotGrid ayuda a separar la cabecera y mantiene legible la llamada a la acción, se queda. Si solo demuestra que sabemos mover puntos, fuera.</p>\n<p>La nota queda en <code>--/100</code> hasta que Dani la apruebe. La prueba actual confirma que DotGrid compila y funciona como base, pero también deja claro el trabajo que falta para una integración seria: movimiento reducido, táctil, coste de renderizado y revisión visual dentro de la página real.</p>\n<hr class=\"mu-faq-sep\"><section class=\"mu-faq\"><h2 id=\"preguntas-frecuentes-sobre-react-bits\">Preguntas frecuentes sobre React Bits</h2>\n<h3 id=\"react-bits-es-gratis\">¿React Bits es gratis?</h3>\n<p>Sí. El repositorio y los componentes se pueden usar gratis bajo MIT con Commons Clause. Puedes integrarlos en un producto, pero no revender la colección o los componentes como producto independiente.</p>\n<h3 id=\"react-bits-funciona-con-claude-code\">¿React Bits funciona con Claude Code?</h3>\n<p>Sí. La documentación oficial propone configurar el registro <code>@react-bits</code> y usar el MCP de shadcn. También puedes pedirle a Claude Code que copie e integre el código manualmente.</p>\n<h3 id=\"react-bits-tiene-un-mcp-propio\">¿React Bits tiene un MCP propio?</h3>\n<p>No como servidor separado. React Bits utiliza el MCP de shadcn y publica su catálogo como registro compatible.</p>\n<h3 id=\"puedo-usar-react-bits-con-codex\">¿Puedo usar React Bits con Codex?</h3>\n<p>Sí. Codex puede trabajar con el código del repositorio, con el registro de shadcn o con un servidor MCP compatible. Conviene pedirle que revise dependencias, movimiento reducido, móvil y rendimiento antes de cerrar la integración.</p>\n<h3 id=\"react-bits-funciona-en-movil\">¿React Bits funciona en móvil?</h3>\n<p>Los componentes pueden renderizar en móvil, pero el comportamiento depende de cada pieza. DotGrid está planteado alrededor del movimiento del ratón y no ofrece una interacción táctil equivalente en el código revisado.</p>\n<h3 id=\"react-bits-perjudica-el-rendimiento\">¿React Bits perjudica el rendimiento?</h3>\n<p>No necesariamente, pero los efectos no son gratis. DotGrid añade GSAP y dibuja en <code>canvas</code>. Otros componentes pueden usar dependencias diferentes. Hay que medir la pieza concreta dentro de la página real.</p>\n<h3 id=\"que-componente-deberia-probar-primero\">¿Qué componente debería probar primero?</h3>\n<p>Elige uno que resuelva una sección concreta. Un fondo como DotGrid puede servir para una cabecera. Una animación de texto puede ayudar a una entrada corta. Evita instalar varios efectos antes de comprobar si el primero mejora la página.</p>\n</section><h2 id=\"fuentes-y-alcance-de-las-pruebas\">Fuentes y alcance de las pruebas</h2>\n<ul>\n<li><a href=\"https://github.com/DavidHDev/react-bits\">Repositorio oficial de React Bits</a>, código y README consultados el 19 de septiembre de 2026.</li>\n<li><a href=\"https://github.com/DavidHDev/react-bits/blob/main/LICENSE.md\">Licencia oficial</a>.</li>\n<li>Código actual de DotGrid y su vídeo oficial, incluidos en el repositorio.</li>\n<li>Build completa del repositorio y build aislada de DotGrid ejecutadas localmente el 19 de septiembre de 2026.</li>\n<li><a href=\"https://ui.shadcn.com/docs/mcp\">Documentación de MCP de shadcn</a>.</li>\n<li><a href=\"https://www.youtube.com/watch?v=b5oKcO3yIHg\">Vídeo de Code Like Dev</a>, usado como recorrido visual de terceros.</li>\n<li>Publicaciones originales de Reddit enlazadas en la sección social.</li>\n</ul>\n<p>No he medido conversión, FPS en móviles físicos ni todos los componentes del catálogo. Las cifras de build describen las pruebas realizadas en este entorno y no sustituyen una medición dentro de tu proyecto.</p>\n",
 "markdown_url": "https://soymarketingultra.com/react-bits-review-componentes-animados-ia.md"
}