The letters of the text on this page are initially sorted alphabetically. Afterwards, sorting occurs and the letters eventually assume their appropriate final location.
To see it happen again, reload the page.
In HTML, pages ("documents") are represented using a tree of
nodes. Some of those nodes are Elements, such as the
<p> element, which defines a paragraph. Other nodes
are text nodes, which exist to display text.
By going recursively through each of the text nodes, it's possible to find all of the letters in the document. To make the animation nicer, whitespace characters like spaces and new lines are skipped using a regular expression. So, for the example above, the letters would be:
The above is the final ordering of letters. At this point, each letter's index within this order can be stored in memory—for example, the capital T should be at position 0. The letters can now be scrambled (or in this case, sorted) since the information about its final position is in memory.
Any ordering of letters can be displayed in the document, by distributing the letters in the text nodes, one-by-one. You can think of each text node as a container that can only hold a certain number of letters -- once it's filled, you move on to the next text node, placing the remaining letters there and repeating.
Given this method of laying out text across the page, the letters can be sorted back to their original location over time: in this case, using bubble sort. It's a very inefficient way of sorting, but serves well for showing the animation effect.
If you scroll down while the characters are still shifting around, you might notice that the length of the entire page changes. This happens because the line breaks and paragraph lengths vary, since the characters in a particular paragraph change over time. A paragraph containing mostly punctuation is shorter than a paragraph containing capital letters, even though there are the same number of characters.
You can try a version of this page with a monospace font to see this effect mostly go away.
You can find the source code on my >github page.
If you'd rather just run it on your website, you can copy and paste this snippet and run it once your page is loaded:
Made by Fil Zembowicz on a plane flight from Paris to New York. For more projects, check out filosophy.