Many people were rightly fascinated by watching the process by which a web page is laid out. Being an open source web page rendering engine, Gecko is one of the few platforms where one can modify the source code to do interesting applications such as this.
I asked Ueyama-san to provide additional information on how anyone could do this themselves and he’s kindly provided some instructions and updated his modified Gecko build for anyone to make such a video.
I have rewritten the animation generating program for the latest (FF3.1b3) Gecko / Shiretoko builds.
Then run the build to output a layout progress log as C:\mozilla-build\log\out.txt.
You can change the destination with a constant in VisualizeLogger.cpp.
This time the log processing program is written in ActionScript.
Paste part of your log file in LogSource.as and compile ReflowAnimation.as with mxmlc to generate a Flash movie.
To make a movie in MPEG format, compile CaptureDump.mxml for Adobe AIR and run it.
This generates PNG files for each frame under C:\mozilla-build\log\frames.
Now you can convert them to a MPEG movie with ffmpeg.
Sorry for my rough explanation!
A big, big thank you to Satoshi for presenting on Gecko reflow back in 2007 and again for providing an update for Shiretoko as well as the files needed for anyone to do this on their own.
If you make your own Gecko reflow video, please paste a link to it in the comments of this post. Satoshi and other Mozilla developers and community members would be interested to see how Gecko reflows your website.