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.
This commit is contained in:
parent
22e4c1bdc1
commit
9fc25c7828
4 changed files with 294 additions and 18 deletions
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
29
src/App.vue
29
src/App.vue
|
|
@ -1,24 +1,25 @@
|
|||
<template>
|
||||
<div class="app">
|
||||
<Galaxy
|
||||
class="galaxy-background"
|
||||
:density="1.5"
|
||||
:glow-intensity="0.5"
|
||||
:saturation="0.8"
|
||||
:hue-shift="240"
|
||||
<Lightning
|
||||
class="lightning-background"
|
||||
:hue="33"
|
||||
:x-offset=".4"
|
||||
:speed=".8"
|
||||
: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;
|
||||
}
|
||||
|
|
|
|||
275
src/Lightning.vue
Normal file
275
src/Lightning.vue
Normal file
|
|
@ -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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue