Works in space
The portfolio as a room: thirty works hang around you in the dark, and you turn your body to look at them. Gyroscope on a phone, drag on a desktop.
The room
Every work in the portfolio, placed on a sphere around the viewer. The phone becomes a window into the room: turn with it, and the works in front of you change. Click any of them to open the case.
The eye sits at the centre
CSS perspective puts the viewer some distance in front of the screen. Rotate the scene from there and it reads as a carousel spinning in front of you. The whole world is moved back by exactly that distance, so the centre of rotation is the eye itself — and the same rotation reads as turning your head. That one shift is the difference between “a 3D effect” and “a space”.
Geometry
- 1000px radius
- sets how large a work looks from the centre
- 14.3° × 15.3°
- the angular size of one work
- 17° column step
- wider than a work, so there is darkness between them
- ±76.5° spread
- a turn of the body sitting down, not a spin on the heels
- 3 rows × 10
- spaced from the vertical field of view of the screen, not by a fixed angle
A phone held upright sees about 100° vertically, a laptop about 60°. A row spacing that fits one pushes the captions of the bottom row off the other, so the spacing is computed from the screen.
Three inputs, none of them a fallback
- Gyroscope on a phone. On iOS it takes a tap on a button — Safari does not hand over the sensor without one.
- Drag on a desktop, and for anyone who said no to the sensor.
- Arrow keys — and Tab turns the room to the focused work, so it can be walked with a keyboard.
All three agree on direction: the world follows the finger. Pull down and you look up, as you would with the phone.
Newest in front
Places on the sphere are sorted by distance from the centre of view, and the works fill them in the order of the Works list. The latest work lands straight ahead, not behind the left shoulder. The room reads the same data as the rest of the site, so a new case appears in it by itself.
The counter in the corner measures how far the room has actually turned, not how much input it received. If nobody moved it, it says zero.
Why not a 3D library
A-Frame or Three.js would turn every cover into a texture: captions blur, links stop being links, screen readers and search lose the page, and the library alone weighs more than 500 KB. Here each work is an ordinary link with an image, and the world turns with one transform on its container.
The covers are cut down from images already on the site: 442 KB for all thirty, against 7 MB for the originals.
Where it stops
- Less motion means no room. For anyone whose system asks for reduced motion, the same thirty works become a flat grid. Turning someone’s head against that setting is not a promise to break.
- Phone angles lie when read one by one. A phone held upright sits exactly where the raw orientation angles break down, and a small move of the wrist throws the view by tens of degrees. The room reads the direction the phone is facing instead.
- Nothing scrolls, so nothing lazy-loads. A browser loads a lazy image when it is scrolled near; here works come into view by turning the world, which the browser never counts. Every cover loads up front.