Why else would they keep them around for so long?

Why else would they keep them around for so long?

Every bug is dif­fer­ent. But the math is al­ways real.

Think our num­bers are wrong? Edit them your­self.

Users Affected × Frequency × Time Per Incident

How many Apple users hit this bug, how of­ten, and how long they suf­fer each time.

Σ (Workaround Time × Participation Rate)

The ex­tra time spent by peo­ple who try to fix what Apple won’t.

Years Unfixed × Pressure Factor

How long Apple has known about this and how ur­gent the task usu­ally is.

Human Hours Wasted ÷ Engineering Hours to Fix

How many times over Apple could have fixed it with the pro­duc­tiv­ity they’ve de­stroyed.

API Error: 400 {

“error”: {

“type”: “invalid_request_error”,

“message”:“This or­ga­ni­za­tion has been dis­abled.”

One minute I’m a €220/month “Max 20x” AI “power user” (is this even a thing?). The next, I am a dis­abled non-per­son “organization”.

Like a lot of my peers I was us­ing claude code CLI reg­u­larly and try­ing to un­der­stand how far I could go with it on my per­sonal pro­jects. Going wild, with ideas and ap­proaches to code I can now try and val­i­date at a very fast pace. Run it in­side tmux and let it do the work while I went on to do some­thing else.

Until in one of these ses­sions I got pre­sented with that re­sponse.

If you are au­tomat­ing prompts that look like sys­tem in­struc­tions (i.e. scaf­fold­ing con­text files, or us­ing Claude to find er­rors of an­other Claude and it­er­ate on its CLAUDE.md, or etc…), you are walk­ing on a mine­field.

My ac­count was banned! no warn­ing and no feed­back, just that mes­sage say­ing that my re­quest was in­valid be­cause I am a dis­abled or­ga­ni­za­tion.

I was­n’t even do­ing any­thing ground­break­ing, in fact, I was ask­ing it to tune a tool I use to do pro­ject scaf­fold­ing.

Yes you read that right: pro­ject scaf­fold­ing! Probably one of the most bor­ing things you can think of do­ing!

So I asked claude to up­date my scaf­fold­ing tool so that it would in­clude a CLAUDE.md file in there with baked in­struc­tions for a par­tic­u­lar home­made frame­work (cof

bore­DOM cof).

I was play­ing like a “human-in-the-loop” mid­dle­ware for these LLM tools. Like watch­ing one in­stance of Claude try to “boss around” an­other in­stance of it­self, and the plat­for­m’s se­cu­rity guards mis­took it for a riot.

To help un­der­stand this, there are three main char­ac­ters in this story:

* Claude A (an in­stance of claude in a tmux pane)

* Claude B (another in­stance in an­other tmux pane)

The loop was like this:

The dis­abled or­ga­ni­za­tion (me) asked Claude A to up­date the scaf­fold tool

with a cool CLAUDE.md

I went on and started a new pro­ject with the tool, opened a claude in there

(Claude B) and asked for a com­plex task to be done

Whenever Claude B made a mis­take, I would go to Claude A, paste the er­ror,

and say some­thing like “hey, Claude B made this er­ror”

Running two in­stances of claudes, while one up­dated the CLAUDE.md of an­other as it made mis­takes.

The loop re­peated un­til I was told I was a dis­abled or­ga­ni­za­tion.

I just wanted a stan­dard con­text file for new pro­jects.

At one point Claude A got some­what an­noyed with Claude B, and started shout­ting! writ­ting in en-US in­stead of en-GB, that is: ALL CAPS.

I went on to check the file, and it was get­ting lit­tered with these kind of in­struc­tions to make Claude B do some­thing in­stead of what it would try to do.

My guess is that this likely tripped the “Prompt Injection” heuris­tics that the non-dis­abled or­ga­ni­za­tion has.

I would love to see the face of that AI when it saw its own “system prompt” lan­guage be­ing echoed back to it.

Or I don’t know. This is all just a guess from me.

So I went run­ning to read their docs. What was go­ing on here?

Made an ap­peal, which was a link to a google docs form, with a textbox where I tried to con­vince some Claude C in the multi-tril­lion-quadrillion dol­lar non-dis­abled or­ga­ni­za­tion that I was not only a hu­man but also a well-in­tended one.

I got no re­ply. Not even an au­to­matic re­sponse. 0 comms.

So I wrote to their sup­port, this time I wrote the text with the help of an LLM from an­other non-dis­abled or­ga­ni­za­tion.

I got no re­ply. Not even an au­to­matic re­sponse.

And to won­der that peo­ple com­plain about civil ser­vants, eh, wait un­til you have to deal with one of these ex­pen­sive ma­chines!

After a cou­ple of days I got an e-mail:

Yes, the only e-mail I got was a credit note giv­ing my money back.

It’s like they’re say­ing “We don’t want to talk to you any­more, here is some hush money”. But hey guys, it is not a con­ver­sa­tion if it is one-way only, and here I am talk­ing to a wall.

I did­n’t even get to have a “It’s not you, it’s us.” I just got a credit note.

I’m glad this hap­pened with this par­tic­u­lar non-dis­abled-or­ga­ni­za­tion. Because if this by chance had hap­pened with the other non-dis­abled-or­ga­ni­za­tion that also pro­vides such tools… then I would be out of e-mail, pho­tos, doc­u­ments, and phone OS.

AI mod­er­a­tion is cur­rently a “black box” that pri­or­i­tizes safety over ac­cu­racy to an ex­treme de­gree.

If you are au­tomat­ing prompts that look like sys­tem in­struc­tions (i.e. scaf­fold­ing con­text files), you are walk­ing on a mine­field.

I got my €220 back (ouch that’s a lot of money for this kind of ser­vice, thanks cap­i­tal­ism). I have re­framed the whole scaf­fold­ing pro­ject, and re­verted all the code Claude did there.

Soon I will re-re­lease bore­DOM with a new an­gle and ap­proach, with­out the help of Claude. I am try­ing to turn it into a JS frame­work for LLMs (llm first, or even llm only, it now has no API). To pro­duce and it­er­ate on those sin­gle.html files that these tools are now bring­ing to the world.

If you want to take a look at the CLAUDE.md that Claude A was mak­ing Claude B run with, I com­mited it and it is avail­able

here.

Again to wrap this up: this whole post is just my hy­poth­e­sis. Claude was not do­ing any­thing other than it­er­at­ing on this file at the mo­ment I got the ban. And I haven’t heard from them about this any­more (or ever).

“you got to un­der­stand that these or­ga­ni­za­tions have a lot of users…”

Here are a few lines of sum­ma­rized tcp­dump out­put for an ssh ses­sion where I send a sin­gle key­stroke:

$ ./first_lines_of_pcap.sh sin­gle-key.pcap

1 0.000s CLIENT->SERVER 36 bytes

2 0.007s SERVER->CLIENT 564 bytes

3 0.015s CLIENT->SERVER 0 bytes

4 0.015s CLIENT->SERVER 36 bytes

5 0.015s SERVER->CLIENT 36 bytes

6 0.026s CLIENT->SERVER 0 bytes

7 0.036s CLIENT->SERVER 36 bytes

8 0.036s SERVER->CLIENT 36 bytes

9 0.046s CLIENT->SERVER 0 bytes

10 0.059s CLIENT->SERVER 36 bytes

I said a “few” be­cause there are a lot of these lines.

$ ./summarize_pcap.sh sin­gle-key.pcap

Total pack­ets: 270

36-byte msgs: 179 pack­ets ( 66.3%) 6444 bytes

Other data: 1 packet ( 0.4%) 564 bytes

TCP ACKs: 90 pack­ets ( 33.3%)

Data sent: 6444 bytes in 36-byte mes­sages, 564 bytes in other data

Ratio: 11.4x more data in 36-byte mes­sages than other data

Data packet rate: ~90 pack­ets/​sec­ond (avg 11.1 ms be­tween data pack­ets)

That is a lot of pack­ets for one key­press. What’s go­ing on here? Why do I care?

I am work­ing on a high-per­for­mance game that runs over ssh. The TUI for the game is cre­ated in bub­bletea 1 and sent over ssh via wish.

The game is played in an 80x60 win­dow that I up­date 10 times a sec­ond. I’m tar­get­ing at least 2,000 con­cur­rent play­ers, which means up­dat­ing ~100 mil­lion cells a sec­ond. I care about per­for­mance.

So I have a script that con­nects a few hun­dred bots over ssh and has them make a move a sec­ond. Then I use go’s out­stand­ing pro­fil­ing tools to look at what’s go­ing on.

Yesterday I in­ad­ver­tently broke my test har­ness. Instead of reg­u­larly send­ing game data, my server sent the bots a sin­gle mes­sage that said “your screen is too small.” This cut my game’s CPU and band­width us­age in half.

At first I was dis­ap­pointed. I (briefly) thought I had a free mas­sive speedup on my hands, but it was ac­tu­ally a test­ing er­ror.

If I was­n’t send­ing game data back to my bots, why did CPU us­age drop by 50% in­stead of 100%?

As part of de­bug­ging the test har­ness is­sue, I used tcp­dump to log game traf­fic with and with­out the break­ing change. Something like:

# The game runs on port 22

time­out 30s tcp­dump -i eth0 ‘port 22’ -w with-break­ing-change.pcap

# Revert change

time­out 30s tcp­dump -i eth0 ‘port 22’ -w with­out-break­ing-change.pcap

Our break­ing change stopped us from ren­der­ing our game over ssh. So with-break­ing-change.pcap con­tains pack­ets that rep­re­sent the over­head of each con­nec­tion with­out ac­tu­ally ren­der­ing the game.

I was de­bug­ging this with Claude Code, so I asked it to sum­ma­rize what it saw in the pcap.

Wanna take a look your­self? I put with-break­ing-change.pcap in this di­rec­tory

Wow! Here’s what I found:

Packet Size Distribution (413,703 to­tal pack­ets):

274,907 pack­ets (66%): Exactly 36 bytes

138,778 pack­ets (34%): 0 bytes (TCP ACKs)

18 pack­ets (

Further analy­sis on a smaller pcap pointed to these mys­te­ri­ous pack­ets ar­riv­ing ~20ms apart.

This was baf­fling to me (and to Claude Code). We kicked around sev­eral ideas like:

* Some quirk of bub­bletea or wish

One thing stood out - these ex­changes were ini­ti­ated by my ssh client (stock ssh in­stalled on MacOS) - not by my server.

On a hunch, I took a tcp­dump of a reg­u­lar ssh ses­sion.

# on my mac, in one tab

sudo tcp­dump -ien0 ‘port 22’

# on my mac, in an­other tab

ssh $some_vm_of_mine

I waited for the ini­tial con­nec­tion chat­ter to die down, sent one key­stroke to my re­mote vm, and looked at the tcp­dump out­put.

I saw the ex­act same pat­tern! What in the world?

Once I re­al­ized that this was a prop­erty of stock ssh and not my game, de­bug­ging got a lot eas­ier.

Running ssh -vvv gave me a pretty good sense of what was go­ing on:

de­bug3: ob­fus­cate_key­stroke_­tim­ing: start­ing: in­ter­val ~20ms

de­bug3: ob­fus­cate_key­stroke_­tim­ing: stop­ping: chaff time ex­pired (49 chaff pack­ets sent)

de­bug3: ob­fus­cate_key­stroke_­tim­ing: start­ing: in­ter­val ~20ms

de­bug3: ob­fus­cate_key­stroke_­tim­ing: stop­ping: chaff time ex­pired (101 chaff pack­ets sent)

That 20ms is a smok­ing gun - it lines up per­fectly with the mys­te­ri­ous pat­tern we saw ear­lier! And the rest of the mes­sage is pretty help­ful too - we sent 49 “chaff” pack­ets for the first key­stroke and 101 “chaff” for around the sec­ond one.

In 2023, ssh added key­stroke tim­ing ob­fus­ca­tion. The idea is that the speed at which you type dif­fer­ent let­ters be­trays some in­for­ma­tion about which let­ters you’re typ­ing. So ssh sends lots of “chaff” pack­ets along with your key­strokes to make it hard for an at­tacker to de­ter­mine when you’re ac­tu­ally en­ter­ing keys.

That makes a lot of sense for reg­u­lar ssh ses­sions, where pri­vacy is crit­i­cal. But it’s a lot of over­head for an open-to-the-whole-in­ter­net game where la­tency is crit­i­cal.

Keystroke ob­fus­ca­tion can be dis­abled client-side. After re­vert­ing my orig­i­nal break­ing change, I tried up­dat­ing my test har­ness to pass ObscureKeystrokeTiming=no when start­ing up ssh ses­sions.

This worked great. CPU us­age dropped dra­mat­i­cally and bots still re­ceived valid data.

But this is hardly a so­lu­tion in the real world. I want ssh mygame to Just Work with­out ask­ing users to pass op­tions that they might not un­der­stand.

Claude Code orig­i­nally did­n’t have much faith that we could dis­able this func­tion­al­ity server-side.

Fortunately, the de­scrip­tion I found of SSH key­stroke ob­fus­ca­tion made it easy to look up the rel­e­vant code in go’s ssh li­brary (which I was tran­si­tively de­pend­ing on).

Log mes­sage:

Introduce a trans­port-level ping fa­cil­ity

This adds a pair of SSH trans­port pro­to­col mes­sages SSH2_MSG_PING/PONG

to im­ple­ment a ping ca­pa­bil­ity. These mes­sages use num­bers in the “local

ex­ten­sions” num­ber space and are ad­ver­tised us­ing a “[email protected]”

ext-info mes­sage with a string ver­sion num­ber of “0”.

The “chaff” mes­sages that ssh uses to ob­scure key­strokes are SSH2_MSG_PING mes­sages. And they’re sent to servers that ad­ver­tise the avail­abil­ity of the [email protected] ex­ten­sion. What if we just…don’t ad­ver­tise [email protected]?

I searched go’s ssh li­brary for [email protected] and found the com­mit where sup­port was added. The com­mit was tiny and seemed very easy to re­vert.

I cloned the go crypto repo and told Claude to re­vert this change and up­date our de­pen­den­cies to use our clone (go’s re­place di­rec­tive makes fork­ing a li­brary very easy).

Then I re-ran my test har­ness. The re­sults were…very good:

Total CPU 29.90% -> 11.64%

Syscalls 3.10s -> 0.66s

Crypto 1.6s -> 0.11s

Bandwidth ~6.5 Mbit/sec -> ~3 Mbit/sec

Obviously fork­ing go’s crypto li­brary is a lit­tle scary, and I’m gonna have to do some think­ing about how to main­tain my lit­tle patch in a safe way.

But this is a huge im­prove­ment. I’ve spent much of the last week squeez­ing out small sin­gle-digit per­for­mance wins. A >50% drop was unimag­in­able to me.

I’ve been think­ing about whether LLMs re­move parts of the prob­lem-solv­ing process that I en­joy. But I’ve gotta say, de­bug­ging this prob­lem us­ing Claude Code was su­per fun.

I am fa­mil­iar enough with tcp­dump, tshark, and friends to know what they can do. But I don’t use them reg­u­larly enough to be fast with them. Being able to tell an agent “here’s a weird pcap - tell me what’s go­ing on” was re­ally lovely. And by watch­ing com­mands as the agent ran them I was able to keep my men­tal model of the prob­lem up to date.

There were still edge cases. At some point in my con­fu­sion I switched to ChatGPT and it very con­fi­dently told me that my tcp­dump out­put was nor­mal ssh be­hav­ior:

And then dou­bled down when I pushed back:

Similarly, I had to push Claude Code to con­sider fork­ing go’s ssh li­brary. And I had to make the orig­i­nal leap of “wait…if our test har­ness was bro­ken, why was us­age not 0%?”

When you say “LLMs did not fully solve this prob­lem” some peo­ple tend to re­spond with “you’re hold­ing it wrong!”

I think they’re some­times right! Interacting with LLMs is a new skill, and it feels pretty weird if you’re used to writ­ing soft­ware like it’s 2020. A more tal­ented user of LLMs may have triv­ially solved this prob­lem.

But the best way to de­velop a skill is by prac­tic­ing it. And for me, that means fig­ur­ing out how to trans­fer my prob­lem-solv­ing in­tu­itions to the tools that I’m us­ing.

Besides. Being in the loop is fun. How else would I write this post?

To see all avail­able qual­i­fiers, see our doc­u­men­ta­tion.

We read every piece of feed­back, and take your in­put very se­ri­ously.

Secure your code as you build

To see all avail­able qual­i­fiers, see our doc­u­men­ta­tion.

We read every piece of feed­back, and take your in­put very se­ri­ously.

Secure your code as you build

You signed in with an­other tab or win­dow. Reload to re­fresh your ses­sion.

You signed out in an­other tab or win­dow. Reload to re­fresh your ses­sion.

You switched ac­counts on an­other tab or win­dow. Reload to re­fresh your ses­sion.

On Jan 14th Proton sent out an email newslet­ter with the sub­ject line:

Introducing Projects - Try Lumo’s pow­er­ful new fea­ture now

There is a prob­lem with this email. And I’m not talk­ing about the ques­tion of how ex­actly AI aligns with Proton’s core val­ues of pri­vacy and se­cu­rity.

The prob­lem is I had al­ready ex­plic­itly opted out of Lumo emails.

That tog­gle for “Lumo prod­uct up­dates” is unchecked. Lumo is the only topic I’m not sub­scribed to. Proton has over a dozen newslet­ters, in­clud­ing some crypto non­sense. I opt-in to every­thing but Lumo, I gave an un­de­ni­able no to Lumo emails.

So the email I re­ceived from Proton is spam, right?

My un­der­stand­ing is that spam is a vi­o­la­tion of GDPR and UK data pro­tec­tion laws. Regardless, Proton’s email is a clear abuse of their own ser­vice to­wards a pay­ing busi­ness cus­tomer.

Despite the sub­ject line and con­tents, and de­spite the “From Lumo” name and @lumo.proton.me ad­dress, maybe this was an hon­est mis­take?

Proton’s first re­ply ex­plained how to opt-out.

Thank you for con­tact­ing us. You can un­sub­scribe from the newslet­ters if you do the fol­low­ing:- Log in to your ac­count at https://​ac­count.pro­ton­vpn.com/​lo­gin- If you need ad­di­tional as­sis­tance, let me know.[screen­shot of the same opt-out tog­gle]

John Support di­rects me to the ex­act same “Lumo prod­uct up­dates” tog­gle I had al­ready unchecked. I replied ex­plain­ing that I had al­ready opted out. Support replies say­ing they’re “checking this with the team” then later replies again ask­ing for screen­shots.

Can you make sure to send me a screen­shot of this newslet­ter op­tion dis­abled, as well as the date when the last mes­sage was sent to you re­gard­ing the Lumo of­fer?You can send me a screen­shot of the whole mes­sage, in­clud­ing the date. Is it per­haps 14 January 2026 that you re­ceived the mes­sage?

I found that last line cu­ri­ous, are they deal­ing with other un­happy cus­tomers? Maybe I’m read­ing too much into it.

I sent the screen­shots and signed off with “Don’t try to pre­tend this fits into an­other newslet­ter cat­e­gory.”

After more “checking this with the team” I got a re­sponse to­day.

In this case, the men­tioned newslet­ter is for pro­mot­ing Lumo Business Suit to Business-related plans. Hence, why you re­ceived it, as Product Updates and Email Subscription are two dif­fer­ent things.In the sub­scrip­tion sec­tion, you will see the “Email Subscription” cat­e­gory, where you can dis­able the newslet­ter in or­der to avoid get­ting it in the fu­ture.

If I un­der­stand cor­rectly, Proton are claim­ing this email is the “Proton for Business newslet­ter”. Not the “Lumo prod­uct up­dates” newslet­ter.

I don’t know about you, but I think that’s baloney. Proton Support had five full busi­ness days to come up with a bet­ter ex­cuse. Please tell me, how can I have been any more ex­plicit about opt­ing out of Lumo emails, only to re­ceive “Try Lumo” “From Lumo”, and be told that is not ac­tu­ally a Lumo email?

Has any­one else no­ticed that the AI in­dus­try can’t take “no” for an an­swer? AI is be­ing force-fed into every cor­ner of tech. It’s un­fath­omable to them that some of us aren’t in­ter­ested.

The en­tire AI in­dus­try is built upon a com­mon prin­ci­ple of non-con­sent. They laugh in the face of IP and copy­right law. AI bots DDoS web­sites and lie about user-agents. Can it get worse than the sick­en­ing ac­tions of Grok? I dread to think.

As Proton has demon­strated above, and Mozilla/Firefox re­cently too, the AI in­dus­try sim­ply will not ac­cept “no” as an an­swer. Some ex­am­ples like spam are more triv­ial than oth­ers, but the grow­ing trend is vile and dis­turb­ing.

I do not want your AI.

I guess some­one at Microsoft read my post and said “hold my beer”. This morn­ing I woke up to a lovely gift in my in­box; “Build Al agents with the new GitHub Copilot SDK”.

GitHub Ensloppification is mov­ing faster than I can delete my ac­count for good. (It’s an un­for­tu­nate re­quire­ment for client pro­jects.) For the record, I have never said “yes” to any GitHub newslet­ter. Even be­fore Copilot I dis­abled every pos­si­ble GitHub email no­ti­fi­ca­tion.

The “Unsubscribe” link pro­vides the hid­den newslet­ter list. There is noth­ing within GitHub ac­count set­tings I can find to dis­able spam.

As ex­pected, Microsoft has opted me in with­out my con­sent. The wheels are falling off at GitHub. The bru­tally slow front-end UI. The em­bar­rass­ingly lack­lus­tre Actions CI. Now this sloppy tripe every­where. Reminder to de­vel­op­ers: GitHub is not Git.

Currently, Gemini CLI re­stricts IDE in­te­gra­tion fea­tures to en­vi­ron­ments where TERM_PROGRAM is vs­code (or other hard­coded val­ues). This forces 3rd-party in­te­gra­tions like jet­brains-ide-com­pan­ion to mock VS Code by spoof­ing en­vi­ron­ment vari­ables to en­able core fea­tures, oth­er­wise it could not be dis­cov­ered by Gemini CLI.

For some rea­son, the process de­tec­tion is not work­ing prop­erly on win­dows/​linux (, re­ported by users here JetBrains Plugin Review and here #9273 , and a few other bug re­port email i’ve re­ceived), which mak­ing this na­tive IDE de­tec­tion logic a MUST do for gem­ini-cli dis­cover and con­nect to IDE via en­vi­ron­men­tal vari­ables in­stead of port info file.

This PR adds JetBrains IDE Series to the IDE_DEFINITIONS and up­dates the de­tec­tion logic to rec­og­nize TERMINAL_EMULATOR=JetBrains-JediTerm as a first-class sup­ported en­vi­ron­ment.

You can find a col­lec­tion with all the op­ti­cal il­lu­sions in this ar­ti­cle (and more!) on CodePen. You can move your mouse over many of the demos be­low to re­veal the ef­fect or stop the an­i­ma­tions.

The Poggendorff il­lu­sion is an op­ti­cal il­lu­sion in which a di­ag­o­nal line in­ter­rupted by a ver­ti­cal bar ap­pears mis­aligned, even when both seg­ments are ac­tu­ally con­tin­u­ous.

A sim­ple ver­sion of this ef­fect can be seen in the fol­low­ing demo. I used the ::be­fore and ::af­ter pseudo-el­e­ments to cre­ate the di­ag­o­nal line and the ver­ti­cal bar, re­spec­tively.

The ef­fect can also be seen in a more elab­o­rate ver­sion with mul­ti­ple di­ag­o­nal lines and ver­ti­cal bars:

This draw­ing can eas­ily be achieved us­ing two CSS gra­di­ents: one tilted at 70 de­grees and an­other con­sist­ing of a se­ries of ver­ti­cal columns. I ap­plied it to the body, al­though I could have used :root in­stead.

Another vari­a­tion of this il­lu­sion is the Münsterberg Poggendorff Arch, in which the two sides of an arch ap­pear mis­aligned and seem as though they will not meet at the top - but they do (mouse over to see it).

The fol­low­ing il­lu­sions com­bine gra­di­ents and flat col­ors. Surprisingly, some of the gra­di­ents do not ac­tu­ally ex­ist. They are sim­ple gray bars that, when placed over a gra­di­ent, ap­pear to have gra­di­ents them­selves.

Take the fol­low­ing demo: all three bars (two ver­ti­cal ones on the sides and one hor­i­zon­tal bar in the cen­ter) are the same shade of gray. The only real gra­di­ent is be­hind them, which tricks our brain into be­liev­ing that the bars are dif­fer­ent col­ors and even con­tain gra­di­ents.

Here is an­other vari­a­tion of this ef­fect. It looks like the cen­tral line has a re­peat­ing gra­di­ent of dark and light grays, but in re­al­ity it is a flat color. If you mouse over the demo, the bar will ex­pand, mak­ing it clear that there is no gra­di­ent at all.

The next few op­ti­cal il­lu­sions share a com­mon idea: some col­ors are iden­ti­cal, but they do not look the same. This typ­i­cally hap­pens when re­gions of the same color or bright­ness are sur­rounded by ar­eas with dif­fer­ent con­trast.

For ex­am­ple, in the fol­low­ing demo, the left and right ends are the same shade of gray. However, one looks lighter be­cause it is closer to white, while the other looks darker be­cause it is closer to black. Mouse over to re­veal that they are, in fact, the same color.

Run the fol­low­ing demo. You will see two gray columns in a black-and-white grid. Both columns are the same shade of gray, but the one sur­rounded by black ap­pears darker than the one sur­rounded by white.

I coded this demo us­ing mix-blend-mode so I could try some­thing a bit dif­fer­ent. That worked well, but it also made it harder to show­case the ef­fect on hover. In hind­sight, I should have planned that bet­ter.

This op­ti­cal il­lu­sion also works with col­ors. For ex­am­ple, these two squares ap­pear to be dif­fer­ent shades of blue, but they are the same color. This time, you can mouse over to re­veal the ef­fect:

The ring in the fol­low­ing il­lus­tra­tion has the same color all the way around. However, one side is placed over white and the other over black, which makes them look dif­fer­ent. If you mouse over the demo, the red bar will dis­ap­pear, mak­ing it more ob­vi­ous that the ring is a sin­gle, uni­form color.

You have prob­a­bly seen the il­lu­sion in­volv­ing a checker­board and an ob­ject cast­ing a shadow, where two tiles - one seem­ingly light and one seem­ingly dark - turn out to be the same color.

This demo fol­lows the same prin­ci­ple. You will see two tiles la­beled A and B. Both have the same shade of gray, but most peo­ple can­not tell at first glance (or sec­ond, or even third).

The cir­cle at the cen­ter of this flower-shaped el­e­ment is the same white as the rest of the page, but it gives the im­pres­sion of be­ing brighter, as if it were emit­ting light.

This is one of my fa­vorite il­lu­sions in the col­lec­tion. The cir­cles (or spheres) look red, blue, or green, but in re­al­ity they are all the same gray­ish color. Our brain “colorizes” them based on the lines that over­lap the shapes. Don’t be­lieve it? Mouse over the il­lus­tra­tion.

In the fol­low­ing il­lus­tra­tion, the lines in­side the yel­low sec­tion ap­pear blue, while the lines in­side the blue sec­tion ap­pear red… but they are all black (or very dark gray). The white con­tour cre­ates the il­lu­sion of color. Mouse over to re­move the con­tour and the lines will clearly ap­pear black.

One set of lines looks straighter (top) while the other looks more curved (bottom). In re­al­ity, both sets are equally wavy. The only dif­fer­ence is how they are col­ored: chang­ing the color at the peaks makes the lines look straighter. Changing it at the in­flec­tion points makes them look more curved.

The CSS code for the wavy lines is adapted from a Temani Afif snip­pet on CSS-Tricks and his wavy shape gen­er­a­tor.

This is a clas­sic op­ti­cal il­lu­sion and an easy one to code in CSS. Three gra­di­ents are all that is needed to gen­er­ate the ef­fect in which the hor­i­zon­tal lines ap­pear slanted, even though they are per­fectly par­al­lel.

This op­ti­cal il­lu­sion de­picts an im­pos­si­ble shape. Parts that should be in front ap­pear in the back, top be­comes right, and every­thing feels con­tra­dic­tory. I coded this one some time ago for the 2024 Divtober event.

Which or­ange cir­cle is larger: the one on the right or the one on the left? It is a trick ques­tion: both are the same size. However, hav­ing smaller sur­round­ing el­e­ments gives the im­pres­sion that one is larger.

I also cre­ated an an­i­mated ver­sion of this il­lu­sion (see be­low), as well as an­other ver­sion us­ing a square shape in­stead of a flower shape:

When peo­ple look at this il­lus­tra­tion, they usu­ally say they see a white square over black cir­cles. However, the square is not ac­tu­ally there. The “Pac-Man” shapes cre­ate the il­lu­sion of a square and a sense of depth. Our brain fills in the miss­ing in­for­ma­tion.

There are no cir­cles or discs in this il­lus­tra­tion, only ver­ti­cal and hor­i­zon­tal lines form­ing crosses. Our vi­sual sys­tem com­pletes the shape and makes us per­ceive a disc that does not ex­ist.

This il­lus­tra­tion shows con­cen­tric cir­cles, some of which have a green-and-black pat­tern. Our brain per­ceives a cen­tral pat­terned cir­cle and four con­cen­tric cir­cles around it, be­neath the green cir­cle.

I cheated a lit­tle when cre­at­ing this in CSS, as I ac­tu­ally used a green cir­cle blended with the other back­grounds.

Perspective-based il­lu­sions are fas­ci­nat­ing. Even when we know we are look­ing at a flat im­age, our brain in­sists on in­ter­pret­ing depth.

In the Hering il­lu­sion, the red lines ap­pear to curve out­ward, even though they are straight.

The op­po­site ef­fect is the Wundt il­lu­sion. When the lines ex­pand from the sides to­ward the cen­ter, the red lines ap­pear to curve in­ward (this ef­fect is more sub­tle).

Both yel­low lines are the same length, but the top one looks longer due to per­ceived depth and per­spec­tive. I tried a dif­fer­ent ap­proach when cod­ing this one by ap­ply­ing a three-di­men­sional ro­ta­tion in CSS… so the per­spec­tive is tech­ni­cally real.

This il­lu­sion is easy to code in CSS and easy to fall for. Both the ver­ti­cal and hor­i­zon­tal lines are the same length, but the ver­ti­cal line ap­pears longer.

A clas­sic il­lu­sion: the hor­i­zon­tal lines are the same length, but in­ward- or out­ward-point­ing edges dra­mat­i­cally change how we per­ceive them. I could swear the top one is longer. But it is not.

From a cod­ing per­spec­tive, each shape is a pseudo-el­e­ment. I en­sured the hor­i­zon­tal lines were iden­ti­cal by us­ing the same gra­di­ents and only repo­si­tion­ing the edges in the ::be­fore and ::af­ter.

It looks like the top rec­tan­gle is lean­ing to the left, but it is ac­tu­ally par­al­lel to the one at the bot­tom. The trick lies in the di­rec­tion of the di­ag­o­nal lines used to “color” each rec­tan­gle.

This il­lu­sion works bet­ter on larger screens. The ef­fect is di­min­ished when you can see the whole pic­ture.

This is a sim­ple ef­fect: the black lines are par­al­lel, but they ap­pear not to be be­cause of the di­rec­tion of the bars cross­ing them.

I slightly over­com­pli­cated this one while cod­ing it. I ini­tially built the black-and-red ver­sion be­low and tried to reuse more code than I prob­a­bly should have.

Here is the orig­i­nal ver­sion I cre­ated. The ef­fect is also vis­i­ble there:

Good news! There are more op­ti­cal il­lu­sions be­low - but first, a warn­ing.

ATTENTION: The fol­low­ing op­ti­cal il­lu­sions are sta­tic, but they give the im­pres­sion of move­ment. Proceed ac­cord­ingly.

This is a trippy op­ti­cal il­lu­sion. It is com­pletely sta­tic, yet it looks like the black hole at the cen­ter is ex­pand­ing - es­pe­cially when you are not look­ing at it di­rectly, cre­at­ing the sen­sa­tion of falling into a pit.

From a cod­ing per­spec­tive, this one was very sim­ple: a back­ground pat­tern made with two ra­dial gra­di­ents, plus a blurred pseudo-el­e­ment for the “expanding” hole.

This is one of only two op­ti­cal il­lu­sions in this col­lec­tion where I used HTML el­e­ments in­stead of re­ly­ing ex­clu­sively on CSS. It is a clas­sic ef­fect: when you look at the il­lus­tra­tion, the pe­riph­eral discs ap­pear to ro­tate, even though noth­ing is ac­tu­ally mov­ing.

Another clas­sic il­lu­sion. Focus on the white dots and the ad­ja­cent dots will ap­pear to turn black. There is no an­i­ma­tion, no tran­si­tion, and noth­ing dy­namic. Just in­ter­sect­ing lines and small white cir­cles, yet it looks like mo­tion.

This pat­tern con­sists of re­peat­ing black and white dots across the page. If you fo­cus on one dot, the oth­ers will be­gin to dis­ap­pear. At first it may hap­pen by row or col­umn, but af­ter a short while, most of them van­ish.

If you do not im­me­di­ately see the ef­fect, try fo­cus­ing on one black dot. Mouse over it, wait a few sec­onds while keep­ing your fo­cus, and then mouse out.

This is a sta­tic im­age, but it gives the im­pres­sion that the pat­tern in­side the cir­cle is mov­ing side­ways. This hap­pens be­cause our eyes are con­stantly mak­ing small move­ments, even when we are not aware of it.

If you can­not see the il­lu­sion, try slightly mov­ing the screen (or your head) while look­ing just out­side the cir­cle.

When you look around this pat­tern, the cen­tral area ap­pears to slide and sway, even though it is com­pletely sta­tic. This il­lu­sion makes me dizzy… but that may also be be­cause I had to stare at it for a long time while cod­ing it.

This il­lu­sion is par­tic­u­larly in­ter­est­ing. There is a pink cir­cle sur­rounded by con­cen­tric pink and pur­ple rings. If you fo­cus on the pink cir­cle, the rings ap­pear to spin or scin­til­late, as if there were some ac­tiv­ity in them. Of course, noth­ing is ac­tu­ally mov­ing.

This demo was chal­leng­ing to code and takes a long time to load. Mainly be­cause it uses a large num­ber of conic gra­di­ents be­hind the scenes, which browsers strug­gle to ren­der ef­fi­ciently. There is prob­a­bly a bet­ter way to im­ple­ment it, but I have not ex­plored that yet.

If you look closely at the il­lus­tra­tion, you may no­tice wave-like mo­tion. As with the pre­vi­ous il­lu­sions in this sec­tion, the im­age is en­tirely sta­tic.

Good news! There are more op­ti­cal il­lu­sions be­low - but first, an­other warn­ing.

ATTENTION: The fol­low­ing op­ti­cal il­lu­sions ac­tu­ally move, and the il­lu­sion is cre­ated by mo­tion it­self. Some of them can be dizzy­ing, so pro­ceed ac­cord­ingly.

Earlier, we saw two sta­tic ver­sions of the Ebbinghaus il­lu­sion. This one is an­i­mated. The el­e­ments move side to side, and the sur­round­ing shapes grow and shrink, giv­ing the im­pres­sion that the or­ange cir­cle is chang­ing size - when it def­i­nitely is not.

This looks like a three-di­men­sional tower spin­ning in space, as seen from above. In re­al­ity, it is a flat, two-di­men­sional im­age ro­tat­ing.

Mouse over the demo to stop the ro­ta­tion and the il­lu­sion of depth dis­ap­pears en­tirely.

This op­ti­cal il­lu­sion re­quires only two gra­di­ents: a conic gra­di­ent for the fan-shaped arms and a ra­dial gra­di­ent for the cir­cles and discs.

If you fo­cus on the black dot, the il­lus­tra­tion may ap­pear to de­velop a darker green­ish or brown­ish bor­der. However, the col­ors never change.

This il­lu­sion is de­light­ful and dis­ori­ent­ing. While the back­ground col­ors of the wheel are spin­ning, the spokes re­main fixed. However, they ap­pear to ro­tate in the op­po­site di­rec­tion. In re­al­ity, only the back­ground is mov­ing.

What do you see in this an­i­ma­tion? Most peo­ple re­port two sets of lines op­er­at­ing in­de­pen­dently: one mov­ing hor­i­zon­tally and an­other mov­ing ver­ti­cally. And that is ex­actly how it looks.

In re­al­ity, it is a sin­gle shape mov­ing uni­formly. Run the demo, mouse over the lines, and the true mo­tion will be re­vealed.

Focus on one of the red dots. You will no­tice it moves straight up and down along a ver­ti­cal path. Now shift your fo­cus to one of the black crosses in the cen­ter. Suddenly, the red dots ap­pear to zigzag in­stead of mov­ing straight.

The CSS code for the wavy lines is adapted from a Temani Afif snip­pet on CSS-Tricks and his wavy shape gen­er­a­tor.

It may look like the boxes are mov­ing at dif­fer­ent speeds or like a set of walk­ing feet. In re­al­ity, all el­e­ments move at the same pace and in par­al­lel. Mouse over the demo to re­veal the ef­fect.

The il­lu­sion also works when the “feet” move in cir­cles, as shown in this al­ter­na­tive ver­sion:

Follow the red dot as it moves side­ways. From the cor­ner of your vi­sion, it may ap­pear that the dashed black-and-white lines are mov­ing closer to­gether (when the dot moves left) or far­ther apart (when it moves right). In re­al­ity, the lines are com­pletely sta­tic.

These dots al­ways have the same color. However, when placed against al­ter­nat­ing back­grounds, they ap­pear to jump or move out of sync be­cause of how they blend with their sur­round­ings.

Mouse over the demo to re­move the back­ground and the il­lu­sion dis­ap­pears.

This il­lu­sion gives the im­pres­sion that a blue square is grow­ing and shrink­ing rhyth­mi­cally, al­most as if it were breath­ing or beat­ing like a heart.

Although the im­age is ro­tat­ing, its size never changes. Mouse over the il­lus­tra­tion to re­move the green boxes and re­veal the ro­tat­ing blue square.

This il­lus­tra­tion shows a cir­cle made of pink dots, with one dot miss­ing. Focus on the cross at the cen­ter and the miss­ing dot will ap­pear as a yel­low or green dot, giv­ing the im­pres­sion that it is “eating” the pink dots. Just like Pac-Man.

I could have used CSS trigono­met­ric func­tions to cal­cu­late the ex­act po­si­tions of the dots, but since they never change, I chose to hard­code the val­ues in­stead.

Here is a re­lated ef­fect. Follow the light gray cir­cle as it spins, and the darker cir­cles will ap­pear to change from gray to green­ish. Focus on the cross at the cen­ter, and af­ter a short time, the darker cir­cles may be­gin to fade en­tirely.

This il­lu­sion is par­tic­u­larly dizzy­ing. Follow the bluish dot as it moves from right to left and back again. It will ap­pear as though parts of the tiled back­ground are shift­ing, even though they are sta­tic. The only mov­ing el­e­ment is the dot.

From a CSS per­spec­tive, I coded the pat­tern us­ing conic gra­di­ents, and ap­plied it to the ::be­fore and ::af­ter pseudo-el­e­ments. I then flipped one up­side down and clipped it.

The radii of a wheel, when viewed through a pal­isade, ap­pear to curve. In re­al­ity, they are per­fectly straight. Mouse over the demo to re­move the pal­isade and you will see that the radii never bend.

This an­i­ma­tion demon­strates how our minds in­fer mo­tion that may not ac­tu­ally be there. Consider the two blue dots. Different peo­ple per­ceive dif­fer­ent move­ments: side to side, top to bot­tom, or even cir­cu­lar mo­tion.

Cover the right side of the an­i­ma­tion so that you see only one dot at a time. The mo­tion now ap­pears ver­ti­cal. Cover the bot­tom part in­stead, and the mo­tion ap­pears hor­i­zon­tal. This is our brain try­ing to com­plete the move­ment.

These two il­lus­tra­tions are iden­ti­cal - same shapes, same an­i­ma­tion. The only dif­fer­ence is the CSS tim­ing func­tion.

The top an­i­ma­tion moves smoothly from right to left. The bot­tom one ap­pears to move chop­pily in the same di­rec­tion, but if you fo­cus on it, it may sud­denly seem to re­verse di­rec­tion and move faster.

Most of the in­spi­ra­tion for these op­ti­cal il­lu­sions came from two ex­cel­lent re­sources:

You can also find this ar­ti­cle on:

(You can leave com­ments on those plat­forms and I will re­ply there).