kmcom-nuxt-layers 1.7.9 → 2.2.0

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

@@ -1,44 +1,72 @@
+<!-- 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, float } from 'three/tsl'
+  // @ts-nocheck
+  import { float, uniform, vec3, vec4 } from 'three/tsl'
 
-/**
- * Arbitrary RGB channel mixing matrix.
- * Each output channel is a weighted sum of all three input channels.
- * Identity: rr=1 gg=1 bb=1, all cross-terms = 0.
- */
-const props = withDefaults(defineProps<{
-  /** R channel: [R contribution, G contribution, B contribution] */
-  rRow?: [number, number, number]
-  /** G channel: [R contribution, G contribution, B contribution] */
-  gRow?: [number, number, number]
-  /** B channel: [R contribution, G contribution, B contribution] */
-  bRow?: [number, number, number]
-  order?: number
-}>(), {
-  rRow: () => [1, 0, 0],
-  gRow: () => [0, 1, 0],
-  bRow: () => [0, 0, 1],
-  order: 0,
-})
+  /**
+   * Arbitrary RGB channel mixing matrix.
+   * Each output channel is a weighted sum of all three input channels.
+   * Identity: rr=1 gg=1 bb=1, all cross-terms = 0.
+   */
+  const props = withDefaults(
+    defineProps<{
+      /** R channel: [R contribution, G contribution, B contribution] */
+      rRow?: [number, number, number]
+      /** G channel: [R contribution, G contribution, B contribution] */
+      gRow?: [number, number, number]
+      /** B channel: [R contribution, G contribution, B contribution] */
+      bRow?: [number, number, number]
+      order?: number
+    }>(),
+    {
+      rRow: () => [1, 0, 0],
+      gRow: () => [0, 1, 0],
+      bRow: () => [0, 0, 1],
+      order: 0,
+    }
+  )
 
-const rrNode = uniform(props.rRow[0]); const rgNode = uniform(props.rRow[1]); const rbNode = uniform(props.rRow[2])
-const grNode = uniform(props.gRow[0]); const ggNode = uniform(props.gRow[1]); const gbNode = uniform(props.gRow[2])
-const brNode = uniform(props.bRow[0]); const bgNode = uniform(props.bRow[1]); const bbNode = uniform(props.bRow[2])
+  const rrNode = uniform(props.rRow[0])
+  const rgNode = uniform(props.rRow[1])
+  const rbNode = uniform(props.rRow[2])
+  const grNode = uniform(props.gRow[0])
+  const ggNode = uniform(props.gRow[1])
+  const gbNode = uniform(props.gRow[2])
+  const brNode = uniform(props.bRow[0])
+  const bgNode = uniform(props.bRow[1])
+  const bbNode = uniform(props.bRow[2])
 
-watch(() => props.rRow, ([r, g, b]) => { rrNode.value = r; rgNode.value = g; rbNode.value = b })
-watch(() => props.gRow, ([r, g, b]) => { grNode.value = r; ggNode.value = g; gbNode.value = b })
-watch(() => props.bRow, ([r, g, b]) => { brNode.value = r; bgNode.value = g; bbNode.value = b })
+  watch(
+    () => props.rRow,
+    ([r, g, b]) => {
+      rrNode.value = r
+      rgNode.value = g
+      rbNode.value = b
+    }
+  )
+  watch(
+    () => props.gRow,
+    ([r, g, b]) => {
+      grNode.value = r
+      ggNode.value = g
+      gbNode.value = b
+    }
+  )
+  watch(
+    () => props.bRow,
+    ([r, g, b]) => {
+      brNode.value = r
+      bgNode.value = g
+      bbNode.value = b
+    }
+  )
 
-useShaderStage(
-  (prev) => {
+  useShaderStage((prev) => {
     const r = prev.r.mul(rrNode).add(prev.g.mul(rgNode)).add(prev.b.mul(rbNode))
     const g = prev.r.mul(grNode).add(prev.g.mul(ggNode)).add(prev.b.mul(gbNode))
     const b = prev.r.mul(brNode).add(prev.g.mul(bgNode)).add(prev.b.mul(bbNode))
     return vec4(vec3(r, g, b), prev.w)
-  },
-  props.order,
-)
+  }, props.order)
 </script>
