Caso de estudio · Proyecto principal · 2026
Capsule Corp es mi CV convertido en juego: seis transformaciones ligadas a etapas reales de mi carrera, siete esferas del dragón escondidas y un Modo Reclutador para quien solo tiene unos segundos. Este caso cuenta qué decidí, por qué, qué me costó y qué haría distinto.
Las pantallas, de un vistazo
01 · Contexto y problema
Mi perfil es una progresión: 17 años de trayectoria, 11 en B2B enterprise, luego UX/UI, producto digital, IA generativa y agentes. Un PDF la aplana en una lista. La pregunta de partida fue: ¿y si el CV se jugara en vez de leerse?
El repositorio la declara así: cada forma es una etapa real (fundamentos B2B y web, UX/UI en Neoland, producto y frontend, máster de IA generativa en UDIA, agentes en EBIS, AI Product Designer). El diseño nace de ahí, no de un tema Dragon Ball puesto encima.
El estudio de eye-tracking de The Ladders (2018) cifró en 7,4 s el tiempo medio de la primera criba de un CV (6 s en 2012). Lo uso como orden de magnitud. Mide una criba rápida, no una lectura completa, y los CV con maquetación simple lo hicieron mejor: es la tensión que este proyecto tiene que resolver.
Fuente: The Ladders, «Eye-Tracking Study», 2018 (resumen en HR Dive). No lo he reproducido.Un portfolio «gamer» puede ser un disfraz. La tesis solo se sostiene si el juego explica algo del trabajo (la evolución) y si quien tiene prisa puede saltárselo sin pagar peaje.
Qué no sé (y no invento). No hay analítica ni cookies (lo declara el README) y no he hecho tests con reclutadores. Por eso este caso habla de decisiones y de hipótesis, no de resultados de contratación ni de tasas de conversión.
02 · Objetivos y restricciones
Defino los objetivos como criterios de diseño que se pueden comprobar en el producto. Ninguno está medido con usuarios: son hipótesis de éxito.
mailto: y limita la longitud de los campos.script-src 'self'), sin analítica ni cookies; solo localStorage para esferas, cápsulas vistas y sonido, validado al leerlo.03 · Investigación y referencias
No hice entrevistas para este proyecto. La investigación fue de referencias y de criterio propio, y la separo de lo que es suposición.
Deterding y colegas definen gamificación como el uso de elementos de diseño de juegos en contextos que no son juegos (MindTrek, 2011). La revisión de Hamari, Koivisto y Sarsa (HICSS, 2014) encuentra efectos mayoritariamente positivos pero dependientes del contexto y del usuario. No prometo ningún efecto: lo trato como una apuesta.
Deterding et al., «From game design elements to gamefulness», 2011. Hamari et al., «Does Gamification Work?», 2014.Una transformación es una metáfora de progresión que mucha gente reconoce sin explicación: la forma base, el primer estallido, el «nivel máximo». Supongo que ese reconocimiento es amplio entre perfiles de producto y tecnología de mi edad. No lo he medido, y puede no valer para todos los lectores.
Los criterios de WCAG 2.2 que más pesan en un proyecto así son 2.2.2 (pausar, detener u ocultar), 2.4.7 (foco visible), 2.4.11 (foco no oculto), 2.5.8 (tamaño de objetivo) y la preferencia prefers-reduced-motion. Más adelante cuento dónde se cumple y dónde no.
Derechos. Es un homenaje no comercial. El universo Dragon Ball pertenece a sus titulares; lo trato como un riesgo de marca personal que acepto con conciencia, no como un activo mío.
04 · Concepto: seis transformaciones
El personaje del hero tiene seis formas. Se cambia de una a otra pulsando sobre él y cada una enseña la etapa de estudios o carrera que representa. Prueba el selector.
Tu sistema pide menos movimiento: el ciclo empieza detenido. Elige tú la forma.
Fundamentos · 17 años de trayectoria + Desarrollo Web
Qué observar: el color del aura cambia con la forma y el nombre se anuncia (aria-live), como en la web. Las seis imágenes son f1..f6.webp del repo, reordenadas como en ORDER = [1, 2, 5, 3, 4, 6].
| Forma | Etapa de mi carrera | Dónde aparece |
|---|---|---|
| Forma Base | Fundamentos · 17 años de trayectoria + Desarrollo Web | Hero y fase 1 de Poderes |
| Super Saiyan | Diseño UX/UI · Bootcamp Neoland | Hero y fase 2 |
| Super Saiyan Fase 3 | Producto Digital & Frontend · React · Figma | Solo hero |
| Super Saiyan Blue | Máster en IA Generativa · UDIA | Hero; en Poderes la fase 3 (Blue) habla de producto y frontend |
| Ultra Instinto | Agentes IA & Hiperautomatización · EBIS | Hero; en Poderes la fase 4 habla de IA generativa |
| Super Saiyan Fase 4 | AI Product Designer · nivel máximo actual | Hero y fase 5 |
Una incoherencia que he encontrado al documentarlo. Los textos de etapa del hero (seis) y los de la sección Poderes (cinco fases, sin Fase 3) no asignan la misma etapa a cada forma. Lo he verificado en Character3D.tsx y data.ts. Lo dejo escrito aquí y lo recojo en los próximos pasos. El «nivel de poder» (45, 64, 80, 92, 100 %) es decorativo: no mide nada.
05 · Arquitectura de la información
La estructura es la de un CV normal. El juego es una capa de presentación sobre ella: si lo quitas, el contenido sigue siendo un currículum ordenado.
Capsule Corp (una página larga, <main> con ocho secciones)
├─ Intro: cartela con música opcional («Comenzar» / «Entrar sin sonido»)
├─ HUD fijo: Perfil · Poderes · Sagas · Trayectoria · Invocar | 0/7 esferas | Contactar | Modo Reclutador | Sonido
├─ #hero titular, estado, cifras y el personaje que evoluciona
├─ #perfil ficha de guerrero (datos, idiomas)
├─ #poderes fondo de fotogramas + 5 fases con su etapa real
├─ #stack herramientas, plegado por defecto
├─ #sagas proyectos como cápsulas Hoi-Poi, con filtros
├─ #trayectoria experiencia y formación, plegado por defecto
├─ #referencias
├─ #shenron «Invocar»: contacto (se abre con las 7 esferas o con el Modo Reclutador)
└─ Pie + dock móvil (Contactar · WhatsApp · CV)
Experiencia, stack, competencias, referencias y formación se abren a demanda. Cada desplegable lleva una frase humana en el resumen. Así la página se recorre en seguida y el detalle está disponible para quien lo busca.
El menú tiene cinco destinos. Stack y Referencias existen como secciones, pero no están en el menú: se descubren al hacer scroll. Es una decisión de economía que habría que validar.
06 · Decisiones UX/UI
Cada decisión lleva su porqué. La alternativa descartada es verificable (historial del repo) cuando lo indico; si no, es una alternativa habitual que no he probado aquí.
Un canvas fijo detrás del contenido dibuja 192 fotogramas (JPG de 900 px, uno de cada cinco del vídeo original). ScrollTrigger con scrub elige el fotograma según el avance y, al cruzar cada umbral, cambia el color de aura y la tarjeta del currículum.
El scroll es el gesto que ya hace quien lee: avanzar por la página es avanzar por mi carrera. La forma del fondo y el texto coinciden fase a fase.
Hipótesis Reproducir un <video> moviendo currentTime: puede ir a saltos por los fotogramas clave. No lo probé aquí. Coste de lo elegido: ~6,3 MB de fotogramas (se piden solo cuando Poderes está a 1.500 px).
Tu sistema pide menos movimiento: el barrido empieza detenido. Mueve el deslizador tú.
Qué observar: diez de los 192 fotogramas reales (se muestra el más cercano). Los umbrales de fase son los de data.ts: 0, 19, 38, 66 y 82 %.
Una imagen estática con un aura de ki dibujada en canvas 2D, ajustada a su silueta. El aura se agita con la velocidad del ratón; al hacer clic, un destello revela la siguiente forma. La evolución se anuncia con aria-live.
Una invitación a jugar en el primer vistazo («Pulsa sobre mí y mira cómo me transformo») que además enseña el concepto antes de explicarlo.
El fichero se llama Character3D.tsx por una idea anterior; hoy no hay 3D: es imagen más canvas 2D. El aura se pinta a 1x porque es un brillo difuso y así pinta cuatro veces menos píxeles en pantallas retina.
El radar es el logo de la barra y, en escritorio con ratón, el cursor: sigue al puntero con inercia y se «fija» sobre lo interactivo. En táctil se oculta. Al pulsar un elemento interactivo sale un estallido de ki.
Un solo símbolo une marca, juego (el radar busca esferas) e interacción. El bucle de animación solo corre mientras el radar alcanza al puntero.
Hipótesis Dejar el cursor del sistema: es lo más seguro, pero pierde el símbolo. Un cursor propio puede estorbar a quien usa lupa o ampliación; por eso solo se activa con ratón (hover:hover y pointer:fine). El historial del repo no recoge ninguna alternativa descartada aquí.
Siete esferas en los márgenes de siete secciones elegidas al azar en cada visita. Un contador de la barra cuenta cuántas llevas, un aviso lo anuncia (aria-live) y también se pueden coger con teclado (Enter o Espacio). El estado se guarda en localStorage y se valida al leerlo.
Es el juego mínimo que premia explorar sin pedir nada a quien no quiere jugar. Van siempre en los márgenes para no tapar contenido.
Del repo Siete «universos» extra en el pie de página: se añadieron con el footer del multiverso y se quitaron el 22 de octubre a las 00:04 («Footer: quita los siete universos extra y los enlaces pasan a ser botones»). Lectura mía Sobraba juego en una zona de salida.
Un botón en la barra («Modo Reclutador») y otro en la sección Invocar («Soy reclutador: reunirlas ahora»). Recoge las siete esferas que falten con un vuelo escalonado, baja a Invocar y abre las vías de contacto.
Porque bloquear el contacto tras una búsqueda del tesoro es el modo más rápido de perder a quien tiene unos segundos. El juego es una recompensa, no una puerta. Lectura mía
No apaga el juego: no oculta animaciones ni desactiva el sonido ni limpia la interfaz. Solo evita el peaje del contacto. Un «modo sin juego» de verdad sería el paso siguiente.
Tu sistema pide menos movimiento: las esferas no flotan ni vuelan. Todo funciona igual.
Pulsa una esfera (o llega con el teclado) para cogerla
Contacto bloqueado: llevas 0 de 7.
Qué observar: en la web real el vuelo termina en el contador de la barra y, con las siete, se abre la sección Invocar. Aquí solo reproduzco la mecánica, no el vuelo exacto.
Cada proyecto es una cápsula numerada con filtros por categoría. Al abrirla sale un holograma con ficha. El diálogo lleva el foco dentro, vuelve inerte el resto de la página y devuelve el foco al cerrar. En móvil se presenta como hoja inferior.
La metáfora de la cápsula guarda un proyecto entero en un objeto pequeño y pide un gesto concreto (abrirla), lo que da un momento de recompensa por proyecto.
Hipótesis Una cuadrícula de tarjetas con enlace directo: más rápida, menos reconocible.
Un formulario dentro de un panel de piedra rodeado por Shen Long. Al enviarlo compone un mailto:. Además hay WhatsApp, LinkedIn, GitHub, CV, copiar el email y, en móvil, un dock con Contactar, WhatsApp y CV.
Cero servidores, cero datos que custodiar. Varias vías para que cada persona use la suya.
Del repo Una escena con la mirada que sigue al cursor (MesaStage): se hizo el 22 de octubre a la 01:25, se probó una segunda versión (01:47) y se quitó del hero a la 01:50. El código y los fotogramas siguen en el repo, sin montar. Lectura mía Probablemente competía con el titular.
07 · Sistema visual y tipografía
El sistema es de cómic Dragon Ball sobre una base oscura de cielo espacial: contornos marcados, sombras duras, tipografía display gruesa y un color de aura por fase.
Del repo Colores de index.css (variables) y del array AURA de Character3D.tsx. En Poderes el aura de cada fase es ligeramente distinta (data.ts: #9fb6d4, #ffb800, #2fb8ff, #d7e6f2, #ff4d4d).
Cada forma, una etapa
Titulares y rótulos de cómic. Con contorno y sombra dura.
Syne en títulos de sección; Inter en el texto corrido.
Legible sobre fondo oscuro, con text-wrap: balance en titulares.
ESFERAS 3/7 · NIVEL 9001
Etiquetas del HUD, cifras y rótulos técnicos.
Del repo Las cuatro fuentes están alojadas en la propia web (WOFF2, 17 a 48 KB cada una) y las que pinta el primer vistazo se precargan. Así no se envía la IP del visitante a Google.
Lectura mía El foco visible es un anillo amarillo (#ffcf2e) de 3 px: es de los pocos elementos que no son cómic, para que siempre se vea.
08 · Motion y sonido
Tres librerías con un reparto claro y un criterio común: el movimiento explica o recompensa, y se apaga si el sistema lo pide.
| Pieza | Con qué | Para qué | Con «reducir movimiento» |
|---|---|---|---|
| Revelados de sección | Framer Motion | Entrada suave del contenido | MotionConfig reducedMotion="user": sin animación de transformación |
| Intro: cartela | GSAP (línea de tiempo) | La bola estalla y caen las letras del nombre | No se monta la línea de tiempo |
| Fondo de la evolución | GSAP ScrollTrigger | Elegir fotograma y fase con el scroll | — |
| Scroll suave | Lenis (lerp 0,1) | Inercia del desplazamiento | Lenis no se crea; se detiene con el diálogo abierto |
| Aura del personaje | Canvas 2D | Reaccionar al ratón | No escucha el movimiento del ratón |
| Universo de fondo | Canvas 2D | Partículas, nebulosa, planetas con parallax | Dibuja un solo fotograma estático; se detiene con la pestaña oculta y durante la intro |
| Esferas en vuelo | GSAP | Del margen al contador | — |
Seis efectos (cápsula, intro, power-up, radar, teletransporte y Shen Long). Nada suena hasta el primer gesto del visitante, la intro ofrece «Entrar sin sonido», el estado se recuerda y hay un botón con aria-pressed. La música de apertura baja a las 4,2 s y se apaga sola hacia las 11 s.
El 22 de octubre un commit rebaja el sonido («sonidos más sobrios»): los efectos de interfaz van unos 10 dB por debajo de la música. Lectura mía Un portfolio no debe sonar a máquina recreativa.
09 · Accesibilidad
El README declara WCAG 2.2 AA comprobado con axe-core 4.10 en escritorio y móvil, con el contacto bloqueado y desbloqueado y con el diálogo y el menú abiertos. Eso es lo que declara; a continuación, lo que hay en el código y lo que echo en falta.
inert) y lo devuelve al cerrar.aria-live; sonido con aria-pressed.:hover va dentro de (hover:hover) and (pointer:fine): en móvil no se queda «pegado».Lo que no he probado. No he usado lectores de pantalla (NVDA, VoiceOver) para recorrer la web ni he medido contraste sobre el fondo animado en cada fase. «Cumple AA» aquí significa «axe no encontró fallos reales y revisé estos puntos a mano», no una auditoría formal.
10 · Rendimiento y decisiones técnicas
Vite, React y TypeScript con versiones fijadas: framer-motion 11.15.0, gsap 3.12.5, lenis 1.1.18, howler 2.2.4, react 18.3.1, vite 6.4.5 y typescript 5.6.3 (package.json).
| Decisión | Qué hace | Coste / límite |
|---|---|---|
| LCP precargado | El personaje del hero (f1.webp) se pide desde el HTML con fetchpriority="high", no al arrancar el JS | — |
| Intro y audio en reposo | El contexto de audio (~0,3 s de hilo principal) se crea con la web ociosa; estrellas y aura no animan mientras la intro los tapa | — |
| Fotogramas bajo demanda | Los 192 JPG (6,3 MB) se piden solo cuando Poderes está a 1.500 px | Es lo más pesado de la web |
| Aura a 1x | El canvas no se escala por el devicePixelRatio | Menos nitidez, imperceptible en un brillo difuso |
| Sin terceros | Fuentes propias, CSP script-src 'self', sin analítica | Más peso propio que servir |
Lighthouse móvil sobre producción: accesibilidad, buenas prácticas y SEO en 100; rendimiento 56–61 con ralentización de CPU x4. El README añade que el TBT incluye ~1,5 s de la propia instrumentación de Lighthouse.
El rendimiento es el punto débil y lo cuento tal cual: un 56–61 no es bueno. Es el precio de un fondo de 6 MB de fotogramas, varias librerías de animación y un canvas de partículas. Lo acepté para una página que es sobre todo un escaparate; no es la forma de trabajar que recomendaría para un producto.
Lectura mía Mi comprobación. Pasé Lighthouse móvil (simulación estándar) dos veces sobre db.rodrigonegrete.es: rendimiento 50 y 65 (LCP de 3,8 y 3,5 s; TBT de 2.460 y 830 ms) y accesibilidad, buenas prácticas y SEO en 100 en las dos. La variación entre pasadas es grande en un equipo ocupado, así que lo leo como «entre 50 y 65», coherente con el 56–61 del README y lejos de lo que considero bueno.
11 · El teaser, una pieza de marketing
Para compartir la web hice un teaser vertical y la imagen para redes con Remotion, que renderiza vídeo a partir de componentes React. Usa los mismos assets y la misma tipografía que la web.
Teaser a media escala (540×960, 15 fps, VP9, sin audio, 0,6 MB). El original es de 1080×1920 a 30 fps y lleva música; las tarjetas del portfolio usan una versión aún más ligera.| Plano | Fotogramas | Qué pasa |
|---|---|---|
| 1 · Apertura | 100 (3,3 s) | La bola se enciende con dos latidos, estalla con ondas de choque y caen las letras del nombre |
| 2 · Barcelona | 80 (2,7 s) | AI Product Designer · Barcelona · Remoto UE · Full-time y freelance |
| 3 · Evolución | 80 | «Mi evolución, fase a fase» y tres cifras animadas |
| 4 · Equipo | 80 | Diseño con IA y agentes: Claude, GPT, Gemini, Make, n8n, Figma |
| 5 · Llamada a la acción | 80 | «¿Hablamos?» con las siete esferas orbitando y la dirección de la web |
Cada plano es un componente React con spring() e interpolate() que dependen del fotograma actual. Los planos se encadenan con Sequence. La música de apertura entra con una rampa de 12 fotogramas y se apaga en los dos últimos segundos. Remotion 4.0.537, con Rspack y fotogramas JPEG.
npm run assets copia los assets de la web; npm run teaser ejecuta remotion render … Teaser out/teaser.mp4 --codec=h264 --crf=20; npm run og saca la imagen Open Graph de 1200×630. El proyecto está aparte del build de la web.
Lectura mía Programar el vídeo tiene una ventaja que valoro: se puede cambiar un texto y volver a renderizar sin tocar un editor. Y un coste: un ajuste fino de ritmo es más lento que en un timeline visual.
12 · Aprendizajes y próximos pasos
Pruébala
La web es pública. Abre Capsule Corp, pulsa sobre el personaje y sigue la evolución; si tienes prisa, el botón del rayo de la barra te lleva al contacto.