feat: added <LineWaves /> background

src/constants/code/Backgrounds/lineWavesCode.ts

@@ -0,0 +1,29 @@
+import code from '@content/Backgrounds/LineWaves/LineWaves.vue?raw';
+import { createCodeObject } from '../../../types/code';
+
+export const lineWaves = createCodeObject(code, 'Backgrounds/LineWaves', {
+  installation: `npm install ogl`,
+  usage: `<template>
+  <div style="width: 100%; height: 600px; position: relative;">
+    <LineWaves
+        :speed="0.3"
+        :innerLineCount="32"
+        :outerLineCount="36"
+        :warpIntensity="1"
+        :rotation="-45"
+        :edgeFadeWidth="0"
+        :colorCycleSpeed="1"
+        :brightness="0.2"
+        :color1="#ffffff"
+        :color2="#ffffff"
+        :color3="#ffffff"
+        :enableMouseInteraction="true"
+        :mouseInfluence="2"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import LineWaves from "./LineWaves.vue";
+</script>`
+});

src/content/Backgrounds/LineWaves/LineWaves.vue

@@ -0,0 +1,289 @@
+<script setup lang="ts">
+import { Renderer, Program, Mesh, Triangle } from 'ogl';
+import { onBeforeUnmount, onMounted, useTemplateRef, watch } from 'vue';
+
+interface LineWavesProps {
+  speed?: number;
+  innerLineCount?: number;
+  outerLineCount?: number;
+  warpIntensity?: number;
+  rotation?: number;
+  edgeFadeWidth?: number;
+  colorCycleSpeed?: number;
+  brightness?: number;
+  color1?: string;
+  color2?: string;
+  color3?: string;
+  enableMouseInteraction?: boolean;
+  mouseInfluence?: number;
+}
+
+function hexToVec3(hex: string): [number, number, number] {
+  const h = hex.replace('#', '');
+  return [parseInt(h.slice(0, 2), 16) / 255, parseInt(h.slice(2, 4), 16) / 255, parseInt(h.slice(4, 6), 16) / 255];
+}
+
+const vertexShader = `
+attribute vec2 uv;
+attribute vec2 position;
+varying vec2 vUv;
+void main() {
+  vUv = uv;
+  gl_Position = vec4(position, 0, 1);
+}
+`;
+
+const fragmentShader = `
+precision highp float;
+
+uniform float uTime;
+uniform vec3 uResolution;
+uniform float uSpeed;
+uniform float uInnerLines;
+uniform float uOuterLines;
+uniform float uWarpIntensity;
+uniform float uRotation;
+uniform float uEdgeFadeWidth;
+uniform float uColorCycleSpeed;
+uniform float uBrightness;
+uniform vec3 uColor1;
+uniform vec3 uColor2;
+uniform vec3 uColor3;
+uniform vec2 uMouse;
+uniform float uMouseInfluence;
+uniform bool uEnableMouse;
+
+#define HALF_PI 1.5707963
+
+float hashF(float n) {
+  return fract(sin(n * 127.1) * 43758.5453123);
+}
+
+float smoothNoise(float x) {
+  float i = floor(x);
+  float f = fract(x);
+  float u = f * f * (3.0 - 2.0 * f);
+  return mix(hashF(i), hashF(i + 1.0), u);
+}
+
+float displaceA(float coord, float t) {
+  float result = sin(coord * 2.123) * 0.2;
+  result += sin(coord * 3.234 + t * 4.345) * 0.1;
+  result += sin(coord * 0.589 + t * 0.934) * 0.5;
+  return result;
+}
+
+float displaceB(float coord, float t) {
+  float result = sin(coord * 1.345) * 0.3;
+  result += sin(coord * 2.734 + t * 3.345) * 0.2;
+  result += sin(coord * 0.189 + t * 0.934) * 0.3;
+  return result;
+}
+
+vec2 rotate2D(vec2 p, float angle) {
+  float c = cos(angle);
+  float s = sin(angle);
+  return vec2(p.x * c - p.y * s, p.x * s + p.y * c);
+}
+
+void main() {
+  vec2 coords = gl_FragCoord.xy / uResolution.xy;
+  coords = coords * 2.0 - 1.0;
+  coords = rotate2D(coords, uRotation);
+
+  float halfT = uTime * uSpeed * 0.5;
+  float fullT = uTime * uSpeed;
+
+  float mouseWarp = 0.0;
+  if (uEnableMouse) {
+    vec2 mPos = rotate2D(uMouse * 2.0 - 1.0, uRotation);
+    float mDist = length(coords - mPos);
+    mouseWarp = uMouseInfluence * exp(-mDist * mDist * 4.0);
+  }
+
+  float warpAx = coords.x + displaceA(coords.y, halfT) * uWarpIntensity + mouseWarp;
+  float warpAy = coords.y - displaceA(coords.x * cos(fullT) * 1.235, halfT) * uWarpIntensity;
+  float warpBx = coords.x + displaceB(coords.y, halfT) * uWarpIntensity + mouseWarp;
+  float warpBy = coords.y - displaceB(coords.x * sin(fullT) * 1.235, halfT) * uWarpIntensity;
+
+  vec2 fieldA = vec2(warpAx, warpAy);
+  vec2 fieldB = vec2(warpBx, warpBy);
+  vec2 blended = mix(fieldA, fieldB, mix(fieldA, fieldB, 0.5));
+
+  float fadeTop = smoothstep(uEdgeFadeWidth, uEdgeFadeWidth + 0.4, blended.y);
+  float fadeBottom = smoothstep(-uEdgeFadeWidth, -(uEdgeFadeWidth + 0.4), blended.y);
+  float vMask = 1.0 - max(fadeTop, fadeBottom);
+
+  float tileCount = mix(uOuterLines, uInnerLines, vMask);
+  float scaledY = blended.y * tileCount;
+  float nY = smoothNoise(abs(scaledY));
+
+  float ridge = pow(
+    step(abs(nY - blended.x) * 2.0, HALF_PI) * cos(2.0 * (nY - blended.x)),
+    5.0
+  );
+
+  float lines = 0.0;
+  for (float i = 1.0; i < 3.0; i += 1.0) {
+    lines += pow(max(fract(scaledY), fract(-scaledY)), i * 2.0);
+  }
+
+  float pattern = vMask * lines;
+
+  float cycleT = fullT * uColorCycleSpeed;
+  float rChannel = (pattern + lines * ridge) * (cos(blended.y + cycleT * 0.234) * 0.5 + 1.0);
+  float gChannel = (pattern + vMask * ridge) * (sin(blended.x + cycleT * 1.745) * 0.5 + 1.0);
+  float bChannel = (pattern + lines * ridge) * (cos(blended.x + cycleT * 0.534) * 0.5 + 1.0);
+
+  vec3 col = (rChannel * uColor1 + gChannel * uColor2 + bChannel * uColor3) * uBrightness;
+  float alpha = clamp(length(col), 0.0, 1.0);
+
+  gl_FragColor = vec4(col, alpha);
+}
+`;
+
+const props = withDefaults(defineProps<LineWavesProps>(), {
+  speed: 0.3,
+  innerLineCount: 32.0,
+  outerLineCount: 36.0,
+  warpIntensity: 1.0,
+  rotation: -45,
+  edgeFadeWidth: 0.0,
+  colorCycleSpeed: 1.0,
+  brightness: 0.2,
+  color1: '#ffffff',
+  color2: '#ffffff',
+  color3: '#ffffff',
+  enableMouseInteraction: true,
+  mouseInfluence: 2.0
+});
+
+const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
+
+let cleanup: (() => void) | null = null;
+const setup = () => {
+  if (!containerRef.value) return;
+  const container = containerRef.value;
+  const renderer = new Renderer({ alpha: true, premultipliedAlpha: false });
+  const gl = renderer.gl;
+  gl.clearColor(0, 0, 0, 0);
+
+  const currentMouse = [0.5, 0.5];
+  let targetMouse = [0.5, 0.5];
+
+  function handleMouseMove(e: MouseEvent) {
+    const rect = gl.canvas.getBoundingClientRect();
+    targetMouse = [(e.clientX - rect.left) / rect.width, 1.0 - (e.clientY - rect.top) / rect.height];
+  }
+
+  function handleMouseLeave() {
+    targetMouse = [0.5, 0.5];
+  }
+
+  renderer.setSize(container.offsetWidth, container.offsetHeight);
+
+  const geometry = new Triangle(gl);
+  const rotationRad = (props.rotation * Math.PI) / 180;
+  const program = new Program(gl, {
+    vertex: vertexShader,
+    fragment: fragmentShader,
+    uniforms: {
+      uTime: { value: 0 },
+      uResolution: { value: [gl.canvas.width, gl.canvas.height, gl.canvas.width / gl.canvas.height] },
+      uSpeed: { value: props.speed },
+      uInnerLines: { value: props.innerLineCount },
+      uOuterLines: { value: props.outerLineCount },
+      uWarpIntensity: { value: props.warpIntensity },
+      uRotation: { value: rotationRad },
+      uEdgeFadeWidth: { value: props.edgeFadeWidth },
+      uColorCycleSpeed: { value: props.colorCycleSpeed },
+      uBrightness: { value: props.brightness },
+      uColor1: { value: hexToVec3(props.color1) },
+      uColor2: { value: hexToVec3(props.color2) },
+      uColor3: { value: hexToVec3(props.color3) },
+      uMouse: { value: new Float32Array([0.5, 0.5]) },
+      uMouseInfluence: { value: props.mouseInfluence },
+      uEnableMouse: { value: props.enableMouseInteraction }
+    }
+  });
+
+  function resize() {
+    renderer.setSize(container.offsetWidth, container.offsetHeight);
+    program.uniforms.uResolution.value = [gl.canvas.width, gl.canvas.height, gl.canvas.width / gl.canvas.height];
+  }
+  window.addEventListener('resize', resize);
+
+  const mesh = new Mesh(gl, { geometry, program });
+  container.appendChild(gl.canvas);
+
+  if (props.enableMouseInteraction) {
+    gl.canvas.addEventListener('mousemove', handleMouseMove);
+    gl.canvas.addEventListener('mouseleave', handleMouseLeave);
+  }
+
+  let animationFrameId: number;
+
+  function update(time: number) {
+    animationFrameId = requestAnimationFrame(update);
+    program.uniforms.uTime.value = time * 0.001;
+
+    if (props.enableMouseInteraction) {
+      currentMouse[0] += 0.05 * (targetMouse[0] - currentMouse[0]);
+      currentMouse[1] += 0.05 * (targetMouse[1] - currentMouse[1]);
+      program.uniforms.uMouse.value[0] = currentMouse[0];
+      program.uniforms.uMouse.value[1] = currentMouse[1];
+    } else {
+      program.uniforms.uMouse.value[0] = 0.5;
+      program.uniforms.uMouse.value[1] = 0.5;
+    }
+
+    renderer.render({ scene: mesh });
+  }
+  animationFrameId = requestAnimationFrame(update);
+
+  cleanup = () => {
+    cancelAnimationFrame(animationFrameId);
+    window.removeEventListener('resize', resize);
+    if (props.enableMouseInteraction) {
+      gl.canvas.removeEventListener('mousemove', handleMouseMove);
+      gl.canvas.removeEventListener('mouseleave', handleMouseLeave);
+    }
+    container.removeChild(gl.canvas);
+    gl.getExtension('WEBGL_lose_context')?.loseContext();
+  };
+};
+
+onMounted(() => {
+  setup();
+});
+
+onBeforeUnmount(() => {
+  cleanup?.();
+});
+
+watch(
+  () => [
+    props.speed,
+    props.innerLineCount,
+    props.outerLineCount,
+    props.warpIntensity,
+    props.rotation,
+    props.edgeFadeWidth,
+    props.colorCycleSpeed,
+    props.brightness,
+    props.color1,
+    props.color2,
+    props.color3,
+    props.enableMouseInteraction,
+    props.mouseInfluence
+  ],
+  () => {
+    cleanup?.();
+    setup();
+  }
+);
+</script>
+
+<template>
+  <div ref="containerRef" class="w-full h-full" />
+</template>

