Frame to Real

Interactive 3D web experiences

Your content. A space to explore.

We turn your photos and videos into branded, interactive web experiences.

Discuss a project Explore the demo
  1. 01 Frame Your existing photos and videos
  2. 02 Fold Arranged in a branded space
  3. 03 Space Explored in the browser

01 Featured project

Portfolio prototype

Discover Georgia

A walkable 3D video exhibition that runs in the browser. Visitors cross a domed rotunda and step into three rooms, each built around screens for footage of one destination.

Lobby, rotundaIn-browser render

The prototype's lobby: a stone rotunda under a timber ceiling, with doors marked Svaneti, Gergeti and Tbilisi, and the visitor's avatar standing in the foreground.
The lobby, rendered in the browser. In the images on this page, the screens show a placeholder: the prototype's footage is not reproduced here.
Type
Portfolio prototype
Role
Concept, footage selection, and AI-assisted implementation using Claude
Built with
three.js, WebGL, Vite
Status
Live demo, opens separately
Explore the demo

Opens the full prototype in a new tab. It streams video and needs WebGL. So far it has been tested only in desktop Chrome and in Chrome's phone emulation.

Three destination areas

Each room has its own architecture, invented for the exhibition and only themed to its place. None of them is a reconstruction of the real location. As in the lobby image, the screens show a placeholder, not the prototype's footage.

  1. Svaneti room: tall stone towers on a slate floor in shafts of skylight, framing a screen that shows the placeholder.

    Svaneti The Towers

    Freestanding schist towers stand on a slate floor under a coffered skylight. Two of them frame the main screen.

  2. Gergeti room: a long stone stair between ravine walls, with light lines along the handrails, rising to a screen that shows the placeholder.

    Gergeti The Ascent

    Tuff ravine walls rise around a processional stair with light lines in its handrails. The summit screen sits under a slit window.

  3. Tbilisi room: a steel-and-glass diagrid vault at dusk over a water channel, with a screen showing the placeholder.

    Tbilisi The River

    A water channel runs under a steel-and-glass diagrid vault, crossed by a glass footbridge. A carved timber balcony hangs on a stone cliff.

What the prototype does

  • Walk and look. W A S D or the up and down arrows to walk; the left and right arrows or a drag to look around. On touch screens, a stick to walk and a drag to look.
  • Sit and watch. Each room has a bench with two viewing angles.
  • Choose clips. A dock in each room selects clips and plays or pauses them. Video is letterboxed, never stretched.
  • Load only what is needed. Every clip has a desktop and a mobile version, and only the room you are in streams.
  • Respect motion settings. With reduced motion turned on, camera moves become short cuts.
  • Generated materials. Stone, timber and plaster textures are generated in code. There are no photographic textures.
The prototype at phone width: a room with the placeholder screen, a touch stick at the lower left and the clip dock along the bottom.
Touch layout at phone width (captured in browser emulation; the screen shows the placeholder).

02 Possible applications

Concepts, not client work

Where the format could go next

Three directions the same approach could take. They are possibilities, not completed projects.

  1. Branded exhibitions

    A brand's campaign photography and film, shown in a space designed around its identity rather than on a scrolling page.

  2. Destination showcases

    A hotel, region or attraction presented as rooms to walk through, built from the footage it already has.

  3. Interactive showrooms

    Product photography and video arranged along a route, so visitors can move between items at their own pace.

03 How a project starts

Start with what you already have

  1. 01

    Review your goal and media

    We look at what you want the experience to do and at the photographs and videos you already have, and check what they can support.

  2. 02

    Agree on a focused prototype

    Together we choose one space, the media it shows and what visitors should be able to do there, and keep the first version small.

  3. 03

    Build, test and refine

    We build the experience, test it on the devices that matter to you, and refine it with your feedback until it is ready to share.

Scope, timing and supported devices are agreed for each project after the first review.

04 Contact

Discuss a project

Send a short note about your project. It helps to include:

  1. Your business
  2. The intended use
  3. The photographs or videos you already have

Placeholder

The contact email has not been set yet. Add the business address to CONTACT_EMAIL in site.config.mjs and rebuild. Until then this section has no working contact action.