Rodd.es — Biblioteca open source de 287 recursos web

01 · Manifiesto

Diseñado para compartirse. Por qué Rodd.es es open source.

Los recursos que hacen la web hermosa — animaciones, componentes, shaders, escenas 3D — deberían circular libres y sin barrera de idioma. Rodd.es es una biblioteca abierta, gratuita, sin muros y disponible nativamente en 7 idiomas que devuelve al ecosistema lo que el ecosistema le enseñó.

El código de la web es un bien común. Cada recurso que se comparte reduce el tiempo que otro pasa reinventando algo. Multiplica el output creativo del ecosistema completo.
Cero fricción para el visitante. Sin registro, sin muros, sin dark patterns, sin newsletters obligatorias. Abrir, probar en vivo, copiar el código, integrarlo. Cuatro pasos, cero cuentas.
Curación > volumen. Cada uno de los 287 recursos está revisado — funciona en frameworks actuales, respeta buenas prácticas de accesibilidad y rendimiento, viene con contexto de uso. Menos ruido, más señal.
Multilingüe por diseño, no por parche. UI, descripciones de efectos, hints y guías nativas en 7 idiomas (ES · EN · CA · FR · IT · DE · PT). No es Google Translate — cada idioma tiene su propio diccionario tipado y sus propias guías. Global-first, no english-first con traducción encima.

"Publicar recursos abiertos no es marketing. Es reconocer que llegaste hasta aquí porque otros publicaron primero — y devolver el favor con la misma generosidad, sin obligar a nadie a leer en un idioma que no es el suyo."

Live Code Edit

// glow-hover.jsx
export const GlowCard = () => (
  <motion.div
    whileHover={{
      scale: 1.02,
      boxShadow: '0 0 40px #7c5cff'
    }}
  />
);

02 · Análisis de competencia open source

El mapa del ecosistema. Dónde encaja Rodd.es.

Analicé 18 referencias open source del mundo del diseño web — cada una con su fortaleza y su gap. El objetivo no era competir; era entender el espacio libre donde una biblioteca curada y multilingüe podía aportar valor real sin duplicar lo que ya existe.

⚛️

Shadcn/UI · Aceternity · Magic UI

El estándar de facto en componentes React modernos con live preview y código copiable. Shadcn cambió la conversación: componentes que se pegan al proyecto en vez de instalarse como dependencia. Aceternity y Magic UI llevan el listón a animaciones con Framer Motion. Solo inglés y React-first exclusivo.

Aporte de Rodd.es: categorías más allá de React puro — shaders WebGL, escenas 3D, CSS vanilla — y UI nativa en 7 idiomas (ES · EN · CA · FR · IT · DE · PT).

Referencia técnica

🌊

Motion.dev · Framer Motion examples

Documentación técnica excelente para desarrolladores avanzados. La biblia de la animación web declarativa. Curva de entrada exigente y toda en inglés: entras a leer API, no a copiar un efecto que te seduce visualmente.

Aporte de Rodd.es: el paso previo — resultado primero, explicación después, en el idioma del usuario. Ideal para iterar rápido en fase creativa sin barrera de idioma.

Referencia técnica

🎨

React Bits · UIverse · CodePen collections

Galerías comunitarias con volumen enorme. Miles de snippets, mucha creatividad. Volumen alto, curación irregular: muchos ejemplos rotos en frameworks actuales, taxonomías inconsistentes, todo en inglés, calidad muy variable entre autores.

Aporte de Rodd.es: curación estricta — cada recurso revisado, funcionando en stack actual, con notas de rendimiento y accesibilidad en el idioma del usuario.

Diferenciación

🎮

Three.js Journey · Bruno Simon · Spline showcases

La categoría más avanzada del ecosistema. Bruno Simon marca el estándar en 3D interactivo y Spline democratiza la creación 3D sin código. Nivel técnico alto, todo en inglés, con curvas de aprendizaje largas que se disparan cuando el inglés no es tu lengua nativa.

