Using the Firefox Tilt plugin for an unconventional purpose


Using the Firefox Tilt plugin for an unconventional purpose

by Javod Khalaj

Tilt is self described as a “Firefox extension focused on creating a 3D visualization of a webpage, drawn using WebGL. Since the DOM is essentially a tree-like representation of a document, this tool layers each node based on the nesting in the tree, creating stacks of elements, each having a corresponding depth and being textured according to the webpage rendering.”

The plugin is pretty amazing, and it does help find nested elements very quickly, however there is a novelty to it that seems to wear out after “tilting” a few websites.

After playing with Tilt, it occurred to me that there was potential for 3D modeling that could be added to a website.


Wills Website

The website above is a very simple example of how one might go about this. I thought it would be neat to have a page about a famous skyscraper, and when the Tilt plugin was applied, the actual skyscraper would be built.

Willis Website viewed with Tilt

I’ve done the calculations to make sure that the skyscraper is indeed to scale, so if you are viewing it you will have to zoom out all the way to get a good view. A cool little side-project, and a fun easter-egg.

I don’t know how practical this would be for real modeling, but I could see how an architectural firm might use this technique as a simple “wow” factor in a pitch.

More About the Author

Javod Khalaj

Experience Architect
Cohort Analysis in Tableau: User Retention Given Only Created and Last Seen Dates Cohorts have been the go-to analysis for user retention for a while now, and Tableau has a great article on how to go about creating ...
Use DreamObjects to Backup Your MySQL Database (PHP Script) DreamObjects is DreamHost’s public cloud storage offering. It’s analogous to Amazon’s S3 offering, but slightly cheaper. The nice thing ...

See more from this author →

InterWorks uses cookies to allow us to better understand how the site is used. By continuing to use this site, you consent to this policy. Review Policy OK


Interworks GmbH
Ratinger Straße 9
40213 Düsseldorf
Geschäftsführer: Mel Stephenson

Telefon: +49 (0)211 5408 5301

Amtsgericht Düsseldorf HRB 79752
UstldNr: DE 313 353 072


Love our blog? You should see our emails. Sign up for our newsletter!