kmcom-nuxt-layers 1.7.9 → 2.1.6

package/layers/shader/app/components/Pipeline/UVNoiseWarp.client.vue

@@ -1,35 +1,54 @@
+<!-- eslint-disable vue/define-props-destructuring -->
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-// @ts-nocheck
-import { uniform, time, vec2 } from 'three/tsl'
-import { fbm2D } from '../../shaders/common/noise'
+  // @ts-nocheck
+  import { time, uniform, vec2 } from 'three/tsl'
 
-const props = withDefaults(defineProps<{
-  /** Warp strength in UV units */
-  strength?: number
-  /** Noise input scale */
-  scale?: number
-  /** Animation speed */
-  speed?: number
-  order?: number
-}>(), { strength: 0.3, scale: 2, speed: 0.2, order: 0 })
+  import { fbm2D } from '../../shaders/common/noise'
 
-const strengthNode = uniform(props.strength)
-const scaleNode = uniform(props.scale)
-const speedNode = uniform(props.speed)
-watch(() => props.strength, v => { strengthNode.value = v })
-watch(() => props.scale, v => { scaleNode.value = v })
-watch(() => props.speed, v => { speedNode.value = v })
+  const props = withDefaults(
+    defineProps<{
+      /** Warp strength in UV units */
+      strength?: number
+      /** Noise input scale */
+      scale?: number
+      /** Animation speed */
+      speed?: number
+      order?: number
+    }>(),
+    { strength: 0.3, scale: 2, speed: 0.2, order: 0 }
+  )
 
-useShaderStage(
-  (uvIn) => {
-    const t = time.mul(speedNode)
-    const warpX = fbm2D(uvIn.mul(scaleNode).add(t))
-    const warpY = fbm2D(uvIn.mul(scaleNode).add(vec2(5.2, 1.3)).add(t))
-    return uvIn.add(vec2(warpX, warpY).mul(strengthNode))
-  },
-  props.order,
-  'uv',
-)
-</script>
+  const strengthNode = uniform(props.strength)
+  const scaleNode = uniform(props.scale)
+  const speedNode = uniform(props.speed)
+  watch(
+    () => props.strength,
+    (v) => {
+      strengthNode.value = v
+    }
+  )
+  watch(
+    () => props.scale,
+    (v) => {
+      scaleNode.value = v
+    }
+  )
+  watch(
+    () => props.speed,
+    (v) => {
+      speedNode.value = v
+    }
+  )
 
-<template><!-- --></template>
+  useShaderStage(
+    (uvIn) => {
+      const t = time.mul(speedNode)
+      const warpX = fbm2D(uvIn.mul(scaleNode).add(t))
+      const warpY = fbm2D(uvIn.mul(scaleNode).add(vec2(5.2, 1.3)).add(t))
+      return uvIn.add(vec2(warpX, warpY).mul(strengthNode))
+    },
+    props.order,
+    'uv'
+  )
+</script>

package/layers/shader/app/components/Pipeline/UVOrbit.client.vue

@@ -1,34 +1,42 @@
+<!-- eslint-disable vue/define-props-destructuring -->
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-// @ts-nocheck
-import { uniform, time, vec2, cos, sin } from 'three/tsl'
+  // @ts-nocheck
+  import { cos, sin, time, uniform, vec2 } from 'three/tsl'
 
-/**
- * Rotates UV around a centre point continuously over time.
- * Distinct from UVRotate (static angle) — this is always animated.
- */
-const props = withDefaults(defineProps<{
-  /** Orbit speed in radians per second */
-  speed?: number
-  order?: number
-}>(), { speed: 0.5, order: 0 })
+  /**
+   * Rotates UV around a centre point continuously over time.
+   * Distinct from UVRotate (static angle) — this is always animated.
+   */
+  const props = withDefaults(
+    defineProps<{
+      /** Orbit speed in radians per second */
+      speed?: number
+      order?: number
+    }>(),
+    { speed: 0.5, order: 0 }
+  )
 
-const speedNode = uniform(props.speed)
-watch(() => props.speed, v => { speedNode.value = v })
+  const speedNode = uniform(props.speed)
+  watch(
+    () => props.speed,
+    (v) => {
+      speedNode.value = v
+    }
+  )
 
