OriginKit: animaciones y componentes listos para tu web, gratis
OriginKit es una librería gratis de componentes web animados: cada uno viene con la animación ya hecha, en el stack que uses (React, Next.js, Vite, Framer) y el estilo que prefieras (CSS, Tailwind, CSS Modules). Se usan copiando el código, en Framer, o conectando por MCP para que un agente de IA los coloque.
Probado por Pispeo · Actualizado el
- Qué es
- Sitio web
- Plan
- Gratis
- Límite del plan gratis
- La librería es gratis. Se puede navegar por nombre, categoría o búsqueda sin API key; para traer el código fuente de un componente hace falta una API key gratuita (registro sin costo).
- ¿Es segura?
- Sí — El código de cada componente queda en tu proyecto. La API key gratis es solo para obtener ese código.
- Precio
- Gratis, sin plan pago
- Qué ofrece
- Componentes con animación incluida (50 en la librería base, 250+ animaciones para copiar)
- Varios stacks: React, Next.js, Vite y Framer
- Varios estilos: CSS, Tailwind, CSS Modules
- Integración MCP: un agente de IA puede buscar y colocar componentes
- Marca de agua
- No
Gracias por votar.
¿Recomendás OriginKit?
Qué es y para qué sirve
OriginKit es una librería de componentes web animados. Cada componente —un botón, una tarjeta, un encabezado, una transición— viene con el movimiento ya programado, así que lo pegás y funciona sin escribir la animación. Los trae en varios stacks (React, Next.js, Vite, Framer) y estilos (CSS, Tailwind, CSS Modules).
Hay tres maneras de usarlo: copiar el código a tu proyecto, usarlo dentro de Framer, o conectarlo por MCP para que un agente de IA en tu editor busque y coloque los componentes.
¿Es gratis? Los límites del plan free
La librería es gratis. Navegarla —por nombre, categoría o búsqueda— no pide nada. Para obtener el código fuente de un componente hace falta una API key gratuita, que se saca registrándose sin costo.
Cómo se usa
- Entrás a originkit.dev y buscás el componente.
- Elegís tu stack y estilo.
- Copiás el código (con tu API key gratis) o lo traés desde Framer / por MCP.
- Ajustás las props en tu proyecto.
Lo bueno y lo malo
Lo bueno (verificado): gratis, animación incluida, varios stacks y estilos, y la integración con Framer y con agentes de IA.
Lo malo: para bajar el código hay que registrarse y usar una API key, un paso más que en librerías de puro copiar y pegar.
¿Para quién no es?
Si querés cero fricción y todo open source sin necesidad de cuenta, React Bits es más directo.
Alternativas
Están React Bits, Aceternity UI y Magic UI. Mirá el resto de librerías de componentes UI que probamos.
Preguntas frecuentes
¿OriginKit es gratis?
Sí, la librería es gratis. Podés navegarla sin registrarte; para obtener el código fuente de un componente hace falta una API key gratuita, que se saca creando una cuenta sin costo.
¿Sirve solo para React?
No. Trae los componentes para React, Next.js, Vite y Framer, y en CSS, Tailwind o CSS Modules según lo que uses.
¿Qué es la integración con MCP?
MCP es el protocolo que usan los asistentes de IA para conectarse a herramientas externas. Con él, un agente de codificación (por ejemplo dentro de tu editor) puede buscar componentes de OriginKit y pegarlos en tu proyecto por vos.
¿En qué se diferencia de React Bits?
Son parecidas: colecciones de componentes animados para copiar y pegar. OriginKit pone más énfasis en Framer y en la integración con agentes de IA vía MCP; React Bits, en las cuatro variantes JS/TS × CSS/Tailwind y en ser 100% open source.
