Adam Holwerda,
Web Application Developer

Diarama Component

React, CSS transforms

I built this diarama on Codepen. I was messing around with perspective and preserve-3d effects in CSS. I made this room, with six walls that all had different programmatic backgrounds, and added functionality for situating objects in a room on X Y and Z axes. Then I tied the perspective distance to the mouse's X coordinate and came up with this Alfred Hitchockian Vertigo effect.

diarama of monster

Eventually I returned to this pen with the thought of making a React component out of it, which I was able to do. In the future I'd like to reuse this component, perhaps with moving objects in the rooms. I can imagine a table of contents of short stories in which the entry to each story exists in its own little diarama.

Diarama Component