kmcom-nuxt-layers 1.7.9 → 2.1.6

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

@@ -1,41 +1,66 @@
+<!-- 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, float } from 'three/tsl'
-import { valueNoise2D } from '../../shaders/common/noise'
+  // @ts-nocheck
+  import { Color, Vector3 } from 'three'
+  import { float, mix, time, uniform, vec4 } from 'three/tsl'
 
-const props = withDefaults(defineProps<{
-  colorA?: string
-  colorB?: string
-  scale?: number
-  speed?: number
-  order?: number
-}>(), { colorA: '#000000', colorB: '#ffffff', scale: 4, speed: 0.2, order: 0 })
+  import { valueNoise2D } 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
+      scale?: number
+      speed?: number
+      order?: number
+    }>(),
+    { colorA: '#000000', colorB: '#ffffff', scale: 4, speed: 0.2, order: 0 }
+  )
 
-const colorANode = toVec3Node(props.colorA)
-const colorBNode = toVec3Node(props.colorB)
-const scaleNode = uniform(props.scale)
-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.scale, v => { scaleNode.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 scaleNode = uniform(props.scale)
+  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.scale,
+    (v) => {
+      scaleNode.value = v
+    }
+  )
+  watch(
+    () => props.speed,
+    (v) => {
+      speedNode.value = v
+    }
+  )
 
-useShaderStage(
-  () => {
+  const pipeline = useShaderPipelineContext()
+
+  useShaderStage(() => {
     const uv = pipeline.uvNode.value
-    const t = valueNoise2D(uv.mul(scaleNode).add(time.mul(speedNode))).mul(0.5).add(0.5)
+    const t = valueNoise2D(uv.mul(scaleNode).add(time.mul(speedNode)))
+      .mul(0.5)
+      .add(0.5)
     return vec4(mix(colorANode, colorBNode, t), float(1))
-  },
-  props.order,
-)
+  }, props.order)
 </script>
-
-<template><!-- --></template>

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

@@ -1,24 +1,30 @@
+<!-- eslint-disable vue/define-props-destructuring -->
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-// @ts-nocheck
-import { uniform, vec4 } from 'three/tsl'
-import { vibrance } from '../../shaders/common/palette'
+  // @ts-nocheck
+  import { uniform, vec4 } from 'three/tsl'
 
-const props = withDefaults(defineProps<{
-  /**
-   * Saturation boost that protects already-saturated colours.
-   * 0 = unchanged, positive = more vivid, negative = less.
-   */
-  amount?: number
-  order?: number
-}>(), { amount: 0.5, order: 0 })
+  import { vibrance } from '../../shaders/common/palette'
 
-const amountNode = uniform(props.amount)
-watch(() => props.amount, v => { amountNode.value = v })
+  const props = withDefaults(
+    defineProps<{
+      /**
+       * Saturation boost that protects already-saturated colours.
+       * 0 = unchanged, positive = more vivid, negative = less.
+       */
+      amount?: number
+      order?: number
+    }>(),
+    { amount: 0.5, order: 0 }
+  )
 
-useShaderStage(
-  (prev) => vec4(vibrance(prev.xyz, amountNode), prev.w),
-  props.order,
-)
-</script>
+  const amountNode = uniform(props.amount)
+  watch(
+    () => props.amount,
+    (v) => {
+      amountNode.value = v
+    }
+  )
 
-<template><!-- --></template>
+  useShaderStage((prev) => vec4(vibrance(prev.xyz, amountNode), prev.w), props.order)
+</script>

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

@@ -1,32 +1,43 @@
+<!-- eslint-disable vue/define-props-destructuring -->
+<!-- eslint-disable @typescript-eslint/ban-ts-comment -->
 <script setup lang="ts">
-// @ts-nocheck
-import { uniform, vec4 } from 'three/tsl'
-import { vignette } from '../../shaders/common/grain'
+  // @ts-nocheck
+  import { uniform, vec4 } from 'three/tsl'
 
