56:I[473921,["/creators-assets/_next/static/immutable/chunks/456dxp3afc8vw.js","/creators-assets/_next/static/immutable/chunks/2bxtessbrg0z1.js","/creators-assets/_next/static/immutable/chunks/0bntpu9zyiup3.js","/creators-assets/_next/static/immutable/chunks/3283ev4bymz-y.js","/creators-assets/_next/static/immutable/chunks/3f4g-fr876v8f.js","/creators-assets/_next/static/immutable/chunks/24bk4ojcoor5n.js","/creators-assets/_next/static/immutable/chunks/34g6edkub9lqm.js","/creators-assets/_next/static/immutable/chunks/18e_sauhpyyit.js","/creators-assets/_next/static/immutable/chunks/13xqrk3e5k8yu.js","/creators-assets/_next/static/immutable/chunks/00hohn9l3ocx9.js","/creators-assets/_next/static/immutable/chunks/3oybmd01gs-b6.js","/creators-assets/_next/static/immutable/chunks/0vxt9zvn936s0.js","/creators-assets/_next/static/immutable/chunks/1yn3k6g09tq32.js","/creators-assets/_next/static/immutable/chunks/3ly-i84yiij4i.js","/creators-assets/_next/static/immutable/chunks/1cey7skpirawe.js","/creators-assets/_next/static/immutable/chunks/3fujn21cf_mt1.js","/creators-assets/_next/static/immutable/chunks/2n9qmawfhavju.js","/creators-assets/_next/static/immutable/chunks/0m8lhf01xskqj.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/3uo-268z2xnq9.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/16queuxy94k6z.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/439i_r5_4eszl.js","/creators-assets/_next/static/immutable/chunks/2ch5kewqiwntv.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/3xmobvbzj3637.js","/creators-assets/_next/static/immutable/chunks/26fs9mkd8gzie.js","/creators-assets/_next/static/immutable/chunks/0toe1wcov_38e.js","/creators-assets/_next/static/immutable/chunks/110hzb6dmcbdr.js","/creators-assets/_next/static/immutable/chunks/2eiu9v0ook5ln.js","/creators-assets/_next/static/immutable/chunks/1zt764sfv2wd7.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3nd1mzwm7q_f7.js","/creators-assets/_next/static/immutable/chunks/3gx0_q52o4oil.js","/creators-assets/_next/static/immutable/chunks/0u_jiik6ovv_e.js","/creators-assets/_next/static/immutable/chunks/2warb3xv9rce7.js","/creators-assets/_next/static/immutable/chunks/1tvhyiuh-gmez.js"],"PostDetailCard"] 57:Tf82,

Vortex uses a 3D simplex noise field to drive hundreds of particles through organic, ever-changing flow patterns. The effect feels alive without being distracting. Particles drift, swirl, and glow with a natural rhythm that adapts to your layout. Two presets give you flexibility: Full Width fills the entire container as an ambient background layer, while Orb concentrates particles into a soft, glowing sphere using Gaussian distribution and cubic distance falloff. Everything runs on a single HTML canvas with no external dependencies.

Use cases

Hero sections and above-the-fold backgrounds on landing pages
Product or feature showcase sections that need visual energy
Dark-themed portfolios and agency websites
Behind pricing tables, CTAs, or sign-up forms as a subtle accent
Standalone orb element for visual storytelling or section breaks

Key features

Two layout presets: Full Width and Orb, switchable via a single dropdown
Noise-driven particle motion that is organic and non-repetitive
Gaussian spawn distribution for the Orb preset with dense center, soft edges, and no masking
Dual-pass glow rendering with additive blending for a bloom effect
Fully self-contained with zero external dependencies, works instantly in Framer
Responsive and adapts to any container size on resize

Customization options

You can easily customize this component to match your brand and visual direction:

Set the particle hue to match your brand palette (full 0-360° color wheel)
Control particle density, size, and speed independently
Adjust vertical spread (Full Width) or orb radius as % of container (Orb)
Fine-tune swirl complexity with a single Turbulence slider
Toggle the glow/bloom effect on or off
Change the background color to any value

Setup procedure

Copy the component into your Framer project
Place it in the desired section of your page
Select your preset: Full Width or Orb
Adjust color, density, speed, and turbulence to taste
Publish! No additional setup required

The component is self-contained with no external dependencies. Just paste and go!!

Pro tips

Start with 300-500 particles for a balanced look; go higher only on sections where the effect is the focal point
Keep turbulence below 0.5 for smooth, calming flows. Push it above 0.7 for chaotic energy
The Orb preset works best at 30-40% radius on wide containers; go larger on narrow or square frames
Pair with dark backgrounds for maximum glow impact since the additive blending shines on dark surfaces
Layer content on top using Framer's stacking. The canvas sits behind everything naturally

Support includes

Vortex is built to be flexible and plug-and-play. If you need help customizing the effect, integrating it into a specific layout, or want a bespoke variation, feel free to reach out. I'm available for custom enhancements and Framer projects.

Email: Pranavpatil70@gmail.com | LinkedIn

(Available for custom projects)

53:[["$","$L56",null,{"post":{"id":"019e7dd0-1af0-7e0d-bc11-09725a5068f6","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"56c3b6d5-b87d-4ee9-ae68-51d3e4be0af7","name":"Pranav Patil","slug":"pranav-ux","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/452741/3ac7e2b9f824b10f6cccf71fe8768c36-mvORuxpX0euRegbviZZMTjsItDcnFv","followed":false,"followsYou":false},"media":[],"resources":[{"id":"ohrGtGQYRNqM27Coy2vV","resolved":true,"title":"Particle Vortex","body":"$57","bodyJson":null,"introduction":"Premium noise-driven particle animation ","slug":"particle-vortex","author":{"framerUserId":"56c3b6d5-b87d-4ee9-ae68-51d3e4be0af7","name":"Pranav Patil","slug":"pranav-ux","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/452741/3ac7e2b9f824b10f6cccf71fe8768c36-mvORuxpX0euRegbviZZMTjsItDcnFv","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/ohrGtGQYRNqM27Coy2vV/particle-vortex-Xd9FtoMa2O8ehm0tHeyXgYqFm5AS8P","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-05-24T11:39:12.293Z","updatedAt":"2026-06-12T11:27:29.867Z","publishedAt":"2026-05-31T11:34:10.928Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://thistle-slides-007975.framer.app/","price":"4","paymentUrl":"https://polar.sh/checkout/polar_c_WnbVaGqJbz9NILS84fIECJRO1JKTX6EbpubPo3Z7OIt","workshop":false,"categories":[{"id":"1a3a0eb3-698e-461a-bf42-2502a7ed43e0","name":"Backgrounds","slug":"backgrounds"}],"lastSaveId":"EB9N5ZEGbpRzUenMQRLG","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":3,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-05-31T11:34:10.928Z","updatedAt":"2026-05-31T11:34:10.928Z","reported":false,"type":"post"}}],"$L58"]

Suggested for you