Procedural line art that responds to your scroll (don't read the text)
Playground | Use it as a library
The lines dance in rhythmic patterns, each vertex calculated from Sinusoidal waves layered in superposition. The distance parameter controls the spacing between consecutive points along each curve, while amplitude determines their maximum deviation from the baseline. Perspective adds subtle depth, making foreground lines appear larger than their distant counterparts.
By varying the number of colors and line thickness, we achieve different visual weights. Thinner lines create delicate, ethereal patterns, while thicker strokes convey bold geometric statements. The color count parameter interpolates between discrete hues, creating smooth gradients that shift as the animation progresses. This volumetric approach mimics how light interacts with layered transparent surfaces.
Easing functions govern both the geometric evolution and the animation timing. Bounce eases create sudden stops and rebounds, elastic eases introduce overshoot oscillations, and circular eases accelerate through the center of the curve. The animation duration spans from rapid flashes to languid driftings, each creating a distinct temporal rhythm that complements the underlying geometry.
Despite the apparent randomness, each frame is deterministically computed from mathematical functions. The intersection observer triggers animations when canvases enter the viewport, creating a cascading effect as you scroll. The threshold of 0.8 means animations begin when 80% of the canvas becomes visible, ensuring smooth transitions without premature reveals.