The Beauty of Misalignment
The story behind The Moiré
Inspired by Moiré pattern on Wikipedia
Built with Canvas 2D · OffscreenCanvas
Techniques Additive Blending · Smooth Cursor Interpolation
Direction Visualize the emergent beauty of optical interference by overlapping two concentric circle patterns with real-time cursor tracking
Result A hypnotic interactive where moving your cursor shifts one pattern against another, creating pulsing moire waves that exist only in the space between
The Story
A moire pattern is a ghost.
Take two sets of concentric circles. Overlap them perfectly, center on center, and you see nothing unusual. Just circles.
But shift one slightly off-center, and something extraordinary happens. A new pattern emerges, waves and ripples that exist in neither set of circles alone. They pulse. They move. They seem to breathe.
This is interference. Where the lines of one pattern align with the gaps of another, light passes through. Where lines overlap lines, darkness compounds. The moire is the emergent structure of this interaction.
The effect appears everywhere: in silk fabrics when two layers shift, in printed halftones viewed at certain angles, in the barred windows of moving trains, in digital screens photographed by digital cameras. It is the universe’s way of showing us that combination creates something new.
The moire does not exist in either pattern. It exists only in the relationship between them.
The Take
We spend our lives seeking alignment.
We want our beliefs to match our actions. Our relationships to synchronize. Our inner selves to align with our outer presentation. When things line up, we feel harmony. When they drift, we feel dissonance.
But the moire suggests that perfect alignment is boring. Two identical patterns, perfectly overlaid, produce nothing new. It is the slight misalignment, the drift, the difference, that creates something worth seeing.
The most beautiful patterns in human experience might be the ones that exist only in the interference between two people. Not in either person alone, but in the space where they almost, but not quite, align.
Your relationship with another person is a moire. Neither of you alone produces the pattern. It emerges from your overlap, your interference, your subtle differences. Move away and the pattern fades. Move together perfectly and it disappears.
The beauty lives in the almost.
The Tech
The Moire is built with HTML5 Canvas 2D, using OffscreenCanvas caching and additive blending to create real-time interference patterns.
The implementation is deceptively simple:
- Two identical patterns: Concentric circles rendered at 8-pixel spacing (12px on mobile for performance), creating dense line sets
- One fixed, one follows: The first pattern is anchored at screen center. The second tracks your cursor with smooth interpolation (0.12 lerp factor)
- Cached rendering: The pattern is pre-rendered to an OffscreenCanvas (with fallback to regular canvas for Safari), avoiding expensive re-drawing every frame
- Additive blending:
ctx.globalCompositeOperation = 'lighter'causes overlapping white lines to become brighter, while gaps stay dark. This is what creates the moire effect - Performance optimization: Pixel ratio is capped at 2x (1.5x on mobile), and the cached pattern means only two image draws per frame instead of hundreds of arc() calls
- Smooth mouse following: The cursor position is interpolated to prevent jitter and create a flowing, organic movement
The magic is in the blending mode. Additive blending means that where both patterns have lines, the brightness adds together. Where one has a line and one has a gap, only one contributes. The emergent bands and waves are pure mathematics made visible.
The Experience
Move your cursor slowly across the screen.
Watch how the interference pattern responds. Waves ripple outward from the point of near-alignment. Dark bands expand and contract. The pattern seems to breathe in response to your movement.
Try different motions:
- Slow, small movements near the center create tight, detailed interference
- Large sweeping motions create dramatic waves that wash across the entire screen
- Holding still near center reveals the finest details of the moire
- Moving to the edges stretches the pattern into long, flowing bands
Notice that you never see the circles themselves clearly. Your attention is captured by the emergent pattern, the interference, the thing that exists only because two patterns are almost, but not quite, aligned.
Try to find the exact center, where both patterns align perfectly. You cannot hold it. The slightest tremor of your hand reintroduces the moire.
Perfect alignment is unstable. The beauty of misalignment is inevitable.
This blog post was AI generated with Claude Code. Authored by Artificial Noodles.