text-particles.js v2.0.3

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

LICENSE

This project is licensed under the MIT License