DigitalWind

Particles Three.js Interactive

Mesmerizing Digital Flow Effects Create stunning particle animations with flowing digital characters. Digital Wind uses Three.js and custom shaders to render thousands of particles with physics-based flow and interactive mouse effects. Features Custom Shader Rendering Optimized WebGL shaders render thousands of particles efficiently with customizable character sets. Interactive Physics Particles flow naturally using simplex noise while responding to mouse movement with realistic repulsion. Post-Processing Effects Built-in bloom effects add a professional glow to your particles, perfect for modern UI designs. Fully Customizable Control particle count, size, speed, noise scale, colors, and bloom settings through intuitive property controls. Use Cases Hero Sections — Add dynamic backgrounds to landing pages and hero sections Loading Screens — Create engaging animations while content loads Tech Branding — Perfect for tech, AI, and data visualization themes Interactive Installations — Use mouse interaction for immersive experiences Flow Settings Speed — Control how fast particles move (0.1 - 5.0) Noise Scale — Adjust the turbulence of particle flow (0.0001 - 0.01) Particle Settings Memory Efficient — Proper cleanup prevents memory leaks Auto Quality — Automatically adjusts rendering settings based on device capabilities Count — Number of particles to render (1000 - 10000) Size — Base size of each particle (5 - 50) Characters — Custom character set (default: "01" for binary) Appearance Color 1 & Color 2 — Gradient colors for particles Background — Set the background color. Transparent — Toggle to remove the background completely. Opacity — Adjust the overall opacity of the particles (0-1). Effects Bloom — Enable/disable glow effect Bloom Strength — Intensity of the bloom (0 - 3) Interaction Mouse Repulsion — Enable/disable mouse interaction Repulsion Radius — Distance at which particles react to mouse (50 - 500) Repulsion Force — Strength of the repulsion effect (0.1 - 5.0) Responsive Design Digital Wind automatically adapts to any canvas size. The component uses a responsive resize system that: Detects container size changes in real-time Adjusts camera and renderer dimensions dynamically Redistributes particles to fill the available space Optimizes particle count in canvas mode for smoother editing The component supports flexible layouts while preferring fixed dimensions for optimal performance. Quick Tips Performance — For better performance on lower-end devices, reduce particle count to 2000-3000 Custom Characters — Try different character sets like "ABCDEFGHIJKLMNOPQRSTUVWXYZ" or "!@#$%^&*()" for unique effects Color Combinations — Try matrix-style (green), cyberpunk (neon pink/blue), or subtle white/gray for a cleaner look. Performance — Use the "Quality" control to optimize for different devices. "Auto" mode adjusts settings automatically. Mouse Interaction — The repulsion effect works best with bloom enabled for dramatic visual feedback Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns! License Single Use License — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. Why Designers Love This Digital Wind brings high-performance particle effects to Framer without any setup complexity. The shader-based rendering ensures smooth 60fps animations even with thousands of particles, while the interactive mouse effects create engaging user experiences. Perfect for adding a modern, tech-forward aesthetic to any project.

Particles Three.js Interactive