main.js

    const preload = () => {

        let manager = new THREE.LoadingManager();
        manager.onLoad = function() {
            const environment = new Environment( typo, particle );
        }

        var typo = null;
        const loader = new THREE.FontLoader( manager );
        const font = loader.load('https://res.cloudinary.com/dydre7amr/raw/upload/v1612950355/font_zsd4dr.json', function ( font ) { typo = font; });
        const particle = new THREE.TextureLoader( manager ).load( 'https://res.cloudinary.com/dfvtkoboz/image/upload/v1605013866/particle_a64uzf.png');

    }

    if ( document.readyState === "complete" || (document.readyState !== "loading" && !document.documentElement.doScroll))
        preload ();
    else
        document.addEventListener("DOMContentLoaded", preload );

    class Environment {



        constructor( font, particle ){

            this.font = font;
            this.particle = particle;
            this.container = document.querySelector( '#magic' );
            this.scene = new THREE.Scene();
            this.createCamera();
            this.createRenderer();
            this.setup()
            this.bindEvents();
        }

        bindEvents(){

            window.addEventListener( 'resize', this.onWindowResize.bind( this ));

        }

        setup(){

            this.createParticles = new CreateParticles( this.scene, this.font,this.particle, this.camera, this.renderer, this.container );
        }

        render() {

            this.createParticles.render()
            this.renderer.render( this.scene, this.camera )
        }

        createCamera() {

            this.camera = new THREE.PerspectiveCamera( 65, this.container.clientWidth /  this.container.clientHeight, 1, 10000 );
            this.camera.position.set( 0,0, 100 );

        }

        createRenderer() {

            this.renderer = new THREE.WebGLRenderer();
            this.renderer.setSize( this.container.clientWidth, this.container.clientHeight );

            this.renderer.setPixelRatio( Math.min( window.devicePixelRatio, 2));

            this.renderer.outputEncoding = THREE.sRGBEncoding;
            this.container.appendChild( this.renderer.domElement );

            this.renderer.setAnimationLoop(() => { this.render() })

        }

        onWindowResize(){

            this.camera.aspect = this.container.clientWidth / this.container.clientHeight;
            this.camera.updateProjectionMatrix();
            this.renderer.setSize( this.container.clientWidth, this.container.clientHeight );

        }
    }

    class CreateParticles {

        constructor( scene, font, particleImg, camera, renderer, container ) {

            this.scene = scene;
            this.font = font;
            this.particleImg = particleImg;
            this.camera = camera;
            this.renderer = renderer;

            this.raycaster = new THREE.Raycaster();
            this.mouse = new THREE.Vector2(0, 0);

            this.colorChange = new THREE.Color();

            this.buttom = false;
            this.container = container;

            this.data = {

                text: 'BEST \nSITE',
                amount: 1500,
                particleSize: 1,
                particleColor: 0xBEC681,
                textSize: 24,
                area: 250,
                ease: .05,
            }

            this.setup();
            this.bindEvents();

        }



        setup(){

            const geometry = new THREE.PlaneGeometry( this.visibleWidthAtZDepth( 100, this.camera ), this.visibleHeightAtZDepth( 100, this.camera ));
            const material = new THREE.MeshBasicMaterial( { color: 0xBEC681, transparent: true } );
            this.planeArea = new THREE.Mesh( geometry, material );
            this.planeArea.visible = false;
            this.createText();

        }

        bindEvents() {

            document.addEventListener( 'mousedown', this.onMouseDown.bind( this ));
            document.addEventListener( 'mousemove', this.onMouseMove.bind( this ));
            document.addEventListener( 'mouseup', this.onMouseUp.bind( this ));

        }

        onMouseDown(){

            this.mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
            this.mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

            const vector = new THREE.Vector3( this.mouse.x, this.mouse.y, 0.5);
            vector.unproject( this.camera );
            const dir = vector.sub( this.camera.position ).normalize();
            const distance = - this.camera.position.z / dir.z;
            this.currenPosition = this.camera.position.clone().add( dir.multiplyScalar( distance ) );

            const pos = this.particles.geometry.attributes.position;
            this.buttom = true;
            this.data.ease = .01;

        }

        onMouseUp(){

            this.buttom = false;
            this.data.ease = .05;
        }

        onMouseMove( ) {



            this.mouse.x = ( event.clientX / this.container.clientWidth ) * 2 - 1;
            this.mouse.y = - ( event.clientY / this.container.clientHeight ) * 2 + 1;

        }

        render( level ){

            const time = ((.001 * performance.now())%12)/12;
            const zigzagTime = (1 + (Math.sin( time * 2 * Math.PI )))/6;

            this.raycaster.setFromCamera( this.mouse, this.camera );

            const intersects = this.raycaster.intersectObject( this.planeArea );

            if ( intersects.length > 0 ) {

                const pos = this.particles.geometry.attributes.position;
                const copy = this.geometryCopy.attributes.position;
                const coulors = this.particles.geometry.attributes.customColor;
                const size = this.particles.geometry.attributes.size;

                const mx = intersects[ 0 ].point.x;
                const my = intersects[ 0 ].point.y;
                const mz = intersects[ 0 ].point.z;

                for ( var i = 0, l = pos.count; i < l; i++) {

                    const initX = copy.getX(i);
                    const initY = copy.getY(i);
                    const initZ = copy.getZ(i);

                    let px = pos.getX(i);
                    let py = pos.getY(i);
                    let pz = pos.getZ(i);

                    this.colorChange.setHSL( .5, 1 , 1 )
                    coulors.setXYZ( i, this.colorChange.r, this.colorChange.g, this.colorChange.b )
                    coulors.needsUpdate = true;

                    size.array[ i ]  = this.data.particleSize;
                    size.needsUpdate = true;

                    let dx = mx - px;
                    let dy = my - py;
                    const dz = mz - pz;

                    const mouseDistance = this.distance( mx, my, px, py )
                    let d = ( dx = mx - px ) * dx + ( dy = my - py ) * dy;
                    const f = - this.data.area/d;

                    if( this.buttom ){

                        const t = Math.atan2( dy, dx );
                        px -= f * Math.cos( t );
                        py -= f * Math.sin( t );

                        this.colorChange.setHSL( .5 + zigzagTime, 1.0 , .5 )
                        coulors.setXYZ( i, this.colorChange.r, this.colorChange.g, this.colorChange.b )
                        coulors.needsUpdate = true;

                        if ((px > (initX + 70)) || ( px < (initX - 70)) || (py > (initY + 70) || ( py < (initY - 70)))){

                            this.colorChange.setHSL( .85, 1.0 , .5 )
                            coulors.setXYZ( i, this.colorChange.r, this.colorChange.g, this.colorChange.b )
                            coulors.needsUpdate = true;

                        }

                    }else{

                        if( mouseDistance < this.data.area ){

                            if(i%5==0){

                                const t = Math.atan2( dy, dx );
                                px -= .03 * Math.cos( t );
                                py -= .03 * Math.sin( t );

                                this.colorChange.setHSL( .85 , 1.0 , .5 )
                                coulors.setXYZ( i, this.colorChange.r, this.colorChange.g, this.colorChange.b )
                                coulors.needsUpdate = true;

                                size.array[ i ]  =  this.data.particleSize /1.2;
                                size.needsUpdate = true;

                            }else{

                                const t = Math.atan2( dy, dx );
                                px += f * Math.cos( t );
                                py += f * Math.sin( t );

                                pos.setXYZ( i, px, py, pz );
                                pos.needsUpdate = true;

                                size.array[ i ]  = this.data.particleSize * 0.6 ;
                                size.needsUpdate = true;
                            }

                            if ((px > (initX + 10)) || ( px < (initX - 10)) || (py > (initY + 10) || ( py < (initY - 10)))){

                                this.colorChange.setHSL( .85, 1.0 , .5 )
                                coulors.setXYZ( i, this.colorChange.r, this.colorChange.g, this.colorChange.b )
                                coulors.needsUpdate = true;

                                size.array[ i ]  = this.data.particleSize /1.8;
                                size.needsUpdate = true;

                            }
                        }

                    }

                    px += ( initX  - px ) * this.data.ease;
                    py += ( initY  - py ) * this.data.ease;
                    pz += ( initZ  - pz ) * this.data.ease;

                    pos.setXYZ( i, px, py, pz );
                    pos.needsUpdate = true;

                }
            }
        }

        createText(){

            let thePoints = [];

            let shapes = this.font.generateShapes( this.data.text , this.data.textSize  );
            let geometry = new THREE.ShapeGeometry( shapes );
            geometry.computeBoundingBox();

            const xMid = - 0.5 * ( geometry.boundingBox.max.x - geometry.boundingBox.min.x );
            const yMid =  (geometry.boundingBox.max.y - geometry.boundingBox.min.y)/2.85;

            geometry.center();

            let holeShapes = [];

            for ( let q = 0; q < shapes.length; q ++ ) {

                let shape = shapes[ q ];

                if ( shape.holes && shape.holes.length > 0 ) {

                    for ( let  j = 0; j < shape.holes.length; j ++ ) {

                        let  hole = shape.holes[ j ];
                        holeShapes.push( hole );
                    }
                }

            }
            shapes.push.apply( shapes, holeShapes );

            let colors = [];
            let sizes = [];

            for ( let  x = 0; x < shapes.length; x ++ ) {

                let shape = shapes[ x ];

                const amountPoints = ( shape.type == 'Path') ? this.data.amount/2 : this.data.amount;

                let points = shape.getSpacedPoints( amountPoints ) ;

                points.forEach( ( element, z ) => {

                    const a = new THREE.Vector3( element.x, element.y, 0 );
                    thePoints.push( a );
                    colors.push( this.colorChange.r, this.colorChange.g, this.colorChange.b);
                    sizes.push( 1 )

                });
            }

            let geoParticles = new THREE.BufferGeometry().setFromPoints( thePoints );
            geoParticles.translate( xMid, yMid, 0 );

            geoParticles.setAttribute( 'customColor', new THREE.Float32BufferAttribute( colors, 3 ) );
            geoParticles.setAttribute( 'size', new THREE.Float32BufferAttribute( sizes, 1) );

            const material = new THREE.ShaderMaterial( {

                uniforms: {
                    color: { value: new THREE.Color( 0xBEC681 ) },
                    pointTexture: { value: this.particleImg }
                },
                vertexShader: document.getElementById( 'vertexshader' ).textContent,
                fragmentShader: document.getElementById( 'fragmentshader' ).textContent,

                blending: THREE.AdditiveBlending,
                depthTest: false,
                transparent: true,
            } );

            this.particles = new THREE.Points( geoParticles, material );
            this.scene.add( this.particles );

            this.geometryCopy = new THREE.BufferGeometry();
            this.geometryCopy.copy( this.particles.geometry );

        }

        visibleHeightAtZDepth ( depth, camera ) {

            const cameraOffset = camera.position.z;
            if ( depth < cameraOffset ) depth -= cameraOffset;
            else depth += cameraOffset;

            const vFOV = camera.fov * Math.PI / 180;

            return 2 * Math.tan( vFOV / 2 ) * Math.abs( depth );
        }

        visibleWidthAtZDepth( depth, camera ) {

            const height = this.visibleHeightAtZDepth( depth, camera );
            return height * camera.aspect;

        }

        distance (x1, y1, x2, y2){

            return Math.sqrt(Math.pow((x1 - x2), 2) + Math.pow((y1 - y2), 2));
        }
    }