Merge pull request #41 from Utkarsh-Singhal-26/feat/ripple-grid

Added <RippleGrid /> background

src/constants/Categories.ts

@@ -95,7 +95,8 @@ export const CATEGORIES = [
       'Orb',
       'Ballpit',
       'Liquid Chrome',
-      'Grid Distortion'
+      'Grid Distortion',
+      'Ripple Grid',
     ]
   }
 ];

src/constants/Components.ts

@@ -82,6 +82,7 @@ const backgrounds = {
   'ballpit': () => import('../demo/Backgrounds/BallpitDemo.vue'),
   'liquid-chrome': () => import('../demo/Backgrounds/LiquidChromeDemo.vue'),
   'grid-distortion': () => import('../demo/Backgrounds/GridDistortionDemo.vue'),
+  'ripple-grid': () => import('../demo/Backgrounds/RippleGridDemo.vue'),
 };
 
 export const componentMap = {

src/constants/code/Backgrounds/rippleGridCode.ts

@@ -0,0 +1,26 @@
+import code from '@content/Backgrounds/RippleGrid/RippleGrid.vue?raw';
+import type { CodeObject } from '../../../types/code';
+
+export const rippleGrid: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/RippleGrid`,
+  installation: `npm install ogl`,
+  usage: `<template>
+  <div class="relative overflow-hidden h-[600px]">
+    <RippleGrid
+      :enable-rainbow="false"
+      :grid-color="#ffffff"
+      :ripple-intensity="0.05"
+      :grid-size="10"
+      :grid-thickness="15"
+      :mouse-interaction="true"
+      :mouse-interaction-radius="1.2"
+      :opacity="0.8"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import RippleGrid from "./RippleGrid.vue";
+</script>`,
+  code
+};

src/content/Backgrounds/RippleGrid/RippleGrid.vue

@@ -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>

src/demo/Backgrounds/RippleGridDemo.vue

@@ -0,0 +1,176 @@
+<template>
+  <TabbedLayout>
+    <template #preview>
+      <div class="relative p-0 h-[600px] overflow-hidden demo-container">
+        <RippleGrid
+          :enable-rainbow="enableRainbow"
+          :grid-color="gridColor"
+          :ripple-intensity="rippleIntensity"
+          :grid-size="gridSize"
+          :grid-thickness="gridThickness"
+          :fade-distance="fadeDistance"
+          :vignette-strength="vignetteStrength"
+          :glow-intensity="glowIntensity"
+          :opacity="opacity"
+          :grid-rotation="gridRotation"
+          :mouse-interaction="mouseInteraction"
+          :mouse-interaction-radius="mouseInteractionRadius"
+        />
+        <BackgroundContent pillText="New Background" headline="Retro yet futuristic, this is Ripple Grid!" />
+      </div>
+
+      <Customize>
+        <PreviewColor title="Grid Color" v-model="gridColor" />
+
+        <PreviewSlider title="Ripple Intensity" :min="0" :max="0.3" :step="0.01" v-model="rippleIntensity" />
+
+        <PreviewSlider title="Grid Size" :min="5" :max="30" :step="1" v-model="gridSize" />
+
+        <PreviewSlider title="Grid Thickness" :min="5" :max="30" :step="1" v-model="gridThickness" />
+
+        <PreviewSlider title="Fade Distance" :min="0.5" :max="3" :step="0.1" v-model="fadeDistance" />
+
+        <PreviewSlider title="Vignette Strength" :min="0.5" :max="5" :step="0.1" v-model="vignetteStrength" />
+
+        <PreviewSlider title="Glow Intensity" :min="0" :max="1" :step="0.05" v-model="glowIntensity" />
+
+        <PreviewSlider title="Opacity" :min="0" :max="1" :step="0.05" v-model="opacity" />
+
+        <PreviewSlider title="Grid Rotation" :min="0" :max="360" :step="1" v-model="gridRotation" value-unit="°" />
+
+        <PreviewSlider
+          title="Mouse Interaction Radius"
+          :min="0.2"
+          :max="2"
+          :step="0.1"
+          v-model="mouseInteractionRadius"
+        />
+
+        <PreviewSwitch title="Mouse Interaction" v-model="mouseInteraction" />
+
+        <PreviewSwitch title="Enable Rainbow" v-model="enableRainbow" />
+      </Customize>
+
+      <PropTable :data="propData" />
+      <Dependencies :dependency-list="['ogl']" />
+    </template>
+
+    <template #code>
+      <CodeExample :code-object="rippleGrid" />
+    </template>
+
+    <template #cli>
+      <CliInstallation :command="rippleGrid.cli" />
+    </template>
+  </TabbedLayout>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import Dependencies from '../../components/code/Dependencies.vue';
+import BackgroundContent from '../../components/common/BackgroundContent.vue';
+import Customize from '../../components/common/Customize.vue';
+import PreviewColor from '../../components/common/PreviewColor.vue';
+import PreviewSlider from '../../components/common/PreviewSlider.vue';
+import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import { rippleGrid } from '../../constants/code/Backgrounds/rippleGridCode';
+import RippleGrid from '../../content/Backgrounds/RippleGrid/RippleGrid.vue';
+
+const enableRainbow = ref(false);
+const gridColor = ref('#27FF64');
+const rippleIntensity = ref(0.05);
+const gridSize = ref(10.0);
+const gridThickness = ref(15.0);
+const fadeDistance = ref(1.5);
+const vignetteStrength = ref(2.0);
+const glowIntensity = ref(0.1);
+const opacity = ref(1.0);
+const gridRotation = ref(0);
+const mouseInteraction = ref(true);
+const mouseInteractionRadius = ref(0.8);
+
+const propData = [
+  {
+    name: 'enableRainbow',
+    type: 'boolean',
+    default: 'false',
+    description: 'Enables rainbow color cycling animation for the grid.'
+  },
+  {
+    name: 'gridColor',
+    type: 'string',
+    default: "'#27FF64'",
+    description: 'Color of the grid when rainbow mode is disabled.'
+  },
+  {
+    name: 'rippleIntensity',
+    type: 'number',
+    default: '0.05',
+    description: 'Controls the intensity of the ripple effect from the center.'
+  },
+  {
+    name: 'gridSize',
+    type: 'number',
+    default: '10.0',
+    description: 'Controls the density/size of the grid pattern.'
+  },
+  {
+    name: 'gridThickness',
+    type: 'number',
+    default: '15.0',
+    description: 'Controls the thickness of the grid lines.'
+  },
+  {
+    name: 'fadeDistance',
+    type: 'number',
+    default: '1.5',
+    description: 'Controls how far the fade effect extends from the center.'
+  },
+  {
+    name: 'vignetteStrength',
+    type: 'number',
+    default: '2.0',
+    description: 'Controls the intensity of the vignette (edge darkening) effect.'
+  },
+  {
+    name: 'glowIntensity',
+    type: 'number',
+    default: '0.1',
+    description: 'Adds a glow effect to the grid lines.'
+  },
+  {
+    name: 'opacity',
+    type: 'number',
+    default: '1.0',
+    description: 'Overall opacity of the entire effect.'
+  },
+  {
+    name: 'gridRotation',
+    type: 'number',
+    default: '0',
+    description: 'Rotate the entire grid pattern by degrees.'
+  },
+  {
+    name: 'mouseInteraction',
+    type: 'boolean',
+    default: 'false',
+    description: 'Enable mouse/touch interaction to create ripples.'
+  },
+  {
+    name: 'mouseInteractionRadius',
+    type: 'number',
+    default: '0.8',
+    description: 'Controls the radius of the mouse interaction effect.'
+  }
+];
+</script>
+
+<style scoped>
+.demo-container {
+  padding: 0;
+}
+</style>