Particle Vortex

Premium noise-driven particle animation

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)

Premium noise-driven particle animation