kmcom-nuxt-layers 1.7.9 → 2.2.0

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

@@ -1,56 +1,89 @@
+<!-- eslint-disable @typescript-eslint/no-unused-vars -->
+<!-- eslint-disable vue/define-props-destructuring -->
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-// @ts-nocheck
-import { Color, Vector3 } from 'three'
-import { uniform, time, vec4, mix, smoothstep, float } from 'three/tsl'
-import { simplexNoise2D } from '../../shaders/common/noise'
+  // @ts-nocheck
+  import { Color, Vector3 } from 'three'
+  import { float, mix, smoothstep, time, uniform, vec4 } from 'three/tsl'
 
-const props = withDefaults(defineProps<{
-  /** Band fill colour */
-  color?: string
-  /** Opacity of the band layer */
-  opacity?: number
-  /** Noise input scale */
-  scale?: number
-  /** Smoothstep lower edge for band threshold */
-  edge0?: number
-  /** Smoothstep upper edge for band threshold */
-  edge1?: number
-  /** Animation speed */
-  speed?: number
-  order?: number
-}>(), { color: '#ffffff', opacity: 1, scale: 2, edge0: 0.3, edge1: 0.7, speed: 0.3, order: 0 })
+  import { simplexNoise2D } from '../../shaders/common/noise'
 
-function toVec3Node(hex: string) {
-  const c = new Color(hex)
-  return uniform(new Vector3(c.r, c.g, c.b))
-}
+  const props = withDefaults(
+    defineProps<{
+      /** Band fill colour */
+      color?: string
+      /** Opacity of the band layer */
+      opacity?: number
+      /** Noise input scale */
+      scale?: number
+      /** Smoothstep lower edge for band threshold */
+      edge0?: number
+      /** Smoothstep upper edge for band threshold */
+      edge1?: number
+      /** Animation speed */
+      speed?: number
+      order?: number
+    }>(),
+    { color: '#ffffff', opacity: 1, scale: 2, edge0: 0.3, edge1: 0.7, speed: 0.3, order: 0 }
+  )
 
-const colorNode = toVec3Node(props.color)
-const opacityNode = uniform(props.opacity)
-const scaleNode = uniform(props.scale)
-const edge0Node = uniform(props.edge0)
-const edge1Node = uniform(props.edge1)
-const speedNode = uniform(props.speed)
-watch(() => props.color, v => { const c = new Color(v); colorNode.value.set(c.r, c.g, c.b) })
-watch(() => props.opacity, v => { opacityNode.value = v })
-watch(() => props.scale, v => { scaleNode.value = v })
-watch(() => props.edge0, v => { edge0Node.value = v })
-watch(() => props.edge1, v => { edge1Node.value = v })
-watch(() => props.speed, v => { speedNode.value = v })
+  function toVec3Node(hex: string) {
+    const c = new Color(hex)
+    return uniform(new Vector3(c.r, c.g, c.b))
+  }
 
-const pipeline = useShaderPipelineContext()
+  const colorNode = toVec3Node(props.color)
+  const opacityNode = uniform(props.opacity)
+  const scaleNode = uniform(props.scale)
+  const edge0Node = uniform(props.edge0)
+  const edge1Node = uniform(props.edge1)
+  const speedNode = uniform(props.speed)
+  watch(
+    () => props.color,
+    (v) => {
+      const c = new Color(v)
+      colorNode.value.set(c.r, c.g, c.b)
+    }
+  )
+  watch(
+    () => props.opacity,
+    (v) => {
+      opacityNode.value = v
+    }
+  )
+  watch(
+    () => props.scale,
+    (v) => {
+      scaleNode.value = v
+    }
+  )
+  watch(
+    () => props.edge0,
+    (v) => {
+      edge0Node.value = v
+    }
+  )
+  watch(
+    () => props.edge1,
+    (v) => {
+      edge1Node.value = v
+    }
+  )
+  watch(
+    () => props.speed,
+    (v) => {
+      speedNode.value = v
+    }
+  )
 
