Digital Wind
Flowing digital particles with interactive mouse effects powered by Three.js
Overview
Flowing digital particles with interactive mouse effects powered by Three.js
- Custom shader-based particle system
- Interactive mouse repulsion effect
- Customizable character sets and colors
- Post-processing bloom effects
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
How to Use
Installation
VIDEO PLACEHOLDER: Installation Tutorial
- Log in to your account at framerhub.io
- Navigate to framerhub.io/dashboard
- Find Digital Wind in your Recent Purchases
- Click the "Copy" button
- Open your Framer project
- Paste the component anywhere on your canvas (Cmd/Ctrl + V)
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.
Need Help? Visit framerhub.io/support for documentation and video tutorials.
Digital Wind - $9
Flowing digital particles with interactive mouse effects powered by Three.js
You might also like
Why Choose Framer Hub Components
Loved by Framer teams
Used by Framer professionals who need premium, no-code experiences.
"The Best Framer CMS Filtering Plugin I've Found — Truly a Game-Changer. I've tested a lot of Framer CMS filtering and sorting components — both free and paid — and this is by far the best one I've come across."
"He really helped me out when I needed assistance adding it to my Framer project. Super fast customer support highly recommend!"
"We had tried a couple of other Framer CMS filter components but they were buggy, hard to use and support was slow or non-existent. FramerCMSFilter is easier to use and has a lot of added functionality."
Got questions? We've the answers
Got questions? We've the answers
Everything you need to know about FramerHub.