kmcom-nuxt-layers 1.7.9 → 2.1.6

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

@@ -1,14 +1,9 @@
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-// @ts-nocheck
-import { screenSize, vec2 } from 'three/tsl'
+  // @ts-nocheck
+  import { screenSize, vec2 } from 'three/tsl'
 
-const { order = 0 } = defineProps<{ order?: number }>()
+  const { order = 0 } = defineProps<{ order?: number }>()
 
-useShaderStage(
-  (uvIn) => uvIn.mul(vec2(screenSize.x.div(screenSize.y), 1.0)),
-  order,
-  'uv',
-)
+  useShaderStage((uvIn) => uvIn.mul(vec2(screenSize.x.div(screenSize.y), 1.0)), order, 'uv')
 </script>
-
-<template><!-- --></template>

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

@@ -1,36 +1,49 @@
+<!-- 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, smoothstep } from 'three/tsl'
+  // @ts-nocheck
+  import { float, sin, smoothstep, time, uniform, vec2 } from 'three/tsl'
 
-/**
- * Gentle eased scale oscillation — softer than UVPulse.
- * Uses a smoothstepped sine so the scale dwells at min/max rather than
- * passing through them instantly.
- */
-const props = withDefaults(defineProps<{
-  /** Max scale deviation from 1.0 */
-  amount?: number
-  /** Breath cycle speed in radians per second */
-  speed?: number
-  order?: number
-}>(), { amount: 0.05, speed: 0.8, order: 0 })
+  /**
+   * Gentle eased scale oscillation — softer than UVPulse.
+   * Uses a smoothstepped sine so the scale dwells at min/max rather than
+   * passing through them instantly.
+   */
+  const props = withDefaults(
+    defineProps<{
+      /** Max scale deviation from 1.0 */
+      amount?: number
+      /** Breath cycle speed in radians per second */
+      speed?: number
+      order?: number
+    }>(),
+    { amount: 0.05, speed: 0.8, 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 raw = sin(time.mul(speedNode)).mul(0.5).add(0.5)
-    const eased = smoothstep(float(0), float(1), raw)
-    const scale = float(1).add(eased.sub(0.5).mul(amountNode.mul(2)))
-    const centered = uvIn.sub(0.5).div(scale).add(0.5)
-    return vec2(centered.x, centered.y)
-  },
-  props.order,
-  'uv',
-)
+  useShaderStage(
+    (uvIn) => {
+      const raw = sin(time.mul(speedNode)).mul(0.5).add(0.5)
+      const eased = smoothstep(float(0), float(1), raw)
+      const scale = float(1).add(eased.sub(0.5).mul(amountNode.mul(2)))
+      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/UVBulge.client.vue

@@ -1,26 +1,40 @@
+<!-- eslint-disable vue/define-props-destructuring -->
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-// @ts-nocheck
-import { uniform } from 'three/tsl'
-import { bulgeUV } from '../../shaders/common/uv'
+  // @ts-nocheck
+  import { uniform } from 'three/tsl'
 
-const props = withDefaults(defineProps<{
-  /** Positive = bulge outward, negative = pinch inward */
-  strength?: number
-  /** Effective radius of the distortion */
-  radius?: number
-  order?: number
-}>(), { strength: 0.5, radius: 0.5, order: 0 })
+  import { bulgeUV } from '../../shaders/common/uv'
 
-const strengthNode = uniform(props.strength)
-const radiusNode = uniform(props.radius)
-watch(() => props.strength, v => { strengthNode.value = v })
-watch(() => props.radius, v => { radiusNode.value = v })
+  const props = withDefaults(
+    defineProps<{
+      /** Positive = bulge outward, negative = pinch inward */
+      strength?: number
+      /** Effective radius of the distortion */
+      radius?: number
+      order?: number
+    }>(),
+    { strength: 0.5, radius: 0.5, order: 0 }
+  )
 
-useShaderStage(
-  (uvIn) => bulgeUV(uvIn, { strength: strengthNode, radius: radiusNode }),
-  props.order,
-  'uv',
-)
-</script>
+  const strengthNode = uniform(props.strength)
+  const radiusNode = uniform(props.radius)
+  watch(
+    () => props.strength,
+    (v) => {
+      strengthNode.value = v
+    }
+  )
+  watch(
+    () => props.radius,
+    (v) => {
+      radiusNode.value = v
+    }
+  )
 
-<template><!-- --></template>
+  useShaderStage(
+    (uvIn) => bulgeUV(uvIn, { strength: strengthNode, radius: radiusNode }),
+    props.order,
+    'uv'
+  )
+</script>

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

@@ -1,18 +1,18 @@
+<!-- eslint-disable vue/define-props-destructuring -->
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-// @ts-nocheck
-import { clamp, vec2, float } from 'three/tsl'
+  // @ts-nocheck
+  import { clamp, float, vec2 } from 'three/tsl'
 
-/**
- * Clamps UV to [0, 1] — prevents tiling/repeat artefacts at the edges.
- * Equivalent to CSS background-repeat: no-repeat.
- */
-const { order = 0 } = defineProps<{ order?: number }>()
+  /**
+   * Clamps UV to [0, 1] — prevents tiling/repeat artefacts at the edges.
+   * Equivalent to CSS background-repeat: no-repeat.
+   */
+  const { order = 0 } = defineProps<{ order?: number }>()
 
-useShaderStage(
-  (uvIn) => vec2(clamp(uvIn.x, float(0), float(1)), clamp(uvIn.y, float(0), float(1))),
-  order,
-  'uv',
-)
+  useShaderStage(
+    (uvIn) => vec2(clamp(uvIn.x, float(0), float(1)), clamp(uvIn.y, float(0), float(1))),
+    order,
+    'uv'
+  )
 </script>
-
-<template><!-- --></template>

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

@@ -1,28 +1,41 @@
+<!-- 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<{
-  /** Number of columns to divide into */
-  columns?: number
-  /** Vertical offset multiplied by column index */
-  factor?: number
-  order?: number
-}>(), { columns: 6, factor: 0.15, order: 0 })
+  const props = withDefaults(
+    defineProps<{
+      /** Number of columns to divide into */
+      columns?: number
+      /** Vertical offset multiplied by column index */
+      factor?: number
+      order?: number
+    }>(),
+    { columns: 6, factor: 0.15, order: 0 }
+  )
 
-const columnsNode = uniform(props.columns)
-const factorNode = uniform(props.factor)
-watch(() => props.columns, v => { columnsNode.value = v })
-watch(() => props.factor, v => { factorNode.value = v })
+  const columnsNode = uniform(props.columns)
+  const factorNode = uniform(props.factor)
+  watch(
+    () => props.columns,
+    (v) => {
+      columnsNode.value = v
+    }
+  )
+  watch(
+    () => props.factor,
+    (v) => {
+      factorNode.value = v
+    }
+  )
 
-useShaderStage(
-  (uvIn) => {
-    const col = uvIn.x.mul(columnsNode).floor()
-    return vec2(uvIn.x, uvIn.y.add(col.mul(factorNode)))
-  },
-  props.order,
-  'uv',
-)
+  useShaderStage(
+    (uvIn) => {
+      const col = uvIn.x.mul(columnsNode).floor()
+      return vec2(uvIn.x, uvIn.y.add(col.mul(factorNode)))
+    },
+    props.order,
+    'uv'
+  )
 </script>
-
-<template><!-- --></template>

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

@@ -1,14 +1,10 @@
+<!-- eslint-disable vue/define-props-destructuring -->
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-// @ts-nocheck
-import { float, vec2 } from 'three/tsl'
+  // @ts-nocheck
+  import { float, vec2 } from 'three/tsl'
 
-const { order = 0 } = defineProps<{ order?: number }>()
+  const { order = 0 } = defineProps<{ order?: number }>()
 
-useShaderStage(
-  (uvIn) => vec2(float(1).sub(uvIn.x), uvIn.y),
-  order,
-  'uv',
-)
+  useShaderStage((uvIn) => vec2(float(1).sub(uvIn.x), uvIn.y), order, 'uv')
 </script>
-
-<template><!-- --></template>

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

@@ -1,14 +1,10 @@
+<!-- eslint-disable vue/define-props-destructuring -->
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-// @ts-nocheck
-import { float, vec2 } from 'three/tsl'
+  // @ts-nocheck
+  import { float, vec2 } from 'three/tsl'
 
-const { order = 0 } = defineProps<{ order?: number }>()
+  const { order = 0 } = defineProps<{ order?: number }>()
 
-useShaderStage(
-  (uvIn) => vec2(float(1).sub(uvIn.x), float(1).sub(uvIn.y)),
-  order,
-  'uv',
-)
+  useShaderStage((uvIn) => vec2(float(1).sub(uvIn.x), float(1).sub(uvIn.y)), order, 'uv')
 </script>
-
-<template><!-- --></template>

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

@@ -1,14 +1,10 @@
+<!-- eslint-disable vue/define-props-destructuring -->
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-// @ts-nocheck
-import { float, vec2 } from 'three/tsl'
+  // @ts-nocheck
+  import { float, vec2 } from 'three/tsl'
 
-const { order = 0 } = defineProps<{ order?: number }>()
+  const { order = 0 } = defineProps<{ order?: number }>()
 
-useShaderStage(
-  (uvIn) => vec2(uvIn.x, float(1).sub(uvIn.y)),
-  order,
-  'uv',
-)
+  useShaderStage((uvIn) => vec2(uvIn.x, float(1).sub(uvIn.y)), order, 'uv')
 </script>
-
-<template><!-- --></template>

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

@@ -1,31 +1,41 @@
+<!-- eslint-disable vue/define-props-destructuring -->
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-// @ts-nocheck
-import { uniform, vec4, clamp } from 'three/tsl'
+  // @ts-nocheck
+  import { clamp, uniform, vec4 } from 'three/tsl'
 
-const props = withDefaults(defineProps<{
-  /** Number of bands across the UV Y axis */
-  frequency?: number
-  /** Brightness addend at band peaks */
-  scale?: number
-  order?: number
-}>(), { frequency: 8, scale: 0.15, order: 0 })
+  const props = withDefaults(
+    defineProps<{
+      /** Number of bands across the UV Y axis */
+      frequency?: number
+      /** Brightness addend at band peaks */
+      scale?: number
+      order?: number
+    }>(),
+    { frequency: 8, scale: 0.15, order: 0 }
+  )
 
-const freqNode = uniform(props.frequency)
-const scaleNode = uniform(props.scale)
-watch(() => props.frequency, v => { freqNode.value = v })
-watch(() => props.scale, v => { scaleNode.value = v })
+  const freqNode = uniform(props.frequency)
+  const scaleNode = uniform(props.scale)
+  watch(
+    () => props.frequency,
+    (v) => {
+      freqNode.value = v
+    }
+  )
+  watch(
+    () => props.scale,
+    (v) => {
+      scaleNode.value = v
+    }
+  )
 
-const pipeline = useShaderPipelineContext()
+  const pipeline = useShaderPipelineContext()
 
-useShaderStage(
-  (prev) => {
+  useShaderStage((prev) => {
     const uvCurrent = pipeline.uvNode.value
     const band = uvCurrent.y.mul(freqNode).fract().mul(scaleNode)
     const rgb = clamp(prev.xyz.add(band), 0, 1)
     return vec4(rgb, prev.w)
-  },
-  props.order,
-)
+  }, props.order)
 </script>
-
-<template><!-- --></template>

package/layers/shader/app/components/Pipeline/UVMousePull.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'
 
-/**
- * Warps UV toward the mouse cursor — different from UVParallax, which shifts
- * the whole field. This pulls individual UV coords toward the pointer position.
- * q += (pointer - uv) * influence * 0.2
- */
-const props = withDefaults(defineProps<{
-  /** Pull strength toward the cursor */
-  influence?: number
-  order?: number
-}>(), { influence: 0.5, order: 0 })
+  /**
+   * Warps UV toward the mouse cursor — different from UVParallax, which shifts
+   * the whole field. This pulls individual UV coords toward the pointer position.
+   * q += (pointer - uv) * influence * 0.2
+   */
+  const props = withDefaults(
+    defineProps<{
+      /** Pull strength toward the cursor */
+      influence?: number
+      order?: number
+    }>(),
+    { influence: 0.5, order: 0 }
+  )
 
-const mouse = uniform(new Vector2(0.5, 0.5))
-const influenceNode = uniform(props.influence)
-watch(() => props.influence, v => { influenceNode.value = v })
+  const mouse = uniform(new Vector2(0.5, 0.5))
+  const influenceNode = uniform(props.influence)
+  watch(
+    () => props.influence,
+    (v) => {
+      influenceNode.value = v
+    }
+  )
 
-onMounted(() => {
-  const onMove = (e: MouseEvent) => {
-    mouse.value.set(e.clientX / window.innerWidth, 1 - e.clientY / window.innerHeight)
-  }
-  window.addEventListener('mousemove', onMove)
-  onUnmounted(() => window.removeEventListener('mousemove', onMove))
-})
+  onMounted(() => {
+    const onMove = (e: MouseEvent) => {
+      mouse.value.set(e.clientX / window.innerWidth, 1 - e.clientY / window.innerHeight)
+    }
+    window.addEventListener('mousemove', onMove)
+    onUnmounted(() => window.removeEventListener('mousemove', onMove))
+  })
 
-useShaderStage(
-  (uvIn) => {
-    const pointer = vec2(mouse.x, mouse.y)
-    return uvIn.add(pointer.sub(uvIn).mul(influenceNode).mul(0.2))
-  },
-  props.order,
-  'uv',
-)
+  useShaderStage(
+    (uvIn) => {
+      const pointer = vec2(mouse.x, mouse.y)
+      return uvIn.add(pointer.sub(uvIn).mul(influenceNode).mul(0.2))
+    },
+    props.order,
+    'uv'
+  )
 </script>
-
-<template><!-- --></template>

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

@@ -1,54 +1,73 @@
+<!-- eslint-disable vue/define-props-destructuring -->
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-// @ts-nocheck
-import { time, uniform, vec2 } from 'three/tsl'
-import { simplexNoise2D } from '../../shaders/common/noise'
+  // @ts-nocheck
+  import { time, uniform, vec2 } from 'three/tsl'
 
-const props = withDefaults(defineProps<{
-  /** Max rotation in degrees (default 720 = 2 full turns) */
-  rotationAmount?: number
-  /** Noise animation speed */
-  speed?: number
-  /** Noise spatial frequency */
-  noiseScale?: number
-  order?: number
-}>(), {
-  rotationAmount: 720,
-  speed: 0.1,
-  noiseScale: 1,
-  order: 0,
-})
+  import { simplexNoise2D } from '../../shaders/common/noise'
 
-const rotAmountNode = uniform(props.rotationAmount)
-const speedNode = uniform(props.speed)
-const noiseScaleNode = uniform(props.noiseScale)
+  const props = withDefaults(
+    defineProps<{
+      /** Max rotation in degrees (default 720 = 2 full turns) */
+      rotationAmount?: number
+      /** Noise animation speed */
+      speed?: number
+      /** Noise spatial frequency */
+      noiseScale?: number
+      order?: number
+    }>(),
+    {
+      rotationAmount: 720,
+      speed: 0.1,
+      noiseScale: 1,
+      order: 0,
+    }
+  )
 
-watch(() => props.rotationAmount, v => { rotAmountNode.value = v })
-watch(() => props.speed, v => { speedNode.value = v })
-watch(() => props.noiseScale, v => { noiseScaleNode.value = v })
+  const rotAmountNode = uniform(props.rotationAmount)
+  const speedNode = uniform(props.speed)
+  const noiseScaleNode = uniform(props.noiseScale)
 
-const DEG_TO_RAD = Math.PI / 180
+  watch(
+    () => props.rotationAmount,
+    (v) => {
+      rotAmountNode.value = v
+    }
+  )
+  watch(
+    () => props.speed,
+    (v) => {
+      speedNode.value = v
+    }
+  )
+  watch(
+    () => props.noiseScale,
+    (v) => {
+      noiseScaleNode.value = v
+    }
+  )
 
-useShaderStage(
-  (uvIn) => {
-    // Sample gradient noise at animated position: (time*speed, uv.x*uv.y) * noiseScale
-    const noiseInput = vec2(time.mul(speedNode), uvIn.x.mul(uvIn.y)).mul(noiseScaleNode)
-    const n = simplexNoise2D(noiseInput)
-    // Remap noise to angle: (n*0.5) * rotAmount + 180 degrees, avoids snapping to 0
-    const angleDeg = n.mul(0.5).mul(rotAmountNode).add(180.0)
-    const angle = angleDeg.mul(DEG_TO_RAD)
+  const DEG_TO_RAD = Math.PI / 180
 
-    const pivot = vec2(0.5, 0.5)
-    const cosA = angle.cos()
-    const sinA = angle.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>
+  useShaderStage(
+    (uvIn) => {
+      // Sample gradient noise at animated position: (time*speed, uv.x*uv.y) * noiseScale
+      const noiseInput = vec2(time.mul(speedNode), uvIn.x.mul(uvIn.y)).mul(noiseScaleNode)
+      const n = simplexNoise2D(noiseInput)
+      // Remap noise to angle: (n*0.5) * rotAmount + 180 degrees, avoids snapping to 0
+      const angleDeg = n.mul(0.5).mul(rotAmountNode).add(180.0)
+      const angle = angleDeg.mul(DEG_TO_RAD)
 
-<template><!-- --></template>
+      const pivot = vec2(0.5, 0.5)
+      const cosA = angle.cos()
+      const sinA = angle.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>