Aporte de Rodd.es: escenas 3D listas para copiar con guías traducidas al idioma real del usuario. Puerta de entrada al 3D sin la doble carga cognitiva de aprender la técnica y el inglés a la vez.

Ampliación

🌍

Multilingüe nativo — 7 idiomas

El resto del mercado open source está en inglés. Rodd.es hace la primera apuesta seria por lo multilingüe con UI, descripciones de efectos, hints y guías traducidas nativamente al español, inglés, catalán, francés, italiano, alemán y portugués. No es un plugin de traducción — cada idioma es un diccionario propio.

Ventaja estructural

🧠

Descubrimiento visual, no textual

Los diseñadores no buscan «cómo animar un botón» — buscan un botón animado que les guste. La entrada al recurso tiene que ser el resultado, no la técnica. Taxonomía por efecto, no por librería. Menos idioma, más iconografía visual.

Principio UX

🤝

Complementario, no competitivo

Rodd.es no busca reemplazar a Shadcn ni a Motion.dev — les envía tráfico cuando el usuario necesita profundidad. La biblioteca es una capa de descubrimiento visual multilingüe sobre el ecosistema open source existente.

Estrategia

03 · Arquitectura de información

287 recursos en 6 categorías. Ni una más, ni una menos.

La taxonomía es la decisión de diseño más importante. Con demasiadas categorías el usuario se pierde; con muy pocas, pierde recursos por scroll infinito. Card sorting mental sobre 300+ ejemplos me dio exactamente 6 grupos coherentes.

Animaciones de texto

Efectos de entrada, tipografía variable, split-text, gradientes animados y typewriter.

Text

Animaciones web

Cursores custom, efectos hover, scroll-linked, parallax y transiciones de página.

Web

Componentes React

Menús, galerías, modales, acordeones y patrones UI completos listos para copiar.

React

Microinteracciones

Botones con feedback, toggles, checkboxes animados, loaders y estados de carga.

Micro

Fondos animados

Shaders WebGL/WebGPU, gradientes vivos, partículas y patrones generativos.

Shaders

3D interactivo

Escenas Three.js, integraciones Spline y modelos 3D con controles de cámara.

Reglas de la taxonomía

Un recurso → una sola categoría. Sin duplicados. Si dudo, elijo la que responde a la búsqueda más probable del usuario.
Volumen equilibrado. Ninguna categoría supera 70 recursos ni baja de 20. Evita la sensación de «vacío» y de «abrumador».
Nombres claros, no técnicos. «Fondos animados» en lugar de «WebGL shaders». El usuario intermedio entiende el resultado, no la técnica.
Filtros dentro de cada categoría. React vs CSS, gratis vs pro, complejidad baja/alta. Reducen fricción sin romper la navegación principal.

Journey del usuario típico

01 · Llegada

Aterriza desde Google buscando «efecto hover React». Ve la home con 6 categorías visuales.

02 · Explora

Entra a «Componentes React». Navega la galería con previews en vivo. Detecta 3 candidatos en 20 s.

03 · Prueba

Abre uno. Ve el resultado corriendo. Modifica valores en vivo. Aprueba visualmente.

04 · Se lleva

Copia el código a su editor. Lo pega. Funciona a la primera. Sale con la sensación de haber ganado tiempo.

04 · Sistema visual y color

Una paleta que sabe callarse cuando toca.

Este es un producto donde el contenido es el protagonista — animaciones, código, colores generados. La UI no puede competir con lo que enseña. Sistema oscuro dominante, acentos vibrantes solo en momentos de decisión y tipografía que respira.

Ink Base#08090f

Surface#111527

Aurora#7c5cff → #00d4ff

Signal#ff3e88

Ink Inverse#f5f7ff

🌑

Fondo oscuro dominante

El 92% de los recursos que exponemos brillan por sí solos. Un fondo claro contaminaría los shaders, los gradientes y las escenas 3D. Oscuro por decisión, no por moda.

