A: This is an experiment combining some new CSS properties and JS events with photography; exploring tangible methods of interacting with digital photographs.
Layers of the exposure are blended together in the browser using the
mix-blend-mode property. These layers are then trimmed to the silhouette with the
If you're visiting on a device with a cursor, the exposure will react to mouseovers. This is probably the ideal device type to view this experiment with. The cursor coordinates are used to apply transforms (translations and rotations) across the layers of the exposure.
If you're visiting on a device with an accelerometer — e.g. a smartphone — you'll see the exposure react to the device tilting and panning.
deviceorientation event sends down the
gamma orientation, which is then adjusted and applied as transforms (translations) across the layers of the exposure.
Browsers that don't support CSS masking or blend modes will load a static backup image instead.