From 8b1b86328394824d103ee85195831ee0047caa65 Mon Sep 17 00:00:00 2001
From: Utkarsh-Singhal-26 <singhalutkarsh26@gmail.com>
Date: Thu, 24 Jul 2025 08:48:42 +0530
Subject: [PATCH] Added <FaultyTerminal /> background

---
 src/constants/Categories.ts                   |   3 +-
 src/constants/Components.ts                   |   1 +
 .../code/Backgrounds/faultyTerminalCode.ts    |  33 ++
 .../FaultyTerminal/FaultyTerminal.vue         | 439 ++++++++++++++++++
 src/demo/Backgrounds/FaultyTerminalDemo.vue   | 202 ++++++++
 5 files changed, 677 insertions(+), 1 deletion(-)
 create mode 100644 src/constants/code/Backgrounds/faultyTerminalCode.ts
 create mode 100644 src/content/Backgrounds/FaultyTerminal/FaultyTerminal.vue
 create mode 100644 src/demo/Backgrounds/FaultyTerminalDemo.vue

diff --git a/src/constants/Categories.ts b/src/constants/Categories.ts
index c7844c6..6bf56b4 100644
--- a/src/constants/Categories.ts
+++ b/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'];
+export const NEW = ['Target Cursor', 'Ripple Grid', 'Magic Bento', 'Galaxy', 'Text Type', 'Glass Surface', 'Sticker Peel', 'Scroll Stack', 'Faulty Terminal'];
 export const UPDATED = [];
 
 // Used for main sidebar navigation
