View the source

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 movement to your web pages. It’s kinda like the new random() function coming soon to CSS, but it’s got animation built in.

Now that’s a chaotic ball! You can see it’s not even a constant speed. It’s slowing down and speeding up all the time like it’s possessed by an evil ghost or something.

Here’s how you can create an effect like this on your own pages. First, add this script:

Then wrap the elements you want to animate in a <hotfx-pseudorandom> tag. If you open devtools now, you’ll see something like this is already happening:

That number going nuts is what we can use to build the animation. It’s a CSS variable with a unitless value that moves between 0 and 1 at 60 frames per second (or faster if you’re computer is fancy like that).

What can you do with a unitless value in CSS? Pretty much anything it turns out. In the bouncing ball demo, we’re moving it around and making it flash with this CSS:

transform: translate(
  calc(100vw * var(--hotfx-pseudorandom-1)),
  calc(60vh * var(--hotfx-pseudorandom-2))
);
opacity: calc(0.3 + 0.7 * var(--hotfx-pseudorandom-3));

The first calc() expression moves the ball from 0 to 100vw horizontally and the second moves it up and down. The opacity prop uses a floor of 0.3, so it’s always 30% visible and the variability is from 30% to 100%.

With this technique, you can make any number in your styles move around like crazy— or subtly change in a creepy, unpredictable way.

Now a brief interlude to watch some fireflies move through a dark forest.

The code behind that is very similar to the bouncing ball, just much nicer to look at.

You might have heard there’s a new random() function coming to CSS and it looks pretty rad. Our HotFX component is doing something entirely different, however, because it animates randomness. Let’s take a look at how it works.

What is Pseudorandom Anyway?

Most things that start with pseudo sound kinda dodgy, like pseudoscience, pseudocode or pseudonym. However, for the purposes of computer animation pseudorandom is often actually better.

The thing is, pseudorandom numbers are not actually random at all. 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.

The element uses pseudorandom numbers to make a type of value noise. A better name might have been <hotfx-noise> but I’ve got some plans for that one.

The numbers coming out of this value noise function have the following characteristics which make them extra handy.

• 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 next to each other, making for smooth animations.
• Chaotic: A small change in the seed value will produce a big change in the output.

Many of the coolest computer graphics are built using different types of noise, generated with different functions. We can graph our value noise function so you can see exactly what you’re getting with a given seed number. Drag that range slider to the right and watch how intense this thing can get.

How about another pretty demo to wash away some of that math? These gradients are random, or well, pseudo.

(Yes, your GPU is close to melting right now, but hey, at least it’s not blocking the main thread and janking your scroll. This mesmorizing demo is totally worth all those watts.)

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.

Roadmap

There are so many types of noise! I’m planning to add some more attributes to control the output for different vibes and settings. You could imagine an octave attribute to get some more roughness and detail on the movement.