-useShaderStage(
-  (prev) => {
+  const pipeline = useShaderPipelineContext()
+
+  useShaderStage((prev) => {
     const uvCurrent = pipeline.uvNode.value
     if (!uvCurrent) return prev
     const t = time.mul(speedNode)
     const n = simplexNoise2D(uvCurrent.mul(scaleNode).add(t)).mul(0.5).add(0.5)
     const band = smoothstep(edge0Node, edge1Node, n).mul(opacityNode)
     return vec4(mix(prev.xyz, colorNode, band), prev.w)
-  },
-  props.order,
-)
+  }, props.order)
 </script>
-
-<template><!-- --></template>

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

@@ -1,40 +1,51 @@
+<!-- eslint-disable @typescript-eslint/no-unused-vars -->
+<!-- eslint-disable vue/define-props-destructuring -->
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-// @ts-nocheck
-import { uniform, vec3, vec4, mix, float } from 'three/tsl'
+  // @ts-nocheck
+  import { float, mix, uniform, vec3, vec4 } from 'three/tsl'
 
-const props = withDefaults(defineProps<{
-  /**
-   * Colour temperature shift:
-   * positive → warmer (orange), negative → cooler (blue). Range: -1 to 1.
-   */
-  temperature?: number
-  /**
-   * Tint shift:
-   * positive → green, negative → magenta. Range: -1 to 1.
-   */
-  tint?: number
-  order?: number
-}>(), { temperature: 0, tint: 0, order: 0 })
+  const props = withDefaults(
+    defineProps<{
+      /**
+       * Colour temperature shift:
+       * positive → warmer (orange), negative → cooler (blue). Range: -1 to 1.
+       */
+      temperature?: number
+      /**
+       * Tint shift:
+       * positive → green, negative → magenta. Range: -1 to 1.
+       */
+      tint?: number
+      order?: number
+    }>(),
+    { temperature: 0, tint: 0, order: 0 }
+  )
 
-const tempNode = uniform(props.temperature)
-const tintNode = uniform(props.tint)
-watch(() => props.temperature, v => { tempNode.value = v })
-watch(() => props.tint, v => { tintNode.value = v })
+  const tempNode = uniform(props.temperature)
+  const tintNode = uniform(props.tint)
+  watch(
+    () => props.temperature,
+    (v) => {
+      tempNode.value = v
+    }
+  )
+  watch(
+    () => props.tint,
+    (v) => {
+      tintNode.value = v
+    }
+  )
 
-useShaderStage(
-  (prev) => {
+  useShaderStage((prev) => {
     // Temperature: mix toward warm (orange) or cool (blue)
     const warm = vec3(float(1).add(tempNode.mul(0.15)), float(1), float(1).sub(tempNode.mul(0.25)))
     // Tint: mix toward green or magenta on the G channel
     const tinted = vec3(
       float(1).sub(tintNode.negate().max(float(0)).mul(0.1)),
       float(1).add(tintNode.mul(0.1)),
-      float(1).sub(tintNode.max(float(0)).mul(0.1)),
+      float(1).sub(tintNode.max(float(0)).mul(0.1))
     )
     return vec4(prev.xyz.mul(warm).mul(tinted), prev.w)
-  },
-  props.order,
-)
+  }, props.order)
 </script>
-
-<template><!-- --></template>

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

@@ -1,63 +1,98 @@
+<!-- eslint-disable vue/define-props-destructuring -->
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-// @ts-nocheck
-import { Color, Vector3 } from 'three'
-import { uniform, time, vec4, mix, sin, float } from 'three/tsl'
-import { fbm2D } from '../../shaders/common/noise'
+  // @ts-nocheck
+  import { Color, Vector3 } from 'three'
+  import { float, mix, sin, time, uniform, vec4 } from 'three/tsl'
 
