Skip to content

Specimen / Virtual exhibition2024

Humanimalidad.

A virtual exhibition of six pre-Hispanic pieces from Ecuador, where humans and animals become one. Each piece turns a full 360° under your mouse or finger. Built entirely by hand with plain HTML, CSS and JavaScript.

  • JavaScript
  • HTML
  • CSS
  • Render
> Try the prototype
Context
Final project at CEI, with three anthropologist co-curators
My role
Developer, every line of HTML, CSS and JavaScript
Timeline
April – May 2024 (about 3 weeks)
Platforms
Website, desktop, tablet and phone
A piece page from Humanimalidad on desktop: a dark header with the HUM ANIMAL IDAD owl logo, then a square viewer showing a grey ceramic pot covered in spirals and small snake heads, turned so a modelled human face on its side shows at the right. A 360° ¡Rótame! badge sits in the corner, the title Cocina del brujo is below, and a row of round icon tabs starts at the bottom.
A piece mid-turn: drag across the photo and the pot spins.

The challenge

Humanimalidad is an exhibition about how Ecuador's pre-Hispanic cultures saw themselves in animals: shamans who became jaguars, birds and snakes. Three anthropologists curated six ceramic pieces from the Weilbauer Museum and wrote the texts. It needed a home online.

A museum piece is three-dimensional. A single photo shows one side, and the details the curators write about (a face on the back, a spiral on the side, a tail) are often on the side you can't see.

So the goal was to let visitors hold each piece and turn it, on a desktop or a phone, without 3D models, without plugins and without a library. Just the photos and code I wrote myself.

From photos to a turning piece

  1. Step 01 / 05

    Set the stage

    The home page opens with the jaguar and the word HUM·ANIMAL·IDAD. As you scroll, the title slides left while the jaguar drifts right at a tenth of the speed, so the two pull apart like a curtain opening.

    Both start from the positions set in the CSS, which the script reads back, so the effect keeps working when a media query moves them. The Explora la cultura button scrolls smoothly to the curators' statement.

    The Humanimalidad home page after a short scroll: the huge title has slid left so it reads MANIMALIDA, with ANIMAL in lime green, while the clay jaguar figure has drifted right and overlaps the letters. A rounded Explora la cultura button sits below and the Declaración curatorial heading starts at the bottom.
    Scroll and the title slides away from the jaguar.

  2. Step 02 / 05

    Invite people in

    Below the statement the page asks a question, Si fueses un animal, ¿cuál serías? (If you were an animal, which would you be?), and lists the six pieces.

    Each piece is drawn as a black stamp, like an engraving in an old field book, and the rows alternate left and right so the list reads like a walk past a display case.

    The home page section titled Si fueses un animal, ¿cuál serías? Two pieces are drawn as black engraving-style stamps on a pale background: a round pot with a spiral on the left next to the title COCINA DEL BRUJO and a Conoce más link, then the title TAPA COCINA DEL BRUJO on the left with its round lid stamp on the right.
    The six pieces as stamps, alternating sides.

  3. Step 03 / 05

    Build the 360 viewer

    This is the part I'm proudest of. Each piece was photographed on a turntable, and all 37 or 38 photos sit one under another in a single tall image: 640 pixels wide and more than 23,000 tall.

    The viewer is a square window with overflow hidden, so only one frame shows. When you drag, the script compares where the pointer is now with where it was, and slides the image up or down by exactly one frame. Past the last frame it wraps to the first, so the piece turns forever.

    The frame size isn't hard-coded: the script reads the window's height from the CSS each time you press. The same code works in the 500px desktop window and the 280px phone window, with the mouse or with touch.

    Diagram titled How a piece turns. On the left, a vertical strip of photos of a clay jaguar figure, labelled pieza5.jpg, 38 frames, 640 by 24,320 pixels; one frame is outlined in green and linked to a large square window in the middle that shows that frame, labelled frame 08 of 38, 66 degrees, and top minus 3,500 pixels equals 7 times 500. On the right, a panel titled One tall photo, one window lists the rules: press remembers startPosX, the step size equals the window height, drag right moves to the next frame, drag left to the previous one, and past either end it loops. Six small frames below show the jaguar at 0, 57, 114, 180, 237 and 294 degrees. Along the bottom, five steps: turntable, stack, frame, drag, loop.
    The whole trick: one tall photo and a window that shows one frame.

  4. Step 04 / 05

    Make each piece readable

    Under the viewer, six round tabs hold the facts the curators asked for: culture, period, type of object, material, representation and technique. Each has its own line icon, and one script runs the tabs on every piece page.

    Then come the curators' critical observation, a ZOOM section with circular close-ups of the details they discuss, and the full list of references with links to the original studies.

    A piece page scrolled to the information tabs: six round outlined icons in a row, a pot, a clock, a cube, plants, an animal face and a hand. The animal-face tab is filled lime green, and below it the panel reads Representación, Antrozoomorfa. A dotted line separates it from the heading Observación crítica and several paragraphs about a winged figure dressed as a parrot.
    Six tabs, one per fact the curators wanted to show.
    The ZOOM section of the Hombre alado page: two circular close-up photos, the first of a green and brown wing with red beads, labelled Alas, the second of a headdress with pointed shapes, labelled Tocado, each with a short explanation beside it. The heading Referencias starts below.
    Close-ups bring the curators' details next to the text.

  5. Step 05 / 05

    Fit it on a phone

    On small screens the menu folds into a hamburger, the viewer shrinks to 280px and the tabs stay in a single row. Rotation listens to touch as well as the mouse, so turning a piece with your thumb feels as natural as dragging it on a desktop.

    The Jaguar divino page on a phone: the HUM ANIMAL IDAD logo and a green hamburger menu at the top, the clay jaguar seen from the front in the square viewer with its 360° ¡Rótame! badge, the title Jaguar divino, a row of six round tabs with the first one filled lime green, and the panel Cultura, Jama Coaque (300AC – 800DC).
    On a phone, you turn the piece with your thumb.

Where AI sped it up

Nothing. I built Humanimalidad in April 2024, before AI was part of how I work. No generated code, no templates and no libraries.

What I finished by hand

All of it. The 360 viewer, the scrolling title, the tabs, the menu and every layout for desktop, tablet and phone: about 280 lines of JavaScript and 800 lines of CSS, written and commented line by line.

If I built it today

The viewer still turns smoothly, and I'm proud of how much it does with so little. With what I know now, this is what I would change first:

  • Drag by distanceToday the piece moves one frame per mouse event, so a fast mouse turns it faster than a slow one. Tying frames to the distance dragged, with pointer events, would make it feel the same on every device.
  • Keyboard and screen readersLet the arrow keys turn the piece, describe each piece in its alt text, and give the tabs proper tab roles so a screen reader announces them.
  • Lighter stripsThe strips are 250 to 730 KB as JPG. AVIF or WebP would cut that roughly in half, and moving the strip with a transform instead of top would keep it on the GPU.
  • One templateThe six piece pages are copies of the same HTML. Generating them from one data file would make a seventh piece a few lines of text.

None of these change the idea. They make the same trick faster and open to more people.

The result

A museum shelf you can pick up and turn: six pieces that rotate under your finger, built without a single library or line of generated code.

223Frames
Turntable photos across six pieces, 37 or 38 per piece.
1Image per piece
The whole turn loads as one request, not 38.
~10°Per step
Each drag step turns the piece about 9.5 degrees.
0Libraries
Plain HTML, CSS and JavaScript, written by hand.

Have something people should be able to pick up and explore? Let's talk.

> Get in touch> All work
Next specimen / Interactive 3D app2026Puntonet Infrastructure Configurator