JSFiddle - React, Tailwind, and code Playground

by SQShu

HTML

<!DOCTYPE html>
<html>
<head>
  <style>
    * {
        user-select: none;
    }

    body {
        background-color: #000;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    
    h2 {
        position: absolute;
      	margin-left: 20px;
      /*	border: 1px solid white; */
        padding-left: 16px;
        padding-right:16px;
      	padding-top: 4px;
      	padding-bottom: 4px;
      	color: black;
        background-color: rgba(255,255,255,0.47);

      }
  </style>
    <link rel="stylesheet" href="styles.css">

<script src = "https://mimicproject.com/libs/maximilian.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"></script>
</head>
<body>

      <h2>W8_GLSL_beat heart_SSQ</h2>

  <!--Reference to the works of ilithya | https://codepen.io/ilithya/pen/ExyPMLJ -->


  
<div id="container"></div>
<script id="vertex" type="x-shader/x-vertex">
	void main() {    
      gl_Position = vec4(position, 1.0); 
    }
</script>

<script id="fragment" type="x-shader/x-vertex">
precision mediump float;
	
uniform vec2 u_resolution;
uniform float u_time;
uniform vec2 u_mouse;
uniform float myWave;
#define M_PI 3.14159265358979323846



void main() {

	vec2 uv = (gl_FragCoord.xy - u_resolution * 0.5) / u_resolution.yy;
    
    vec2 st = u_mouse.xy/u_resolution.xy;
    
    // Centerings 定位中心點
	uv += vec2(1.3, 1.0); 

	// Create one circle 創建一個圓 
	float circle = distance(uv, vec2(0.5)) * (abs(sin(u_time))/2.0+0.5+sin(myWave)); // radius 控制半徑
	float dm = abs(sin(u_time * M_PI));  // rate 控制跳動速率
	
    
    // Create light 創建光效
	vec3 light = vec3(0.5-tan(sin(circle*0.5+dm)), 0.5-acos(tan(circle*500.0+dm)), 0.0);
    
    
    // Mix hue&rgb 混合顏色和色相
	vec3 color1 = mix(light, vec3(8.0), 0.5-circle);   
	vec3 hue = mix(vec3(1.0, 1.0, 1.0), vec3(0.0, 0.0, 0.0), (st.y+abs(sin(u_time)))*0.5);
	vec3 color2 = mix(color1, hue, abs(uv.x-0.1));
	
    // Final shader  最後著色器渲染
	gl_FragColor = vec4(color1*color2,...