Merge branch 'main' into feat/electric-border

src/constants/Categories.ts

@@ -1,5 +1,5 @@
 // Highlighted sidebar items
-export const NEW = ['Target Cursor', 'Ripple Grid', 'Magic Bento', 'Galaxy', 'Text Type', 'Glass Surface', 'Sticker Peel', 'Scroll Stack', 'Faulty Terminal', 'Pill Nav', 'Card Nav', 'Logo Loop', 'Electric Border'];
+export const NEW = ['Prism', 'Plasma', 'Electric Border', 'Target Cursor', 'Ripple Grid', 'Magic Bento', 'Galaxy', 'Glass Surface', 'Sticker Peel', 'Scroll Stack', 'Faulty Terminal', 'Pill Nav', 'Card Nav', 'Logo Loop'];
 export const UPDATED = [];
 
 // Used for main sidebar navigation
@@ -96,6 +96,7 @@ export const CATEGORIES = [
   {
     name: 'Backgrounds',
     subcategories: [
+      'Prism',
       'Aurora',
       'Beams',
       'Dark Veil',
@@ -103,6 +104,7 @@ export const CATEGORIES = [
       'Dot Grid',
       'Hyperspeed',
       'Faulty Terminal',
+      'Plasma',
       'Ripple Grid',
       'Silk',
       'Lightning',

src/constants/Components.ts

@@ -106,6 +106,8 @@ const backgrounds = {
   'galaxy': () => import('../demo/Backgrounds/GalaxyDemo.vue'),
   'faulty-terminal': () => import('../demo/Backgrounds/FaultyTerminalDemo.vue'),
   'light-rays': () => import('../demo/Backgrounds/LightRaysDemo.vue'),
+  'plasma': () => import('../demo/Backgrounds/PlasmaDemo.vue'),
+  'prism': () => import('../demo/Backgrounds/PrismDemo.vue'),
 };
 
 export const componentMap = {

src/constants/code/Backgrounds/plasmaCode.ts

@@ -0,0 +1,22 @@
+import code from '@content/Backgrounds/Plasma/Plasma.vue?raw';
+import { createCodeObject } from '../../../types/code';
+
+export const plasma = createCodeObject(code, 'Backgrounds/Plasma', {
+  installation: `npm install ogl`,
+  usage: `<template>
+  <div style="width: 100%; height: 600px; position: relative;">
+    <Plasma
+      color="#ff6b35"
+      :speed="0.6"
+      direction="forward"
+      :scale="1.1"
+      :opacity="0.8"
+      :mouseInteractive="true"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import Plasma from "./Plasma.vue";
+</script>`
+});

src/constants/code/Backgrounds/prismCode.ts

@@ -0,0 +1,25 @@
+import code from '@content/Backgrounds/Prism/Prism.vue?raw';
+import { createCodeObject } from '../../../types/code';
+
+export const prism = createCodeObject(code, 'Backgrounds/Prism', {
+  installation: `npm install ogl`,
+  usage: `<template>
+  <div style="width: 100%; height: 600px; position: relative;">
+    <Prism
+      animation-type="rotate"
+      :time-scale="0.5"
+      :height="3.5"
+      :base-width="5.5"
+      :scale="3.6"
+      :hue-shift="0"
+      :color-frequency="1"
+      :noise="0.5"
+      :glow="1"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import Prism from "./Prism.vue";
+</script>`
+});

src/content/Backgrounds/Plasma/Plasma.vue

@@ -0,0 +1,224 @@
+<script setup lang="ts">
+import { Mesh, Program, Renderer, Triangle } from 'ogl';
+import { onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue';
+
+interface PlasmaProps {
+  color?: string;
+  speed?: number;
+  direction?: 'forward' | 'reverse' | 'pingpong';
+  scale?: number;
+  opacity?: number;
+  mouseInteractive?: boolean;
+}
+
+const props = withDefaults(defineProps<PlasmaProps>(), {
+  color: '#9EF2BE',
+  speed: 1,
+  direction: 'forward',
+  scale: 1,
+  opacity: 1,
+  mouseInteractive: true
+});
+
+const hexToRgb = (hex: string): [number, number, number] => {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  if (!result) return [1, 0.5, 0.2];
+  return [parseInt(result[1], 16) / 255, parseInt(result[2], 16) / 255, parseInt(result[3], 16) / 255];
+};
+
+const vertex = `#version 300 es
+precision highp float;
+in vec2 position;
+in vec2 uv;
+out vec2 vUv;
+void main() {
+  vUv = uv;
+  gl_Position = vec4(position, 0.0, 1.0);
+}
+`;
+
+const fragment = `#version 300 es
+precision highp float;
+uniform vec2 iResolution;
+uniform float iTime;
+uniform vec3 uCustomColor;
+uniform float uUseCustomColor;
+uniform float uSpeed;
+uniform float uDirection;
+uniform float uScale;
+uniform float uOpacity;
+uniform vec2 uMouse;
+uniform float uMouseInteractive;
+out vec4 fragColor;
+
+void mainImage(out vec4 o, vec2 C) {
+  vec2 center = iResolution.xy * 0.5;
+  C = (C - center) / uScale + center;
+  
+  vec2 mouseOffset = (uMouse - center) * 0.0002;
+  C += mouseOffset * length(C - center) * step(0.5, uMouseInteractive);
+  
+  float i, d, z, T = iTime * uSpeed * uDirection;
+  vec3 O, p, S;
+
+  for (vec2 r = iResolution.xy, Q; ++i < 60.; O += o.w/d*o.xyz) {
+    p = z*normalize(vec3(C-.5*r,r.y)); 
+    p.z -= 4.; 
+    S = p;
+    d = p.y-T;
+    
+    p.x += .4*(1.+p.y)*sin(d + p.x*0.1)*cos(.34*d + p.x*0.05); 
+    Q = p.xz *= mat2(cos(p.y+vec4(0,11,33,0)-T)); 
+    z+= d = abs(sqrt(length(Q*Q)) - .25*(5.+S.y))/3.+8e-4; 
+    o = 1.+sin(S.y+p.z*.5+S.z-length(S-p)+vec4(2,1,0,8));
+  }
+  
+  o.xyz = tanh(O/1e4);
+}
+
+bool finite1(float x){ return !(isnan(x) || isinf(x)); }
+vec3 sanitize(vec3 c){
+  return vec3(
+    finite1(c.r) ? c.r : 0.0,
+    finite1(c.g) ? c.g : 0.0,
+    finite1(c.b) ? c.b : 0.0
+  );
+}
+
+void main() {
+  vec4 o = vec4(0.0);
+  mainImage(o, gl_FragCoord.xy);
+  vec3 rgb = sanitize(o.rgb);
+  
+  float intensity = (rgb.r + rgb.g + rgb.b) / 3.0;
+  vec3 customColor = intensity * uCustomColor;
+  vec3 finalColor = mix(rgb, customColor, step(0.5, uUseCustomColor));
+  
+  float alpha = length(rgb) * uOpacity;
+  fragColor = vec4(finalColor, alpha);
+}`;
+
+const containerRef = useTemplateRef('containerRef');
+const mousePos = ref({ x: 0, y: 0 });
+
+let cleanup: (() => void) | null = null;
+
+const setup = () => {
+  if (!containerRef.value) return;
+
+  const useCustomColor = props.color ? 1.0 : 0.0;
+  const customColorRgb = props.color ? hexToRgb(props.color) : [1, 1, 1];
+
+  const directionMultiplier = props.direction === 'reverse' ? -1.0 : 1.0;
+
+  const renderer = new Renderer({
+    webgl: 2,
+    alpha: true,
+    antialias: false,
+    dpr: Math.min(window.devicePixelRatio || 1, 2)
+  });
+  const gl = renderer.gl;
+  const canvas = gl.canvas as HTMLCanvasElement;
+  canvas.style.display = 'block';
+  canvas.style.width = '100%';
+  canvas.style.height = '100%';
+  containerRef.value.appendChild(canvas);
+
+  const geometry = new Triangle(gl);
+
+  const program = new Program(gl, {
+    vertex: vertex,
+    fragment: fragment,
+    uniforms: {
+      iTime: { value: 0 },
+      iResolution: { value: new Float32Array([1, 1]) },
+      uCustomColor: { value: new Float32Array(customColorRgb) },
+      uUseCustomColor: { value: useCustomColor },
+      uSpeed: { value: props.speed * 0.4 },
+      uDirection: { value: directionMultiplier },
+      uScale: { value: props.scale },
+      uOpacity: { value: props.opacity },
+      uMouse: { value: new Float32Array([0, 0]) },
+      uMouseInteractive: { value: props.mouseInteractive ? 1.0 : 0.0 }
+    }
+  });
+
+  const mesh = new Mesh(gl, { geometry, program });
+
+  const handleMouseMove = (e: MouseEvent) => {
+    if (!props.mouseInteractive) return;
+    const rect = containerRef.value!.getBoundingClientRect();
+    mousePos.value.x = e.clientX - rect.left;
+    mousePos.value.y = e.clientY - rect.top;
+    const mouseUniform = program.uniforms.uMouse.value as Float32Array;
+    mouseUniform[0] = mousePos.value.x;
+    mouseUniform[1] = mousePos.value.y;
+  };
+
+  if (props.mouseInteractive) {
+    containerRef.value.addEventListener('mousemove', handleMouseMove);
+  }
+
+  const setSize = () => {
+    const rect = containerRef.value!.getBoundingClientRect();
+    const width = Math.max(1, Math.floor(rect.width));
+    const height = Math.max(1, Math.floor(rect.height));
+    renderer.setSize(width, height);
+    const res = program.uniforms.iResolution.value as Float32Array;
+    res[0] = gl.drawingBufferWidth;
+    res[1] = gl.drawingBufferHeight;
+  };
+
+  const ro = new ResizeObserver(setSize);
+  ro.observe(containerRef.value);
+  setSize();
+
+  let raf = 0;
+  const t0 = performance.now();
+  const loop = (t: number) => {
+    const timeValue = (t - t0) * 0.001;
+
+    if (props.direction === 'pingpong') {
+      const cycle = Math.sin(timeValue * 0.5) * directionMultiplier;
+      (program.uniforms.uDirection as { value: number }).value = cycle;
+    }
+
+    (program.uniforms.iTime as { value: number }).value = timeValue;
+    renderer.render({ scene: mesh });
+    raf = requestAnimationFrame(loop);
+  };
+  raf = requestAnimationFrame(loop);
+
+  cleanup = () => {
+    cancelAnimationFrame(raf);
+    ro.disconnect();
+    if (props.mouseInteractive && containerRef.value) {
+      containerRef.value.removeEventListener('mousemove', handleMouseMove);
+    }
+    try {
+      containerRef.value?.removeChild(canvas);
+    } catch {}
+  };
+};
+
+onMounted(() => {
+  setup();
+});
+
+onBeforeUnmount(() => {
+  cleanup?.();
+});
+
+watch(
+  props,
+  () => {
+    cleanup?.();
+    setup();
+  },
+  { deep: true }
+);
+</script>
+
+<template>
+  <div ref="containerRef" class="relative w-full h-full overflow-hidden" />
+</template>

src/content/Backgrounds/Prism/Prism.vue

@@ -0,0 +1,459 @@
+<script setup lang="ts">
+import { Mesh, Program, Renderer, Triangle } from 'ogl';
+import { onBeforeUnmount, onMounted, useTemplateRef, watch } from 'vue';
+
+type PrismProps = {
+  height?: number;
+  baseWidth?: number;
+  animationType?: 'rotate' | 'hover' | '3drotate';
+  glow?: number;
+  offset?: { x?: number; y?: number };
+  noise?: number;
+  transparent?: boolean;
+  scale?: number;
+  hueShift?: number;
+  colorFrequency?: number;
+  hoverStrength?: number;
+  inertia?: number;
+  bloom?: number;
+  suspendWhenOffscreen?: boolean;
+  timeScale?: number;
+};
+
+const props = withDefaults(defineProps<PrismProps>(), {
+  height: 3.5,
+  baseWidth: 5.5,
+  animationType: 'rotate',
+  glow: 1,
+  offset: () => ({ x: 0, y: 0 }),
+  noise: 0.5,
+  transparent: true,
+  scale: 3.6,
+  hueShift: 0,
+  colorFrequency: 1,
+  hoverStrength: 2,
+  inertia: 0.05,
+  bloom: 1,
+  suspendWhenOffscreen: false,
+  timeScale: 0.5
+});
+
+const containerRef = useTemplateRef('containerRef');
+
+let cleanup: (() => void) | null = null;
+
+const setup = () => {
+  const container = containerRef.value;
+  if (!container) return;
+
+  const H = Math.max(0.001, props.height);
+  const BW = Math.max(0.001, props.baseWidth);
+  const BASE_HALF = BW * 0.5;
+  const GLOW = Math.max(0.0, props.glow);
+  const NOISE = Math.max(0.0, props.noise);
+  const offX = props.offset?.x ?? 0;
+  const offY = props.offset?.y ?? 0;
+  const SAT = props.transparent ? 1.5 : 1;
+  const SCALE = Math.max(0.001, props.scale);
+  const HUE = props.hueShift || 0;
+  const CFREQ = Math.max(0.0, props.colorFrequency || 1);
+  const BLOOM = Math.max(0.0, props.bloom || 1);
+  const RSX = 1;
+  const RSY = 1;
+  const RSZ = 1;
+  const TS = Math.max(0, props.timeScale || 1);
+  const HOVSTR = Math.max(0, props.hoverStrength || 1);
+  const INERT = Math.max(0, Math.min(1, props.inertia || 0.12));
+
+  const dpr = Math.min(2, window.devicePixelRatio || 1);
+  const renderer = new Renderer({
+    dpr,
+    alpha: props.transparent,
+    antialias: false
+  });
+  const gl = renderer.gl;
+  gl.disable(gl.DEPTH_TEST);
+  gl.disable(gl.CULL_FACE);
+  gl.disable(gl.BLEND);
+
+  Object.assign(gl.canvas.style, {
+    position: 'absolute',
+    inset: '0',
+    width: '100%',
+    height: '100%',
+    display: 'block'
+  } as Partial<CSSStyleDeclaration>);
+  container.appendChild(gl.canvas);
+
+  const vertex = /* glsl */ `
+      attribute vec2 position;
+      void main() {
+        gl_Position = vec4(position, 0.0, 1.0);
+      }
+    `;
+
+  const fragment = /* glsl */ `
+      precision highp float;
+
+      uniform vec2  iResolution;
+      uniform float iTime;
+
+      uniform float uHeight;
+      uniform float uBaseHalf;
+      uniform mat3  uRot;
+      uniform int   uUseBaseWobble;
+      uniform float uGlow;
+      uniform vec2  uOffsetPx;
+      uniform float uNoise;
+      uniform float uSaturation;
+      uniform float uScale;
+      uniform float uHueShift;
+      uniform float uColorFreq;
+      uniform float uBloom;
+      uniform float uCenterShift;
+      uniform float uInvBaseHalf;
+      uniform float uInvHeight;
+      uniform float uMinAxis;
+      uniform float uPxScale;
+      uniform float uTimeScale;
+
+      vec4 tanh4(vec4 x){
+        vec4 e2x = exp(2.0*x);
+        return (e2x - 1.0) / (e2x + 1.0);
+      }
+
+      float rand(vec2 co){
+        return fract(sin(dot(co, vec2(12.9898, 78.233))) * 43758.5453123);
+      }
+
+      float sdOctaAnisoInv(vec3 p){
+        vec3 q = vec3(abs(p.x) * uInvBaseHalf, abs(p.y) * uInvHeight, abs(p.z) * uInvBaseHalf);
+        float m = q.x + q.y + q.z - 1.0;
+        return m * uMinAxis * 0.5773502691896258;
+      }
+
+      float sdPyramidUpInv(vec3 p){
+        float oct = sdOctaAnisoInv(p);
+        float halfSpace = -p.y;
+        return max(oct, halfSpace);
+      }
+
+      mat3 hueRotation(float a){
+        float c = cos(a), s = sin(a);
+        mat3 W = mat3(
+          0.299, 0.587, 0.114,
+          0.299, 0.587, 0.114,
+          0.299, 0.587, 0.114
+        );
+        mat3 U = mat3(
+           0.701, -0.587, -0.114,
+          -0.299,  0.413, -0.114,
+          -0.300, -0.588,  0.886
+        );
+        mat3 V = mat3(
+           0.168, -0.331,  0.500,
+           0.328,  0.035, -0.500,
+          -0.497,  0.296,  0.201
+        );
+        return W + U * c + V * s;
+      }
+
+      void main(){
+        vec2 f = (gl_FragCoord.xy - 0.5 * iResolution.xy - uOffsetPx) * uPxScale;
+
+        float z = 5.0;
+        float d = 0.0;
+
+        vec3 p;
+        vec4 o = vec4(0.0);
+
+        float centerShift = uCenterShift;
+        float cf = uColorFreq;
+
+        mat2 wob = mat2(1.0);
+        if (uUseBaseWobble == 1) {
+          float t = iTime * uTimeScale;
+          float c0 = cos(t + 0.0);
+          float c1 = cos(t + 33.0);
+          float c2 = cos(t + 11.0);
+          wob = mat2(c0, c1, c2, c0);
+        }
+
+        const int STEPS = 100;
+        for (int i = 0; i < STEPS; i++) {
+          p = vec3(f, z);
+          p.xz = p.xz * wob;
+          p = uRot * p;
+          vec3 q = p;
+          q.y += centerShift;
+          d = 0.1 + 0.2 * abs(sdPyramidUpInv(q));
+          z -= d;
+          o += (sin((p.y + z) * cf + vec4(0.0, 1.0, 2.0, 3.0)) + 1.0) / d;
+        }
+
+        o = tanh4(o * o * (uGlow * uBloom) / 1e5);
+
+        vec3 col = o.rgb;
+        float n = rand(gl_FragCoord.xy + vec2(iTime));
+        col += (n - 0.5) * uNoise;
+        col = clamp(col, 0.0, 1.0);
+
+        float L = dot(col, vec3(0.2126, 0.7152, 0.0722));
+        col = clamp(mix(vec3(L), col, uSaturation), 0.0, 1.0);
+
+        if(abs(uHueShift) > 0.0001){
+          col = clamp(hueRotation(uHueShift) * col, 0.0, 1.0);
+        }
+
+        gl_FragColor = vec4(col, o.a);
+      }
+    `;
+
+  const geometry = new Triangle(gl);
+  const iResBuf = new Float32Array(2);
+  const offsetPxBuf = new Float32Array(2);
+
+  const program = new Program(gl, {
+    vertex,
+    fragment,
+    uniforms: {
+      iResolution: { value: iResBuf },
+      iTime: { value: 0 },
+      uHeight: { value: H },
+      uBaseHalf: { value: BASE_HALF },
+      uUseBaseWobble: { value: 1 },
+      uRot: { value: new Float32Array([1, 0, 0, 0, 1, 0, 0, 0, 1]) },
+      uGlow: { value: GLOW },
+      uOffsetPx: { value: offsetPxBuf },
+      uNoise: { value: NOISE },
+      uSaturation: { value: SAT },
+      uScale: { value: SCALE },
+      uHueShift: { value: HUE },
+      uColorFreq: { value: CFREQ },
+      uBloom: { value: BLOOM },
+      uCenterShift: { value: H * 0.25 },
+      uInvBaseHalf: { value: 1 / BASE_HALF },
+      uInvHeight: { value: 1 / H },
+      uMinAxis: { value: Math.min(BASE_HALF, H) },
+      uPxScale: {
+        value: 1 / ((gl.drawingBufferHeight || 1) * 0.1 * SCALE)
+      },
+      uTimeScale: { value: TS }
+    }
+  });
+  const mesh = new Mesh(gl, { geometry, program });
+
+  const resize = () => {
+    const w = container.clientWidth || 1;
+    const h = container.clientHeight || 1;
+    renderer.setSize(w, h);
+    iResBuf[0] = gl.drawingBufferWidth;
+    iResBuf[1] = gl.drawingBufferHeight;
+    offsetPxBuf[0] = offX * dpr;
+    offsetPxBuf[1] = offY * dpr;
+    program.uniforms.uPxScale.value = 1 / ((gl.drawingBufferHeight || 1) * 0.1 * SCALE);
+  };
+  const ro = new ResizeObserver(resize);
+  ro.observe(container);
+  resize();
+
+  const rotBuf = new Float32Array(9);
+  const setMat3FromEuler = (yawY: number, pitchX: number, rollZ: number, out: Float32Array) => {
+    const cy = Math.cos(yawY),
+      sy = Math.sin(yawY);
+    const cx = Math.cos(pitchX),
+      sx = Math.sin(pitchX);
+    const cz = Math.cos(rollZ),
+      sz = Math.sin(rollZ);
+    const r00 = cy * cz + sy * sx * sz;
+    const r01 = -cy * sz + sy * sx * cz;
+    const r02 = sy * cx;
+
+    const r10 = cx * sz;
+    const r11 = cx * cz;
+    const r12 = -sx;
+
+    const r20 = -sy * cz + cy * sx * sz;
+    const r21 = sy * sz + cy * sx * cz;
+    const r22 = cy * cx;
+
+    out[0] = r00;
+    out[1] = r10;
+    out[2] = r20;
+    out[3] = r01;
+    out[4] = r11;
+    out[5] = r21;
+    out[6] = r02;
+    out[7] = r12;
+    out[8] = r22;
+    return out;
+  };
+
+  const NOISE_IS_ZERO = NOISE < 1e-6;
+  let raf = 0;
+  const t0 = performance.now();
+  const startRAF = () => {
+    if (raf) return;
+    raf = requestAnimationFrame(render);
+  };
+  const stopRAF = () => {
+    if (!raf) return;
+    cancelAnimationFrame(raf);
+    raf = 0;
+  };
+
+  const rnd = () => Math.random();
+  const wX = (0.3 + rnd() * 0.6) * RSX;
+  const wY = (0.2 + rnd() * 0.7) * RSY;
+  const wZ = (0.1 + rnd() * 0.5) * RSZ;
+  const phX = rnd() * Math.PI * 2;
+  const phZ = rnd() * Math.PI * 2;
+
+  let yaw = 0,
+    pitch = 0,
+    roll = 0;
+  let targetYaw = 0,
+    targetPitch = 0;
+  const lerp = (a: number, b: number, t: number) => a + (b - a) * t;
+
+  const pointer = { x: 0, y: 0, inside: true };
+  const onMove = (e: PointerEvent) => {
+    const ww = Math.max(1, window.innerWidth);
+    const wh = Math.max(1, window.innerHeight);
+    const cx = ww * 0.5;
+    const cy = wh * 0.5;
+    const nx = (e.clientX - cx) / (ww * 0.5);
+    const ny = (e.clientY - cy) / (wh * 0.5);
+    pointer.x = Math.max(-1, Math.min(1, nx));
+    pointer.y = Math.max(-1, Math.min(1, ny));
+    pointer.inside = true;
+  };
+  const onLeave = () => {
+    pointer.inside = false;
+  };
+  const onBlur = () => {
+    pointer.inside = false;
+  };
+
+  let onPointerMove: ((e: PointerEvent) => void) | null = null;
+  if (props.animationType === 'hover') {
+    onPointerMove = (e: PointerEvent) => {
+      onMove(e);
+      startRAF();
+    };
+    window.addEventListener('pointermove', onPointerMove, { passive: true });
+    window.addEventListener('mouseleave', onLeave);
+    window.addEventListener('blur', onBlur);
+    program.uniforms.uUseBaseWobble.value = 0;
+  } else if (props.animationType === '3drotate') {
+    program.uniforms.uUseBaseWobble.value = 0;
+  } else {
+    program.uniforms.uUseBaseWobble.value = 1;
+  }
+
+  const render = (t: number) => {
+    const time = (t - t0) * 0.001;
+    program.uniforms.iTime.value = time;
+
+    let continueRAF = true;
+
+    if (props.animationType === 'hover') {
+      const maxPitch = 0.6 * HOVSTR;
+      const maxYaw = 0.6 * HOVSTR;
+      targetYaw = (pointer.inside ? -pointer.x : 0) * maxYaw;
+      targetPitch = (pointer.inside ? pointer.y : 0) * maxPitch;
+      const prevYaw = yaw;
+      const prevPitch = pitch;
+      const prevRoll = roll;
+      yaw = lerp(prevYaw, targetYaw, INERT);
+      pitch = lerp(prevPitch, targetPitch, INERT);
+      roll = lerp(prevRoll, 0, 0.1);
+      program.uniforms.uRot.value = setMat3FromEuler(yaw, pitch, roll, rotBuf);
+
+      if (NOISE_IS_ZERO) {
+        const settled =
+          Math.abs(yaw - targetYaw) < 1e-4 && Math.abs(pitch - targetPitch) < 1e-4 && Math.abs(roll) < 1e-4;
+        if (settled) continueRAF = false;
+      }
+    } else if (props.animationType === '3drotate') {
+      const tScaled = time * TS;
+      yaw = tScaled * wY;
+      pitch = Math.sin(tScaled * wX + phX) * 0.6;
+      roll = Math.sin(tScaled * wZ + phZ) * 0.5;
+      program.uniforms.uRot.value = setMat3FromEuler(yaw, pitch, roll, rotBuf);
+      if (TS < 1e-6) continueRAF = false;
+    } else {
+      rotBuf[0] = 1;
+      rotBuf[1] = 0;
+      rotBuf[2] = 0;
+      rotBuf[3] = 0;
+      rotBuf[4] = 1;
+      rotBuf[5] = 0;
+      rotBuf[6] = 0;
+      rotBuf[7] = 0;
+      rotBuf[8] = 1;
+      program.uniforms.uRot.value = rotBuf;
+      if (TS < 1e-6) continueRAF = false;
+    }
+
+    renderer.render({ scene: mesh });
+    if (continueRAF) {
+      raf = requestAnimationFrame(render);
+    } else {
+      raf = 0;
+    }
+  };
+
+  if (props.suspendWhenOffscreen) {
+    const io = new IntersectionObserver(entries => {
+      const vis = entries.some(e => e.isIntersecting);
+      if (vis) startRAF();
+      else stopRAF();
+    });
+    io.observe(container);
+    startRAF();
+    (container as HTMLElement & { __prismIO?: IntersectionObserver }).__prismIO = io;
+  } else {
+    startRAF();
+  }
+
+  cleanup = () => {
+    stopRAF();
+    ro.disconnect();
+    if (props.animationType === 'hover') {
+      if (onPointerMove) window.removeEventListener('pointermove', onPointerMove as EventListener);
+      window.removeEventListener('mouseleave', onLeave);
+      window.removeEventListener('blur', onBlur);
+    }
+    if (props.suspendWhenOffscreen) {
+      const io = (container as HTMLElement & { __prismIO?: IntersectionObserver }).__prismIO as
+        | IntersectionObserver
+        | undefined;
+      if (io) io.disconnect();
+      delete (container as HTMLElement & { __prismIO?: IntersectionObserver }).__prismIO;
+    }
+    if (gl.canvas.parentElement === container) container.removeChild(gl.canvas);
+  };
+};
+
+onMounted(() => {
+  setup();
+});
+
+onBeforeUnmount(() => {
+  cleanup?.();
+});
+
+watch(
+  props,
+  () => {
+    cleanup?.();
+    setup();
+  },
+  { deep: true }
+);
+</script>
+
+<template>
+  <div class="relative w-full h-full" ref="containerRef" />
+</template>

src/demo/Backgrounds/PlasmaDemo.vue

@@ -0,0 +1,112 @@
+<template>
+  <TabbedLayout>
+    <template #preview>
+      <div class="relative p-0 h-[600px] overflow-hidden demo-container">
+        <Plasma
+          :color="color"
+          :speed="speed"
+          :direction="direction"
+          :scale="scale"
+          :opacity="opacity"
+          :mouseInteractive="mouseInteractive"
+        />
+        <BackgroundContent pill-text="New Background" headline="Minimal plasma waves that soothe the eyes" />
+      </div>
+
+      <Customize>
+        <PreviewColor title="Color" v-model="color" />
+        <PreviewSelect title="Direction" v-model="direction" :options="directionOptions" />
+        <PreviewSlider :min="0.1" :max="3.0" :step="0.1" v-model="speed" title="Speed" />
+        <PreviewSlider :min="0.5" :max="3.0" :step="0.1" v-model="scale" title="Scale" />
+        <PreviewSlider :min="0.1" :max="1.0" :step="0.1" v-model="opacity" title="Opacity" />
+        <PreviewSwitch title="Mouse Interactive" v-model="mouseInteractive" />
+      </Customize>
+
+      <PropTable :data="propData" />
+      <Dependencies :dependency-list="['ogl']" />
+    </template>
+
+    <template #code>
+      <CodeExample :code-object="plasma" />
+    </template>
+
+    <template #cli>
+      <CliInstallation :command="plasma.cli" />
+    </template>
+  </TabbedLayout>
+</template>
+
+<script setup lang="ts">
+import { plasma } from '@/constants/code/Backgrounds/plasmaCode';
+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 PreviewSelect from '../../components/common/PreviewSelect.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 Plasma from '../../content/Backgrounds/Plasma/Plasma.vue';
+
+const directionOptions = [
+  { value: 'forward', label: 'Forward' },
+  { value: 'reverse', label: 'Reverse' },
+  { value: 'pingpong', label: 'Ping Pong' }
+];
+
+const color = ref('#9EF2BE');
+const speed = ref(1.0);
+const direction = ref<'forward' | 'reverse' | 'pingpong'>('forward');
+const scale = ref(1.0);
+const opacity = ref(1.0);
+const mouseInteractive = ref(false);
+
+const propData = [
+  {
+    name: 'color',
+    type: 'string',
+    default: 'undefined',
+    description: 'Optional hex color to tint the plasma effect. If not provided, uses original colors.'
+  },
+  {
+    name: 'speed',
+    type: 'number',
+    default: '1.0',
+    description: 'Animation speed multiplier. Higher values = faster animation.'
+  },
+  {
+    name: 'direction',
+    type: "'forward' | 'reverse' | 'pingpong'",
+    default: "'forward'",
+    description: "Animation direction. 'pingpong' oscillates back and forth."
+  },
+  {
+    name: 'scale',
+    type: 'number',
+    default: '1.0',
+    description: 'Zoom level of the plasma pattern. Higher values zoom in.'
+  },
+  {
+    name: 'opacity',
+    type: 'number',
+    default: '1.0',
+    description: 'Overall opacity of the effect (0-1).'
+  },
+  {
+    name: 'mouseInteractive',
+    type: 'boolean',
+    default: 'false',
+    description: 'Whether the plasma responds to mouse movement.'
+  }
+];
+</script>
+
+<style scoped>
+.demo-container {
+  padding: 0;
+}
+</style>

src/demo/Backgrounds/PrismDemo.vue

@@ -0,0 +1,174 @@
+<template>
+  <TabbedLayout>
+    <template #preview>
+      <div class="relative p-0 h-[600px] overflow-hidden demo-container">
+        <Prism
+          :animation-type="animationType"
+          :time-scale="timeScale"
+          :scale="scale"
+          :noise="noise"
+          :glow="glow"
+          :height="height"
+          :base-width="baseWidth"
+          :hue-shift="hueShift"
+          :color-frequency="colorFrequency"
+        />
+
+        <BackgroundContent pill-text="New Background" headline="A spectrum of colors that spark creativity" />
+      </div>
+
+      <Customize>
+        <PreviewSelect title="Animation Type" v-model="animationType" :options="animationOptions" />
+        <PreviewSlider title="Time Scale" :min="0.1" :max="2" :step="0.1" v-model="timeScale" />
+        <PreviewSlider title="Scale" :min="1" :max="5" :step="0.1" v-model="scale" />
+        <PreviewSlider title="Height" :min="1" :max="5" :step="0.1" v-model="height" />
+        <PreviewSlider title="Base Width" :min="1" :max="10" :step="0.1" v-model="baseWidth" />
+        <PreviewSlider title="Noise" :min="0" :max="1" :step="0.05" v-model="noise" />
+        <PreviewSlider title="Glow" :min="0" :max="3" :step="0.1" v-model="glow" />
+        <PreviewSlider title="Hue Shift" :min="-3.1416" :max="3.1416" :step="0.1" v-model="hueShift" />
+        <PreviewSlider title="Color Frequency" :min="0.25" :max="4" :step="0.05" v-model="colorFrequency" />
+      </Customize>
+
+      <PropTable :data="propData" />
+      <Dependencies :dependency-list="['ogl']" />
+    </template>
+
+    <template #code>
+      <CodeExample :code-object="prism" />
+    </template>
+
+    <template #cli>
+      <CliInstallation :command="prism.cli" />
+    </template>
+  </TabbedLayout>
+</template>
+
+<script setup lang="ts">
+import { prism } from '@/constants/code/Backgrounds/prismCode';
+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 PreviewSelect from '../../components/common/PreviewSelect.vue';
+import PreviewSlider from '../../components/common/PreviewSlider.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import Prism from '../../content/Backgrounds/Prism/Prism.vue';
+
+const animationOptions = [
+  { value: 'rotate', label: 'Rotate' },
+  { value: 'hover', label: 'Hover' },
+  { value: '3drotate', label: '3D Rotate' }
+];
+
+const animationType = ref<'rotate' | 'hover' | '3drotate'>('rotate');
+const timeScale = ref(0.5);
+const scale = ref(3.6);
+const noise = ref(0);
+const glow = ref(1);
+const height = ref(3.5);
+const baseWidth = ref(5.5);
+const hueShift = ref(0);
+const colorFrequency = ref(1);
+
+const propData = [
+  {
+    name: 'height',
+    type: 'number',
+    default: '3.5',
+    description: 'Apex height of the prism (world units).'
+  },
+  {
+    name: 'baseWidth',
+    type: 'number',
+    default: '5.5',
+    description: 'Total base width across X/Z (world units).'
+  },
+  {
+    name: 'animationType',
+    type: '"rotate" | "hover" | "3drotate"',
+    default: '"rotate"',
+    description: 'Animation mode: shader wobble, pointer hover tilt, or full 3D rotation.'
+  },
+  {
+    name: 'glow',
+    type: 'number',
+    default: '1',
+    description: 'Glow/bleed intensity multiplier.'
+  },
+  {
+    name: 'offset',
+    type: '{ x?: number; y?: number }',
+    default: '{ x: 0, y: 0 }',
+    description: 'Pixel offset within the canvas (x→right, y→down).'
+  },
+  {
+    name: 'noise',
+    type: 'number',
+    default: '0.5',
+    description: 'Film-grain noise amount added to final color (0 disables).'
+  },
+  {
+    name: 'transparent',
+    type: 'boolean',
+    default: 'true',
+    description: 'Whether the canvas has an alpha channel (transparent background).'
+  },
+  {
+    name: 'scale',
+    type: 'number',
+    default: '3.6',
+    description: 'Overall screen-space scale of the prism (bigger = larger).'
+  },
+  {
+    name: 'hueShift',
+    type: 'number',
+    default: '0',
+    description: 'Hue rotation (radians) applied to final color.'
+  },
+  {
+    name: 'colorFrequency',
+    type: 'number',
+    default: '1',
+    description: 'Frequency of internal sine bands controlling color variation.'
+  },
+  {
+    name: 'hoverStrength',
+    type: 'number',
+    default: '2',
+    description: 'Sensitivity of hover tilt (pitch/yaw amplitude).'
+  },
+  {
+    name: 'inertia',
+    type: 'number',
+    default: '0.05',
+    description: 'Easing factor for hover (0..1, higher = snappier).'
+  },
+  {
+    name: 'bloom',
+    type: 'number',
+    default: '1',
+    description: 'Extra bloom factor layered on top of glow.'
+  },
+  {
+    name: 'suspendWhenOffscreen',
+    type: 'boolean',
+    default: 'false',
+    description: 'Pause rendering when the element is not in the viewport.'
+  },
+  {
+    name: 'timeScale',
+    type: 'number',
+    default: '0.5',
+    description: 'Global time multiplier for animations (0=frozen, 1=normal).'
+  }
+];
+</script>
+
+<style scoped>
+.demo-container {
+  padding: 0;
+}
+</style>