---
title: "Animated Grainy Beam — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Creativa Studio · Backgrounds. Gradient beams background with texture"
canonical: "https://framer.elliotli.dev/component/animated-grainy-beam"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/Animated Grainy Beam

# Animated Grainy Beam

Gradient beams background with texture

[View on Framer](https://framer.com/marketplace/components/animated-grainy-beam/?via=elliot-li)

![Animated Grainy Beam preview image 1](https://framer.elliotli.dev/og/component/animated-grainy-beam/a448991a07b9daed/1600x1200.jpg)

## Summary

Gradient beams background with texture

## Description

## 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.

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-dkofl8we-0r0R6XKgj1XdbLvEX3XHKLzzgQDbww)

### 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.

## Rank history [How rankings work →](/terms#rankings)

-   All · #8650

## Details

- **Author**: Creativa Studio
- **Price**: $5.00
- **Published**: 2026-02-07
- **Updated**: 2026-02-06
- **Added**: 2026-01-28
- **Categories**: Backgrounds

## More like this

-   [Pixel Flicker](/component/pixel-flicker) — Design Foundry · $10 — premium animated pixel background
-   [Fractal Glass Wave](/component/fractal-glass-wave) — Hienn Ng · $3 — Dynamic Fractal Glass Background
-   [Particle Flow Pro](/component/particle-flow-pro) — Interface Studio · $10 — Bring Your Background to Life
-   [Silk Gradient](/component/silk-gradient) — Kaisa A · Free — Silk Gradient Background