@@ -93,6 +93,7 @@ export const CATEGORIES = [
       'Dither',
       'Dot Grid',
       'Hyperspeed',
+      'Faulty Terminal',
       'Ripple Grid',
       'Silk',
       'Lightning',
diff --git a/src/constants/Components.ts b/src/constants/Components.ts
index 374b699..a4b611d 100644
--- a/src/constants/Components.ts
+++ b/src/constants/Components.ts
@@ -95,6 +95,7 @@ const backgrounds = {
   'grid-distortion': () => import('../demo/Backgrounds/GridDistortionDemo.vue'),
   'ripple-grid': () => import('../demo/Backgrounds/RippleGridDemo.vue'),
   'galaxy': () => import('../demo/Backgrounds/GalaxyDemo.vue'),
+  'faulty-terminal': () => import('../demo/Backgrounds/FaultyTerminalDemo.vue'),
 };
 
 export const componentMap = {
diff --git a/src/constants/code/Backgrounds/faultyTerminalCode.ts b/src/constants/code/Backgrounds/faultyTerminalCode.ts
new file mode 100644
index 0000000..3a5a89b
--- /dev/null
+++ b/src/constants/code/Backgrounds/faultyTerminalCode.ts
@@ -0,0 +1,33 @@
+import code from '@content/Backgrounds/FaultyTerminal/FaultyTerminal.vue?raw';
+import { createCodeObject } from '../../../types/code';
+
+export const faultyTerminal = createCodeObject(code, 'Backgrounds/FaultyTerminal', {
+  installation: `npm install ogl`,
+  usage: `<template>
+  <div class="relative w-full h-[600px]">
+    <FaultyTerminal
+        :scale="1.5"
+        :grid-mul="[2, 1]"
+        :digit-size="1.2"
+        :time-scale="1"
+        :pause="false"
+        :scanline-intensity="1"
+        :glitch-amount="1"
+        :flicker-amount="1"
+        :noise-amp="1"
+        :chromatic-aberration="0"
+        :dither="0"
+        :curvature="0"
+        tint="#ffffff"
+        :mouse-react="true"
+        :mouse-strength="0.5"
+        :page-load-animation="false"
+        :brightness="1"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import FaultyTerminal from "./FaultyTerminal.vue";
+</script>`
+});
diff --git a/src/content/Backgrounds/FaultyTerminal/FaultyTerminal.vue b/src/content/Backgrounds/FaultyTerminal/FaultyTerminal.vue
new file mode 100644
index 0000000..95f037c
--- /dev/null
+++ b/src/content/Backgrounds/FaultyTerminal/FaultyTerminal.vue
@@ -0,0 +1,439 @@
+<script setup lang="ts">
+import { Color, Mesh, Program, Renderer, Triangle } from 'ogl';
+import { computed, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue';
+
+type Vec2 = [number, number];
+
+interface FaultyTerminalProps {
+  scale?: number;
+  gridMul?: Vec2;
+  digitSize?: number;
+  timeScale?: number;
+  pause?: boolean;
+  scanlineIntensity?: number;
+  glitchAmount?: number;
+  flickerAmount?: number;
+  noiseAmp?: number;
+  chromaticAberration?: number;
+  dither?: number | boolean;
+  curvature?: number;
+  tint?: string;
+  mouseReact?: boolean;
+  mouseStrength?: number;
+  dpr?: number;
+  pageLoadAnimation?: boolean;
+  brightness?: number;
+  className?: string;
+  style?: Record<string, string | number>;
+}
+
+const vertexShader = `
+attribute vec2 position;
+attribute vec2 uv;
+varying vec2 vUv;
+void main() {
+  vUv = uv;
+  gl_Position = vec4(position, 0.0, 1.0);
+}
+`;
+
+const fragmentShader = `
+precision mediump float;
+
+varying vec2 vUv;
+
+uniform float iTime;
+uniform vec3  iResolution;
+uniform float uScale;
+
+uniform vec2  uGridMul;
+uniform float uDigitSize;
+uniform float uScanlineIntensity;
+uniform float uGlitchAmount;
+uniform float uFlickerAmount;
+uniform float uNoiseAmp;
+uniform float uChromaticAberration;
+uniform float uDither;
+uniform float uCurvature;
+uniform vec3  uTint;
+uniform vec2  uMouse;
+uniform float uMouseStrength;
+uniform float uUseMouse;
+uniform float uPageLoadProgress;
+uniform float uUsePageLoadAnimation;
+uniform float uBrightness;
+
+float time;
+
+float hash21(vec2 p){
+  p = fract(p * 234.56);
+  p += dot(p, p + 34.56);
+  return fract(p.x * p.y);
+}
+
+float noise(vec2 p)
+{
+  return sin(p.x * 10.0) * sin(p.y * (3.0 + sin(time * 0.090909))) + 0.2;
+}
+
+mat2 rotate(float angle)
+{
+  float c = cos(angle);
+  float s = sin(angle);
+  return mat2(c, -s, s, c);
+}
+
+float fbm(vec2 p)
+{
+  p *= 1.1;
+  float f = 0.0;
+  float amp = 0.5 * uNoiseAmp;
+
+  mat2 modify0 = rotate(time * 0.02);
+  f += amp * noise(p);
+  p = modify0 * p * 2.0;
+  amp *= 0.454545; // 1/2.2
+
+  mat2 modify1 = rotate(time * 0.02);
+  f += amp * noise(p);
+  p = modify1 * p * 2.0;
+  amp *= 0.454545;
+
+  mat2 modify2 = rotate(time * 0.08);
+  f += amp * noise(p);
+
+  return f;
+}
+
+float pattern(vec2 p, out vec2 q, out vec2 r) {
+  vec2 offset1 = vec2(1.0);
+  vec2 offset0 = vec2(0.0);
+  mat2 rot01 = rotate(0.1 * time);
+  mat2 rot1 = rotate(0.1);
+
+  q = vec2(fbm(p + offset1), fbm(rot01 * p + offset1));
+  r = vec2(fbm(rot1 * q + offset0), fbm(q + offset0));
+  return fbm(p + r);
+}
+
+float digit(vec2 p){
+    vec2 grid = uGridMul * 15.0;
+    vec2 s = floor(p * grid) / grid;
+    p = p * grid;
+    vec2 q, r;
+    float intensity = pattern(s * 0.1, q, r) * 1.3 - 0.03;
+
+    if(uUseMouse > 0.5){
+        vec2 mouseWorld = uMouse * uScale;
+        float distToMouse = distance(s, mouseWorld);
+        float mouseInfluence = exp(-distToMouse * 8.0) * uMouseStrength * 10.0;
+        intensity += mouseInfluence;
+
+        float ripple = sin(distToMouse * 20.0 - iTime * 5.0) * 0.1 * mouseInfluence;
+        intensity += ripple;
+    }
+
+    if(uUsePageLoadAnimation > 0.5){
+        float cellRandom = fract(sin(dot(s, vec2(12.9898, 78.233))) * 43758.5453);
+        float cellDelay = cellRandom * 0.8;
+        float cellProgress = clamp((uPageLoadProgress - cellDelay) / 0.2, 0.0, 1.0);
+
+        float fadeAlpha = smoothstep(0.0, 1.0, cellProgress);
+        intensity *= fadeAlpha;
+    }
+
+    p = fract(p);
+    p *= uDigitSize;
+
+    float px5 = p.x * 5.0;
+    float py5 = (1.0 - p.y) * 5.0;
+    float x = fract(px5);
+    float y = fract(py5);
+
+    float i = floor(py5) - 2.0;
+    float j = floor(px5) - 2.0;
+    float n = i * i + j * j;
+    float f = n * 0.0625;
+
+    float isOn = step(0.1, intensity - f);
+    float brightness = isOn * (0.2 + y * 0.8) * (0.75 + x * 0.25);
+
+    return step(0.0, p.x) * step(p.x, 1.0) * step(0.0, p.y) * step(p.y, 1.0) * brightness;
+}
+
+float onOff(float a, float b, float c)
+{
+  return step(c, sin(iTime + a * cos(iTime * b))) * uFlickerAmount;
+}
+
+float displace(vec2 look)
+{
+    float y = look.y - mod(iTime * 0.25, 1.0);
+    float window = 1.0 / (1.0 + 50.0 * y * y);
+    return sin(look.y * 20.0 + iTime) * 0.0125 * onOff(4.0, 2.0, 0.8) * (1.0 + cos(iTime * 60.0)) * window;
+}
+
+vec3 getColor(vec2 p){
+
+    float bar = step(mod(p.y + time * 20.0, 1.0), 0.2) * 0.4 + 1.0; // more efficient than ternary
+    bar *= uScanlineIntensity;
+
+    float displacement = displace(p);
+    p.x += displacement;
+
+    if (uGlitchAmount != 1.0) {
+      float extra = displacement * (uGlitchAmount - 1.0);
+      p.x += extra;
+    }
+
+    float middle = digit(p);
+
+    const float off = 0.002;
+    float sum = digit(p + vec2(-off, -off)) + digit(p + vec2(0.0, -off)) + digit(p + vec2(off, -off)) +
+                digit(p + vec2(-off, 0.0)) + digit(p + vec2(0.0, 0.0)) + digit(p + vec2(off, 0.0)) +
+                digit(p + vec2(-off, off)) + digit(p + vec2(0.0, off)) + digit(p + vec2(off, off));
+
+    vec3 baseColor = vec3(0.9) * middle + sum * 0.1 * vec3(1.0) * bar;
+    return baseColor;
+}
+
+vec2 barrel(vec2 uv){
+  vec2 c = uv * 2.0 - 1.0;
+  float r2 = dot(c, c);
+  c *= 1.0 + uCurvature * r2;
+  return c * 0.5 + 0.5;
+}
+
+void main() {
+    time = iTime * 0.333333;
+    vec2 uv = vUv;
+
+    if(uCurvature != 0.0){
+      uv = barrel(uv);
+    }
+
+    vec2 p = uv * uScale;
+    vec3 col = getColor(p);
+
+    if(uChromaticAberration != 0.0){
+      vec2 ca = vec2(uChromaticAberration) / iResolution.xy;
+      col.r = getColor(p + ca).r;
+      col.b = getColor(p - ca).b;
+    }
+
+    col *= uTint;
+    col *= uBrightness;
+
+    if(uDither > 0.0){
+      float rnd = hash21(gl_FragCoord.xy);
+      col += (rnd - 0.5) * (uDither * 0.003922);
+    }
+
+    gl_FragColor = vec4(col, 1.0);
+}
+`;
+
+function hexToRgb(hex: string): [number, number, number] {
+  let h = hex.replace('#', '').trim();
+  if (h.length === 3)
+    h = h
+      .split('')
+      .map(c => c + c)
+      .join('');
+  const num = parseInt(h, 16);
+  return [((num >> 16) & 255) / 255, ((num >> 8) & 255) / 255, (num & 255) / 255];
+}
+
+const props = withDefaults(defineProps<FaultyTerminalProps>(), {
+  scale: 1,
+  gridMul: () => [2, 1],
+  digitSize: 1.5,
+  timeScale: 0.3,
+  pause: false,
+  scanlineIntensity: 0.3,
+  glitchAmount: 1,
+  flickerAmount: 1,
+  noiseAmp: 1,
+  chromaticAberration: 0,
+  dither: 0,
+  curvature: 0.2,
+  tint: '#ffffff',
+  mouseReact: true,
+  mouseStrength: 0.2,
+  dpr: Math.min(window.devicePixelRatio || 1, 2),
+  pageLoadAnimation: true,
+  brightness: 1,
+  className: '',
+  style: () => ({})
+});
+
+const containerRef = useTemplateRef('containerRef');
+const programRef = ref<Program | null>(null);
+const rendererRef = ref<Renderer | null>(null);
+const mouseRef = ref({ x: 0.5, y: 0.5 });
+const smoothMouseRef = ref({ x: 0.5, y: 0.5 });
+const frozenTimeRef = ref(0);
+const rafRef = ref<number>(0);
+const loadAnimationStartRef = ref<number>(0);
+const timeOffsetRef = ref<number>(Math.random() * 100);
+
+const tintVec = computed(() => hexToRgb(props.tint));
+
+const ditherValue = computed(() => (typeof props.dither === 'boolean' ? (props.dither ? 1 : 0) : props.dither));
+
+const handleMouseMove = (e: MouseEvent) => {
+  const ctn = containerRef.value;
+  if (!ctn) return;
+  const rect = ctn.getBoundingClientRect();
+  const x = (e.clientX - rect.left) / rect.width;
+  const y = 1 - (e.clientY - rect.top) / rect.height;
+  mouseRef.value = { x, y };
+};
+
+let cleanup: (() => void) | null = null;
+const setup = () => {
+  const ctn = containerRef.value;
+  if (!ctn) return;
+
+  const renderer = new Renderer({ dpr: props.dpr });
+  rendererRef.value = renderer;
+  const gl = renderer.gl;
+  gl.clearColor(0, 0, 0, 1);
+
+  const geometry = new Triangle(gl);
+
+  const program = new Program(gl, {
+    vertex: vertexShader,
+    fragment: fragmentShader,
+    uniforms: {
+      iTime: { value: 0 },
+      iResolution: {
+        value: new Color(gl.canvas.width, gl.canvas.height, gl.canvas.width / gl.canvas.height)
+      },
+      uScale: { value: props.scale },
+
+      uGridMul: { value: new Float32Array(props.gridMul) },
+      uDigitSize: { value: props.digitSize },
+      uScanlineIntensity: { value: props.scanlineIntensity },
+      uGlitchAmount: { value: props.glitchAmount },
+      uFlickerAmount: { value: props.flickerAmount },
+      uNoiseAmp: { value: props.noiseAmp },
+      uChromaticAberration: { value: props.chromaticAberration },
+      uDither: { value: ditherValue },
+      uCurvature: { value: props.curvature },
+      uTint: { value: new Color(tintVec.value[0], tintVec.value[1], tintVec.value[2]) },
+      uMouse: {
+        value: new Float32Array([smoothMouseRef.value.x, smoothMouseRef.value.y])
+      },
+      uMouseStrength: { value: props.mouseStrength },
+      uUseMouse: { value: props.mouseReact ? 1 : 0 },
+      uPageLoadProgress: { value: props.pageLoadAnimation ? 0 : 1 },
+      uUsePageLoadAnimation: { value: props.pageLoadAnimation ? 1 : 0 },
+      uBrightness: { value: props.brightness }
+    }
+  });
+  programRef.value = program;
+
+  const mesh = new Mesh(gl, { geometry, program });
+
+  function resize() {
+    if (!ctn || !renderer) return;
+    renderer.setSize(ctn.offsetWidth, ctn.offsetHeight);
+    program.uniforms.iResolution.value = new Color(
+      gl.canvas.width,
+      gl.canvas.height,
+      gl.canvas.width / gl.canvas.height
+    );
+  }
+
+  const resizeObserver = new ResizeObserver(() => resize());
+  resizeObserver.observe(ctn);
+  resize();
+
+  const update = (t: number) => {
+    rafRef.value = requestAnimationFrame(update);
+
+    if (props.pageLoadAnimation && loadAnimationStartRef.value === 0) {
+      loadAnimationStartRef.value = t;
+    }
+
+    if (!props.pause) {
+      const elapsed = (t * 0.001 + timeOffsetRef.value) * props.timeScale;
+      program.uniforms.iTime.value = elapsed;
+      frozenTimeRef.value = elapsed;
+    } else {
+      program.uniforms.iTime.value = frozenTimeRef.value;
+    }
+
+    if (props.pageLoadAnimation && loadAnimationStartRef.value > 0) {
+      const animationDuration = 2000;
+      const animationElapsed = t - loadAnimationStartRef.value;
+      const progress = Math.min(animationElapsed / animationDuration, 1);
+      program.uniforms.uPageLoadProgress.value = progress;
+    }
+
+    if (props.mouseReact) {
+      const dampingFactor = 0.08;
+      const smoothMouse = smoothMouseRef.value;
+      const mouse = mouseRef.value;
+      smoothMouse.x += (mouse.x - smoothMouse.x) * dampingFactor;
+      smoothMouse.y += (mouse.y - smoothMouse.y) * dampingFactor;
+
+      const mouseUniform = program.uniforms.uMouse.value as Float32Array;
+      mouseUniform[0] = smoothMouse.x;
+      mouseUniform[1] = smoothMouse.y;
+    }
+
+    renderer.render({ scene: mesh });
+  };
+  rafRef.value = requestAnimationFrame(update);
+  ctn.appendChild(gl.canvas);
+
+  if (props.mouseReact) ctn.addEventListener('mousemove', handleMouseMove);
+
+  cleanup = () => {
+    cancelAnimationFrame(rafRef.value);
+    resizeObserver.disconnect();
+    if (props.mouseReact) ctn.removeEventListener('mousemove', handleMouseMove);
+    if (gl.canvas.parentElement === ctn) ctn.removeChild(gl.canvas);
+    gl.getExtension('WEBGL_lose_context')?.loseContext();
+    loadAnimationStartRef.value = 0;
+    timeOffsetRef.value = Math.random() * 100;
+  };
+};
+
+onMounted(() => {
+  const ctn = containerRef.value;
+  if (ctn) {
+    setup();
+  }
+});
+
+onBeforeUnmount(() => {
+  if (cleanup) {
+    cleanup();
+    cleanup = null;
+  }
+});
+
+watch(
+  () => props,
+  () => {
+    if (cleanup) {
+      cleanup();
+      cleanup = null;
+    }
+    setup();
+  },
+  { deep: true }
+);
+</script>
+
+<template>
+  <div
+    ref="containerRef"
+    :class="['w-full h-full relative overflow-hidden', className]"
+    :style="style"
+    v-bind="$attrs"
+  />
+</template>
diff --git a/src/demo/Backgrounds/FaultyTerminalDemo.vue b/src/demo/Backgrounds/FaultyTerminalDemo.vue
new file mode 100644
index 0000000..caaf0a6
--- /dev/null
+++ b/src/demo/Backgrounds/FaultyTerminalDemo.vue
@@ -0,0 +1,202 @@
+<template>
+  <TabbedLayout>
+    <template #preview>
+      <div class="relative p-0 h-[600px] overflow-hidden demo-container">
+        <FaultyTerminal
+          :key="key"
+          :scale="scale"
+          :digit-size="digitSize"
+          :time-scale="timeScale"
+          :scanline-intensity="scanlineIntensity"
+          :curvature="curvature"
+          :tint="tint"
+          :mouse-react="mouseReact"
+          :mouse-strength="mouseStrength"
+          :page-load-animation="pageLoadAnimation"
+          :noise-amp="noiseAmp"
+          :brightness="brightness"
+        />
+        <BackgroundContent pill-text="New Background" headline="It works on my machine, please check again" />
+      </div>
+
+      <Customize>
+        <PreviewColor title="Tint Color" v-model="tint" />
+        <PreviewSlider :min="1" :max="3" :step="0.1" v-model="scale" title="Scale" />
+        <PreviewSlider :min="0.5" :max="3" :step="0.1" v-model="digitSize" title="Digit Size" />
+        <PreviewSlider :min="0" :max="3" :step="0.1" v-model="timeScale" title="Speed" />
+        <PreviewSlider :min="0.5" :max="1" :step="0.1" v-model="noiseAmp" title="Noise Amplitude" />
+        <PreviewSlider :min="0.1" :max="1" :step="0.1" v-model="brightness" title="Brightness" />
+        <PreviewSlider :min="0" :max="2" :step="0.1" v-model="scanlineIntensity" title="Scanline Intensity" />
+        <PreviewSlider :min="0" :max="0.5" :step="0.01" v-model="curvature" title="Curvature" />
+        <PreviewSlider :min="0" :max="2" :step="0.1" v-model="mouseStrength" title="Mouse Strength" />
+        <PreviewSwitch title="Mouse React" v-model="mouseReact" />
+        <PreviewSwitch title="Page Load Animation" v-model="pageLoadAnimation" />
+      </Customize>
+
+      <PropTable :data="propData" />
+      <Dependencies :dependency-list="['ogl']" />
+    </template>
+
+    <template #code>
+      <CodeExample :code-object="faultyTerminal" />
+    </template>
+
+    <template #cli>
+      <CliInstallation :command="faultyTerminal.cli" />
+    </template>
+  </TabbedLayout>
+</template>
+
+<script setup lang="ts">
+import { useForceRerender } from '@/composables/useForceRerender';
+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 { faultyTerminal } from '../../constants/code/Backgrounds/faultyTerminalCode';
+import FaultyTerminal from '../../content/Backgrounds/FaultyTerminal/FaultyTerminal.vue';
+
+const { rerenderKey: key } = useForceRerender();
+
+const scale = ref(1.5);
+const digitSize = ref(1.2);
+const timeScale = ref(0.5);
+const scanlineIntensity = ref(0.5);
+const curvature = ref(0.1);
+const tint = ref('#A7EF9E');
+const mouseReact = ref(true);
+const mouseStrength = ref(0.5);
+const pageLoadAnimation = ref(true);
+const noiseAmp = ref(1);
+const brightness = ref(0.6);
+
+const propData = [
+  {
+    name: 'scale',
+    type: 'number',
+    default: '1.5',
+    description: 'Controls the zoom/scale of the pattern.'
+  },
+  {
+    name: 'gridMul',
+    type: 'Vec2',
+    default: '[2, 1]',
+    description: 'Grid multiplier for glyph density [x, y].'
+  },
+  {
+    name: 'digitSize',
+    type: 'number',
+    default: '1.2',
+    description: 'Size of individual glyphs.'
+  },
+  {
+    name: 'timeScale',
+    type: 'number',
+    default: '1',
+    description: 'Animation speed multiplier.'
+  },
+  {
+    name: 'pause',
+    type: 'boolean',
+    default: 'false',
+    description: 'Pause/resume animation.'
+  },
+  {
+    name: 'scanlineIntensity',
+    type: 'number',
+    default: '1',
+    description: 'Strength of scanline effects.'
+  },
+  {
+    name: 'glitchAmount',
+    type: 'number',
+    default: '1',
+    description: 'Glitch displacement intensity.'
+  },
+  {
+    name: 'flickerAmount',
+    type: 'number',
+    default: '1',
+    description: 'Flicker effect strength.'
+  },
+  {
+    name: 'noiseAmp',
+    type: 'number',
+    default: '1',
+    description: 'Noise pattern amplitude.'
+  },
+  {
+    name: 'chromaticAberration',
+    type: 'number',
+    default: '0',
+    description: 'RGB channel separation in pixels.'
+  },
+  {
+    name: 'dither',
+    type: 'number | boolean',
+    default: '0',
+    description: 'Dithering effect intensity.'
+  },
+  {
+    name: 'curvature',
+    type: 'number',
+    default: '0',
+    description: 'Barrel distortion amount.'
+  },
+  {
+    name: 'tint',
+    type: 'string',
+    default: "'#ffffff'",
+    description: 'Color tint (hex).'
+  },
+  {
+    name: 'mouseReact',
+    type: 'boolean',
+    default: 'true',
+    description: 'Enable/disable mouse interaction.'
+  },
+  {
+    name: 'mouseStrength',
+    type: 'number',
+    default: '0.5',
+    description: 'Mouse interaction intensity.'
+  },
+  {
+    name: 'pageLoadAnimation',
+    type: 'boolean',
+    default: 'false',
+    description: 'Enable fade-in animation on load.'
+  },
+  {
+    name: 'brightness',
+    type: 'number',
+    default: '1',
+    description: 'Overall opacity/brightness control.'
+  },
+  {
+    name: 'className',
+    type: 'string',
+    default: "''",
+    description: 'Additional CSS classes.'
+  },
+  {
+    name: 'style',
+    type: 'React.CSSProperties',
+    default: '{}',
+    description: 'Inline styles.'
+  }
+];
+</script>
+
+<style scoped>
+.demo-container {
+  padding: 0;
+}
+</style>