Pseudorandom

Chaos on a web page sounds bad, but just the right amount can tie everything together, like adding a pinch of salt to your pancakes.

The hotfx-pseudorandom element brings random animations of any style property to your web pages. It’s like the forthcoming random() function coming to CSS, but as we shall see, kinda better.

Here’s how you can use this element on your own pages. First add this script:

Then wrap the elements you want to animate in a <hotfx-pseudorandom> tag and set a seed= attribute with a number you want to use as a seed (higher numbers make faster animations). The element then sets variables for you to use in your style rules, like opacity: var(--hotfx-pseudorandom-1).

What is Pseudorandom Anyway?

So, with the new random() function coming to CSS why would you need this custom element? Most things that start with pseudo sound bad or dodgy, like pseudoscience, pseudocode or pseudonym. But for the purposes of computer animation pseudorandomness is often better than truly random.

Well, pseudorandom numbers are not actually random. They appear random to us because they are long decimals that seem to come out of nowhere, but they have some interesting properties that truly random numbers don’t have.

• Deterministic: Given the same seed number, the pseudorandom numbers will be the same every time your page loads.
• Continuous: This means that as time advances, we can expect numbers that are
• Chaotic: A small change in the seed value will produce a big change in the output. This lets us

Perhaps the best way to see what this is all about is by looking at some demos.

How Does It Work?

This custom element uses a modified version of Value Noise to produce to calculate new numbers. You can see exactly what this looks like in the following graph:

To check out exactly how this works, you can read the source code. If you find any bugs or issues, please file an issue on GitHub.