Building a sneaky glitch lens in Framer.

You land on this website, you see a name in giant letters, and you move your mouse over it. A little square shows up under your cursor. And inside that square, the name flips. White turns black. Black turns white. Like you’re holding a magnifying glass that shows the opposite of everything.

Then it starts glitching. On purpose.

That’s the lens. Nobody asked for it. It doesn’t sell anything. It doesn’t make the site faster. Like, it has zero business reason to exist.

I just wanted it.

Why though

Just me going “what if a text label did THAT?”

And here’s the thing I keep coming back to. If I can dream it, Claude can make it. So my whole job was to hold the picture in my head and keep describing it until the thing on screen matched.

Take one: a white square

The first version was a solid white square that followed my mouse around and sat on top of the text label. No flipped letters inside. Just a box.

Clean. Smooth. Kind of classy, actually.

Which lasted about a day, when my brain said “but what if it was LOUDER?”

Take two: break it nicely

I was looking for a vibrant, glitchy effect inside the square.

What came back made me type “this looks perfect, wow” and I meant every word.

Here’s what’s actually going on in there, in normal words.

Oh, and it flips with the theme. Dark site, white lens. Light site, black lens.

Who’s actually doing the work

You’d think the lens is some kind of filter. Like a real magnifying glass that looks at the pixels under it and flips them. It’s not. It’s a stack of copies and one sneaky trick.

The square is a little window. Inside the window there’s a whole second copy of my name, in the opposite colour. The window follows your mouse. And the copy inside it moves the exact opposite way, by the exact same amount. So the letters in the window always land right on top of the real letters.

It looks like the square is changing it. Really it’s just showing you a different one.

This is what’s making the whole thing work:

// The window follows the cursor. Anything outside it is cut off.
<motion.div style={{ x: sx, y: sy, overflow: "hidden", background: lensColor }}>
    {/* The copy inside moves the opposite way by the same amount,
        so its letters stay right on top of the real ones. */}
    <motion.div style={{ x: counterX, y: counterY }}>{text}</motion.div>
</motion.div>

// "The opposite way" is just this.
const counterX = useTransform(sx, (v) => -v)
const counterY = useTransform(sy, (v) => -v)

// The window follows the cursor. Anything outside it is cut off.
<motion.div style={{ x: sx, y: sy, overflow: "hidden", background: lensColor }}>
    {/* The copy inside moves the opposite way by the same amount,
        so its letters stay right on top of the real ones. */}
    <motion.div style={{ x: counterX, y: counterY }}>{text}</motion.div>
</motion.div>

// "The opposite way" is just this.
const counterX = useTransform(sx, (v) => -v)
const counterY = useTransform(sy, (v) => -v)

// The window follows the cursor. Anything outside it is cut off.
<motion.div style={{ x: sx, y: sy, overflow: "hidden", background: lensColor }}>
    {/* The copy inside moves the opposite way by the same amount,
        so its letters stay right on top of the real ones. */}
    <motion.div style={{ x: counterX, y: counterY }}>{text}</motion.div>
</motion.div>

// "The opposite way" is just this.
const counterX = useTransform(sx, (v) => -v)
const counterY = useTransform(sy, (v) => -v)

A web page gets to your screen in two steps. First your browser draws things, like printing each piece onto its own clear sheet. Then your GPU stacks those sheets and shows them to you.

Every copy of the text label gets drawn once. After that, almost nothing is redrawn. The GPU just slides the sheets around and trims them. Sliding a sheet is about the cheapest thing a screen can do. It’s the same reason scrolling feels smooth.

Same story for the glitch. About 14 times a second, the code picks new spots for the seven slices and the two ghosts, and the GPU slides them there.

Two more nice things came with that. The lens trails your mouse on a little spring, so it feels like it has weight. And if your device is set to reduce motion, the glitch switches itself off.

And then it got everywhere

I find one thing I love and suddenly I want it on everything.

For the buttons I had one rule. The label doesn’t move. The button behind it can fall apart all it wants, but you should still be able to read what you’re about to click.

Small things broke along the way too. Like the little “YOU” tag that rides along with my cursor. It got caught in the effect and flipped along with everything else. Funny, but no. It sits above it now.

So what did I learn

That the limit is mostly whether I can picture the thing clearly and then say it out loud. I didn’t write the code for any of this. I had a vision, I described it, I looked at what came back, and I said what was off. Over and over.

And it came out absolutely fantastic.

What’s next for it? No idea. I’ll figure it out as I go. For now, go wave your mouse over my name and see for yourself.