Light Bloom BG

Light Bloom is an interactive WebGL background that creates atmospheric beams of light rising from the bottom of the screen. Procedural noise generates organic light formations, while cursor movement adds a subtle interactive glow for a more dynamic visual effect.

It includes ready-made color and animation presets, plus individual controls for creating your own visual style.

Preview

Light Bloom Background Preview

Great For

• Hero sections

• Landing pages

• Portfolio websites

• Creative agency websites

• SaaS websites

• Product launches

• Digital experiences

• Full-screen backgrounds

• Dark-mode designs

• Interactive visual sections

Features

• WebGL-powered light bloom

• Procedural animated light rays

• Cursor-reactive lighting

• 7 color presets

• 7 animation presets

• Custom color controls

• Adjustable glow intensity

• Adjustable wave density

• Adjustable animation speed

• Film-grain control

• Mouse sensitivity control

• Responsive canvas

• High-DPI support with capped rendering resolution

• Static-renderer support

• Automatic animation pausing when outside the viewport

• Page-visibility optimization

• WebGL context recovery

• Lightweight fullscreen shader architecture

Customize

Choose from Aurora, Violet, Ocean, Ember, Ice, Mono, or switch to Custom and create your own palette.

For animation, choose Slow, Smooth, Flow, Pulse, Cinematic, Static, or use Custom for individual control.

Custom controls include:

• Core Light controls the brightest part of the light.

• Bloom controls the main atmospheric light color.

• Background controls the base background.

• Glow Intensity controls the overall light strength.

• Wave Density controls the density of the light formations.

• Speed controls animation speed.

• Grain adds subtle texture.

• Mouse Sensitivity controls cursor interaction.

Support

Need help customizing the component or using it in your Framer project?

X: @karimsaif

Email: karimsaif010@gmail.com