src/demo/Backgrounds/LineWavesDemo.vue

@@ -0,0 +1,173 @@
+<template>
+  <TabbedLayout>
+    <template #preview>
+      <div class="relative p-0 h-[600px] overflow-hidden demo-container">
+        <LineWaves
+          :speed="speed"
+          :inner-line-count="innerLineCount"
+          :outer-line-count="outerLineCount"
+          :warp-intensity="warpIntensity"
+          :rotation="rotation"
+          :edge-fade-width="edgeFadeWidth"
+          :color-cycle-speed="colorCycleSpeed"
+          :brightness="brightness"
+          :color1="color1"
+          :color2="color2"
+          :color3="color3"
+          :enable-mouse-interaction="enableMouseInteraction"
+          :mouse-influence="mouseInfluence"
+        />
+
+        <BackgroundContent pill-text="New Background" headline="Ride the waves of your creativity!" />
+      </div>
+
+      <Customize>
+        <div class="flex items-center gap-4 mt-4">
+          <PreviewColor title="Color 1" v-model="color1" />
+          <PreviewColor title="Color 2" v-model="color2" />
+          <PreviewColor title="Color 3" v-model="color3" />
+        </div>
+
+        <PreviewSlider title="Speed" :min="0.1" :max="3" :step="0.1" v-model="speed" />
+        <PreviewSlider title="Inner Line Count" :min="2" :max="40" :step="1" v-model="innerLineCount" />
+        <PreviewSlider title="Outer Line Count" :min="2" :max="40" :step="1" v-model="outerLineCount" />
+        <PreviewSlider title="Warp Intensity" :min="0.1" :max="3" :step="0.1" v-model="warpIntensity" />
+        <PreviewSlider title="Rotation" :min="-180" :max="180" :step="1" v-model="rotation" />
+        <PreviewSlider title="Edge Fade Width" :min="0.0" :max="1.0" :step="0.05" v-model="edgeFadeWidth" />
+        <PreviewSlider title="Color Cycle Speed" :min="0.1" :max="5" :step="0.1" v-model="colorCycleSpeed" />
+        <PreviewSlider title="Brightness" :min="0.1" :max="3" :step="0.1" v-model="brightness" />
+        <PreviewSwitch title="Mouse Interaction" v-model="enableMouseInteraction" />
+        <PreviewSlider
+          v-if="enableMouseInteraction"
+          title="Mouse Influence"
+          :min="0.1"
+          :max="2"
+          :step="0.1"
+          v-model="mouseInfluence"
+        />
+      </Customize>
+
+      <PropTable :data="propData" />
+      <Dependencies :dependency-list="['ogl']" />
+    </template>
+
+    <template #code>
+      <CodeExample :code-object="lineWaves" />
+    </template>
+
+    <template #cli>
+      <CliInstallation :command="lineWaves.cli" />
+    </template>
+  </TabbedLayout>
+</template>
+
+<script setup lang="ts">
+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 { lineWaves } from '@/constants/code/Backgrounds/lineWavesCode';
+import LineWaves from '@/content/Backgrounds/LineWaves/LineWaves.vue';
+import { ref } from 'vue';
+
+const speed = ref(0.3);
+const innerLineCount = ref(32.0);
+const outerLineCount = ref(36.0);
+const warpIntensity = ref(1.0);
+const rotation = ref(-45);
+const edgeFadeWidth = ref(0.0);
+const colorCycleSpeed = ref(1.0);
+const brightness = ref(0.2);
+const color1 = ref('#ffffff');
+const color2 = ref('#ffffff');
+const color3 = ref('#ffffff');
+const enableMouseInteraction = ref(true);
+const mouseInfluence = ref(2.0);
+
+const propData = [
+  {
+    name: 'speed',
+    type: 'number',
+    default: '0.3',
+    description: 'Overall animation speed multiplier.'
+  },
+  {
+    name: 'innerLineCount',
+    type: 'number',
+    default: '32.0',
+    description: 'Number of lines in the inner (center) wave region.'
+  },
+  {
+    name: 'outerLineCount',
+    type: 'number',
+    default: '36.0',
+    description: 'Number of lines in the outer (edge) wave region.'
+  },
+  {
+    name: 'warpIntensity',
+    type: 'number',
+    default: '1.0',
+    description: 'Intensity of the wave distortion effect.'
+  },
+  {
+    name: 'rotation',
+    type: 'number',
+    default: '-45',
+    description: 'Rotation of the wave pattern in degrees.'
+  },
+  {
+    name: 'edgeFadeWidth',
+    type: 'number',
+    default: '0.0',
+    description: 'Width of the edge fade between inner and outer regions.'
+  },
+  {
+    name: 'colorCycleSpeed',
+    type: 'number',
+    default: '1.0',
+    description: 'Speed of color cycling animation.'
+  },
+  {
+    name: 'brightness',
+    type: 'number',
+    default: '0.2',
+    description: 'Overall brightness multiplier.'
+  },
+  {
+    name: 'color1',
+    type: 'string',
+    default: '"#ffffff"',
+    description: 'First color channel in HEX format.'
+  },
+  {
+    name: 'color2',
+    type: 'string',
+    default: '"#ffffff"',
+    description: 'Second color channel in HEX format.'
+  },
+  {
+    name: 'color3',
+    type: 'string',
+    default: '"#ffffff"',
+    description: 'Third color channel in HEX format.'
+  },
+  {
+    name: 'enableMouseInteraction',
+    type: 'boolean',
+    default: 'true',
+    description: 'Enable cursor-reactive wave distortion.'
+  },
+  {
+    name: 'mouseInfluence',
+    type: 'number',
+    default: '2.0',
+    description: 'Strength of mouse influence on the wave pattern.'
+  }
+];
+</script>