---
title: "Dot Text"
canonical_url: "https://framerhub.io/components/dot-text"
last_updated: "2026-06-15T14:46:29.399Z"
---

## Title/Headline

Dot Text: Transform text into mesmerizing particle animations with interactive effects.

## Features

**Interactive Mouse Effects**
Experience dynamic text that responds to mouse movement with repulsion and tilt effects.

**Multiple Particle Styles**
Choose from dots, matrix-style characters, or ASCII art particles for unique visual appeal.

**Advanced Animations**
Add wave pulses, scanlines, and distortion effects with customizable intensities and colors.

**Rainbow Mode**
Enable cycling rainbow colors for vibrant, animated text displays.

**Halo Glow**
Create atmospheric depth with customizable halo glow effects.

## Use Cases

**Interactive Hero Sections** — Add engaging particle text to landing pages that responds to user interaction.

**Brand Animations** — Showcase company names or slogans with dynamic particle effects.

**Event Promotions** — Create eye-catching text displays for special offers or announcements.

**Background Elements** — Use as subtle animated backgrounds for websites or presentations.

![Dot Text Preview](/framerhub/img/components/control/dot-text.jpg)

## How to Use

### Installation

**VIDEO PLACEHOLDER: Installation Tutorial**

1. Log in to your account at framerhub.io
2. Navigate to framerhub.io/dashboard
3. Find <span>

Dot Text

</span>

 in your Recent Purchases
4. Click the "Copy" button
5. Open your Framer project
6. Paste the component anywhere on your canvas (Cmd/Ctrl + V)

### Customization

Customize your particle text through the intuitive properties panel:

**Projection Settings**

- Input any text to display as particles

**Particle Configuration**

- Select style: Dots, Matrix, or ASCII
- Adjust density for performance vs detail balance
- Set particle and background colors
- Enable rainbow mode for color cycling

**Effect Controls**

- Toggle scanlines with intensity and color controls
- Add wave pulses with customizable strength and color
- Enable glitch/distortion effects
- Apply halo glow with color selection

**Interactive Features**

- Enable auto-rotation with speed control
- Add mouse repulsion effects
- Toggle global animation timeline

### Quick Tips

**Best Performance** — Use density values between 50-100 for smooth animation on most devices. Reduce to 30-50 on mobile for optimal performance.

**Color Combinations** — Dark backgrounds (black or deep blue) make particles pop. Try white/light particles on dark backgrounds for maximum contrast.

**Layering** — Place content above the component for readable text overlays. Use subtle halo colors for atmospheric depth.

**Speed Settings** — Start with default rotation speed (0.4). Slower speeds (0.2-0.5) feel elegant, faster speeds (1.0+) add dynamic energy.

## License

**Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client.

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

## Why Designers Love This

Dot Text brings your text to life with cutting-edge WebGL particle effects that engage users and add visual interest to any project. Perfect for modern web design that demands attention and interactivity.