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

1. Log in to your account at framerhub.io
2. Navigate to framerhub.io/dashboard
3. Find Digital Wind in your Recent Purchases
4. Click the "Copy" button
5. Open your Framer project
6. 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.