-const props = withDefaults(defineProps<{
-  colorA?: string
-  colorB?: string
-  /** Number of rings across the UV space */
-  ringFrequency?: number
-  /** Noise distortion scale */
-  noiseScale?: number
-  /** Noise displacement strength */
-  noiseStrength?: number
-  /** Very slow rotation speed for living wood effect */
-  speed?: number
-  order?: number
-}>(), {
-  colorA: '#8b5e3c',
-  colorB: '#4a2e1a',
-  ringFrequency: 12,
-  noiseScale: 3,
-  noiseStrength: 0.4,
-  speed: 0,
-  order: 0,
-})
+  import { fbm2D } from '../../shaders/common/noise'
 
-function toVec3Node(hex: string) {
-  const c = new Color(hex)
-  return uniform(new Vector3(c.r, c.g, c.b))
-}
+  const props = withDefaults(
+    defineProps<{
+      colorA?: string
+      colorB?: string
+      /** Number of rings across the UV space */
+      ringFrequency?: number
+      /** Noise distortion scale */
+      noiseScale?: number
+      /** Noise displacement strength */
+      noiseStrength?: number
+      /** Very slow rotation speed for living wood effect */
+      speed?: number
+      order?: number
+    }>(),
+    {
+      colorA: '#8b5e3c',
+      colorB: '#4a2e1a',
+      ringFrequency: 12,
+      noiseScale: 3,
+      noiseStrength: 0.4,
+      speed: 0,
+      order: 0,
+    }
+  )
 
-const colorANode = toVec3Node(props.colorA)
-const colorBNode = toVec3Node(props.colorB)
-const ringFreqNode = uniform(props.ringFrequency)
-const noiseScaleNode = uniform(props.noiseScale)
-const noiseStrNode = uniform(props.noiseStrength)
-const speedNode = uniform(props.speed)
-watch(() => props.colorA, v => { const c = new Color(v); colorANode.value.set(c.r, c.g, c.b) })
-watch(() => props.colorB, v => { const c = new Color(v); colorBNode.value.set(c.r, c.g, c.b) })
-watch(() => props.ringFrequency, v => { ringFreqNode.value = v })
-watch(() => props.noiseScale, v => { noiseScaleNode.value = v })
-watch(() => props.noiseStrength, v => { noiseStrNode.value = v })
-watch(() => props.speed, v => { speedNode.value = v })
+  function toVec3Node(hex: string) {
+    const c = new Color(hex)
+    return uniform(new Vector3(c.r, c.g, c.b))
+  }
 
-const pipeline = useShaderPipelineContext()
+  const colorANode = toVec3Node(props.colorA)
+  const colorBNode = toVec3Node(props.colorB)
+  const ringFreqNode = uniform(props.ringFrequency)
+  const noiseScaleNode = uniform(props.noiseScale)
+  const noiseStrNode = uniform(props.noiseStrength)
+  const speedNode = uniform(props.speed)
+  watch(
+    () => props.colorA,
+    (v) => {
+      const c = new Color(v)
+      colorANode.value.set(c.r, c.g, c.b)
+    }
+  )
+  watch(
+    () => props.colorB,
+    (v) => {
+      const c = new Color(v)
+      colorBNode.value.set(c.r, c.g, c.b)
+    }
+  )
+  watch(
+    () => props.ringFrequency,
+    (v) => {
+      ringFreqNode.value = v
+    }
+  )
+  watch(
+    () => props.noiseScale,
+    (v) => {
+      noiseScaleNode.value = v
+    }
+  )
+  watch(
+    () => props.noiseStrength,
+    (v) => {
+      noiseStrNode.value = v
+    }
+  )
+  watch(
+    () => props.speed,
+    (v) => {
+      speedNode.value = v
+    }
+  )
 
-useShaderStage(
-  () => {
+  const pipeline = useShaderPipelineContext()
+
+  useShaderStage(() => {
     const uv = pipeline.uvNode.value
     const t = time.mul(speedNode)
     const n = fbm2D(uv.mul(noiseScaleNode).add(t)).mul(noiseStrNode)
     // Concentric rings from centre with noise offset
     const dist = uv.sub(0.5).length().add(n)
-    const ring = sin(dist.mul(ringFreqNode).mul(Math.PI * 2)).mul(0.5).add(0.5)
+    const ring = sin(dist.mul(ringFreqNode).mul(Math.PI * 2))
+      .mul(0.5)
+      .add(0.5)
     return vec4(mix(colorANode, colorBNode, ring), float(1))
-  },
-  props.order,
-)
+  }, props.order)
 </script>
