re-arrange, add alpha blending

Author: lith-x

public/shader.vs

@@ -1,7 +1,7 @@
 #version 300 es
 in vec3 position;
 in vec3 instanceCenter;
-in vec4 instanceColor;
+in vec3 instanceColor;
 in float instanceSize;
 
 uniform mat4 u_view;
@@ -11,5 +11,5 @@ out vec4 v_color;
 
 void main() {
     gl_Position = u_proj * u_view * vec4(instanceSize * position + instanceCenter, 1.0);
-    v_color = instanceColor;
+    v_color = vec4(instanceColor, smoothstep(0.0, 0.05, instanceSize));
 }

src/bg-anim/bg-sandbox.ts

@@ -1,9 +1,9 @@
 ---
-const { what } = Astro.props;
+const { example } = Astro.props;
 ---
 
 <ul>
     <li>About me</li>
     <li>Projects</li>
-    <li>{what}</li>
+    <li>{example}</li>
 </ul>

src/components/sidebar.astro

@@ -1,3 +1,3 @@
 ---
-import "../styles/global.css"
+// import "../styles/global.css"
 ---

src/layouts/Layout.astro

@@ -17,9 +17,7 @@ import { Image } from "astro:assets";
   >
     <canvas
       id="bg-canvas"
-      class="fixed top-0 left-0 w-screen h-screen block -z-10"
-      >Browser doesn't support canvas :/</canvas
-    >
+      class="fixed top-0 left-0 w-screen h-screen block -z-10"></canvas>
     <div class="flex">
       <a class="self-center" href="https://github.com/lith-x">
         <Image
@@ -89,8 +87,9 @@ import { Image } from "astro:assets";
         and/or debugging across multiple platforms.
       </li>
     </ul>
+    <div class="fixed bottom-1 left-1 text-[1em] text-violet-300 italic">made by me! <a href="https://github.com/lith-x/lith-x.github.io/">source</a></div>
     <script>
-      import {main} from "../bg-anim/bg-main";
+      import { main } from "../ts/bg-webgl";
       main();
     </script>
   </body>