These "dots appearing only while (not) focused" are known as "extinction illusions", namely
"25 - Appearing Dots"
is "McAnany's type" [1], and
"26 - Disappearing Dots"
is known as "Ninio's type" [2], according Akiyoshi Kitaoka's materials. (I have recreated them too few years ago [3][4], before getting to the source.)
This is cool, but more as a demonstration of interesting CSS techniques than optical illusions in my opinion.
Also, interestingly, I seem to be able to force myself to "see through" all of these illusions except for induced gradients, which I can't stop seeing unless I cover part of the screen.
I'll always be amazed at these sorts of optical illusions. For many, even when you stare at them and concentrate, you just can't get your brain to accept the reality.
The interactivity of these rather than a simple animations really bring home the fact that you can't trust your brain. Stare, tap, magic!
Having recently seen some clips of a red carpet award thing, I wonder if couture designers are using these illusions nearly as much as they could.
Because codepens can run javascript. And if a page has 50 of them, it might make the page load time much longer. I know that all these examples are pure CSS, and maybe there is a setting in codepen to disable the "Run" button and automatically run it. Still, getting to decide is generally a better pattern than presuming that that's what the user wants, especially when the fact that the code is inside a codepen makes it explicitly not an integral function of the page. "I thought this was just a blog, and now you want me to run all this javascript??" -- some JS hater, probably.
I appreciate getting to choose as much as possible when code runs.
[1] https://www.psy.ritsumei.ac.jp/akitaoka/kieru3e.html#:~:text...
[2] https://www.psy.ritsumei.ac.jp/akitaoka/kieru3e.html#:~:text...
[3] https://codepen.io/myf/full/XjdmJy ( scintillation warning)
[4] https://codepen.io/myf/full/jMqoMW ( scintillation warning)
Also, interestingly, I seem to be able to force myself to "see through" all of these illusions except for induced gradients, which I can't stop seeing unless I cover part of the screen.
The interactivity of these rather than a simple animations really bring home the fact that you can't trust your brain. Stare, tap, magic!
Having recently seen some clips of a red carpet award thing, I wonder if couture designers are using these illusions nearly as much as they could.
I appreciate getting to choose as much as possible when code runs.
I want to put some of them in my UIs.