LightBeam
High-performance React scroll animation powered by GSAP
npm install @stianlarsen/react-light-beamInteractive Demo
Controls maximum beam width (0-1)
Atmospheric Effects ✨
Scroll to see the animation in action
Why LightBeam?
⚡
High Performance
Powered by GSAP and ScrollTrigger. 40% faster frame times, 30% less CPU usage compared to alternatives.
🎨
Fully Customizable
CSS variables, custom colors, dark mode support. Complete control over appearance and behavior.
📦
Tiny Bundle
Only 31.7KB component code. GSAP as peer dependency keeps your bundle lean (43KB total gzipped).
Simple to Use
import { LightBeam } from "@stianlarsen/react-light-beam";
function App() {
return (
<div className="your-container">
<LightBeam
colorDarkmode="rgba(255, 255, 255, 0.8)"
colorLightmode="rgba(0, 0, 0, 0.2)"
fullWidth={0.8}
maskLightByProgress={true}
/>
<YourContent />
</div>
);
}