particle_text 0.0.1

Interactive particle text effect for Flutter. Particles form text shapes and scatter on touch/hover, with spring-based physics and full customization.

particle_text

Interactive particle text effect for Flutter. Thousands of particles form text shapes and scatter on touch/hover, then spring back — with full customization.

Features

• Touch & hover interaction — particles scatter away from your finger/cursor
• Spring physics — smooth, natural particle reformation
• Fully customizable — colors, particle count, physics, font, and more
• Built-in presets — cosmic, fire, matrix, pastel, minimal
• Zero dependencies — pure Flutter, no external packages
• Cross-platform — works on iOS, Android, Web, macOS, Windows, Linux

Getting started

dependencies:
  particle_text: ^0.0.1

Usage

Basic

import 'package:particle_text/particle_text.dart';

ParticleText(text:'Hello')

With configuration

ParticleText(
  text: 'Flutter',
  config: ParticleConfig(
    particleCount: 6000,
    particleColor: Color(0xFF8CAADE),
    displacedColor: Color(0xFFDCE5FF),
    backgroundColor: Color(0xFF020308),
    mouseRadius: 80,
    repelForce: 8.0,
    returnSpeed: 0.04,
  ),
)

Using presets

// Cosmic blue dust
ParticleText(text: 'Cosmic', config: ParticleConfig.cosmic())

// Fiery warm particles
ParticleText(text: 'Fire', config: ParticleConfig.fire())

// Neon green matrix
ParticleText(text: 'Matrix', config: ParticleConfig.matrix())

// Soft pastel glow
ParticleText(text: 'Pastel', config: ParticleConfig.pastel())

// Fewer, larger particles
ParticleText(text: 'Clean', config: ParticleConfig.minimal())

Dynamic text

Simply update the text parameter and the particles will morph:

ParticleText(
  text: _currentText, // change this and particles re-target
  onTextChanged: () => print('Morphing!'),
)

Fixed size (non-expanding)

By default, ParticleText expands to fill its parent. To use a fixed size:

SizedBox(
  width: 400,
  height: 300,
  child: ParticleText(
    text: 'Sized',
    expand: false,
  ),
)

ParticleConfig options

Parameter	Type	Default	Description
particleCount	int	6000	Total particles rendered
mouseRadius	double	80.0	Pointer repulsion radius
returnSpeed	double	0.04	Spring return speed (0.01–0.1)
friction	double	0.88	Velocity damping (0.8–0.95)
repelForce	double	8.0	Pointer repulsion strength
backgroundColor	Color	#020308	Canvas background
particleColor	Color	#8CAADE	Particle color at rest
displacedColor	Color	#DCE5FF	Particle color when scattered
pointerGlowColor	Color	#C8D2F0	Glow orb color
minParticleSize	double	0.4	Min particle radius
maxParticleSize	double	2.2	Max particle radius
minAlpha	double	0.5	Min particle opacity
maxAlpha	double	1.0	Max particle opacity
sampleGap	int	2	Text pixel sampling density
fontWeight	FontWeight	bold	Text rendering weight
fontFamily	String?	null	Custom font family
showPointerGlow	bool	true	Show pointer glow orb
pointerDotRadius	double	4.0	Center dot radius

How it works

1. Text is rendered off-screen using TextPainter at device physical resolution
2. Opaque pixels are sampled to create target positions
3. Particles are spawned and spring toward their targets
4. Touch/hover applies a repulsion force that scatters particles
5. Friction and spring forces bring particles back to form the text

License

MIT License. See LICENSE for details.