How to create a 3D parallax effect in Intuiface

In this new UI exploration, we created a mash-up of Intuiface with multiple layers of images extracted from a Unity 3D scene. The end result is an interactive 3D parallax effect that responds to the position of your mouse.


Our VR designer Michael Gelon, explains the image preparation:

This parallax graphic is sourced from a 3D scene created using Unity3d. Here is how I sliced it into depth layers:

Scene setup & background layers- I decided to use a scene that I had already constructed. I set the camera to a solid black background, and isolated the volumetric lighting, smoke, and tech line game objects to export them as individual frames using Unity’s default screen recorder.

Geometry layers- To get accurate depth slices, I adjusted the camera’s near & far clipping planes to isolate geometry (limiting the range of what was rendered). I exported in the same way as the background elements (with a black background).

Photoshop- With my eight layer .jpegs rendered, I transferred over to Photoshop. I arranged the layers from front to back in a new project. For each layer, I masked out the black background by using Layer > Layer Styles > Blending Options and adjusting the sliders on the “this layer” bar (I needed to alt-click to set gradient ranges). Once this was complete, I had to go back and fine tune each layer to restore “shadow” areas of the geometry that were removed by the masking technique. I could have avoided this by choosing a bright background color for the Unity camera and masking via “color select”. Once the layers seemed appropriate, I exported each as a .png file.

And now, here are my Intuiface steps:

  • Import the images in Intuiface and stack / align them together in the center
  • Add a top transparent rectangle which is the layer that users will interact with
  • Bind the X,Y coordinates of each image to the X,Y of the top transparent rectangle
  • For each image binding, create a linear converter that progressively moves less relative to its Z position (e.g. the image on the back will move less than the one above it, so it conveys a sense of depth). Here are the parameters I used (download XLS)

Check out the Composer project: (8MB)



You are the gift that keeps on giving! :heartbeat:


I :heart: it!

Brings memories of game parallax on Amiga, 30 years ago :older_adult: #feelsold

Congratulations! :tada:


Thanks @Louie_Smith and @Alex for the kind feedback. I enjoyed the link to the parallax games. There is something to explore there.


For readers not familiar (definitely not the 2 experts above :rofl:) with our Marketplace Samples, remember we also have a Scroll Demo Collection that features Parallax! :slight_smile:


Always the inspiration factory @tosolini. This is so much creativity and effort. Mindblowing!