-const props = withDefaults(defineProps<{
-  intensity?: number
-  smoothness?: number
-  order?: number
-}>(), {
-  intensity: 0.5,
-  smoothness: 0.5,
-  order: 0,
-})
+  import { vignette } from '../../shaders/common/grain'
 
-const intensityNode = uniform(props.intensity)
-const smoothnessNode = uniform(props.smoothness)
-watch(() => props.intensity, v => { intensityNode.value = v })
-watch(() => props.smoothness, v => { smoothnessNode.value = v })
+  const props = withDefaults(
+    defineProps<{
+      intensity?: number
+      smoothness?: number
+      order?: number
+    }>(),
+    {
+      intensity: 0.5,
+      smoothness: 0.5,
+      order: 0,
+    }
+  )
 
-const { uvNode } = useShaderPipelineContext()
+  const intensityNode = uniform(props.intensity)
+  const smoothnessNode = uniform(props.smoothness)
+  watch(
+    () => props.intensity,
+    (v) => {
+      intensityNode.value = v
+    }
+  )
+  watch(
+    () => props.smoothness,
+    (v) => {
+      smoothnessNode.value = v
+    }
+  )
 
-useShaderStage(
-  (prev) => {
+  const { uvNode } = useShaderPipelineContext()
+
+  useShaderStage((prev) => {
     const v = vignette(uvNode.value, intensityNode, smoothnessNode)
     return vec4(prev.xyz.mul(v), prev.w)
-  },
-  props.order,
-)
+  }, props.order)
 </script>
-
-<template><!-- --></template>

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

@@ -1,50 +1,78 @@
+<!-- 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 { voronoi2D } from '../../shaders/common/noise'
+  // @ts-nocheck
+  import { Color, Vector3 } from 'three'
+  import { float, mix, smoothstep, time, uniform, vec4 } from 'three/tsl'
 
-/** Voronoi cell edge lines only — the cell boundaries as thin lines. */
-const props = withDefaults(defineProps<{
-  /** Cell background colour */
-  colorA?: string
-  /** Edge line colour */
-  colorB?: string
-  scale?: number
-  /** Edge line thickness */
-  edgeWidth?: number
-  speed?: number
-  order?: number
-}>(), { colorA: '#000000', colorB: '#ffffff', scale: 8, edgeWidth: 0.05, speed: 0.1, order: 0 })
+  import { voronoi2D } from '../../shaders/common/noise'
 
-function toVec3Node(hex: string) {
-  const c = new Color(hex)
-  return uniform(new Vector3(c.r, c.g, c.b))
-}
+  /** Voronoi cell edge lines only — the cell boundaries as thin lines. */
+  const props = withDefaults(
+    defineProps<{
+      /** Cell background colour */
+      colorA?: string
+      /** Edge line colour */
+      colorB?: string
+      scale?: number
+      /** Edge line thickness */
+      edgeWidth?: number
+      speed?: number
+      order?: number
+    }>(),
+    { colorA: '#000000', colorB: '#ffffff', scale: 8, edgeWidth: 0.05, speed: 0.1, order: 0 }
+  )
 
