whatisgithub

What is particles_text?

yelwinoo-steve/particles_text — explained in plain English

Analysis updated 2026-06-24

12DartAudience · developerComplexity · 2/5Setup · easy

In one sentence

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

What do people build with it?

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

What is it built with?

DartFlutter

How does it compare?

yelwinoo-steve/particles_texttestkubesail4/south-plus-prowep-56/javbus
Stars121515
LanguageDartDartDart
Setup difficultyeasymoderatemoderate
Complexity2/52/53/5
Audiencedeveloperdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get 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.

So what is it?

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.

Frequently asked questions

What is particles_text?

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.

What language is particles_text written in?

Mainly Dart. The stack also includes Dart, Flutter.

What license does particles_text use?

No license information was provided in the explanation.

How hard is particles_text to set up?

Setup difficulty is rated easy, with roughly 30min to a first successful run.

Who is particles_text for?

Mainly developer.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.