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.
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.
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)
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.
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
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!
Single Use License — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client.
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.
FramerHub.io 
