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.
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
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)
Drag the component onto your Framer canvas
Resize it to fit your layout (full-screen or section background)
Customize colors to match your brand
Adjust animation speed and beam settings
Layer your content on top for polished hero or feature sections
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
Upgrade your Framer designs with a polished animated background. Add this component to your project and create memorable first impressions that keep users engaged.
Creativa Studio
