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 hop {
0% {
background-image:
radial-gradient(circle at calc(50% - 12vmin) calc(50% - 12vmin), blue 3vmin, #0000 0),
radial-gradient(circle at calc(50% + 12vmin) calc(50% + 12vmin), blue 3vmin, #0000 0);
}
100% {
background-image:
radial-gradient(circle at calc(50% - 12vmin) calc(50% + 12vmin), blue 3vmin, #0000 0),
radial-gradient(circle at calc(50% + 12vmin) calc(50% - 12vmin), blue 3vmin, #0000 0);
}
}
:root {
background:
radial-gradient(circle at calc(50% - 12vmin) calc(50% - 12vmin), blue 4vmin, #0000 0),
radial-gradient(circle at calc(50% + 12vmin) calc(50% + 12vmin), blue 4vmin, #0000 0);
background-color: #ccc;
min-height: 100vh;
padding: 0;
overflow: hidden;
animation: hop 1.25s linear infinite;
}
About This Illusion
This animation demonstrates how our minds infer motion that may not actually be there. Consider the two blue dots. Different people perceive different movements: side to side, top to bottom, or even circular motion.
Cover the right side of the animation so that you see only one dot at a time. The motion now appears vertical. Cover the bottom part instead, and the motion appears horizontal. This is our brain trying to complete the movement.
Try This
- Cover the right side of the animation so that you see only one dot at a time.
- Cover the bottom part instead, and the motion appears horizontal.