Animated Grainy Beam

Animated Grainy Beams Background

Enhance your Framer projects with elegant animated gradient beams that move smoothly across the screen. This premium background component blends fluid SVG path animations with a subtle grain overlay, delivering a modern, refined aesthetic that adds visual interest without distracting from your content.

Key Features:

• Smooth animated gradient beams with three-point color control (start, middle, end)

• Subtle grain texture overlay for added depth and visual richness

• Performance-optimized with a static preview in the Framer canvas

• Fully responsive and adapts seamlessly to all screen sizes

• Independent control over beam opacity, width, and animation speed

• Optional static background beams to enhance depth perception

• No external dependencies beyond Framer Motion

Customization Controls:

• Background Color – Set the base canvas color

• Beam Colors – Three-point gradient control

• Beam Opacity – Adjust animated beam visibility (0–1)

• Static Opacity – Control background beam intensity (0–0.2)

• Beam Width – Fine-tune stroke thickness (0.5–3px)

• Animation Speed – Control beam movement speed (0.1–3×)

• Grain Intensity – Adjust texture strength (0–0.2)

How to Use:

1. Drag the component onto your Framer canvas

2. Resize it to fit your layout (full-screen or section background)

3. Customize colors to match your brand

4. Adjust animation speed and beam settings

5. Layer your content on top for polished hero or feature sections

Ideal Use Cases:

• Hero sections and landing pages

• Product highlights and feature showcases

• Portfolio and agency websites

• SaaS product pages and dashboards

• Event, conference, and promotional sites

• Modern tech, startup, and creative studio websites

Grab it Today!

Upgrade your Framer designs with a polished animated background. Add this component to your project and create memorable first impressions that keep users engaged.