-useShaderStage(
-  (uvIn) => {
-    const angle = time.mul(speedNode)
-    const c = cos(angle)
-    const s = sin(angle)
-    const centered = uvIn.sub(0.5)
-    return vec2(
-      centered.x.mul(c).sub(centered.y.mul(s)),
-      centered.x.mul(s).add(centered.y.mul(c)),
-    ).add(0.5)
-  },
-  props.order,
-  'uv',
-)
+  useShaderStage(
+    (uvIn) => {
+      const angle = time.mul(speedNode)
+      const c = cos(angle)
+      const s = sin(angle)
+      const centered = uvIn.sub(0.5)
+      return vec2(
+        centered.x.mul(c).sub(centered.y.mul(s)),
+        centered.x.mul(s).add(centered.y.mul(c))
+      ).add(0.5)
+    },
+    props.order,
+    'uv'
+  )
 </script>
-
-<template><!-- --></template>

package/layers/shader/app/components/Pipeline/UVParallax.client.vue

@@ -1,39 +1,47 @@
+<!-- eslint-disable vue/define-props-destructuring -->
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-// @ts-nocheck
-import { Vector2 } from 'three'
-import { uniform, vec2 } from 'three/tsl'
+  // @ts-nocheck
+  import { Vector2 } from 'three'
+  import { uniform, vec2 } from 'three/tsl'
 
-/**
- * Offsets UV by the pointer position scaled by a parallax factor.
- * Creates the illusion of depth as the mouse moves — the ColorBends pattern.
- * p += pointer * parallax * 0.1
- */
-const props = withDefaults(defineProps<{
-  /** Parallax strength: 0 = no movement, 1 = full NDC range */
-  parallax?: number
-  order?: number
-}>(), { parallax: 0.5, order: 0 })
+  /**
+   * Offsets UV by the pointer position scaled by a parallax factor.
+   * Creates the illusion of depth as the mouse moves — the ColorBends pattern.
+   * p += pointer * parallax * 0.1
+   */
+  const props = withDefaults(
+    defineProps<{
+      /** Parallax strength: 0 = no movement, 1 = full NDC range */
+      parallax?: number
+      order?: number
+    }>(),
+    { parallax: 0.5, order: 0 }
+  )
 
-const mouse = uniform(new Vector2(0, 0))
-const parallaxNode = uniform(props.parallax)
-watch(() => props.parallax, v => { parallaxNode.value = v })
+  const mouse = uniform(new Vector2(0, 0))
+  const parallaxNode = uniform(props.parallax)
+  watch(
+    () => props.parallax,
+    (v) => {
+      parallaxNode.value = v
+    }
+  )
 
-onMounted(() => {
-  const onMove = (e: MouseEvent) => {
-    mouse.value.set(
-      (e.clientX / window.innerWidth) * 2 - 1,
-      -((e.clientY / window.innerHeight) * 2 - 1),
-    )
-  }
-  window.addEventListener('mousemove', onMove)
-  onUnmounted(() => window.removeEventListener('mousemove', onMove))
-})
+  onMounted(() => {
+    const onMove = (e: MouseEvent) => {
+      mouse.value.set(
+        (e.clientX / window.innerWidth) * 2 - 1,
+        -((e.clientY / window.innerHeight) * 2 - 1)
+      )
+    }
+    window.addEventListener('mousemove', onMove)
+    onUnmounted(() => window.removeEventListener('mousemove', onMove))
+  })
 
-useShaderStage(
-  (uvIn) => uvIn.add(vec2(mouse.x, mouse.y).mul(parallaxNode).mul(0.1)),
-  props.order,
-  'uv',
-)
+  useShaderStage(
+    (uvIn) => uvIn.add(vec2(mouse.x, mouse.y).mul(parallaxNode).mul(0.1)),
+    props.order,
+    'uv'
+  )
 </script>
-
-<template><!-- --></template>

package/layers/shader/app/components/Pipeline/UVPixelate.client.vue

