---
title: "Particle Vortex — Framer component · Best of Framer"
description: "$4.00 · Framer component · by Pranav Patil · Backgrounds. Premium noise-driven particle animation"
canonical: "https://framer.elliotli.dev/component/particle-vortex"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/Particle Vortex

# Particle Vortex

Premium noise-driven particle animation

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

![Particle Vortex preview image 1](https://framer.elliotli.dev/og/component/particle-vortex/3770d7707a856ab8/1600x1200.jpg)

## Summary

Premium noise-driven particle animation

## Description

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
    

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-y9yf89o4-1k08XmcddsZHGDG7guPoFKGb8YyAwZ)

## 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
    
    ![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-dmcpj8zc-i1Xg0VOOtOTtb0VHtFKIEoNZSP5QgH)

## 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](mailto:Pranavpatil70@gmail.com) | [LinkedIn](https://www.linkedin.com/in/pranavpatil70/)

_(Available for custom projects)_

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

-   All · #7248

## Details

- **Author**: Pranav Patil
- **Price**: $4.00
- **Published**: 2026-05-31
- **Updated**: 2026-06-12
- **Added**: 2026-05-24
- **Categories**: Backgrounds

## More like this

-   [Live_Backgrounds.exe](/component/live-backgrounds-exe) — S̶̈́͂IX BILLIÖ̴́N HERSELF · $19 — Animated backgrounds, 19 presets
-   [Drumskin](/component/drumskin) — KOJA Studios · Free — Interactive dot grid background
-   [Eclipse Ring](/component/eclipse-ring) — Lunaut Studio · $9 — A total eclipse for your hero
-   [Pixel Flicker](/component/pixel-flicker) — Design Foundry · $10 — premium animated pixel background