Humanimalidad.
Una exposición virtual de seis piezas prehispánicas de Ecuador, donde humanos y animales se vuelven uno. Cada pieza gira 360° bajo tu mouse o tu dedo. Hecha completamente a mano con HTML, CSS y JavaScript puros.
> Probar el prototipo (se abre en una pestaña nueva)- Contexto
- Proyecto final en CEI, con tres antropólogas cocuradoras
- Mi rol
- Desarrolladora, cada línea de HTML, CSS y JavaScript
- Duración
- Abril – mayo 2024 (unas 3 semanas)
- Plataformas
- Sitio web, escritorio, tablet y celular
El reto
Humanimalidad es una exposición sobre cómo las culturas prehispánicas de Ecuador se veían a sí mismas en los animales: chamanes que se convertían en jaguares, aves y serpientes. Tres antropólogas curaron seis piezas de cerámica del Museo Weilbauer y escribieron los textos. Necesitaba un hogar en línea.
Una pieza de museo es tridimensional. Una sola foto muestra un lado, y los detalles de los que escriben las curadoras (un rostro en la parte de atrás, una espiral en el costado, una cola) suelen estar en el lado que no se ve.
Así que el objetivo era que el público pudiera sostener cada pieza y girarla, en escritorio o en el celular, sin modelos 3D, sin plugins y sin librerías. Solo las fotos y código escrito por mí.
De las fotos a una pieza que gira
Paso 01 / 05
Preparar el escenario
La página de inicio abre con el jaguar y la palabra HUM·ANIMAL·IDAD. Al hacer scroll, el título se desliza a la izquierda mientras el jaguar se mueve a la derecha a una décima parte de la velocidad, así los dos se separan como un telón que se abre.
Ambos parten de las posiciones definidas en el CSS, que el script vuelve a leer, así el efecto sigue funcionando cuando una media query los mueve. El botón Explora la cultura baja suavemente hasta la declaración curatorial.
Haz scroll y el título se aleja del jaguar. Paso 02 / 05
Invitar a entrar
Debajo de la declaración, la página hace una pregunta, Si fueses un animal, ¿cuál serías?, y presenta las seis piezas.
Cada pieza está dibujada como un sello negro, como un grabado en un viejo cuaderno de campo, y las filas alternan izquierda y derecha para que la lista se lea como un paseo frente a una vitrina.
Las seis piezas como sellos, alternando lados. Paso 03 / 05
Construir el visor 360
Esta es la parte de la que estoy más orgullosa. Cada pieza se fotografió sobre una base giratoria, y las 37 o 38 fotos van una debajo de otra en una sola imagen alta: 640 píxeles de ancho y más de 23.000 de alto.
El visor es una ventana cuadrada con el desbordamiento oculto, así que solo se ve un fotograma. Cuando arrastras, el script compara dónde está el puntero ahora con dónde estaba, y desliza la imagen hacia arriba o hacia abajo exactamente un fotograma. Después del último vuelve al primero, así la pieza gira sin fin.
El tamaño del fotograma no está fijo en el código: el script lee la altura de la ventana desde el CSS cada vez que presionas. El mismo código funciona en la ventana de 500px del escritorio y en la de 280px del celular, con mouse o con el dedo.
Todo el truco: una foto alta y una ventana que muestra un fotograma. Paso 04 / 05
Hacer legible cada pieza
Debajo del visor, seis pestañas redondas guardan los datos que pidieron las curadoras: cultura, periodo, tipo de objeto, material, representación y técnica. Cada una tiene su propio ícono de línea, y un solo script maneja las pestañas en todas las páginas de piezas.
Luego vienen la observación crítica de las curadoras, una sección ZOOM con acercamientos circulares de los detalles que comentan y la lista completa de referencias con enlaces a los estudios originales.
Seis pestañas, una por cada dato que las curadoras querían mostrar. 
Los acercamientos ponen los detalles de las curadoras junto al texto. Paso 05 / 05
Que quepa en un celular
En pantallas pequeñas el menú se pliega en un menú hamburguesa, el visor se reduce a 280px y las pestañas se mantienen en una sola fila. El giro responde al tacto además del mouse, así que girar una pieza con el pulgar se siente tan natural como arrastrarla en el escritorio.
En el celular, la pieza se gira con el pulgar.
Donde la IA aceleró
Nada. Hice Humanimalidad en abril de 2024, antes de que la IA fuera parte de mi forma de trabajar. Sin código generado, sin plantillas y sin librerías.
Lo que terminé a mano
Todo. El visor 360, el título que se desliza, las pestañas, el menú y cada diseño para escritorio, tablet y celular: unas 280 líneas de JavaScript y 800 de CSS, escritas y comentadas línea por línea.
Si lo hiciera hoy
El visor todavía gira con suavidad, y me enorgullece cuánto hace con tan poco. Con lo que sé ahora, esto es lo primero que cambiaría:
- Arrastrar por distanciaHoy la pieza avanza un fotograma por cada evento del mouse, así que un mouse rápido la gira más rápido que uno lento. Atar los fotogramas a la distancia arrastrada, con pointer events, haría que se sienta igual en todos los dispositivos.
- Teclado y lectores de pantallaPermitir girar la pieza con las flechas del teclado, describir cada pieza en su texto alternativo y dar a las pestañas los roles correctos para que un lector de pantalla las anuncie.
- Tiras más livianasLas tiras pesan entre 250 y 730 KB en JPG. En AVIF o WebP pesarían más o menos la mitad, y mover la tira con un transform en lugar de top la mantendría en la GPU.
- Una sola plantillaLas seis páginas de piezas son copias del mismo HTML. Generarlas desde un archivo de datos haría que una séptima pieza fueran unas pocas líneas de texto.
Nada de esto cambia la idea. Hace el mismo truco más rápido y abierto a más personas.
El resultado
Una vitrina de museo que puedes tomar y girar: seis piezas que rotan bajo tu dedo, hechas sin una sola librería ni una línea de código generado.
- 223Fotogramas
- Fotos en base giratoria de seis piezas, 37 o 38 por pieza.
- 1Imagen por pieza
- El giro completo carga en una sola petición, no en 38.
- ~10°Por paso
- Cada paso de arrastre gira la pieza unos 9,5 grados.
- 0Librerías
- HTML, CSS y JavaScript puros, escritos a mano.
¿Tienes algo que la gente debería poder tomar y explorar? Hablemos.
Configurador de Infraestructura Puntonet