5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:Ta4d,

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:

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

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.

5a:[["$","$L5d",null,{"post":{"id":"019c3700-963b-7e09-b54c-72a59dbe4435","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"2c5f95ef-4f5f-4aa7-b151-21f07e16c5cf","name":"Creativa Studio","slug":"creativa","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/857517/avatar-yHnk3Xc3hC2mIwD9TNxRyUcfa7qJ8E.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"98OvQo01Y9b09c73OYPy","resolved":true,"title":"Animated Grainy Beam","body":"$5e","bodyJson":null,"introduction":"Gradient beams background with texture","slug":"animated-grainy-beam","author":{"framerUserId":"2c5f95ef-4f5f-4aa7-b151-21f07e16c5cf","name":"Creativa Studio","slug":"creativa","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/857517/avatar-yHnk3Xc3hC2mIwD9TNxRyUcfa7qJ8E.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/98OvQo01Y9b09c73OYPy/animated-grainy-beam-aTwskQaNWhp66oH3TdGnCfSE8vEZbQ","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-01-28T09:44:00.564Z","updatedAt":"2026-02-06T20:31:44.846Z","publishedAt":"2026-02-07T07:28:31.291Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://animated-grainy-beam.framer.website/","price":"5","paymentUrl":"https://buy.polar.sh/polar_cl_QAdTRbNxlpSvcTfaDhRtqBwmyGA8gnspCp3gF3AF0TS","workshop":true,"categories":[{"id":"1a3a0eb3-698e-461a-bf42-2502a7ed43e0","name":"Backgrounds","slug":"backgrounds"}],"lastSaveId":"3rUFMBgPVCu424cKoPYh","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":6,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-02-07T07:28:31.291Z","updatedAt":"2026-02-07T07:28:31.291Z","reported":false}}],"$L5f"]

Suggested for you