text-particles.js
v2.0.3
Published
A lightweight TypeScript library for creating text particles
Downloads
132
Maintainers
Readme
text-particles.js
text-particles.js
is a lightweight TypeScript library for creating dynamic text particle effects using the Canvas API.
Installation
npm install text-particles.js
or
yarn add text-particles.js
or
pnpm add text-particles.js
via CDN
https://cdn.jsdelivr.net/npm/text-particles.js/dist/index.min.js
Usage
React/Next.js (Pages Router)
import React, { useEffect, useRef } from "react";
import TextParticles from "text-particles.js";
const ParticleTextEffect: React.FC = () => {
const canvasRef = useRef<HTMLCanvasElement>(null);
useEffect(() => {
if (canvasRef.current) {
new TextParticles(canvasRef.current, {
TEXT: "Your Text Here",
FONT: {
SIZE: 100,
},
});
}
}, []);
return (
<div style={{ width: "100%", height: "300px" }}>
<canvas ref={canvasRef}></canvas>
</div>
);
};
export default ParticleTextEffect;
Next.js (App Router)
"use client";
import { useEffect, useRef } from "react";
import TextParticles from "text-particles.js";
const ParticleTextEffect = () => {
const canvasRef = useRef<HTMLCanvasElement>(null);
useEffect(() => {
if (canvasRef.current) {
new TextParticles(canvasRef.current, {
TEXT: "Your Text Here",
FONT: {
SIZE: 100,
},
});
}
}, []);
return (
<div style={{ width: "100%", height: "300px" }}>
<canvas ref={canvasRef}></canvas>
</div>
);
};
export default ParticleTextEffect;
Angular
import { Component, AfterViewInit, ElementRef, ViewChild } from '@angular/core';
import TextParticles from 'text-particles.js';
@Component({
selector: 'app-particle-text',
template: '<div #canvasContainer style="width: 100%; height: 300px;"><canvas #canvas></canvas></div>',
})
export class ParticleTextComponent implements AfterViewInit {
@ViewChild('canvas') canvasRef!: ElementRef<HTMLCanvasElement>;
ngAfterViewInit() {
const canvas = this.canvasRef.nativeElement;
new TextParticles(canvas, {
TEXT: 'Your Text Here',
FONT: {
SIZE: 100,
},
});
}
}
Svelte
<script>
import { onMount } from 'svelte';
import TextParticles from 'text-particles.js';
let canvas;
onMount(() => {
new TextParticles(canvas, {
TEXT: 'Your Text Here',
FONT: {
SIZE: 100,
},
});
});
</script>
<div style="width: 100%; height: 300px;">
<canvas bind:this={canvas}></canvas>
</div>
Vue.js
<template>
<div style="width: 100%; height: 300px;">
<canvas ref="canvas"></canvas>
</div>
</template>
<script lang="ts">
import { defineComponent, onMounted } from 'vue';
import TextParticles from 'text-particles.js';
export default defineComponent({
name: 'ParticleTextEffect',
setup() {
onMounted(() => {
const canvas = document.querySelector('canvas') as HTMLCanvasElement;
new TextParticles(canvas, {
TEXT: 'Your Text Here',
FONT: {
SIZE: 100,
},
});
});
}
});
</script>
Options
| Option | Description | Default |
|-------------------------|---------------------------------------------------------|-----------------------|
| TEXT
| The text to display. | "Text Particles" |
| FONT
| Font settings for the text. | |
| STYLE
| Font style (e.g., "bold"). | "bold" |
| SIZE
| Font size in pixels. | 50 |
| FAMILY
| Font family. | "Arial, sans-serif" |
| COLOR
| The color of the particles. | "#ff4f4f" |
| PARTICLE_SIZE_MIN
| Minimum size of the particles. | 1 |
| PARTICLE_SIZE_MAX
| Maximum size of the particles. | 3 |
| HOVER_RADIUS
| Radius for hover interactions. | 30 |
| CLICK_RADIUS
| Radius for click interactions. | 100 |
| REPULSION_STRENGTH
| Strength of the repulsion effect. | 30 |
| RETURN_SPEED
| Speed at which particles return to their original positions. | 10 |
| INTERACTION_MODE
| Interaction mode, either "hover" or "click". | "hover" |
LICENSE
This project is licensed under the MIT License