-
-<template><!-- --></template>

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

@@ -1,60 +1,87 @@
+<!-- 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, time, vec4, float } from 'three/tsl'
-import { simplexNoise2D } from '../../shaders/common/noise'
-
-/**
- * Noise-distorted Chebyshev box shape — the genuary22 pattern.
- * Formula: 1 - max(abs(uv.x * scaleX * n), abs(uv.y * scaleY * n2))
- * where n, n2 are two simplex noise octaves at different frequencies.
- * Produces a noise-eroded cross/box silhouette. Outputs a float mask for CosinePalette.
- */
-const props = withDefaults(defineProps<{
-  /** Horizontal scale of the box */
-  scaleX?: number
-  /** Vertical scale of the box */
-  scaleY?: number
-  /** Noise frequency for the first octave (X distortion) */
-  noiseFreq1?: number
-  /** Noise frequency for the second octave (Y distortion) */
-  noiseFreq2?: number
-  /** Animation speed */
-  speed?: number
-  order?: number
-}>(), { scaleX: 2, scaleY: 2, noiseFreq1: 1.5, noiseFreq2: 2.3, speed: 0.2, order: 0 })
-
-const scaleXNode = uniform(props.scaleX)
-const scaleYNode = uniform(props.scaleY)
-const freq1Node = uniform(props.noiseFreq1)
-const freq2Node = uniform(props.noiseFreq2)
-const speedNode = uniform(props.speed)
-watch(() => props.scaleX, v => { scaleXNode.value = v })
-watch(() => props.scaleY, v => { scaleYNode.value = v })
-watch(() => props.noiseFreq1, v => { freq1Node.value = v })
-watch(() => props.noiseFreq2, v => { freq2Node.value = v })
-watch(() => props.speed, v => { speedNode.value = v })
-
-const pipeline = useShaderPipelineContext()
-
-useShaderStage(
-  () => {
+  // @ts-nocheck
+  import { float, time, uniform, vec4 } from 'three/tsl'
+
+  import { simplexNoise2D } from '../../shaders/common/noise'
+
+  /**
+   * Noise-distorted Chebyshev box shape — the genuary22 pattern.
+   * Formula: 1 - max(abs(uv.x * scaleX * n), abs(uv.y * scaleY * n2))
+   * where n, n2 are two simplex noise octaves at different frequencies.
+   * Produces a noise-eroded cross/box silhouette. Outputs a float mask for CosinePalette.
+   */
+  const props = withDefaults(
+    defineProps<{
+      /** Horizontal scale of the box */
+      scaleX?: number
+      /** Vertical scale of the box */
+      scaleY?: number
+      /** Noise frequency for the first octave (X distortion) */
+      noiseFreq1?: number
+      /** Noise frequency for the second octave (Y distortion) */
+      noiseFreq2?: number
+      /** Animation speed */
+      speed?: number
+      order?: number
+    }>(),
+    { scaleX: 2, scaleY: 2, noiseFreq1: 1.5, noiseFreq2: 2.3, speed: 0.2, order: 0 }
+  )
+
+  const scaleXNode = uniform(props.scaleX)
+  const scaleYNode = uniform(props.scaleY)
+  const freq1Node = uniform(props.noiseFreq1)
+  const freq2Node = uniform(props.noiseFreq2)
+  const speedNode = uniform(props.speed)
+  watch(
+    () => props.scaleX,
+    (v) => {
+      scaleXNode.value = v
+    }
+  )
+  watch(
+    () => props.scaleY,
+    (v) => {
+      scaleYNode.value = v
+    }
+  )
+  watch(
+    () => props.noiseFreq1,
+    (v) => {
+      freq1Node.value = v
+    }
+  )
+  watch(
+    () => props.noiseFreq2,
+    (v) => {
+      freq2Node.value = v
+    }
+  )
+  watch(
+    () => props.speed,
+    (v) => {
+      speedNode.value = v
+    }
+  )
+
+  const pipeline = useShaderPipelineContext()
+
+  useShaderStage(() => {
     const uvCurrent = pipeline.uvNode.value
     const centered = uvCurrent.sub(0.5)
     const t = time.mul(speedNode)
 
     const n = simplexNoise2D(centered.mul(freq1Node).add(t)).mul(0.5).add(0.5)
-    const n2 = simplexNoise2D(centered.mul(freq2Node).sub(t.mul(0.7))).mul(0.5).add(0.5)
+    const n2 = simplexNoise2D(centered.mul(freq2Node).sub(t.mul(0.7)))
+      .mul(0.5)
+      .add(0.5)
 
-    const box = float(1).sub(
-      centered.x.mul(scaleXNode).mul(n).abs().max(
-        centered.y.mul(scaleYNode).mul(n2).abs()
-      )
-    ).max(float(0))
+    const box = float(1)
+      .sub(centered.x.mul(scaleXNode).mul(n).abs().max(centered.y.mul(scaleYNode).mul(n2).abs()))
+      .max(float(0))
 
     return vec4(box, box, box, float(1))
-  },
-  props.order,
-)
+  }, props.order)
 </script>