@@ -1,21 +1,26 @@
+<!-- eslint-disable vue/no-unused-properties -->
+<!-- eslint-disable vue/define-props-destructuring -->
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-// @ts-nocheck
-import { uniform } from 'three/tsl'
+  // @ts-nocheck
+  import { uniform } from 'three/tsl'
 
-const props = withDefaults(defineProps<{
-  /** Number of pixel columns/rows — lower = chunkier pixels */
-  gridSize?: number
-  order?: number
-}>(), { gridSize: 64, order: 0 })
+  const props = withDefaults(
+    defineProps<{
+      /** Number of pixel columns/rows — lower = chunkier pixels */
+      gridSize?: number
+      order?: number
+    }>(),
+    { gridSize: 64, order: 0 }
+  )
 
-const gridSizeNode = uniform(props.gridSize)
-watch(() => props.gridSize, v => { gridSizeNode.value = v })
+  const gridSizeNode = uniform(props.gridSize)
+  watch(
+    () => props.gridSize,
+    (v) => {
+      gridSizeNode.value = v
+    }
+  )
 
-useShaderStage(
-  (uvIn) => uvIn.mul(gridSizeNode).floor().div(gridSizeNode),
-  order,
-  'uv',
-)
+  useShaderStage((uvIn) => uvIn.mul(gridSizeNode).floor().div(gridSizeNode), order, 'uv')
 </script>
-
-<template><!-- --></template>

package/layers/shader/app/components/Pipeline/UVPulse.client.vue

@@ -1,33 +1,46 @@
+<!-- eslint-disable vue/define-props-destructuring -->
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-// @ts-nocheck
-import { uniform, time, vec2, sin, float } from 'three/tsl'
+  // @ts-nocheck
+  import { float, sin, time, uniform, vec2 } from 'three/tsl'
 
-/**
- * Oscillating UV scale over time — the UV breathes in and out.
- * scale = 1 + sin(time * speed) * amount
- */
-const props = withDefaults(defineProps<{
-  /** Pulse amplitude (fraction of UV range) */
-  amount?: number
-  /** Pulse speed in radians per second */
-  speed?: number
-  order?: number
-}>(), { amount: 0.1, speed: 2, order: 0 })
+  /**
+   * Oscillating UV scale over time — the UV breathes in and out.
+   * scale = 1 + sin(time * speed) * amount
+   */
+  const props = withDefaults(
+    defineProps<{
+      /** Pulse amplitude (fraction of UV range) */
+      amount?: number
+      /** Pulse speed in radians per second */
+      speed?: number
+      order?: number
+    }>(),
+    { amount: 0.1, speed: 2, order: 0 }
+  )
 
-const amountNode = uniform(props.amount)
-const speedNode = uniform(props.speed)
-watch(() => props.amount, v => { amountNode.value = v })
-watch(() => props.speed, v => { speedNode.value = v })
+  const amountNode = uniform(props.amount)
+  const speedNode = uniform(props.speed)
+  watch(
+    () => props.amount,
+    (v) => {
+      amountNode.value = v
+    }
+  )
+  watch(
+    () => props.speed,
+    (v) => {
+      speedNode.value = v
+    }
+  )
 
-useShaderStage(
-  (uvIn) => {
-    const scale = float(1).add(sin(time.mul(speedNode)).mul(amountNode))
-    const centered = uvIn.sub(0.5).div(scale).add(0.5)
-    return vec2(centered.x, centered.y)
-  },
-  props.order,
-  'uv',
-)
+  useShaderStage(
+    (uvIn) => {
+      const scale = float(1).add(sin(time.mul(speedNode)).mul(amountNode))
+      const centered = uvIn.sub(0.5).div(scale).add(0.5)
+      return vec2(centered.x, centered.y)
+    },
+    props.order,
+    'uv'
+  )
 </script>
-
-<template><!-- --></template>

package/layers/shader/app/components/Pipeline/UVRipple.client.vue

@@ -1,34 +1,58 @@
+<!-- eslint-disable vue/define-props-destructuring -->
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-// @ts-nocheck
-import { uniform, time } from 'three/tsl'
-import { rippleUV } from '../../shaders/common/uv'
+  // @ts-nocheck
+  import { time, uniform } from 'three/tsl'
 