-const colorANode = toVec3Node(props.colorA)
-const colorBNode = toVec3Node(props.colorB)
-const scaleNode = uniform(props.scale)
-const edgeNode = uniform(props.edgeWidth)
-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.scale, v => { scaleNode.value = v })
-watch(() => props.edgeWidth, v => { edgeNode.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 scaleNode = uniform(props.scale)
+  const edgeNode = uniform(props.edgeWidth)
+  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.scale,
+    (v) => {
+      scaleNode.value = v
+    }
+  )
+  watch(
+    () => props.edgeWidth,
+    (v) => {
+      edgeNode.value = v
+    }
+  )
+  watch(
+    () => props.speed,
+    (v) => {
+      speedNode.value = v
+    }
+  )
 
-useShaderStage(
-  () => {
+  const pipeline = useShaderPipelineContext()
+
+  useShaderStage(() => {
     const uv = pipeline.uvNode.value
     const { distance } = voronoi2D(uv.add(time.mul(speedNode)), scaleNode)
     // Edge = near-zero distance → smooth threshold
     const edge = smoothstep(edgeNode, edgeNode.mul(0.1), distance)
     return vec4(mix(colorANode, colorBNode, edge), float(1))
-  },
-  props.order,
-)
+  }, props.order)
 </script>
-
-<template><!-- --></template>

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

@@ -1,53 +1,92 @@
+<!-- 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'
+  // @ts-nocheck
+  import { Color, Vector3 } from 'three'
+  import { float, mix, sin, time, uniform, vec4 } from 'three/tsl'
 
-const props = withDefaults(defineProps<{
-  /** Deep water colour */
-  colorDeep?: string
-  /** Shallow/crest colour */
-  colorShallow?: string
-  /** Wave frequency */
-  frequency?: number
-  /** Wave height */
-  amplitude?: number
-  /** Animation speed */
-  speed?: number
-  order?: number
-}>(), { colorDeep: '#003366', colorShallow: '#66ccff', frequency: 8, amplitude: 0.5, speed: 1, order: 0 })
+  const props = withDefaults(
+    defineProps<{
+      /** Deep water colour */
+      colorDeep?: string
+      /** Shallow/crest colour */
+      colorShallow?: string
+      /** Wave frequency */
+      frequency?: number
+      /** Wave height */
+      amplitude?: number
+      /** Animation speed */
+      speed?: number
+      order?: number
+    }>(),
+    {
+      colorDeep: '#003366',
+      colorShallow: '#66ccff',
+      frequency: 8,
+      amplitude: 0.5,
+      speed: 1,
+      order: 0,
+    }
+  )
 
-function toVec3Node(hex: string) {
-  const c = new Color(hex)
-  return uniform(new Vector3(c.r, c.g, c.b))
-}
+  function toVec3Node(hex: string) {
+    const c = new Color(hex)
+    return uniform(new Vector3(c.r, c.g, c.b))
+  }
 
-const colorDeepNode = toVec3Node(props.colorDeep)
-const colorShallowNode = toVec3Node(props.colorShallow)
-const freqNode = uniform(props.frequency)
-const ampNode = uniform(props.amplitude)
-const speedNode = uniform(props.speed)
-watch(() => props.colorDeep, v => { const c = new Color(v); colorDeepNode.value.set(c.r, c.g, c.b) })
-watch(() => props.colorShallow, v => { const c = new Color(v); colorShallowNode.value.set(c.r, c.g, c.b) })
-watch(() => props.frequency, v => { freqNode.value = v })
-watch(() => props.amplitude, v => { ampNode.value = v })
-watch(() => props.speed, v => { speedNode.value = v })
+  const colorDeepNode = toVec3Node(props.colorDeep)
+  const colorShallowNode = toVec3Node(props.colorShallow)
+  const freqNode = uniform(props.frequency)
+  const ampNode = uniform(props.amplitude)
+  const speedNode = uniform(props.speed)
+  watch(
+    () => props.colorDeep,
+    (v) => {
+      const c = new Color(v)
+      colorDeepNode.value.set(c.r, c.g, c.b)
+    }
+  )
+  watch(
+    () => props.colorShallow,
+    (v) => {
+      const c = new Color(v)
+      colorShallowNode.value.set(c.r, c.g, c.b)
+    }
+  )
+  watch(
+    () => props.frequency,
+    (v) => {
+      freqNode.value = v
+    }
+  )
+  watch(
+    () => props.amplitude,
+    (v) => {
+      ampNode.value = v
+    }
+  )
+  watch(
+    () => props.speed,
+    (v) => {
+      speedNode.value = v
+    }
+  )
 
-const pipeline = useShaderPipelineContext()
+  const pipeline = useShaderPipelineContext()
 
-useShaderStage(
-  () => {
+  useShaderStage(() => {
     const uv = pipeline.uvNode.value
     const t = time.mul(speedNode)
     // Layered sine waves at different frequencies and phases
     const w1 = sin(uv.x.mul(freqNode).add(t))
-    const w2 = sin(uv.x.mul(freqNode.mul(0.7)).add(uv.y.mul(freqNode.mul(0.5))).add(t.mul(0.8)))
+    const w2 = sin(
+      uv.x
+        .mul(freqNode.mul(0.7))
+        .add(uv.y.mul(freqNode.mul(0.5)))
+        .add(t.mul(0.8))
+    )
     const w3 = sin(uv.y.mul(freqNode.mul(1.3)).add(t.mul(1.1)))
     const wave = w1.add(w2).add(w3).div(3).mul(ampNode).mul(0.5).add(0.5)
     return vec4(mix(colorDeepNode, colorShallowNode, wave), float(1))
-  },
-  props.order,
-)
+  }, props.order)
 </script>
-
-<template><!-- --></template>

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

@@ -1,44 +1,74 @@
+<!-- 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, vec2, mix, sin } from 'three/tsl'
-
-const props = withDefaults(defineProps<{
-  color?: string
-  opacity?: number
-  frequency?: number
-  speed?: number
-  warpStrength?: number
-  order?: number
-}>(), {
-  color: '#4488ff',
-  opacity: 0.8,
-  frequency: 3,
-  speed: 0.5,
-  warpStrength: 0.15,
-  order: 0,
-})
-
-function toVec3Node(hex: string) {
-  const c = new Color(hex)
-  return uniform(new Vector3(c.r, c.g, c.b))
-}
-
-const colorNode = toVec3Node(props.color)
-const opacityNode = uniform(props.opacity)
-const freqNode = uniform(props.frequency)
-const speedNode = uniform(props.speed)
-const warpNode = uniform(props.warpStrength)
-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.frequency, v => { freqNode.value = v })
-watch(() => props.speed, v => { speedNode.value = v })
-watch(() => props.warpStrength, v => { warpNode.value = v })
-
-const pipeline = useShaderPipelineContext()
-
-useShaderStage(
-  (prev) => {
+  // @ts-nocheck
+  import { Color, Vector3 } from 'three'
+  import { mix, sin, time, uniform, vec2, vec4 } from 'three/tsl'
+
+  const props = withDefaults(
+    defineProps<{
+      color?: string
+      opacity?: number
+      frequency?: number
+      speed?: number
+      warpStrength?: number
+      order?: number
+    }>(),
+    {
+      color: '#4488ff',
+      opacity: 0.8,
+      frequency: 3,
+      speed: 0.5,
+      warpStrength: 0.15,
+      order: 0,
+    }
+  )
+
+  function toVec3Node(hex: string) {
+    const c = new Color(hex)
+    return uniform(new Vector3(c.r, c.g, c.b))
+  }
+
+  const colorNode = toVec3Node(props.color)
+  const opacityNode = uniform(props.opacity)
+  const freqNode = uniform(props.frequency)
+  const speedNode = uniform(props.speed)
+  const warpNode = uniform(props.warpStrength)
+  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.frequency,
+    (v) => {
+      freqNode.value = v
+    }
+  )
+  watch(
+    () => props.speed,
+    (v) => {
+      speedNode.value = v
+    }
+  )
+  watch(
+    () => props.warpStrength,
+    (v) => {
+      warpNode.value = v
+    }
+  )
+
+  const pipeline = useShaderPipelineContext()
+
+  useShaderStage((prev) => {
     const uvCurrent = pipeline.uvNode.value
     if (!prev || !uvCurrent) return vec4(0, 0, 0, 1)
 
@@ -49,13 +79,11 @@ useShaderStage(
     const warpY = uvCurrent.y.add(sin(uvCurrent.x.mul(freqNode).add(t)).mul(warpNode))
     const s = vec2(warpX, warpY)
 
-    const band = sin(s.length().mul(freqNode.mul(4.0)).add(t)).mul(0.5).add(0.5)
+    const band = sin(s.length().mul(freqNode.mul(4.0)).add(t))
+      .mul(0.5)
+      .add(0.5)
     const alpha = band.mul(opacityNode)
 
     return vec4(mix(prev.xyz, colorNode, alpha), prev.w)
-  },
-  props.order,
-)
+  }, props.order)
 </script>
-
-<template><!-- --></template>