Motion Binding Illusion - CSS Optical Illusion

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.

Code Live Demo

Open fullscreen view

@keyframes spin {
  from {
    offset-distance: 0%;
    transform: rotate(0deg);
  }
  to {
    offset-distance: 100%;
    transform: rotate(-360deg);
  }
}

@property --color {
  syntax: '<color>';
  initial-value: #fff;
  inherits: true;
}

:root {
  --color: #fff;
  margin: 0;
  height: 100vh;
  transition: --color 1s;
  
  &:hover {
    --color: #1fb;
  }
}

:root::before {
  content: "";
  width: 30vmin;
  height: 30vmin;
  position: absolute;
  offset-path: circle(5vmin at center);
  animation: spin 2s linear infinite;
  transform: rotate(0deg);
  border: 1vmin solid blue;
}

:root::after {
  content: "";
  width: 50vmin;
  height: 50vmin;
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  background:
    conic-gradient(#0000 75%, var(--color) 0) 0 0 / 66.66% 66.66%;
}

About This Illusion

What do you see in this animation? Most people report two sets of lines operating independently: one moving horizontally and another moving vertically. And that is exactly how it looks.

In reality, it is a single shape moving uniformly. Run the demo, mouse over the lines, and the true motion will be revealed.

Try This

Mouse over the demo to see the illusion in action.