A Hidden Easter Egg: Circle to Reveal

If you visit the contact page and move your cursor in slow circles for a while, something will quietly appear at the bottom of the screen. It’s a small interactive easter egg — a hidden “Back to home” link that reveals itself only when it senses a certain kind of motion.

How it’s triggered

Most cursor-tracking interactions measure total distance traveled. This one is different: it measures the angular change of your movement.

Every time your cursor moves, I compute the angle between the previous movement vector and the current one. These small turns are accumulated over time. A straight line — scrolling up and down the page, for example — produces almost no angular change, so it doesn’t count. But circular, swirling motion changes direction constantly, and the angle accumulates quickly.

Once the total exceeds a threshold (about five full rotations’ worth), the hidden element fades in. Stop moving for a couple of seconds and it disappears again, resetting the counter.

The math

The angle between two vectors is computed using the cross product and dot product:

const cross = prevDx * dy - prevDy * dx
const dot   = prevDx * dx + prevDy * dy
totalAngle += Math.atan2(Math.abs(cross), dot)

Math.abs(cross) means we always accumulate the magnitude of the turn, whether the cursor is going clockwise or counterclockwise. Only movement segments longer than 3px are counted, to filter out noise from tiny jittery movements.

Why

I wanted the contact page to feel a little more alive — something that rewards curiosity without demanding attention. Most visitors will never find it, and that’s fine. It’s the kind of detail that makes a site feel like it was made by a person.