New
New
New
Component
Shader Lines Component for Framer
This is a shader lines component for Framer, recreated from Ali Imam’s work originally featured on the 21st.dev website. Feel free to copy and paste it into your projects to add fully customizable animated shader lines to your websites and Framer templates.
Created by
About the resource
To use the component, start by toggling the animation on or off, when enabled, the shader lines will flow smoothly, and when disabled, they remain static. Adjust the speed property to control how fast the lines move, and use the band width setting to define how thick or thin each vertical band appears.
You can change the flow direction to either move from the center outward or from the edges inward, depending on the effect you want. The color mode lets you choose between a single color for a clean look or a three-color spectrum for a more vibrant gradient animation.
When using the single color mode, set your preferred line color. In spectrum mode, you can customize three different colors to create a rich, layered gradient effect. The background property lets you add a solid color behind the lines, or you can leave it transparent when using the alpha blend mode.
Finally, use the blend mode setting to control how the lines interact with the background: alpha for clean transparency or additive for a bright, glowing overlay that enhances the visual energy of your design.
About the resource
To use the component, start by toggling the animation on or off, when enabled, the shader lines will flow smoothly, and when disabled, they remain static. Adjust the speed property to control how fast the lines move, and use the band width setting to define how thick or thin each vertical band appears.
You can change the flow direction to either move from the center outward or from the edges inward, depending on the effect you want. The color mode lets you choose between a single color for a clean look or a three-color spectrum for a more vibrant gradient animation.
When using the single color mode, set your preferred line color. In spectrum mode, you can customize three different colors to create a rich, layered gradient effect. The background property lets you add a solid color behind the lines, or you can leave it transparent when using the alpha blend mode.
Finally, use the blend mode setting to control how the lines interact with the background: alpha for clean transparency or additive for a bright, glowing overlay that enhances the visual energy of your design.
About the resource
To use the component, start by toggling the animation on or off, when enabled, the shader lines will flow smoothly, and when disabled, they remain static. Adjust the speed property to control how fast the lines move, and use the band width setting to define how thick or thin each vertical band appears.
You can change the flow direction to either move from the center outward or from the edges inward, depending on the effect you want. The color mode lets you choose between a single color for a clean look or a three-color spectrum for a more vibrant gradient animation.
When using the single color mode, set your preferred line color. In spectrum mode, you can customize three different colors to create a rich, layered gradient effect. The background property lets you add a solid color behind the lines, or you can leave it transparent when using the alpha blend mode.
Finally, use the blend mode setting to control how the lines interact with the background: alpha for clean transparency or additive for a bright, glowing overlay that enhances the visual energy of your design.
The properties of the shader lines component in Framer.
The properties of the shader lines component in Framer.
The properties of the shader lines component in Framer.
