mirror of
https://github.com/DavidHDev/vue-bits.git
synced 2026-03-07 22:49:31 -07:00
Added <RippleGrid /> background
This commit is contained in:
Utkarsh-Singhal-26
275
src/content/Backgrounds/RippleGrid/RippleGrid.vue
Normal file
275
src/content/Backgrounds/RippleGrid/RippleGrid.vue
Normal file
@@ -0,0 +1,275 @@
|
||||
<script setup lang="ts">
|
||||
import { Renderer, Program, Triangle, Mesh } from 'ogl';
|
||||
import { onMounted, onUnmounted, ref, useTemplateRef, watch } from 'vue';
|
||||
|
||||
interface RippleGridProps {
|
||||
enableRainbow?: boolean;
|
||||
gridColor?: string;
|
||||
rippleIntensity?: number;
|
||||
gridSize?: number;
|
||||
gridThickness?: number;
|
||||
fadeDistance?: number;
|
||||
vignetteStrength?: number;
|
||||
glowIntensity?: number;
|
||||
opacity?: number;
|
||||
gridRotation?: number;
|
||||
mouseInteraction?: boolean;
|
||||
mouseInteractionRadius?: number;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<RippleGridProps>(), {
|
||||
enableRainbow: false,
|
||||
gridColor: '#27FF64',
|
||||
rippleIntensity: 0.05,
|
||||
gridSize: 10.0,
|
||||
gridThickness: 15.0,
|
||||
fadeDistance: 1.5,
|
||||
vignetteStrength: 2.0,
|
||||
glowIntensity: 0.1,
|
||||
opacity: 1.0,
|
||||
gridRotation: 0,
|
||||
mouseInteraction: true,
|
||||
mouseInteractionRadius: 1
|
||||
});
|
||||
|
||||
const hexToRgb = (hex: string): [number, number, number] => {
|
||||
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||||
return result
|
||||
? [parseInt(result[1], 16) / 255, parseInt(result[2], 16) / 255, parseInt(result[3], 16) / 255]
|
||||
: [1, 1, 1];
|
||||
};
|
||||
|
||||
const uniforms = {
|
||||
iTime: { value: 0 },
|
||||
iResolution: { value: [1, 1] },
|
||||
enableRainbow: { value: props.enableRainbow },
|
||||
gridColor: { value: hexToRgb(props.gridColor) },
|
||||
rippleIntensity: { value: props.rippleIntensity },
|
||||
gridSize: { value: props.gridSize },
|
||||
gridThickness: { value: props.gridThickness },
|
||||
fadeDistance: { value: props.fadeDistance },
|
||||
vignetteStrength: { value: props.vignetteStrength },
|
||||
glowIntensity: { value: props.glowIntensity },
|
||||
opacity: { value: props.opacity },
|
||||
gridRotation: { value: props.gridRotation },
|
||||
mouseInteraction: { value: props.mouseInteraction },
|
||||
mousePosition: { value: [0.5, 0.5] },
|
||||
mouseInfluence: { value: 0 },
|
||||
mouseInteractionRadius: { value: props.mouseInteractionRadius }
|
||||
};
|
||||
|
||||
const containerRef = useTemplateRef('containerRef');
|
||||
const mousePositionRef = ref({ x: 0.5, y: 0.5 });
|
||||
const targetMouseRef = ref({ x: 0.5, y: 0.5 });
|
||||
const mouseInfluenceRef = ref(0);
|
||||
const uniformsRef = ref<typeof uniforms | null>(null);
|
||||
|
||||
onMounted(() => {
|
||||
if (!containerRef.value) return;
|
||||
|
||||
const renderer = new Renderer({
|
||||
dpr: Math.min(window.devicePixelRatio, 2),
|
||||
alpha: true
|
||||
});
|
||||
const gl = renderer.gl;
|
||||
gl.enable(gl.BLEND);
|
||||
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
|
||||
gl.canvas.style.width = '100%';
|
||||
gl.canvas.style.height = '100%';
|
||||
containerRef.value.appendChild(gl.canvas);
|
||||
|
||||
const vert = `
|
||||
attribute vec2 position;
|
||||
varying vec2 vUv;
|
||||
void main() {
|
||||
vUv = position * 0.5 + 0.5;
|
||||
gl_Position = vec4(position, 0.0, 1.0);
|
||||
}`;
|
||||
|
||||
const frag = `precision highp float;
|
||||
uniform float iTime;
|
||||
uniform vec2 iResolution;
|
||||
uniform bool enableRainbow;
|
||||
uniform vec3 gridColor;
|
||||
uniform float rippleIntensity;
|
||||
uniform float gridSize;
|
||||
uniform float gridThickness;
|
||||
uniform float fadeDistance;
|
||||
uniform float vignetteStrength;
|
||||
uniform float glowIntensity;
|
||||
uniform float opacity;
|
||||
uniform float gridRotation;
|
||||
uniform bool mouseInteraction;
|
||||
uniform vec2 mousePosition;
|
||||
uniform float mouseInfluence;
|
||||
uniform float mouseInteractionRadius;
|
||||
varying vec2 vUv;
|
||||
|
||||
float pi = 3.141592;
|
||||
|
||||
mat2 rotate(float angle) {
|
||||
float s = sin(angle);
|
||||
float c = cos(angle);
|
||||
return mat2(c, -s, s, c);
|
||||
}
|
||||
|
||||
void main() {
|
||||
vec2 uv = vUv * 2.0 - 1.0;
|
||||
uv.x *= iResolution.x / iResolution.y;
|
||||
|
||||
if (gridRotation != 0.0) {
|
||||
uv = rotate(gridRotation * pi / 180.0) * uv;
|
||||
}
|
||||
|
||||
float dist = length(uv);
|
||||
float func = sin(pi * (iTime - dist));
|
||||
vec2 rippleUv = uv + uv * func * rippleIntensity;
|
||||
|
||||
if (mouseInteraction && mouseInfluence > 0.0) {
|
||||
vec2 mouseUv = (mousePosition * 2.0 - 1.0);
|
||||
mouseUv.x *= iResolution.x / iResolution.y;
|
||||
float mouseDist = length(uv - mouseUv);
|
||||
|
||||
float influence = mouseInfluence * exp(-mouseDist * mouseDist / (mouseInteractionRadius * mouseInteractionRadius));
|
||||
|
||||
float mouseWave = sin(pi * (iTime * 2.0 - mouseDist * 3.0)) * influence;
|
||||
rippleUv += normalize(uv - mouseUv) * mouseWave * rippleIntensity * 0.3;
|
||||
}
|
||||
|
||||
vec2 a = sin(gridSize * 0.5 * pi * rippleUv - pi / 2.0);
|
||||
vec2 b = abs(a);
|
||||
|
||||
float aaWidth = 0.5;
|
||||
vec2 smoothB = vec2(
|
||||
smoothstep(0.0, aaWidth, b.x),
|
||||
smoothstep(0.0, aaWidth, b.y)
|
||||
);
|
||||
|
||||
vec3 color = vec3(0.0);
|
||||
color += exp(-gridThickness * smoothB.x * (0.8 + 0.5 * sin(pi * iTime)));
|
||||
color += exp(-gridThickness * smoothB.y);
|
||||
color += 0.5 * exp(-(gridThickness / 4.0) * sin(smoothB.x));
|
||||
color += 0.5 * exp(-(gridThickness / 3.0) * smoothB.y);
|
||||
|
||||
if (glowIntensity > 0.0) {
|
||||
color += glowIntensity * exp(-gridThickness * 0.5 * smoothB.x);
|
||||
color += glowIntensity * exp(-gridThickness * 0.5 * smoothB.y);
|
||||
}
|
||||
|
||||
float ddd = exp(-2.0 * clamp(pow(dist, fadeDistance), 0.0, 1.0));
|
||||
|
||||
vec2 vignetteCoords = vUv - 0.5;
|
||||
float vignetteDistance = length(vignetteCoords);
|
||||
float vignette = 1.0 - pow(vignetteDistance * 2.0, vignetteStrength);
|
||||
vignette = clamp(vignette, 0.0, 1.0);
|
||||
|
||||
vec3 t;
|
||||
if (enableRainbow) {
|
||||
t = vec3(
|
||||
uv.x * 0.5 + 0.5 * sin(iTime),
|
||||
uv.y * 0.5 + 0.5 * cos(iTime),
|
||||
pow(cos(iTime), 4.0)
|
||||
) + 0.5;
|
||||
} else {
|
||||
t = gridColor;
|
||||
}
|
||||
|
||||
float finalFade = ddd * vignette;
|
||||
float alpha = length(color) * finalFade * opacity;
|
||||
gl_FragColor = vec4(color * t * finalFade * opacity, alpha);
|
||||
}`;
|
||||
|
||||
uniformsRef.value = uniforms;
|
||||
|
||||
const geometry = new Triangle(gl);
|
||||
const program = new Program(gl, { vertex: vert, fragment: frag, uniforms });
|
||||
const mesh = new Mesh(gl, { geometry, program });
|
||||
|
||||
const resize = () => {
|
||||
const { clientWidth: w, clientHeight: h } = containerRef.value!;
|
||||
renderer.setSize(w, h);
|
||||
uniforms.iResolution.value = [w, h];
|
||||
};
|
||||
|
||||
const handleMouseMove = (e: MouseEvent) => {
|
||||
if (!props.mouseInteraction || !containerRef.value) return;
|
||||
const rect = containerRef.value.getBoundingClientRect();
|
||||
const x = (e.clientX - rect.left) / rect.width;
|
||||
const y = 1.0 - (e.clientY - rect.top) / rect.height;
|
||||
targetMouseRef.value = { x, y };
|
||||
};
|
||||
|
||||
const handleMouseEnter = () => {
|
||||
if (!props.mouseInteraction) return;
|
||||
mouseInfluenceRef.value = 1.0;
|
||||
};
|
||||
|
||||
const handleMouseLeave = () => {
|
||||
if (!props.mouseInteraction) return;
|
||||
mouseInfluenceRef.value = 0.0;
|
||||
};
|
||||
|
||||
window.addEventListener('resize', resize);
|
||||
if (props.mouseInteraction) {
|
||||
containerRef.value.addEventListener('mousemove', handleMouseMove);
|
||||
containerRef.value.addEventListener('mouseenter', handleMouseEnter);
|
||||
containerRef.value.addEventListener('mouseleave', handleMouseLeave);
|
||||
}
|
||||
resize();
|
||||
|
||||
const render = (t: number) => {
|
||||
uniforms.iTime.value = t * 0.001;
|
||||
|
||||
const lerpFactor = 0.1;
|
||||
mousePositionRef.value.x += (targetMouseRef.value.x - mousePositionRef.value.x) * lerpFactor;
|
||||
mousePositionRef.value.y += (targetMouseRef.value.y - mousePositionRef.value.y) * lerpFactor;
|
||||
|
||||
const currentInfluence = uniforms.mouseInfluence.value;
|
||||
const targetInfluence = mouseInfluenceRef.value;
|
||||
uniforms.mouseInfluence.value += (targetInfluence - currentInfluence) * 0.05;
|
||||
|
||||
uniforms.mousePosition.value = [mousePositionRef.value.x, mousePositionRef.value.y];
|
||||
|
||||
renderer.render({ scene: mesh });
|
||||
requestAnimationFrame(render);
|
||||
};
|
||||
|
||||
requestAnimationFrame(render);
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', resize);
|
||||
if (props.mouseInteraction && containerRef.value) {
|
||||
containerRef.value.removeEventListener('mousemove', handleMouseMove);
|
||||
containerRef.value.removeEventListener('mouseenter', handleMouseEnter);
|
||||
containerRef.value.removeEventListener('mouseleave', handleMouseLeave);
|
||||
}
|
||||
renderer.gl.getExtension('WEBGL_lose_context')?.loseContext();
|
||||
containerRef.value?.removeChild(gl.canvas);
|
||||
});
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props,
|
||||
() => {
|
||||
if (!uniformsRef.value) return;
|
||||
|
||||
uniformsRef.value.enableRainbow.value = props.enableRainbow;
|
||||
uniformsRef.value.gridColor.value = hexToRgb(props.gridColor);
|
||||
uniformsRef.value.rippleIntensity.value = props.rippleIntensity;
|
||||
uniformsRef.value.gridSize.value = props.gridSize;
|
||||
uniformsRef.value.gridThickness.value = props.gridThickness;
|
||||
uniformsRef.value.fadeDistance.value = props.fadeDistance;
|
||||
uniformsRef.value.vignetteStrength.value = props.vignetteStrength;
|
||||
uniformsRef.value.glowIntensity.value = props.glowIntensity;
|
||||
uniformsRef.value.opacity.value = props.opacity;
|
||||
uniformsRef.value.gridRotation.value = props.gridRotation;
|
||||
uniformsRef.value.mouseInteraction.value = props.mouseInteraction;
|
||||
uniformsRef.value.mouseInteractionRadius.value = props.mouseInteractionRadius;
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="containerRef" class="[&_canvas]:block relative w-full h-full overflow-hidden" />
|
||||
</template>
|
||||
Reference in New Issue
Block a user