Small tweaks

src/components/common/PreviewColor.vue

@@ -27,7 +27,7 @@ const handleColorChange = (event: Event) => {
 }
 
 .color-label {
-  font-size: 0.875rem;
+  font-size: 14px;
   white-space: nowrap;
 }
 

src/constants/code/Animations/crosshairCode.ts

@@ -18,4 +18,4 @@ export const crosshair: CodeObject = {
   const containerElement = computed(() => containerRef.value);
 </script>`,
   code
-}; 
+};

src/constants/code/Backgrounds/ditherCode.ts

@@ -24,4 +24,4 @@ export const dither: CodeObject = {
   import Dither from "./Dither.vue";
 </script>`,
   code
-}; 
+};

src/content/Animations/Crosshair/Crosshair.vue

@@ -22,21 +22,11 @@
     >
       <defs>
         <filter id="filter-noise-x">
-          <feTurbulence
+          <feTurbulence type="fractalNoise" baseFrequency="0.000001" numOctaves="1" ref="filterXRef" />
-            type="fractalNoise"
-            baseFrequency="0.000001"
-            numOctaves="1"
-            ref="filterXRef"
-          />
           <feDisplacementMap in="SourceGraphic" scale="40" />
         </filter>
         <filter id="filter-noise-y">
-          <feTurbulence
+          <feTurbulence type="fractalNoise" baseFrequency="0.000001" numOctaves="1" ref="filterYRef" />
-            type="fractalNoise"
-            baseFrequency="0.000001"
-            numOctaves="1"
-            ref="filterYRef"
-          />
           <feDisplacementMap in="SourceGraphic" scale="40" />
         </filter>
       </defs>