-
-<template><!-- --></template>

package/layers/shader/app/components/Preset/Aurora.client.vue

@@ -1,65 +1,82 @@
+<!-- eslint-disable @typescript-eslint/no-explicit-any -->
+<!-- eslint-disable vue/no-boolean-default -->
+<!-- eslint-disable vue/define-props-destructuring -->
+<!-- eslint-disable @typescript-eslint/no-unused-vars -->
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-// @ts-nocheck - TSL types
-import { uniform } from 'three/tsl'
-import {
-  createAmbientUniforms,
-  createAuroraColorNode,
-} from '#layers/shader/app/composables/useAmbientMaterials'
+  // @ts-nocheck - TSL types
+  import {
+    createAmbientUniforms,
+    createAuroraColorNode,
+  } from '#layers/shader/app/composables/useAmbientMaterials'
+  import { uniform } from 'three/tsl'
 
-const props = withDefaults(
-  defineProps<{
-    speed?: number
-    intensity?: number
-    mouseInteraction?: boolean
-  }>(),
-  {
-    speed: 1.0,
-    intensity: 1.0,
-    mouseInteraction: true,
-  }
-)
+  const props = withDefaults(
+    defineProps<{
+      speed?: number
+      intensity?: number
+      mouseInteraction?: boolean
+    }>(),
+    {
+      speed: 1.0,
+      intensity: 1.0,
+      mouseInteraction: true,
+    }
+  )
 
-const emit = defineEmits<{
-  node: [colorNode: any]
-}>()
+  const emit = defineEmits<{
+    node: [colorNode: any]
+  }>()
 
-// Create uniforms once
-const uniforms = createAmbientUniforms({
-  speed: props.speed,
-  intensity: props.intensity,
-  mouseInteraction: props.mouseInteraction,
-})
+  // Create uniforms once
+  const uniforms = createAmbientUniforms({
+    speed: props.speed,
+    intensity: props.intensity,
+    mouseInteraction: props.mouseInteraction,
+  })
 
-// Build the TSL color node (references uniforms by pointer)
-const colorNode = createAuroraColorNode(uniforms)
+  // Build the TSL color node (references uniforms by pointer)
+  const colorNode = createAuroraColorNode(uniforms)
 
-// Wire mouse from runtime if available
-try {
-  const runtime = useShaderRuntimeContext()
+  // Wire mouse from runtime if available
+  try {
+    const runtime = useShaderRuntimeContext()
+    watch(
+      () => [runtime.mouse.mouseX.value, runtime.mouse.mouseY.value],
+      ([mx, my]) => {
+        uniforms.mouseX.value = mx
+        uniforms.mouseY.value = my
+      },
+      { immediate: true }
+    )
+  } catch {
+    // No runtime -- mouse can be set externally
+  }
+
+  // Watch props to update uniforms (no recompilation)
   watch(
-    () => [runtime.mouse.mouseX.value, runtime.mouse.mouseY.value],
-    ([mx, my]) => {
-      uniforms.mouseX.value = mx
-      uniforms.mouseY.value = my
-    },
-    { immediate: true }
+    () => props.speed,
+    (v) => {
+      uniforms.speed.value = v
+    }
+  )
+  watch(
+    () => props.intensity,
+    (v) => {
+      uniforms.intensity.value = v
+    }
+  )
+  watch(
+    () => props.mouseInteraction,
+    (v) => {
+      uniforms.mouseStrength.value = v ? 0.5 : 0
+    }
   )
-} catch {
-  // No runtime -- mouse can be set externally
-}
-
-// Watch props to update uniforms (no recompilation)
-watch(() => props.speed, (v) => { uniforms.speed.value = v })
-watch(() => props.intensity, (v) => { uniforms.intensity.value = v })
-watch(
-  () => props.mouseInteraction,
-  (v) => { uniforms.mouseStrength.value = v ? 0.5 : 0 }
-)
 
