gitmyhub

particles_text

Dart ★ 13 updated 1mo ago

Particles text interaction in Flutter

A Flutter demo that renders text as animated particle dots which scatter when you hover over them and spring back into place, showing how to build interactive particle-physics text effects for web, macOS, iOS, and Android.

DartFluttersetup: easycomplexity 2/5

This is a Flutter demo project that turns text into a swarm of animated dots. When the app displays a word or phrase, it does not render the letters as normal text. Instead it samples the shape of each character as a grid of tiny colored dots, called particles, and then animates those dots letter by letter from left to right.

The interactive part is what makes it a demo worth looking at. If you hover your mouse over the particles or drag across them, they scatter away from your pointer. When you stop, each dot follows a spring-like path back to its original resting position inside the letter it belongs to. The physics behind this involve velocity, damping, and a pull-back force that the README describes with the actual math formulas used in the code.

The project is organized into four components. The first samples the visible pixels of the rendered text to find where each particle should rest. The second controls the reveal order, enabling particles one letter at a time. The third runs the physics each frame, handling pointer repulsion and the spring-back motion. The fourth draws the particles onto the screen canvas.

Running it requires Flutter, and the default target is Chrome, though the README says it also works on macOS, iOS, and Android. The visual settings like scatter distance, spring speed, and fade-in rate are all adjustable in a single configuration file.

This is a demonstration project rather than a reusable package. It shows one approach to building particle-based text effects inside Flutter using the framework's canvas drawing tools.

Where it fits