-const props = withDefaults(defineProps<{
-  /** Ripple frequency */
-  frequency?: number
-  /** Ripple amplitude */
-  amplitude?: number
-  /** Falloff rate from center */
-  falloff?: number
-  /** Animation speed */
-  speed?: number
-  order?: number
-}>(), { frequency: 10, amplitude: 0.05, falloff: 1, speed: 1, order: 0 })
+  import { rippleUV } from '../../shaders/common/uv'
 
-const freqNode = uniform(props.frequency)
-const ampNode = uniform(props.amplitude)
-const falloffNode = uniform(props.falloff)
-const speedNode = uniform(props.speed)
-watch(() => props.frequency, v => { freqNode.value = v })
-watch(() => props.amplitude, v => { ampNode.value = v })
-watch(() => props.falloff, v => { falloffNode.value = v })
-watch(() => props.speed, v => { speedNode.value = v })
+  const props = withDefaults(
+    defineProps<{
+      /** Ripple frequency */
+      frequency?: number
+      /** Ripple amplitude */
+      amplitude?: number
+      /** Falloff rate from center */
+      falloff?: number
+      /** Animation speed */
+      speed?: number
+      order?: number
+    }>(),
+    { frequency: 10, amplitude: 0.05, falloff: 1, speed: 1, order: 0 }
+  )
 
-useShaderStage(
-  (uvIn) => rippleUV(uvIn, [0.5, 0.5], freqNode, ampNode, time.mul(speedNode), falloffNode),
-  props.order,
-  'uv',
-)
-</script>
+  const freqNode = uniform(props.frequency)
+  const ampNode = uniform(props.amplitude)
+  const falloffNode = uniform(props.falloff)
+  const speedNode = uniform(props.speed)
+  watch(
+    () => props.frequency,
+    (v) => {
+      freqNode.value = v
+    }
+  )
+  watch(
+    () => props.amplitude,
+    (v) => {
+      ampNode.value = v
+    }
+  )
+  watch(
+    () => props.falloff,
+    (v) => {
+      falloffNode.value = v
+    }
+  )
+  watch(
+    () => props.speed,
+    (v) => {
+      speedNode.value = v
+    }
+  )
 
-<template><!-- --></template>
+  useShaderStage(
+    (uvIn) => rippleUV(uvIn, [0.5, 0.5], freqNode, ampNode, time.mul(speedNode), falloffNode),
+    props.order,
+    'uv'
+  )
+</script>

package/layers/shader/app/components/Pipeline/UVRotate.client.vue

@@ -1,37 +1,45 @@
+<!-- eslint-disable vue/define-props-destructuring -->
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-// @ts-nocheck
-import { uniform, vec2 } from 'three/tsl'
+  // @ts-nocheck
+  import { uniform, vec2 } from 'three/tsl'
 
-const props = withDefaults(defineProps<{
-  /** Rotation in degrees */
-  angle?: number
-  pivotX?: number
-  pivotY?: number
-  order?: number
-}>(), {
-  angle: 0,
-  pivotX: 0.5,
-  pivotY: 0.5,
-  order: 0,
-})
+  const props = withDefaults(
+    defineProps<{
+      /** Rotation in degrees */
+      angle?: number
+      pivotX?: number
+      pivotY?: number
+      order?: number
+    }>(),
+    {
+      angle: 0,
+      pivotX: 0.5,
+      pivotY: 0.5,
+      order: 0,
+    }
+  )
 
-const angleNode = uniform(props.angle * (Math.PI / 180))
-watch(() => props.angle, v => { angleNode.value = v * (Math.PI / 180) })
+  const angleNode = uniform(props.angle * (Math.PI / 180))
+  watch(
+    () => props.angle,
+    (v) => {
+      angleNode.value = v * (Math.PI / 180)
+    }
+  )
 
