in Playground on

Cinema Seat Preview Experiment

An experimental demo where a 3D perspective preview is shown for a selected seat in a cinema room.
CinemaSeatPreviewExperiment
View demo Download Source

From our monthly sponsor: Create your beautiful portfolio website with Squarespace. Start your free trial.Advertisement

Maybe you are familiar with those ticket booking systems where, at some point during the purchase flow, you have to choose a seat. This is usually done when selling tickets for games, movies, flights or concerts. Wouldn’t it be cool to have some kind of “realistic” preview of the seat, i.e. see the stage or screen from the perspective of the space you chose? Of course it would 🙂 This is the kind of question that resulted into a new experiment which we’d like to share with you today.

Attention: Some of the techniques we are using are very experimental and won’t work in all browsers. Support for transform-style: preserve-3d is necessary for this demo.

So the idea is to show some kind of cinema room where we can choose seats from a seating plan. When choosing a seat, we’ll move to the respective position in the room and allow the user to see the real view from the chosen place. There is also a button in the center of the page that allows to unlock the rotation of the viewer, something that is quite important for a realistic view considering that we can rotate and tilt our heads.

The trailer that we use in the demo is from Sintel, an animated movie by The Blender Foundation. It is licensed under Creative Commons Attribution 3.0.

Initially, we show a trailer box with the info of the movie and the option to choose the seats:

CinemaSeatPreviewExperiment_01

When we choose to select the seats, we’ll move the view to the back of the cinema room and show the seating plan:

CinemaSeatPreviewExperiment_02

Once a seat is clicked, the view moves to the respective position:

CinemaSeatPreviewExperiment_03

The little icon in the center of the screen allows for unlocking the view, i.e. allowing for the viewer to move around. This resembles the free movements of the head that are important for a realistic view.

At any point we can play the trailer and see how the screen is being perceived from that specific place.

Unfortunately, IE does not support transform-style: preserve-3d which breaks nested 3D elements. So this demo won’t work in the versions that don’t support it.

Browser Support:
  • ChromeSupported
  • FirefoxSupported
  • Internet ExplorerNot supported
  • SafariSupported
  • OperaSupported

We hope you enjoy this experiment and find it inspiring!

Check out the version by Sebastian Troć where the real seats are also colored: SebastianTroc/SeatPreview

Find this project on Github

Tagged with:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

DiagonalSlideshow

Diagonal Slideshow

DraggableImageStrip

Draggable Image Strip

AnimatedColumns_feat

Animated Image Columns

Receive our bi-weekly Collective or official newsletter right in your inbox.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 135

Comments are closed.

  3. Wowzers, that is mind blowing. Not only impressive, but you capture something that is elementary in the ticket-buying process. Respect!

  5. Haha. that’s crazy!!! Awesome crazy that is.
    By the way, preserve-3D isn’t experimental anymore right? It’s just that Internet Explorer doesn’t support it. Edge, Microsoft’s new browser, supports it fully!

  15. Based on your example I will do something like this on top of Electron. All credits to tympanus of course.

  18. You’re the Steve Jobs of webdesign, at top of the world! Amazing job Mary Lou!

  19. Just got my mind blown! Thanks for these examples, they are really inspiring 🙂