CSS Reflow visualizations made using a modified build of Firefox 11

See how the browser builds your site.

Wanna see how your website looks?

Submit your URL

What is Browser Reflow?

"Reflow is the name of the web browser process for re-calculating the positions and geometries of elements in the document, for the purpose of re-rendering part or all of the document. Because reflow is a user-blocking operation in the browser, it is useful for developers to understand how to improve reflow time and also to understand the effects of various document properties (DOM depth, CSS rule efficiency, different types of style changes) on reflow time. Sometimes reflowing a single element in the document may require reflowing its parent elements and also any elements which follow it."
- Google Developer Blog

How It Works

Submit Your URL

Right now we are accepting limited submissions while our project is in beta testing. Eventually, this app will analyze your url, then generate an .avi file to download. For the time being, we are manually processing all videos, which takes some considerable time. Submit your URL and we will try and generate a video for you, although all videos will be hosted on our youtube channel, feel free to link and embed at your leisure!

WE DO NOT SPAM. We only ask for your email to notify you that a video has been uploaded.

Gallery

CSS Reflow Visualizations

html5rocks.com

FireFox Download Page

modernizr.com

Mozilla Error Page

Check out the rest of our videos

Contact

Reflow Visualization Project

Greetings!

Thanks for your interest in the CSS Reflow Project. We are full time programmers, and when we arent doing client work, we try to dedicate as much time as we can making videos and developing our code. We love the positive response from users all over the globe, and we urge you to keep the URL submissions coming!

If you feel so inclined you may make a donation to help keep the project running, by clicking the "Donate" button below. For any questions, or if an enterprising entrepreneur would like to fund the development of this project, feel free to contact me via the email below.

Thanks, and have a great day!

pixel [dot] n3rd [at] gmail.com