-useShaderStage(
-  (uvIn) => {
-    const pivot = vec2(props.pivotX, props.pivotY)
-    const cosA = angleNode.cos()
-    const sinA = angleNode.sin()
-    const centered = uvIn.sub(pivot)
-    return vec2(
-      centered.x.mul(cosA).sub(centered.y.mul(sinA)),
-      centered.x.mul(sinA).add(centered.y.mul(cosA)),
-    ).add(pivot)
-  },
-  props.order,
-  'uv',
-)
+  useShaderStage(
+    (uvIn) => {
+      const pivot = vec2(props.pivotX, props.pivotY)
+      const cosA = angleNode.cos()
+      const sinA = angleNode.sin()
+      const centered = uvIn.sub(pivot)
+      return vec2(
+        centered.x.mul(cosA).sub(centered.y.mul(sinA)),
+        centered.x.mul(sinA).add(centered.y.mul(cosA))
+      ).add(pivot)
+    },
+    props.order,
+    'uv'
+  )
 </script>
-
-<template><!-- --></template>

package/layers/shader/app/components/Pipeline/UVScale.client.vue

@@ -1,30 +1,38 @@
+<!-- eslint-disable vue/define-props-destructuring -->
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-// @ts-nocheck
-import { uniform } from 'three/tsl'
+  // @ts-nocheck
+  import { uniform } from 'three/tsl'
 
-const props = withDefaults(defineProps<{
-  scale?: number
-  pivotX?: number
-  pivotY?: number
-  order?: number
-}>(), {
-  scale: 1,
-  pivotX: 0.5,
-  pivotY: 0.5,
-  order: 0,
-})
+  const props = withDefaults(
+    defineProps<{
+      scale?: number
+      pivotX?: number
+      pivotY?: number
+      order?: number
+    }>(),
+    {
+      scale: 1,
+      pivotX: 0.5,
+      pivotY: 0.5,
+      order: 0,
+    }
+  )
 
-const scaleNode = uniform(props.scale)
-watch(() => props.scale, v => { scaleNode.value = v })
+  const scaleNode = uniform(props.scale)
+  watch(
+    () => props.scale,
+    (v) => {
+      scaleNode.value = v
+    }
+  )
 
-useShaderStage(
-  (uvIn) => {
-    const pivot = vec2(props.pivotX, props.pivotY)
-    return uvIn.sub(pivot).div(scaleNode).add(pivot)
-  },
-  props.order,
-  'uv',
-)
+  useShaderStage(
+    (uvIn) => {
+      const pivot = vec2(props.pivotX, props.pivotY)
+      return uvIn.sub(pivot).div(scaleNode).add(pivot)
+    },
+    props.order,
+    'uv'
+  )
 </script>
-
-<template><!-- --></template>

package/layers/shader/app/components/Pipeline/UVScroll.client.vue

@@ -1,27 +1,31 @@
+<!-- eslint-disable vue/define-props-destructuring -->
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-// @ts-nocheck
-import { Vector2 } from 'three'
-import { time, uniform } from 'three/tsl'
+  // @ts-nocheck
+  import { Vector2 } from 'three'
+  import { time, uniform } from 'three/tsl'
 
-const props = withDefaults(defineProps<{
-  speedX?: number
-  speedY?: number
-  order?: number
-}>(), {
-  speedX: 0,
-  speedY: 0.1,
-  order: 0,
-})
+  const props = withDefaults(
+    defineProps<{
+      speedX?: number
+      speedY?: number
+      order?: number
+    }>(),
+    {
+      speedX: 0,
+      speedY: 0.1,
+      order: 0,
+    }
+  )
 
-const speedVal = new Vector2(props.speedX, props.speedY)
-const speedNode = uniform(speedVal)
-watch(() => [props.speedX, props.speedY], ([x, y]) => { speedNode.value.set(x, y) })
+  const speedVal = new Vector2(props.speedX, props.speedY)
+  const speedNode = uniform(speedVal)
+  watch(
+    () => [props.speedX, props.speedY],
+    ([x, y]) => {
+      speedNode.value.set(x, y)
+    }
+  )
 
-useShaderStage(
-  (uvIn) => uvIn.add(speedNode.mul(time)).fract(),
-  props.order,
-  'uv',
-)
+  useShaderStage((uvIn) => uvIn.add(speedNode.mul(time)).fract(), props.order, 'uv')
 </script>
-
-<template><!-- --></template>