Shader Lines
Dynamic shader-based lines that flow with light and color—creating a mesmerizing, futuristic motion background powered by Three.js.
Make it with Workshop
Build your own component with AI
Dynamic shader-based lines that flow with light and color—creating a mesmerizing, futuristic motion background powered by Three.js.
Make it with Workshop
Build your own component with AI
ShaderLines is a captivating animated background built using custom GLSL shaders and Three.js. It generates a seamless field of glowing, wave-like lines that pulse and shift dynamically, evoking a futuristic data-stream or neural network aesthetic.
The shader responds to your configuration—adjust animation speed, mosaic density, and color intensity to fine-tune the rhythm and mood. Its subtle motion and procedural variation make it ideal for modern hero sections, interactive dashboards, or product pages that need visual depth without distraction.
Despite the visual complexity, ShaderLines is lightweight and GPU-optimized for smooth 60fps performance across modern devices. The effect feels alive yet balanced, blending science-fiction motion design with clean modern minimalism.
✨ Key Features
Custom GLSL Shader — Built entirely with Three.js and fragment shaders for precision motion.
Dynamic Motion Control — Adjust animation speed to match your project’s energy.
Mosaic Scaling — Fine-tune X and Y scales to create dense or minimal visual textures.
Color Intensity — Amplify or soften the glowing line effect.
Responsive & Lightweight — Automatically adapts to any layout and maintains smooth performance.
GPU Accelerated — Uses efficient WebGL rendering for high-quality playback.
💡 Use Cases
Hero or banner backgrounds for tech products
Modern portfolio or SaaS landing pages
Dashboard visual backdrops
Interactive visual art or motion experiments
Loading and transition screens
🎨 How to Use
Drag ShaderLines onto your Framer canvas.
Adjust Speed to control animation tempo.
Modify Mosaic (X/Y Scale) for visual density.
Set Color Intensity for glow strength.
Choose a Background Color that fits your theme.
ShaderLines adds a modern, cinematic atmosphere to any layout—perfect for creators who want subtle motion depth and a premium aesthetic powered by shader magic.
