Particle Vortex

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)