Contexto

🌈

Gradient Aurora como marca

Púrpura→cian aparece solo en logos, títulos clave y CTAs. Nunca lo uso para decorar. Ese gradient es el único elemento propio que el usuario debe recordar.

Identidad

💬

Tipografía Outfit + JetBrains Mono

Outfit geométrica y contemporánea para títulos y navegación. JetBrains Mono para código, contadores y datos técnicos. Zero serifas — la biblioteca vive de superficies limpias.

Tipografía

05 · Proceso UX/UI

Del brainstorming a la publicación en 6 semanas.

Fue un sprint personal ejecutado como si el cliente fuera yo. Documento cada fase para dejar la trazabilidad de cómo pasa una idea suelta a un producto público defendible.

🧠

Brainstorming inicial

Mind map con 40+ ideas para el nuevo rodd.es. La restricción crítica: cualquier propuesta tenía que ser útil el día del lanzamiento. Descarté todo lo que no fuera acción inmediata para el usuario.

Ideación

📚

Auditoría de mi archivo

Revisé 4 años de snippets guardados, componentes propios y experimentos. De 500+ archivos rescatables sobrevivieron 287 tras filtro de calidad, código limpio y rendimiento aceptable.

Content

🗂️

Card sorting mental

Agrupé los 287 recursos abiertamente hasta que apareció una taxonomía natural de 6 grupos. Testeo con 4 amigos desarrolladores: 3 de 4 clasificaron igual. La estructura era clara.

IA · Info

🎨

Sistema visual

Wireframes lo-fi en papel, hi-fi en Figma. Definí tipografía, sistema de tokens (color, espaciado, radios), componentes reutilizables y variantes de estados. Todo en modo oscuro nativo.

Design system

⚙️

Prototipo funcional

Homepage + una categoría + una vista de detalle con live preview real. Objetivo: validar la experiencia central. Feedback: la vista de detalle era el momento crítico — le dediqué el 40% del tiempo.

Prototipo

🧪

Testing con usuarios

5 tests moderados por videollamada con perfiles distintos: junior frontend, diseñadora UI, backender curioso. Hallazgo clave: el copy de las CTA generaba dudas. Rewrite completo del copy.

Testing

📱

Responsive y accesibilidad

Todo el sistema pasa de mobile a desktop sin romper. Contraste AA en cualquier texto sobre fondo oscuro. Focus visible en cualquier link. Live previews con controles de teclado.

A11y

🚀

Publicación & difusión

Deploy en Vercel, dominio rodd.es, sitemap.xml, meta OG por categoría e idioma, hreflang para los 7 idiomas soportados e indexado en Google. Anuncio en LinkedIn y comunidades tech internacionales. Cero anuncios pagados en el lanzamiento.

Launch

🔁

Métricas y siguiente iteración

Analytics con Vercel + PostHog. Trackeo cuáles recursos se copian más, cuánto tiempo pasan en preview y qué categorías reciben visitas repetidas. Datos que orientan qué recursos añado la siguiente semana.

Loop

06 · Responsive y usabilidad

Un solo layout que respira en cualquier pantalla.

El 61% de los desarrolladores navegan bibliotecas primero en móvil y luego copian código en desktop — y con 7 idiomas activos, el layout tiene que absorber longitudes de texto muy distintas (alemán +30% vs inglés, portugués +18%, etc.). Rodd.es tenía que funcionar en las dos superficies sin degradar la experiencia en ninguna.

Mobile · 320+

Tablet · 768+

Desktop · 1200+

🖐️

Touch-first en móvil

Targets mínimos de 44×44 px, gestos naturales para navegar categorías y zoom disabled en previews para no pelear con pinch.

⌨️

Navegación por teclado

Tab lineal, focus visible, Esc cierra previews, flechas mueven entre recursos. Un desarrollador puede navegar sin ratón.

🌐

Rendimiento en móvil

