---
title: "DigitalWind — Framer component · Best of Framer"
description: "$9.00 · Framer component · by FramerHub.io  · Effects. Particles Three.js Interactive"
canonical: "https://framer.elliotli.dev/component/digitalwind"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/DigitalWind

# DigitalWind

Particles Three.js Interactive

[View on Framer](https://framer.com/marketplace/components/digitalwind/?via=elliot-li)

![DigitalWind preview image 1](https://framer.elliotli.dev/og/component/digitalwind/8622b0f03540c520/1600x1200.jpg)

## Summary

Particles Three.js Interactive

## Description

[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-gpdmnxag-nxe90X9lppuh6WpG4uJH6JSIW5HG9O)](https://framerhub.io/components?utm_source=framer_marketplace&utm_medium=framer_marketplace_components&utm_content=DigitalWind)

## 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.

## Rank history [How rankings work →](/terms#rankings)

-   All · #8547

## Details

- **Author**: FramerHub.io
- **Price**: $9.00
- **Published**: 2026-03-25
- **Updated**: 2026-04-07
- **Added**: 2026-01-16
- **Categories**: Effects

## More like this

-   [Particle Image](/component/particle-image) — Jamik · $12 — Logos and photos as 3D points
-   [Ascii Portrait](/component/ascii-portrait) — The Black Sheep · Free — Photos that dissolve into ASCII
-   [Sandfall](/component/sandfall) — Cyedi Creative Studio · $5 — Your headline, buried in coloured
-   [Still Water](/component/still-water) — DariStudio · $9 — Water ripples over any photo