JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<canvas id=c></canvas> 
<span>Try disturbing the particles with mouse</span>

CSS

body { margin: 0; }
span { position: absolute; top: 15px; left: 5px; color: white; font: 12px Arial;}

CoffeeScript

###
  Text masked spring particles
    Author: Kushagra Gour a.k.a. Chin Chang
    (@chinchang457)
###
# requestanimationframe polyfill
window.requestAnimFrame = (->
  return  window.requestAnimationFrame       || 
          window.webkitRequestAnimationFrame || 
          window.mozRequestAnimationFrame    || 
          window.oRequestAnimationFrame      || 
          window.msRequestAnimationFrame     ||  
          (callback) ->
            window.setTimeout callback, 1000 / 60
)();

# variables
canvas = null
ctx = null
num_particles = 500
density = 8
min_distance = 70
text_array = []
display_list = []
last_time = null
spring_constant = 0.2
damping_constant = 0.08
colors = ['#184DF4', '#F00', '#0F0', '#00F']
W = window.innerWidth
H = window.innerHeight

init = (e) ->
    canvas = document.getElementById 'c'
    ctx = canvas.getContext '2d'
    canvas.width = W
    canvas.height = H
    canvas.addEventListener 'mousemove', onMouseMove
    
    changeWord 'KUZYA'

    # create particles
    if text_array.length
        for i in [0...num_particles]
            display_list.push new Particle

getTextArray = (ox, oy, w, h) ->
    text_array = []
    data = ctx.getImageData(ox, oy, w, h).data
    for i in [0...h] by density
        for j in [0...w] by density
            linear_index = (i * w + j) * 4
            if data[linear_index + 3] isnt 0
                text_array.push {x: j, y: i}

    return text_array

onMouseMove = (e) ->
    mx = e.offsetX || e.pageX
    my = e.offsetY || e.pageY
    for child in display_list
        dx = child.x - mx
        dy = child.y - my
        d = Math.sqrt dx * dx + dy * dy
        if d < min_distance
            child.speed_x += dx * 0.05
            child.speed_y += dy * 0.05

changeWord = (str) ->
    # clear the canvas first
    ctx.clearRect 0, 0, W, H

    # draw the new text
    ctx.fillStyle = "#000"
    ctx.textBaseline = 'top'
    ctx.textAlign = 'center'
    ctx.font = "200px Arial"
    ctx.fillText str, W/2, 0

   ...