Lazy loading de previews, imágenes en WebP, código dividido por categoría. Lighthouse Performance 92+ en móvil real.

♿

Contraste y accesibilidad

Todos los textos pasan AA en fondo oscuro. Motion-reduce respetado en cualquier animación de la interfaz. Aria labels en todos los controles.

07 · Stack técnico

Herramientas elegidas para lanzar rápido y escalar sin dolor.

Cero frameworks pesados donde no aportan. Cada pieza del stack está justificada por rendimiento, DX o coste operativo — no por moda.

⚛️

React + Vite

Componentes reales de la biblioteca renderizados en vivo. HMR instantáneo en desarrollo, build ultra rápido en producción.

Frontend

🎞️

Framer Motion + GSAP

Animaciones declarativas para componentes React y timeline avanzado para efectos complejos. Combinación probada en 100+ recursos.

Motion

🎨

Tailwind CSS

Sistema de utilidades para prototipar y componer variantes sin salir del JSX. Tokens propios para la marca Aurora.

Styling

🎮

Three.js + Spline

Escenas 3D interactivas con Three.js puro y prototipos con Spline embebido para creadores no técnicos.

🌊

WebGL / WebGPU shaders

Shaders GLSL escritos a mano para fondos animados. Renderizado por GPU para 60 fps constantes incluso con partículas.

GPU

▲

Vercel

Deploy continuo desde GitHub, ISR para páginas de categoría, edge cache global y preview URLs por rama.

Deploy

📈

PostHog + Vercel Analytics

Track de qué recursos se copian, tiempo medio en preview y rutas populares. Datos que dirigen la próxima entrega.

Data

✨

Claude + Cursor

Pair-programming asistido con IA para refactor de snippets, generación de variantes y revisión de accesibilidad.

DX + IA

08 · Testing y aprendizajes

5 usuarios, 47 hallazgos, 12 cambios reales.

Testing moderado por videollamada con perfiles distintos: 2 diseñadores UI, 2 frontends junior y 1 dev backend curioso. Cada sesión duró 25 min. Sacé un informe con problemas priorizados por impacto y esfuerzo.

Hallazgo 01

Copy poco claro

Los usuarios no entendían la diferencia entre «Ver ejemplo» y «Abrir en editor». Renombré ambas CTAs a «Live preview» y «Copiar código». Zero preguntas en las siguientes sesiones.

Hallazgo 02

Volumen abrumador

65 fondos animados en una sola grid asustaba. Introduje filtros de complejidad (baja/alta) y de framework (CSS/React/GLSL). Sensación de control recuperada.

Hallazgo 03

Preview lento en móvil

Los shaders WebGL tumbaban dispositivos de gama media. Añadí un placeholder estático y activo el shader solo con tap. Rendimiento restaurado sin perder wow.

Hallazgo 04

Se perdían al volver

Al cerrar un recurso volvían al top de la categoría. Guardé el scroll position con sessionStorage. Recuperan justo donde estaban.

"Un test moderado con 5 usuarios reales te da más aprendizajes que 100 horas de suposiciones internas. El coste de no testear es diseñar para ti mismo."

09 · Mi rol

Diseñé, construí, probé y publiqué el producto solo.

Ejecutado como si fuera un proyecto para cliente enterprise. Documentación completa, decisiones defendibles y una hoja de ruta para las siguientes semanas.

🎯

Estrategia de producto

Definición del posicionamiento, propuesta de valor, público objetivo y métricas de éxito de la biblioteca. Business case en una página.

🎨

UX/UI y sistema

Research, wireframes, sistema visual, componentes, tokens, prototipos hi-fi y handoff a implementación.

💻

Desarrollo frontend

Implementación React + Vite, integración de shaders, componentes animados y responsive de la biblioteca completa.

📣

Lanzamiento y content

Copy, SEO técnico, meta OG, anuncios en LinkedIn y comunidades, sistema de métricas post-launch.

Una biblioteca abiertapara diseñar más rápido.