-
-<template><!-- --></template>

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

@@ -1,41 +1,60 @@
+<!-- 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, vec4, mix } from 'three/tsl'
-import { checker } from '../../shaders/common/shapes'
+  // @ts-nocheck
+  import { Color, Vector3 } from 'three'
+  import { mix, uniform, vec4 } from 'three/tsl'
 
-const props = withDefaults(defineProps<{
-  /** First checker colour */
-  colorA?: string
-  /** Second checker colour */
-  colorB?: string
-  /** Number of checker tiles across each axis */
-  scale?: number
-  order?: number
-}>(), { colorA: '#ffffff', colorB: '#000000', scale: 10, order: 0 })
+  import { checker } from '../../shaders/common/shapes'
 
-function toVec3Node(hex: string) {
-  const c = new Color(hex)
-  return uniform(new Vector3(c.r, c.g, c.b))
-}
+  const props = withDefaults(
+    defineProps<{
+      /** First checker colour */
+      colorA?: string
+      /** Second checker colour */
+      colorB?: string
+      /** Number of checker tiles across each axis */
+      scale?: number
+      order?: number
+    }>(),
+    { colorA: '#ffffff', colorB: '#000000', scale: 10, order: 0 }
+  )
 
-const colorANode = toVec3Node(props.colorA)
-const colorBNode = toVec3Node(props.colorB)
-const scaleNode = uniform(props.scale)
-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 })
+  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)
+  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
+    }
+  )
 
-useShaderStage(
-  () => {
+  const pipeline = useShaderPipelineContext()
+
+  useShaderStage(() => {
     const uvCurrent = pipeline.uvNode.value
     const t = checker(uvCurrent, scaleNode)
     return vec4(mix(colorANode, colorBNode, t), 1.0)
-  },
-  props.order,
-)
+  }, props.order)
 </script>
-
-<template><!-- --></template>

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