-// Emit the node for parent (ShaderHost) to consume
-emit('node', colorNode)
+  // Emit the node for parent (ShaderHost) to consume
+  emit('node', colorNode)
 
-defineExpose({ uniforms, colorNode })
+  defineExpose({ uniforms, colorNode })
 </script>
 
 <template>

package/layers/shader/app/components/Preset/Flow.client.vue

@@ -1,59 +1,75 @@
+<!-- eslint-disable @typescript-eslint/no-explicit-any -->
+<!-- eslint-disable vue/no-boolean-default -->
+<!-- eslint-disable vue/define-props-destructuring -->
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-// @ts-nocheck - TSL types
-import {
-  createAmbientUniforms,
-  createFlowColorNode,
-} from '#layers/shader/app/composables/useAmbientMaterials'
-
-const props = withDefaults(
-  defineProps<{
-    speed?: number
-    intensity?: number
-    mouseInteraction?: boolean
-  }>(),
-  {
-    speed: 1.0,
-    intensity: 1.0,
-    mouseInteraction: true,
-  }
-)
+  // @ts-nocheck - TSL types
+  import {
+    createAmbientUniforms,
+    createFlowColorNode,
+  } from '#layers/shader/app/composables/useAmbientMaterials'
+
+  const props = withDefaults(
+    defineProps<{
+      speed?: number
+      intensity?: number
+      mouseInteraction?: boolean
+    }>(),
+    {
+      speed: 1.0,
+      intensity: 1.0,
+      mouseInteraction: true,
+    }
+  )
 
-const emit = defineEmits<{
-  node: [colorNode: any]
-}>()
+  const emit = defineEmits<{
+    node: [colorNode: any]
+  }>()
 
-const uniforms = createAmbientUniforms({
-  speed: props.speed,
-  intensity: props.intensity,
-  mouseInteraction: props.mouseInteraction,
-})
+  const uniforms = createAmbientUniforms({
+    speed: props.speed,
+    intensity: props.intensity,
+    mouseInteraction: props.mouseInteraction,
+  })
 
-const colorNode = createFlowColorNode(uniforms)
+  const colorNode = createFlowColorNode(uniforms)
+
+  try {
+    const runtime = useShaderRuntimeContext()
+    watch(
+      () => [runtime.mouse.mouseX.value, runtime.mouse.mouseY.value],
+      ([mx, my]) => {
+        uniforms.mouseX.value = mx
+        uniforms.mouseY.value = my
+      },
+      { immediate: true }
+    )
+  } catch {
+    // No runtime
+  }
 
-try {
-  const runtime = useShaderRuntimeContext()
   watch(
-    () => [runtime.mouse.mouseX.value, runtime.mouse.mouseY.value],
-    ([mx, my]) => {
-      uniforms.mouseX.value = mx
-      uniforms.mouseY.value = my
-    },
-    { immediate: true }
+    () => props.speed,
+    (v) => {
+      uniforms.speed.value = v
+    }
+  )
+  watch(
+    () => props.intensity,
+    (v) => {
+      uniforms.intensity.value = v
+    }
+  )
+  watch(
+    () => props.mouseInteraction,
+    (v) => {
+      uniforms.mouseStrength.value = v ? 0.5 : 0
+    }
   )
-} catch {
-  // No runtime
-}
-
-watch(() => props.speed, (v) => { uniforms.speed.value = v })
-watch(() => props.intensity, (v) => { uniforms.intensity.value = v })
-watch(
-  () => props.mouseInteraction,
-  (v) => { uniforms.mouseStrength.value = v ? 0.5 : 0 }
-)
 
-emit('node', colorNode)
+  emit('node', colorNode)
 
-defineExpose({ uniforms, colorNode })
+  defineExpose({ uniforms, colorNode })
 </script>
 
 <template>