ScatterEngine

A lightweight JavaScript engine that renders text using thousands of interactive particles.

ScatterEngine transforms ordinary text into dynamic particle-based typography with smooth transitions, mouse interaction, and customizable animations.

Features

• Particle-based text rendering
• Smooth text morphing transitions
• Mouse repel interaction
• High-performance canvas rendering
• Fully customizable colors
• Adjustable particle size and density
• Responsive canvas
• Lightweight with zero dependencies
• ES Module support

Installation

npm install scatterengine

Usage

import ScatterEngine from "scatterengine";

const engine = new ScatterEngine({
    target: "#hero",
    text: "Scatter Engine"
});

engine.init();

Configuration

const engine = new ScatterEngine({

    target: "#hero",

    text: "Scatter Engine",

    particleSize: 2,

    particleGap: 4,

    color: "#ffffff",

    backgroundColor: "#000000",

    fontFamily: "Poppins",

    fontWeight: 700,

    transitionDuration: 1500,

    mouseRadius: 120,

    repelStrength: 1.2,

    idleAnimation: true

});

API

Initialize

engine.init();

Starts the renderer.

Change Text

engine.setText("Hello World");

Smoothly transitions particles into the new text.

Destroy

engine.destroy();

Removes the canvas and event listeners.

Browser Support

• Chrome
• Edge
• Firefox
• Safari

Modern browsers supporting ES Modules.

Example

import ScatterEngine from "scatterengine";

const engine = new ScatterEngine({
    target: "#title",
    text: "Hello World"
});

engine.init();

setTimeout(() => {
    engine.setText("Welcome");
}, 3000);

License

MIT License © 2026 Aayush

Contributing

Contributions, bug reports, and feature requests are welcome.

If you discover a bug or have an idea for improving ScatterEngine, feel free to open an issue or submit a pull request.

Links

GitHub: https://github.com/aayyuusshh11/ScatterEngine

NPM: https://www.npmjs.com/package/scatterengine