@@ -1,32 +1,52 @@
+<!-- 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, time, vec3, vec4, sin, float } from 'three/tsl'
-
-/**
- * Chromatic aberration — RGB channel offset approximated without texture sampling.
- * Shifts colour contribution along each channel using screen-position phase offsets.
- */
-const props = withDefaults(defineProps<{
-  /** How far channels separate */
-  strength?: number
-  /** Boost aberration at screen edges */
-  edgeFalloff?: number
-  /** Animation speed for subtle drift */
-  speed?: number
-  order?: number
-}>(), { strength: 0.008, edgeFalloff: 1.5, speed: 0.2, order: 0 })
-
-const strengthNode = uniform(props.strength)
-const edgeNode = uniform(props.edgeFalloff)
-const speedNode = uniform(props.speed)
-watch(() => props.strength, v => { strengthNode.value = v })
-watch(() => props.edgeFalloff, v => { edgeNode.value = v })
-watch(() => props.speed, v => { speedNode.value = v })
-
-const pipeline = useShaderPipelineContext()
-
-useShaderStage(
-  (prev) => {
+  // @ts-nocheck
+  import { float, sin, time, uniform, vec3, vec4 } from 'three/tsl'
+
+  /**
+   * Chromatic aberration — RGB channel offset approximated without texture sampling.
+   * Shifts colour contribution along each channel using screen-position phase offsets.
+   */
+  const props = withDefaults(
+    defineProps<{
+      /** How far channels separate */
+      strength?: number
+      /** Boost aberration at screen edges */
+      edgeFalloff?: number
+      /** Animation speed for subtle drift */
+      speed?: number
+      order?: number
+    }>(),
+    { strength: 0.008, edgeFalloff: 1.5, speed: 0.2, order: 0 }
+  )
+
+  const strengthNode = uniform(props.strength)
+  const edgeNode = uniform(props.edgeFalloff)
+  const speedNode = uniform(props.speed)
+  watch(
+    () => props.strength,
+    (v) => {
+      strengthNode.value = v
+    }
+  )
+  watch(
+    () => props.edgeFalloff,
+    (v) => {
+      edgeNode.value = v
+    }
+  )
+  watch(
+    () => props.speed,
+    (v) => {
+      speedNode.value = v
+    }
+  )
+
+  const pipeline = useShaderPipelineContext()
+
+  useShaderStage((prev) => {
     const uv = pipeline.uvNode.value
     const t = time.mul(speedNode)
 
@@ -44,9 +64,5 @@ useShaderStage(
     const bContrib = prev.z.mul(float(1).add(bShift.mul(fromCenter)))
 
     return vec4(vec3(rContrib, gContrib, bContrib), prev.w)
-  },
-  props.order,
-)
+  }, props.order)
 </script>
-
-<template><!-- --></template>

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

@@ -1,49 +1,74 @@
+<!-- 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, time, vec3, vec4, sin, float } from 'three/tsl'
+  // @ts-nocheck
+  import { float, sin, time, uniform, vec3, vec4 } from 'three/tsl'
 
-/**
- * Per-channel animated sine waves along the Y axis — the CRT chromatic oscillation effect.
- * Each RGB channel gets its own phase offset, producing subtle chromatic breathing.
- * Pattern: R: sin(freq/res * uv.y + (-time*speed - phaseOffset))
- */
-const props = withDefaults(defineProps<{
-  /** Wave amplitude (fraction of screen) */
-  amplitude?: number
-  /** Number of wave cycles across the screen height */
-  frequency?: number
-  /** Wave scroll speed */
-  speed?: number
-  /** Phase separation between RGB channels (radians) */
-  phaseOffset?: number
-  order?: number
-}>(), { amplitude: 0.075, frequency: 20, speed: 2, phaseOffset: 0.4, order: 0 })
+  /**
+   * Per-channel animated sine waves along the Y axis — the CRT chromatic oscillation effect.
+   * Each RGB channel gets its own phase offset, producing subtle chromatic breathing.
+   * Pattern: R: sin(freq/res * uv.y + (-time*speed - phaseOffset))
+   */
+  const props = withDefaults(
+    defineProps<{
+      /** Wave amplitude (fraction of screen) */
+      amplitude?: number
+      /** Number of wave cycles across the screen height */
+      frequency?: number
+      /** Wave scroll speed */
+      speed?: number
+      /** Phase separation between RGB channels (radians) */
+      phaseOffset?: number
+      order?: number
+    }>(),
+    { amplitude: 0.075, frequency: 20, speed: 2, phaseOffset: 0.4, order: 0 }
+  )
 