@@ -215,9 +205,7 @@ onMounted(() => {
       animationId = requestAnimationFrame(render);
     };
 
-    const links = props.containerRef
+    const links = props.containerRef ? props.containerRef.querySelectorAll('a') : document.querySelectorAll('a');
-      ? props.containerRef.querySelectorAll('a')
-      : document.querySelectorAll('a');
 
     links.forEach((link: HTMLAnchorElement) => {
       link.addEventListener('mouseenter', enter);
@@ -227,12 +215,12 @@ onMounted(() => {
     cleanup = () => {
       target.removeEventListener('mousemove', handleMouseMove);
       target.removeEventListener('mousemove', onMouseMove);
-      
+
       if (animationId !== null) {
         cancelAnimationFrame(animationId);
         animationId = null;
       }
-      
+
       links.forEach((link: HTMLAnchorElement) => {
         link.removeEventListener('mouseenter', enter);
         link.removeEventListener('mouseleave', leave);
@@ -246,4 +234,4 @@ onMounted(() => {
     }
   });
 });
-</script> 
+</script>

src/content/Backgrounds/Dither/Dither.vue

@@ -244,16 +244,19 @@ const handleMouseMove = (e: MouseEvent) => {
   if (!containerRef.value || !gl) return;
 
   const rect = containerRef.value.getBoundingClientRect();
-  const dpr = window.devicePixelRatio || 1;
+
-  const x = (e.clientX - rect.left) * dpr;
+  const normalizedX = (e.clientX - rect.left) / rect.width;
-  const y = (e.clientY - rect.top) * dpr;
+  const normalizedY = (e.clientY - rect.top) / rect.height;
+
+  const x = normalizedX * gl.canvas.width;
+  const y = normalizedY * gl.canvas.height;
+
   targetMouse = [x, y];
 };
 
 const handleMouseLeave = () => {
   if (!gl) return;
-  const dpr = window.devicePixelRatio || 1;
+  targetMouse = [gl.canvas.width / 2, gl.canvas.height / 2];
-  targetMouse = [gl.canvas.width / (2 * dpr), gl.canvas.height / (2 * dpr)];
 };
 
 const update = (t: number) => {
@@ -267,16 +270,15 @@ const update = (t: number) => {
     program.uniforms.mousePos.value[1] = currentMouse[1];
   } else {
     if (gl) {
-      const dpr = window.devicePixelRatio || 1;
+      program.uniforms.mousePos.value[0] = gl.canvas.width / 2;
-      program.uniforms.mousePos.value[0] = gl.canvas.width / (2 * dpr);
+      program.uniforms.mousePos.value[1] = gl.canvas.height / 2;
-      program.uniforms.mousePos.value[1] = gl.canvas.height / (2 * dpr);
     }
   }
 
   if (!props.disableAnimation) {
     program.uniforms.time.value = t * 0.001;
   }
-  
+
   program.uniforms.waveSpeed.value = props.waveSpeed;
   program.uniforms.waveFrequency.value = props.waveFrequency;
   program.uniforms.waveAmplitude.value = props.waveAmplitude;

src/demo/Animations/CrosshairDemo.vue

@@ -28,17 +28,16 @@
       </div>
 
       <Customize>
-        <PreviewColor title="Crosshair Color" v-model="color" />
+        <PreviewSelect
+          title="Target"
+          :options="[
+            { label: 'Container', value: 'targeted' },
+            { label: 'Viewport', value: 'viewport' }
+          ]"
+          v-model="targetedMode"
+        />
 
-        <button
+        <PreviewColor title="Crosshair Color" v-model="color" />
-          class="bg-[#170D27] hover:bg-[#271E37] text-white text-xs px-3 py-2 border border-[#271E37] rounded-[10px] h-8 transition-colors mt-2"
-          @click="toggleTargeted"
-        >
-          Cursor Container
-          <span :class="targeted ? 'text-green-400' : 'text-orange-400'">
-            &nbsp;{{ targeted ? 'Viewport' : 'Targeted' }}
-          </span>
-        </button>
       </Customize>
 
       <PropTable :data="propData" />
@@ -64,6 +63,8 @@ import CliInstallation from '@/components/code/CliInstallation.vue';
 import CodeExample from '@/components/code/CodeExample.vue';
 import Customize from '@/components/common/Customize.vue';
 import PreviewColor from '@/components/common/PreviewColor.vue';
+import PreviewSelect from '@/components/common/PreviewSelect.vue';
+
 import Crosshair from '@/content/Animations/Crosshair/Crosshair.vue';
 import { crosshair } from '@/constants/code/Animations/crosshairCode';
 
@@ -71,7 +72,7 @@ const DEFAULT_TEXT = 'Aim... aand...';
 
 const linkText = ref(DEFAULT_TEXT);
 const color = ref('#ffffff');
-const targeted = ref(true);
+const targetedMode = ref('targeted');
 const minWidth = ref(0);
 
 const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
@@ -79,6 +80,7 @@ const linkRef = useTemplateRef<HTMLAnchorElement>('linkRef');
 const hiddenRef = useTemplateRef<HTMLSpanElement>('hiddenRef');
 
 const containerElement = computed(() => containerRef.value);
+const targeted = computed(() => targetedMode.value === 'targeted');
 
 const propData = [
   {
@@ -91,7 +93,8 @@ const propData = [
     name: 'containerRef',
     type: 'Ref<HTMLElement | null>',
     default: 'null',
-    description: 'Optional container ref to limit crosshair to specific element. If null, crosshair will be active on entire viewport.'
+    description:
+      'Optional container ref to limit crosshair to specific element. If null, crosshair will be active on entire viewport.'
   }
 ];
 
@@ -103,10 +106,6 @@ const handleMouseLeave = () => {
   linkText.value = DEFAULT_TEXT;
 };
 
-const toggleTargeted = () => {
-  targeted.value = !targeted.value;
-};
-
 const updateMinWidth = async () => {
   await nextTick();
   if (hiddenRef.value) {
@@ -137,4 +136,4 @@ onUnmounted(() => {
     resizeObserver.disconnect();
   }
 });
-</script> 
+</script>

src/demo/Backgrounds/DitherDemo.vue

@@ -73,18 +73,28 @@ import Dither from '../../content/Backgrounds/Dither/Dither.vue';
 
 const { rerenderKey, forceRerender } = useForceRerender();
 
-const waveSpeed = ref(0.05);
+const waveSpeed = ref(0.1);
-const waveFrequency = ref(3);
+const waveFrequency = ref(2.5);
-const waveAmplitude = ref(0.3);
+const waveAmplitude = ref(0.2);
-const waveColor = ref<[number, number, number]>([0.5, 0.5, 0.5]);
+const waveColor = ref<[number, number, number]>([0.1, 0.7, 0.5]);
 const colorNum = ref(4);
-const pixelSize = ref(2);
+const pixelSize = ref(3);
 const disableAnimation = ref(false);
 const enableMouseInteraction = ref(true);
-const mouseRadius = ref(1);
+const mouseRadius = ref(0.5);
 
 watch(
-  [waveSpeed, waveFrequency, waveAmplitude, waveColor, colorNum, pixelSize, disableAnimation, enableMouseInteraction, mouseRadius],
+  [
+    waveSpeed,
+    waveFrequency,
+    waveAmplitude,
+    waveColor,
+    colorNum,
+    pixelSize,
+    disableAnimation,
+    enableMouseInteraction,
+    mouseRadius
+  ],
   () => {
     forceRerender();
   },
@@ -147,4 +157,4 @@ const propData = [
     description: 'Radius of the mouse interaction effect.'
   }
 ];
-</script> 
+</script>