Inside the Human + Machine cube.

An object you can explore

Our homepage began with a simple idea: a floating cube, with something happening on every face. You can turn it, move closer, and choose a surface to explore. The challenge was making that object feel coherent when it became an interface.

Select Contact and the cube turns toward you. The camera approaches, the video fades, and a working form takes its place on the same face. Close it and you return to the object. That continuity matters: the interaction should feel like moving through a space.

CSS 3D, with React behind it

The cube is built from six HTML faces positioned with CSS 3D transforms. React manages which face is open, the interface state, and the video surfaces. Perspective gives the object depth while each face remains a place where ordinary web content can live.

That choice lets us use native inputs, buttons, and links inside the object. The contact form and client login remain real forms. Keyboard focus, password entry, and form validation belong to the browser, even when the surrounding presentation is spatial.

Making video part of the surface

Each face has its own short video. The forward-and-reverse playback is baked into the media, so the browser can play a regular looping file instead of continually seeking backward through a clip.

We draw decoded video frames onto canvas surfaces. When available, the browser’s video-frame callback tells us when a new frame is ready to paint. After giving each surface an initial frame, we limit further canvas drawing to faces oriented toward the camera. That reduces drawing work, although the underlying video playback still has a cost.

Loading order matters too. Small still frames from the actual films appear first. The front clip loads before the other initially visible clips, and the remaining clips follow. As video frames become available they replace those stills. Reduced-motion and data-saving preferences keep the still imagery. Short, optimized clips help keep the media footprint manageable.

Giving movement some weight

A drag should feel connected to your hand without stopping dead when you let go. We use spring-based motion and a small amount of momentum to soften rotation and zoom. Slow idle rotation keeps the object moving when it is left alone.

Opening a face has to work from the position you are actually in, including after a close zoom. Rotation and camera movement share that transition. Once a face is open, zoom is disabled so a scroll or trackpad gesture does not pull the form away while you are using it.

Depth of field is an optical treatment here: faces farther from the current focus receive a blur, while the selected interface stays sharp. It is a visual cue rather than a physical camera simulation.

The interface still has a job to do

The contact face submits to a server endpoint. Messages are stored, and Resend forwards an email notification. The destination address stays in server configuration rather than appearing in the form’s browser code.

The small details need the same attention as the large motion. A form has to fit inside its face. Its controls need room. The brand and navigation should stay available when you move closer. An expressive interface earns its place when the practical parts work too.