The animated Threads component renders flowing, noise-driven line patterns using custom WebGL shaders. These dynamic, thread-like visuals create a sense of organic motion and depth, perfect for interactive backgrounds or immersive hero sections.
You have full control over the appearance and behavior of the threads, including:
Wave Amplitude → Adjust the intensity of the wave distortion.
Spread → Control how far the threads are spaced vertically.
Count → Set the total number of lines.
Width → Define the thickness of each thread.
Animation Speed → Speed up or slow down the flowing motion.
Background Color → Change the background behind the threads.
Mouse Interaction → Enable cursor-based distortion for interactive effects.
⚠️ This component uses WebGL and will only run properly in Preview or Live in the browser (not in Framer’s static canvas).
Build by Upper Left Studio - a small design studio specializing in digital products and eCommerce (Shopify).
We help clients transform strategic vision into compelling digital products, seamlessly guiding each stage from initial concept to final launch. Have a question? hit us at: hello@upperleft.design
Cezary Ołowski
