Text effect

<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@700&amp;display=swap" rel="stylesheet">

  <main id=app class=loading>
    <svg viewBox="-50 0 100 20">
      <text x="0" y="15">Profidev_js</text>
    </svg>
  </main>
  <img src="https://assets.codepen.io/13471/silver-glitter-background.png" loading=lazy>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"  ></script> 

:root {
	--glitter: url("https://assets.codepen.io/13471/silver-glitter-background.png");
	--ratio-x: .5;
	--ratio-y: .75;
	--from-center: .5;
  }
  
  main {
	--bgoffsetx: calc( 2.9px * var(--ratio-x));
	--bgoffsety: calc( 4.3px * var(--ratio-y));
	--pointerx: calc( 100% * var(--ratio-x));
	--pointery: calc( 100% * var(--ratio-y));
	--h: calc( 360deg * var( --from-center ) );
	--s: calc( 90% * var( --from-center ) );
	background: linear-gradient(135deg, hsl(28deg, var(--s), 15%), hsl(198deg, var(--s), 15%)), var(--glitter), var(--glitter), radial-gradient(farthest-corner circle at var(--pointerx) var(--pointery), white 20px, rgba(237, 222, 222, 0.38) 150px, black 65%);
	background-position: calc( 70% + var(--bgoffsetx) ) calc( 70% + var(--bgoffsety) ), calc( 30% - var(--bgoffsetx) ) calc( 30% - var(--bgoffsety) );
	background-size: cover, 560px auto, 400px auto, cover;
	background-blend-mode: overlay, multiply, color, overlay;
	transition: opacity 4s ease-out;
  }
  
  main.loading {
	opacity: 0;
  }
  
  main {
	image-rendering: optimizeQuality;
	transform: translate3d(0, 0, 0.01px);
  }
  
  main * {
	pointer-events: none;
	text-anchor: middle;
  }
  
  main svg {
	mix-blend-mode: color-dodge;
	fill: #908190;
	opacity: calc( 1.5 - var(--from-center) );
	filter: drop-shadow(0 0 30px black) drop-shadow(0 0 10px black) brightness(1.3);
  }
  
  body {
	color: rgb(16, 16, 16);
	background: rgb(0, 0, 0);
	font-family: "Cinzel", sans-serif;
  }
  
  html, body, main {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	display: flex;
	place-items: center;
	/* grid-row: 1; */
  }
  
  img {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
  }
  
  .social-icon {
	stroke-width: 1.25;
	stroke: cyan;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	position: absolute;
	bottom: 10px;
	right: 10px;
	width: 24px;
	height: 24px;
	z-index: 10;
	-webkit-animation: iconsLoad 10s ease both 1s;
			animation: iconsLoad 10s ease both 1s;
  }
  
  .social-icon.twitter {
	right: 40px;
	-webkit-animation-delay: 0s;
			animation-delay: 0s;
  }
  
  @-webkit-keyframes iconsLoad {
	from {
	  opacity: 0;
	}
	to {
	  opacity: 1;
	}
  }
  
  @keyframes iconsLoad {
	from {
	  opacity: 0;
	}
	to {
	  opacity: 1;
	}
  }

// 👆 mouse-move following code
$("main").on("pointermove", (e) => {
    interacted = true;
    const { x, y } = e.originalEvent;
    const BOX = e.target.getBoundingClientRect();
    const POINT = { x: x - BOX.x, y: y - BOX.y };
    const RATIO = { x: POINT.x / BOX.width, y: POINT.y / BOX.height };
    const CENTER = fromCenter( RATIO );
    // set some css variables referenced in css
    e.target.style.setProperty( "--ratio-x", RATIO.x );
    e.target.style.setProperty( "--ratio-y", RATIO.y );
    e.target.style.setProperty( "--from-center", CENTER );
  });
  
  // maths 🤷‍♀️
  function fromCenter({ x, y }) {
    return Math.min(Math.max( 0, Math.sqrt( (y - .5) * (y - .5) + (x  - .5) * (x - .5) ) / .5 ), 1 );
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  let interacted = false;
  
  $("img").on("load", () => {
    // ⏰ lazy load triggers opacity  
    $("main").removeClass("loading");
    
    // ✨ little intro demo animation 
    $({foo:0}).animate({foo:(Math.PI*3)}, {
        duration: 8000,
        easing: "swing", 
        step: function(val) {
          if ( !interacted ) {
            document.querySelector("#app").style.setProperty( 
              "--ratio-x", (Math.cos(val) + 1.5) / 3 
            );
            document.querySelector("#app").style.setProperty( 
              "--ratio-y", (Math.sin(val) + 2) / 4  
            );
          }
        } 
    });  
  });