TextParticle

Create high performance particle transition effects for text and image.

Preview

Installation

Install text-particle using npm:

npm install text-particle

Usage

The library contains two particle effects:

• TextParticle
• ImageParticle

If you want to render particles with high performance, enable the option 'enableWebGL'.

If you want to run yourself, see Example

You can get more details from the sample:

text particle effect:

function renderTextParticle() {
  const text = ['Klee', 'Ganyu']
  const color = ['#e75945', '#80b0e1']

  const root = document.getElementById('container_1')
  if (!root) {
    return
  }

  const particleEffect = new TextParticle(root, {
    source: text[0],
    color: color[0],
    // Custom font need to set in css '@font-face' first 
    font: 'bold 200px lai',
    textAlign: 'center',
    particleGap: 6,
    particleRadius: 3,
    showMouseCircle: true,
    enableContinuousEasing: true,
    enableWebGL: true
  })

  particleEffect.render()
  // tips: If you enable the option 'enableContinuousEasing'
  // the transition time will not work.
  particleEffect.transitionTo(
    text[1],
    6000,
    { color: color[1] }
  )

  fromEvent(window, 'resize').pipe(debounceTime(100)).subscribe(() => {
    particleEffect.resize()
  })
}

image particle effect:

function renderImageParticle() {
  const images = ['/image1.png', '/image2.png']

  const root = document.getElementById('container_2')
  if (!root) {
    return
  }

  const particleEffect = new ImageParticle(root, {
    source: images[0],
    // color: '#ffffff',
    autoFit: true,
    particleGap: 4,
    particleRadius: 2,
    showMouseCircle: true,
    enableContinuousEasing: true,
    enableWebGL: true,
    // it is important to filter color
    pixelFilter: (r, g, b, a) => {
      return (r + g + b) > 0 && a > 10
    }
  })

  particleEffect.render()
  // tips: If you enable the option 'enableContinuousEasing'
  // the transition time will not work.
  particleEffect.transitionTo(images[1], 6000)

  fromEvent(window, 'resize').pipe(debounceTime(100)).subscribe(() => {
    particleEffect.resize()
  })
}