Tubelight is a shader-powered animated background component for Framer designed to add a subtle cinematic motion effect to modern websites.
The component renders a glowing line that sweeps across the canvas, creating a dynamic lighting effect that feels immersive while remaining lightweight and performant. Because the animation is powered by WebGL shaders, it runs smoothly and scales beautifully across screen sizes.
Tubelight is built as a flexible Framer component, allowing designers and developers to easily customize the visual style without touching any code.
• Speed – Controls the overall movement speed of the animation• Amplitude – Adjusts the width and sweep of the light arc• Line Color – Changes the color of the glowing light strip• Background Color – Adjusts the environment behind the shader
Best used for: Hero backgrounds, Landing pages, Portfolio websites, SaaS product pages, Section transitions, Event and campaign pages, Brand moments and interactive layouts
Tubelight is designed to be minimal, performant, and visually striking, helping designers add motion and atmosphere to their websites without complex animations.