Camera Experiment · Web

Rainy Window

Your front camera becomes the view through a rainy window - wipe the glass with your finger and watch it slowly fog back up.

Type

Camera Experiment · Web

Live

plays in your browser

Try it live

It runs right here, in your browser. It asks for your camera before it uses it, and nothing leaves your device.

Overview

Your front camera becomes the view through a rainy window. Rain runs down the glass, the world outside is soft and blurred behind it, and you wipe a clear streak by waving your hand at the camera, or with your finger or mouse - which slowly fogs back up. Nothing is recorded or leaves your device.

Type: Camera experiment · web
Input: Camera, touch or mouse
Runs on: The browser, on device
Built with: Canvas, Web Audio

Rain on the glass with one streak wiped clear

Four layers of glass

A clear, warm view. What you see through a wiped streak.
Blurred, cool rainy glass. The rest of the window.
Raindrops as lenses. Each drop is a tiny inverted lens of the world behind it, and drops merge with whatever they run into.
A cozy vignette. On top.

The wipe is a mask on the glass, and it fogs back over about fifteen seconds from clear to full - long enough to look through, short enough that you wipe again.

The rest of the room

The rain is heard as well as seen: filtered noise, shaped into rainfall with Web Audio. R makes the rain heavier, C wipes the whole window, H hides the interface.

If there is no camera, or it is refused, the window looks out on a rainy night street instead, so the experience never stops at a permission prompt.

The start card: it's raining outside, open the window

Try it yourself

More work

Camera Experiment · Web

Rainy Window

Your front camera becomes the view through a rainy window - wipe the glass with your finger and watch it slowly fog back up.

Type

Camera Experiment · Web

Live

plays in your browser

Try it live

It runs right here, in your browser. It asks for your camera before it uses it, and nothing leaves your device.

Overview

Type: Camera experiment · web
Input: Camera, touch or mouse
Runs on: The browser, on device
Built with: Canvas, Web Audio

Four layers of glass

A clear, warm view. What you see through a wiped streak.
Blurred, cool rainy glass. The rest of the window.
Raindrops as lenses. Each drop is a tiny inverted lens of the world behind it, and drops merge with whatever they run into.
A cozy vignette. On top.

The wipe is a mask on the glass, and it fogs back over about fifteen seconds from clear to full - long enough to look through, short enough that you wipe again.

The rest of the room

The rain is heard as well as seen: filtered noise, shaped into rainfall with Web Audio. R makes the rain heavier, C wipes the whole window, H hides the interface.

If there is no camera, or it is refused, the window looks out on a rainy night street instead, so the experience never stops at a permission prompt.

Try it yourself

Rainy Window

Try it live

Overview

Four layers of glass

The rest of the room

More work

Clap On

Scratch to Meet Me

Nikunj Tyagi.

User Experience Designer

Product Designer (Contract)

UI/UX Design Intern

BriefCheck

Rainy Window

Try it live

Overview

Four layers of glass

The rest of the room

More work

Clap On

Scratch to Meet Me