Case study

Graffico Office

Graffico's ideal office, imagined in 3D and explored in first person from the browser: walk between the desks, turn on the radio, write code on a screen.

Let's talk about your projectVisit the website (opens in a new tab)
Industry
Digital studio
What we built
3D experience
Website
office.graffico.it (opens in a new tab)
The Graffico Office website on desktop
The Graffico Office website on a smartphone

The goal

The office we imagine.

Not a copy of a real room: it's the way we work, turned into a space you can walk through. Touch the objects, nothing to install.

  1. 01

    First person

    Walk with WASD and look around with the mouse.

  2. 02

    Objects to use

    Whatever lights up can be used with one key, E.

  3. 03

    In the browser

    Modeled in Blender, it runs in real time in the page.

What we built

Every object does something.

Code that becomes a website.

On one desk the left screen shows the HTML and CSS, the right one the website they produce. Change the code and the site updates right away, with GSAP already installed to animate it.

Walking up to the desk: HTML code on the left, the website with a spinning cube on the right

A radio that really plays.

The radio on the desk turns on and changes station: real radio stations, live, with adjustable volume.

The wooden radio on the desk turns on and switches from one station to another

The plan, on the whiteboard.

The whiteboard holds our mission, the perfect website: the crew, the to-do list and a few handwritten notes. We introduce ourselves without a page of text.

The “Operation: the perfect website” whiteboard with photos of Andrea and Lorenzo and the to-do list

Our work, on the monitors.

On the other desk two monitors scroll through some of the websites we built for our clients.

Two monitors on the desk show the ALMA Energia and IMG Rettifica websites

The plug you shouldn't pull.

Next to the socket a note asks you not to unplug it. If you can't resist, you really can: what happens, you only find out there.

The wall socket with two plugs and the “Do NOT unplug these” note

Built with

  • Three.js
  • React Three Fiber
  • Rapier
  • Blender
  • GSAP
  • Next.js

The website

Corner by corner.

Open an image to see it full size.

  • The office, from the entrance
  • The two workstations
  • The awards board
  • The lounge corner
  • The coffee table
  • A photo on the shelf

Awards

Over to the juries.

A project of our own has no client to leave a review. It was judged by GSAP, Awwwards, CSS Design Awards and CSS Winner.

All our awards

Next project

Back to projects

Case study

Ingrolab

Industrial 3D printing, Website and 3D scenes

A 3D printing lab that takes companies all the way to validating their first industrial prototype.

See the project: Ingrolab
The Ingrolab website on desktop
The Ingrolab website on a smartphone

Your project could be next.

Tell us how your website works today and what isn't working. We'll start from there, with no commitment.

Let's talk