Explore a collection of classic optical illusions rendered entirely in your browser using HTML Canvas and CSS transforms. Browse the spinning disk, Hermann grid, Café wall, and rotating snakes illusions. Navigate with prev/next controls, read the science behind each illusion, and toggle animations on or off whenever you need a break.
使用方法
1The first illusion loads automatically — observe the effect.
2Click 'Next' or 'Prev' to cycle through the four illusions.
3Read the description below each illusion for the science explanation.
4Click 'Stop Animation' at any time to pause all animated effects.
常见问题
Optical illusions exploit the way the visual cortex processes edges, contrast, motion, and colour. The brain uses shortcuts (heuristics) to interpret visual data quickly, and illusions trick those shortcuts into producing false perceptions.
No. Optical illusions are completely safe and cause no lasting visual changes. If you feel dizzy or uncomfortable, simply click 'Stop Animation' to pause all movement.
The Hermann grid creates ghostly grey spots at the intersections of white lines on a black grid. The spots disappear when you look directly at them — caused by lateral inhibition in retinal ganglion cells.
The CSS rotate animation combined with a carefully chosen radial pattern creates a strong motion aftereffect. The contrasting colours and the rate of rotation amplify the perceived spinning.
{# Alpine.js — self-hosted. (The previous jsdelivr CDN tag had a stale SRI
integrity hash, so the browser refused to run it and window.Alpine was
never defined — silently breaking every FAQ accordion and Alpine tool.) #}