Updates site for AioLabs.dev, switches to lightning

Migrates the coming soon page from Ariege.io to AioLabs.dev.

Replaces the galaxy background with a lightning effect for a refreshed visual aesthetic.

index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Ariege.io - Coming Soon</title>
+    <title>AioLabs.dev - Coming Soon</title>
     <style>
       body {
         font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
@@ -19,4 +19,4 @@
     <div id="app"></div>
     <script type="module" src="/src/main.js"></script>
   </body>
-</html>
+</html>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ariege-coming-soon",
   "version": "1.0.0",
-  "description": "Coming Soon page for Ariege.io",
+  "description": "Coming Soon page for AioLabs.dev",
   "main": "index.html",
   "scripts": {
     "dev": "vite",

src/App.vue

@@ -1,24 +1,25 @@
 <template>
   <div class="app">
-    <Galaxy 
+    <Lightning
-      class="galaxy-background"
+      class="lightning-background"
-      :density="1.5"
+      :hue="33"
-      :glow-intensity="0.5"
+      :x-offset=".4"
-      :saturation="0.8"
+      :speed=".8"
-      :hue-shift="240"
+      :intensity="0.3"
+      :size="1.5"
     />
     <div class="content">
       <h1>Coming Soon</h1>
-      <p>Ariege.io</p>
+      <p>AioLabs.dev</p>
     </div>
     <footer class="footer">
-      <p>Galaxy background by <a href="https://vue-bits.dev" target="_blank" rel="noopener">Vue Bits</a></p>
+      <p>Lightning background by <a href="https://vue-bits.dev" target="_blank" rel="noopener">Vue Bits</a></p>
     </footer>
   </div>
 </template>
 
 <script setup>
-import Galaxy from './Galaxy.vue'
+import Lightning from './Lightning.vue'
 </script>
 
 <style>
@@ -41,7 +42,7 @@ body {
   justify-content: center;
 }
 
-.galaxy-background {
+.lightning-background {
   position: fixed;
   top: 0;
   left: 0;
@@ -60,7 +61,7 @@ body {
   font-size: 4rem;
   font-weight: 300;
   margin-bottom: 1rem;
-  background: linear-gradient(45deg, #fff, #a8edea);
+  background: linear-gradient(45deg, #fff, #F7931A);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
@@ -76,10 +77,10 @@ body {
 
 @keyframes glow {
   from {
-    text-shadow: 0 0 20px rgba(168, 237, 234, 0.3);
+    text-shadow: 0 0 20px rgba(247, 147, 26, 0.3);
   }
   to {
-    text-shadow: 0 0 30px rgba(168, 237, 234, 0.6);
+    text-shadow: 0 0 30px rgba(247, 147, 26, 0.6);
   }
 }
 
@@ -98,7 +99,7 @@ body {
 }
 
 .footer a {
-  color: rgba(168, 237, 234, 0.8);
+  color: rgba(247, 147, 26, 0.8);
   text-decoration: none;
   transition: opacity 0.3s ease;
 }
@@ -126,4 +127,4 @@ body {
     font-size: 0.7rem;
   }
 }
-</style>
+</style>

src/Lightning.vue

@@ -0,0 +1,275 @@
+<template>
+  <canvas ref="canvasRef" class="w-full h-full block mix-blend-screen relative"></canvas>
+</template>
+
+<script setup lang="ts">
+import { onMounted, onUnmounted, watch, useTemplateRef } from 'vue';
+
+interface LightningProps {
+  hue?: number;
+  xOffset?: number;
+  speed?: number;
+  intensity?: number;
+  size?: number;
+}
+
+const props = withDefaults(defineProps<LightningProps>(), {
+  hue: 230,
+  xOffset: 0,
+  speed: 1,
+  intensity: 1,
+  size: 1
+});
+
+const canvasRef = useTemplateRef<HTMLCanvasElement>('canvasRef');
+let animationId = 0;
+let gl: WebGLRenderingContext | null = null;
+let program: WebGLProgram | null = null;
+let startTime = 0;
+
+const vertexShaderSource = `
+attribute vec2 aPosition;
+void main() {
+  gl_Position = vec4(aPosition, 0.0, 1.0);
+}
+`;
+
+const fragmentShaderSource = `
+precision mediump float;
+uniform vec2 iResolution;
+uniform float iTime;
+uniform float uHue;
+uniform float uXOffset;
+uniform float uSpeed;
+uniform float uIntensity;
+uniform float uSize;
+
+#define OCTAVE_COUNT 10
+
+vec3 hsv2rgb(vec3 c) {
+    vec3 rgb = clamp(abs(mod(c.x * 6.0 + vec3(0.0,4.0,2.0), 6.0) - 3.0) - 1.0, 0.0, 1.0);
+    return c.z * mix(vec3(1.0), rgb, c.y);
+}
+
+float hash11(float p) {
+    p = fract(p * .1031);
+    p *= p + 33.33;
+    p *= p + p;
+    return fract(p);
+}
+
+float hash12(vec2 p) {
+    vec3 p3 = fract(vec3(p.xyx) * .1031);
+    p3 += dot(p3, p3.yzx + 33.33);
+    return fract((p3.x + p3.y) * p3.z);
+}
+
+mat2 rotate2d(float theta) {
+    float c = cos(theta);
+    float s = sin(theta);
+    return mat2(c, -s, s, c);
+}
+
+float noise(vec2 p) {
+    vec2 ip = floor(p);
+    vec2 fp = fract(p);
+    float a = hash12(ip);
+    float b = hash12(ip + vec2(1.0, 0.0));
+    float c = hash12(ip + vec2(0.0, 1.0));
+    float d = hash12(ip + vec2(1.0, 1.0));
+
+    vec2 t = smoothstep(0.0, 1.0, fp);
+    return mix(mix(a, b, t.x), mix(c, d, t.x), t.y);
+}
+
+float fbm(vec2 p) {
+    float value = 0.0;
+    float amplitude = 0.5;
+    for (int i = 0; i < OCTAVE_COUNT; ++i) {
+        value += amplitude * noise(p);
+        p *= rotate2d(0.45);
+        p *= 2.0;
+        amplitude *= 0.5;
+    }
+    return value;
+}
+
+void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
+    vec2 uv = fragCoord / iResolution.xy;
+    uv = 2.0 * uv - 1.0;
+    uv.x *= iResolution.x / iResolution.y;
+    uv.x += uXOffset;
+
+    uv += 2.0 * fbm(uv * uSize + 0.8 * iTime * uSpeed) - 1.0;
+
+    float dist = abs(uv.x);
+    vec3 baseColor = hsv2rgb(vec3(uHue / 360.0, 0.7, 0.8));
+    vec3 col = baseColor * pow(mix(0.0, 0.07, hash11(iTime * uSpeed)) / dist, 1.0) * uIntensity;
+    col = pow(col, vec3(1.0));
+    fragColor = vec4(col, 1.0);
+}
+
+void main() {
+    mainImage(gl_FragColor, gl_FragCoord.xy);
+}
+`;
+
+const compileShader = (source: string, type: number): WebGLShader | null => {
+  if (!gl) return null;
+  const shader = gl.createShader(type);
+  if (!shader) return null;
+  gl.shaderSource(shader, source);
+  gl.compileShader(shader);
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    console.error('Shader compile error:', gl.getShaderInfoLog(shader));
+    gl.deleteShader(shader);
+    return null;
+  }
+  return shader;
+};
+
+const initWebGL = () => {
+  const canvas = canvasRef.value;
+  if (!canvas) return;
+
+  const resizeCanvas = () => {
+    const rect = canvas.getBoundingClientRect();
+    const dpr = window.devicePixelRatio || 1;
+
+    let width = rect.width;
+    let height = rect.height;
+
+    let parent = canvas.parentElement;
+    while (parent && (!width || !height)) {
+      if (parent.offsetWidth && parent.offsetHeight) {
+        width = parent.offsetWidth;
+        height = parent.offsetHeight;
+        break;
+      }
+      parent = parent.parentElement;
+    }
+
+    if (!width || !height) {
+      width = window.innerWidth;
+      height = window.innerHeight;
+    }
+
+    width = Math.max(width, 300);
+    height = Math.max(height, 300);
+
+    canvas.width = width * dpr;
+    canvas.height = height * dpr;
+
+    canvas.style.width = '100%';
+    canvas.style.height = '100%';
+    canvas.style.display = 'block';
+    canvas.style.position = 'absolute';
+    canvas.style.top = '0';
+    canvas.style.left = '0';
+  };
+
+  resizeCanvas();
+  window.addEventListener('resize', resizeCanvas);
+
+  gl = canvas.getContext('webgl');
+  if (!gl) {
+    console.error('WebGL not supported');
+    return;
+  }
+
+  const vertexShader = compileShader(vertexShaderSource, gl.VERTEX_SHADER);
+  const fragmentShader = compileShader(fragmentShaderSource, gl.FRAGMENT_SHADER);
+  if (!vertexShader || !fragmentShader) return;
+
+  program = gl.createProgram();
+  if (!program) return;
+  gl.attachShader(program, vertexShader);
+  gl.attachShader(program, fragmentShader);
+  gl.linkProgram(program);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    console.error('Program linking error:', gl.getProgramInfoLog(program));
+    return;
+  }
+  gl.useProgram(program);
+
+  const vertices = new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]);
+  const vertexBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
+  gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
+
+  const aPosition = gl.getAttribLocation(program, 'aPosition');
+  gl.enableVertexAttribArray(aPosition);
+  gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0);
+
+  startTime = performance.now();
+  render();
+
+  return () => {
+    window.removeEventListener('resize', resizeCanvas);
+  };
+};
+
+const render = () => {
+  if (!gl || !program || !canvasRef.value) return;
+
+  const canvas = canvasRef.value;
+
+  const rect = canvas.getBoundingClientRect();
+  if (canvas.width !== rect.width || canvas.height !== rect.height) {
+    canvas.width = rect.width;
+    canvas.height = rect.height;
+    canvas.style.width = rect.width + 'px';
+    canvas.style.height = rect.height + 'px';
+  }
+
+  gl.viewport(0, 0, canvas.width, canvas.height);
+
+  const iResolutionLocation = gl.getUniformLocation(program, 'iResolution');
+  const iTimeLocation = gl.getUniformLocation(program, 'iTime');
+  const uHueLocation = gl.getUniformLocation(program, 'uHue');
+  const uXOffsetLocation = gl.getUniformLocation(program, 'uXOffset');
+  const uSpeedLocation = gl.getUniformLocation(program, 'uSpeed');
+  const uIntensityLocation = gl.getUniformLocation(program, 'uIntensity');
+  const uSizeLocation = gl.getUniformLocation(program, 'uSize');
+
+  gl.uniform2f(iResolutionLocation, canvas.width, canvas.height);
+  const currentTime = performance.now();
+  gl.uniform1f(iTimeLocation, (currentTime - startTime) / 1000.0);
+  gl.uniform1f(uHueLocation, props.hue);
+  gl.uniform1f(uXOffsetLocation, props.xOffset);
+  gl.uniform1f(uSpeedLocation, props.speed);
+  gl.uniform1f(uIntensityLocation, props.intensity);
+  gl.uniform1f(uSizeLocation, props.size);
+
+  gl.drawArrays(gl.TRIANGLES, 0, 6);
+  animationId = requestAnimationFrame(render);
+};
+
+onMounted(() => {
+  initWebGL();
+});
+
+onUnmounted(() => {
+  if (animationId) {
+    cancelAnimationFrame(animationId);
+  }
+});
+
+watch(
+  () => [props.hue, props.xOffset, props.speed, props.intensity, props.size],
+  () => {}
+);
+</script>
+
+<style scoped>
+canvas {
+  width: 100% !important;
+  height: 100% !important;
+  min-height: 100% !important;
+  display: block !important;
+  position: absolute !important;
+  top: 0 !important;
+  left: 0 !important;
+  z-index: 1 !important;
+}
+</style>