Cómo un diseñador-desarrollador convirtió una obsesión personal en una “fábrica de cubos” para la web, ayudó a reimaginar una gran exposición internacional y firmó uno de los Doodles más complejos de la historia de Google.
En 2014, millones de personas abrieron Google y, en lugar del logotipo de siempre, apareció un cubo de Rubik interactivo. Se podía girar, barajar y resolver… sin instalar nada. Era puro navegador. Detrás de aquel Doodle había una mezcla poco habitual de obsesión, oficio y tecnología web abierta. El protagonista: Stewart Smith, un creativo del Google Creative Lab que, sin proponérselo al principio, acabó levantando ERNO, un conjunto de herramientas para crear cubos de Rubik en la web con Three.js y CSS-3D, y una demo pedagógica, Rubik’s Cube Explorer, que explicaba el rompecabezas como nadie lo había mostrado en Internet.
Esta es la historia, contada para todos: qué se hizo, por qué importó y qué puede aprender de ello cualquiera que crea que la web debería seguir sorprendiendo… sin dejar de ser universal.
Del piso pequeño al gran escenario
Todo empezó lejos de un gran proyecto. Smith, diseñador y programador, atravesaba una etapa laboral difícil y, como muchos, buscó refugio en un reto pequeño con recompensa inmediata: aprender a resolver el cubo de Rubik. La mecánica repetitiva, la sensación de progreso y la belleza de “volver al orden” cuando todo alrededor parecía incierto fueron un ancla.
Aquella obsesión viajó con él: en el metro, en vuelos de trabajo, en descansos entre reuniones. Ya en el Google Creative Lab —la división que explora ideas para productos, cultura y marca— coincidió otra obsesión: la del propio Google por demostrar que la web abierta podía hacer cosas que antes dependían de plugins como Flash. El contexto era perfecto: Flash se apagaba, HTML5 y WebGL ya eran reales, y Three.js —la biblioteca 3D de mrdoob (Ricardo Cabello)— estaba madurando a buen ritmo.
ERNO: no hagas el “widget”, haz la “fábrica de widgets”
La chispa fue crear un cubo digital como ejercicio. Lo que vino después fue más ambicioso: ERNO, un toolkit para fabricar muchos cubos, personalizables, hackeables y listos para integrarse en experiencias web sin trucos. La idea no era una demo bonita y cerrada, sino un sistema:
- Separación limpia entre estado y apariencia. El “cerebro” del cubo (qué pieza está dónde, cómo rotan caras y aristas) vive independiente de cómo se ve. Esa decisión permite cambiar de CSS-3D a WebGL (Three.js) o a cualquier otra capa visual sin reescribir la lógica.
- Dominio de usuario desde la consola. Nada de cajas negras: el cubo se puede inspeccionar y manipular desde las herramientas del navegador. Se puede pedir un “explíqueme su estado” y ver, incluso con diagramas en texto, cómo está cada pieza. Para quienes aprenden o quieren experimentar, es oro.
- Documentación amable. El código está lleno de comentarios, explicaciones paso a paso y hasta esquemas ASCII. Puede sonar menor, pero es lo que hace que un proyecto siga siendo útil una década después.
Con esa base, Smith creó Rubik’s Cube Explorer, una demostración que iba más allá de “jugar”: enseñaba qué tipos de piezas hay (centros, aristas y esquinas), cómo se mueven y por qué nunca cambian de naturaleza. También se podía “explotar” el cubo, separando temporalmente cada cubito para ver cómo giran las capas por dentro, y alternar “pieles” (sólido, alambre, vidrio) para entender la geometría sin distracciones.
Todo sin Canvas, ni motores pesados. “Son divs”, decía el autor con una mezcla de orgullo y humor: CSS-3D y DOM bien usados, con accesibilidad y SEO de serie, y con Three.js de aliado cuando la escena lo pedía.
De la mesa del Lab a una exposición mundial
Mientras tanto, Google co-patrocinaba con Liberty Science Center (Nueva Jersey) la exposición Beyond Rubik’s Cube, por el 40.º aniversario del invento de Ernő Rubik. El equipo del Lab vio en ERNO la pieza que faltaba: kioscos interactivos, una herramienta didáctica y una posible estrella digital que conectara la experiencia física con la web.
A partir del simulador, nació también una línea gráfica que acabaría marcando el proyecto: títulos en perspectiva como si estuvieran pegados a las caras del cubo, tipografía Rubik (hoy disponible en Google Fonts) y un rojo protagonista que, contraintuivamente, representaba al cubo sin mostrar su clásico mosaico de seis colores. El lenguaje visual era directo y potente, y conectaba con la pedagogía del Explorer: ver el cubo aunque no estuviera del todo ahí.
El Doodle: el día que la portada de Google fue un cubo
En mayo de 2014, Google lanzó su Doodle más técnico hasta la fecha: un cubo jugable en la página de inicio. Para entender la dimensión, conviene recordar que esa página es sagrada: minimalista, estable, sin sorpresas que rompan nada. Aquel Doodle tuvo que cumplir estándares estrictos de rendimiento y compatibilidad. Y lo hizo.
Para el público general, fue un “¡qué divertido!”. Para quienes trabajaban en web, fue una prueba: la web abierta podía emocionar a escala planetaria sin renunciar a sus principios. Ni plugins ni instalaciones: navegador al día, conexión normal, y listo.
Pruébalo en la web I am the Cube.
Tres lecciones que trascienden el cubo
- La web puede ser bella y universal a la vez. El Doodle, los kioscos y el Explorer demostraron que no hace falta sacrificar accesibilidad, rapidez o SEO para lograr experiencias sorprendentes. Al contrario: cuando se cuidan, todo fluye mejor.
- Primero el modelo, luego los fuegos artificiales. Separar estado y vista permite evolucionar. El proyecto sobrevivió al paso del tiempo porque no era un truco de una sola tecnología; era una arquitectura sensata.
- Documentar es diseñar para el futuro. Aquellos comentarios y esquemas de hace diez años siguen enseñando a nuevos curiosos cómo piensa un sistema complejo.
La parte humana (que también importa)
En la narración hay algo más que código y gráficas: hay docencia (Smith daba clase en NYU y usó el cubo como excusa para enseñar a buscar mejor, a prototipar y a explicar), hay equipo (diseñadores, ingenieros, productores y socios remando en la misma dirección) y hay referentes (del minimalismo tipográfico a la innovación abierta de bibliotecas como Three.js).
Está, sobre todo, la mirada de Rubik: el inventor probó el cubo digital y le gustó que desvelara la mecánica interior que su objeto físico insinúa. Un guiño valioso: a veces, lo digital no sustituye; complementa.
¿Y hoy? Por qué esta historia sigue vigente
- Porque Three.js y su comunidad están más fuertes que nunca, WebGPU empieza a asomar en navegadores modernos y volveremos a ver sitios 3D memorables en campañas, cultura y educación.
- Porque el debate sobre privacidad, accesibilidad y sostenibilidad web es más relevante que hace diez años, y este caso muestra que se puede cuidar de todo sin perder la magia.
- Porque, en una web saturada de lo mismo, recordar que un puñado de líneas bien pensadas pueden emocionar a millones es una buena brújula.
Cómo se hizo posible (explicado “sin tecnicismos”)
- Three.js: una biblioteca que facilita el 3D en JavaScript (cámaras, luces, materiales, animaciones). Piensa en ella como un “estuche” para montar escenas 3D sin partir de cero.
- CSS-3D: permite rotar y trasladar elementos de la página en tres dimensiones. Ventaja: todo sigue siendo HTML, así que lectores de pantalla y motores de búsqueda no se pierden.
- Render en capas: según el dispositivo, el proyecto usaba CSS-3D o WebGL. Si la máquina era modesta, degradaba con elegancia: menos efectos, la misma idea.
- Cargas progresivas: primero se muestra lo esencial (texto, estructura), y el 3D llega “al vuelo” cuando ya hay algo útil en pantalla. Así se cuidan las métricas de velocidad.
Qué puede aprender cualquier equipo (aunque no haga 3D)
- Empieza pequeño, mide pronto. Un “cubo mínimo” que gira en el primer día motiva y orienta el resto.
- Cuenta lo que pasa por dentro. Si el sistema se puede inspeccionar (aunque sea en modo desarrollador), resolverás antes los fallos y enseñarás mejor a otros.
- Diseña para quien no verá tus efectos. Siempre habrá usuarios sin potencia gráfica, con lectores de pantalla o con datos caros. Dales algo útil también.
- Ponle nombre y vida. Un “hola, soy el cubo” convierte una herramienta en experiencia. A veces, el detalle humano hace que la tecnología se recuerde.
Preguntas frecuentes
¿Three.js es solo para expertos?
No. Hay ejemplos oficiales, plantillas y comunidad. Con una base de JavaScript se puede arrancar en días con cosas útiles. Y siempre se puede empezar por CSS-3D, que es más “amigable”.
¿Hace falta un ordenador potente para disfrutar de estas experiencias?
No necesariamente. Las buenas implementaciones se adaptan: reducen efectos, bajan resolución o priorizan lo esencial si el dispositivo es modesto. La clave es pensar en todos.
¿Por qué no usar siempre vídeos en lugar de 3D?
El vídeo es perfecto para contar algo lineal. El 3D aporta respuesta a lo que hace el usuario: gira, se acerca, desvela capas, invita a explorar. Son herramientas distintas.
¿Dónde puedo probar cosas parecidas por mi cuenta?
En el repositorio oficial de Three.js (ejemplos y documentación), y en tutoriales que explican paso a paso cómo cargar modelos, comprimir texturas o animar sin perder rendimiento. Cualquier editor moderno y un servidor local bastan para empezar.
Al final, aquella mañana en la que el mundo vio un cubo en la portada de Google fue el punto visible de una historia discreta: un juguete en el bolsillo, una idea bien modelada y la web haciendo lo que mejor sabe hacer cuando la tratan con cariño: funcionar para todos.