-const ampNode = uniform(props.amplitude)
-const freqNode = uniform(props.frequency)
-const speedNode = uniform(props.speed)
-const phaseNode = uniform(props.phaseOffset)
-watch(() => props.amplitude, v => { ampNode.value = v })
-watch(() => props.frequency, v => { freqNode.value = v })
-watch(() => props.speed, v => { speedNode.value = v })
-watch(() => props.phaseOffset, v => { phaseNode.value = v })
+  const ampNode = uniform(props.amplitude)
+  const freqNode = uniform(props.frequency)
+  const speedNode = uniform(props.speed)
+  const phaseNode = uniform(props.phaseOffset)
+  watch(
+    () => props.amplitude,
+    (v) => {
+      ampNode.value = v
+    }
+  )
+  watch(
+    () => props.frequency,
+    (v) => {
+      freqNode.value = v
+    }
+  )
+  watch(
+    () => props.speed,
+    (v) => {
+      speedNode.value = v
+    }
+  )
+  watch(
+    () => props.phaseOffset,
+    (v) => {
+      phaseNode.value = v
+    }
+  )
 
-const pipeline = useShaderPipelineContext()
+  const pipeline = useShaderPipelineContext()
 
-useShaderStage(
-  (prev) => {
+  useShaderStage((prev) => {
     const uvCurrent = pipeline.uvNode.value
     const t = time.mul(speedNode).negate()
 
     const base = freqNode.mul(uvCurrent.y)
-    const r = sin(base.add(t.sub(phaseNode))).mul(ampNode).add(float(1).sub(ampNode))
+    const r = sin(base.add(t.sub(phaseNode)))
+      .mul(ampNode)
+      .add(float(1).sub(ampNode))
     const g = sin(base.add(t)).mul(ampNode).add(float(1).sub(ampNode))
-    const b = sin(base.add(t.add(phaseNode))).mul(ampNode).add(float(1).sub(ampNode))
+    const b = sin(base.add(t.add(phaseNode)))
+      .mul(ampNode)
+      .add(float(1).sub(ampNode))
 
     return vec4(prev.xyz.mul(vec3(r, g, b)), prev.w)
-  },
-  props.order,
-)
+  }, props.order)
 </script>
-
-<template><!-- --></template>

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

@@ -1,41 +1,64 @@
+<!-- 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, vec4, mix, smoothstep, float } from 'three/tsl'
+  // @ts-nocheck
+  import { Color, Vector3 } from 'three'
+  import { float, mix, smoothstep, uniform, vec4 } from 'three/tsl'
 
-const props = withDefaults(defineProps<{
-  colorA?: string
-  colorB?: string
-  radius?: number
-  softness?: number
-  order?: number
-}>(), { colorA: '#000000', colorB: '#ffffff', radius: 0.35, softness: 0.01, order: 0 })
+  const props = withDefaults(
+    defineProps<{
+      colorA?: string
+      colorB?: string
+      radius?: number
+      softness?: number
+      order?: number
+    }>(),
+    { colorA: '#000000', colorB: '#ffffff', radius: 0.35, softness: 0.01, 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 colorANode = toVec3Node(props.colorA)
-const colorBNode = toVec3Node(props.colorB)
-const radiusNode = uniform(props.radius)
-const softnessNode = uniform(props.softness)
-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.radius, v => { radiusNode.value = v })
-watch(() => props.softness, v => { softnessNode.value = v })
+  const colorANode = toVec3Node(props.colorA)
+  const colorBNode = toVec3Node(props.colorB)
+  const radiusNode = uniform(props.radius)
+  const softnessNode = uniform(props.softness)
+  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.radius,
+    (v) => {
+      radiusNode.value = v
+    }
+  )
+  watch(
+    () => props.softness,
+    (v) => {
+      softnessNode.value = v
+    }
+  )
 
-const pipeline = useShaderPipelineContext()
+  const pipeline = useShaderPipelineContext()
 
-useShaderStage(
-  () => {
+  useShaderStage(() => {
     const uv = pipeline.uvNode.value
     const d = uv.sub(0.5).length()
     const mask = smoothstep(radiusNode.add(softnessNode), radiusNode.sub(softnessNode), d)
     return vec4(mix(colorANode, colorBNode, mask), float(1))
-  },
-  props.order,
-)
+  }, props.order)
 </script>
-
-<template><!-- --></template>