explaingit

yelwinoo-steve/particles_text

12DartAudience · developerComplexity · 2/5Setup · easy

TLDR

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.

Mindmap

mindmap
  root((particles_text))
    Components
      Pixel sampler
      Letter reveal
      Physics engine
      Canvas renderer
    Physics
      Velocity
      Damping
      Spring-back force
    Platforms
      Chrome
      macOS
      iOS
      Android
    Use Cases
      Splash screen
      Landing page hero
      Logo animation
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Study the particle physics implementation to add hover-reactive animated text to your own Flutter web app

USE CASE 2

Use the configurable settings to customize scatter distance and spring speed for a splash screen or loading animation

USE CASE 3

Adapt the pixel-sampling technique to create particle effects from images or logos instead of text

USE CASE 4

Run the demo on mobile to explore how the spring-back physics translate to touch drag interactions on iOS and Android

Tech stack

DartFlutter

Getting it running

Difficulty · easy Time to first run · 30min

Requires Flutter SDK installed, default target is Chrome.

No license information was provided in the explanation.

In plain English

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.

Copy-paste prompts

Prompt 1
Based on the particles_text Flutter demo, help me add a particle scatter effect to the hero text on my Flutter web landing page using the same spring-back physics.
Prompt 2
Looking at the physics engine in yelwinoo-steve/particles_text, explain the velocity, damping, and pull-back force formulas so I can tune the animation for a slower, more dramatic effect.
Prompt 3
Using the pixel-sampling technique from particles_text, help me modify the code to sample a PNG logo instead of text and render it as scattered particles.
Prompt 4
Help me adapt the particles_text letter-reveal animation so it triggers on a button press instead of on load, assembling particles into the button label one letter at a time.
Open on GitHub → Explain another repo

← yelwinoo-steve on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.