Motion Note: this illustration moves, and could cause dizziness, nausea, or headache in sensitive viewers. To view it click on the "Live Demo" button below. If you experience any discomfort, please stop viewing the illusion and consider taking a break.
@keyframes blink {
0% { background: #ddd; }
100% { background: #222; }
}
body {
margin: 0;
height: 100vh;
background: linear-gradient(90deg, #222 50%, #ddd 0) 0 100% / 100% 100% no-repeat;
&::before, &::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
translate: 10vmin -50%;
width: 20vmin;
aspect-ratio: 1;
background: #ddd;
animation: blink 0.5s linear alternate infinite;
}
&::after {
translate: calc(-100% - 10vmin) -50%;
}
}
About This Illusion
These dots always have the same color. However, when placed against alternating backgrounds, they appear to jump or move out of sync because of how they blend with their surroundings.
Mouse over the demo to remove the background and the illusion disappears.
Try This
- Mouse over the demo to see the illusion in action.