Interactive moiré interference patterns that mess with your perception. Two overlapping geometric fields create mesmerizing optical illusions as you move your cursor.
- Two sets of identical geometric patterns are rendered with a slight offset from each other
- One field is centered on the screen, the other follows your cursor with smooth easing
- Where the patterns overlap, moiré interference creates emergent visual effects that don't exist in either layer alone
- Additive blending (
globalCompositeOperation: 'lighter') makes intersections glow - HSL color cycling based on distance creates rainbow ripple effects
- Scroll to change pattern density (spacing between elements)
- Circles — concentric rings radiating outward, classic moiré
- Lines — parallel lines with a slight angular offset, creates wave distortions
- Radial — rays emanating from center, one set slowly rotates
- Grid — dot matrix fields, creates mesmerizing aliasing patterns
- Move mouse/touch to shift the interference pattern
- Scroll to change pattern density
- Mode buttons to switch between pattern types
- Single self-contained HTML file, no build step
- Pure vanilla JS + Canvas 2D
- Dark theme (#0a0a0f), Inter font, mobile touch support
- ~140 lines