kmcom-nuxt-layers 1.7.9 → 2.1.6

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

@@ -1,59 +1,90 @@
+<!-- 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 { Vector3 } from 'three'
-import { time, uniform, vec4 } from 'three/tsl'
-import { cosinePalette } from '../../shaders/common/palette'
-import { luminance } from '../../shaders/common/blend'
+  // @ts-nocheck
+  import { Vector3 } from 'three'
+  import { time, uniform, vec4 } from 'three/tsl'
+
+  import { luminance } from '../../shaders/common/blend'
+  import { cosinePalette } from '../../shaders/common/palette'
 
-/**
- * IQ's cosine palette — the backbone of phobon/aurora-style shaders.
- * Formula: a + b * cos(2π * (c*t + d))
- * Scalar input t comes from uvNode via scalarSource.
- */
-const props = withDefaults(defineProps<{
-  /** Colour offset (brightness centre) */
-  a?: [number, number, number]
-  /** Colour amplitude (contrast) */
-  b?: [number, number, number]
-  /** Frequency per channel */
-  c?: [number, number, number]
-  /** Phase offset per channel (colour shift) */
-  d?: [number, number, number]
-  /** How fast the palette cycles over time */
-  timeScale?: number
   /**
-   * What value to feed as the scalar input `t`.
-   * `'prev'` reads luminance of the previous pipeline stage — use after RingField,
-   * ChebyshevNoiseField, or any block that outputs a grayscale scalar as its colour.
+   * IQ's cosine palette — the backbone of phobon/aurora-style shaders.
+   * Formula: a + b * cos(2π * (c*t + d))
+   * Scalar input t comes from uvNode via scalarSource.
    */
-  scalarSource?: 'uv.y' | 'uv.x' | 'length' | 'time' | 'prev'
-  order?: number
-}>(), {
-  a: () => [0.5, 0.5, 0.5],
-  b: () => [0.5, 0.5, 0.5],
-  c: () => [1.0, 1.0, 1.0],
-  d: () => [0.0, 0.33, 0.67],
-  timeScale: 0.1,
-  scalarSource: 'uv.y',
-  order: 0,
-})
+  const props = withDefaults(
+    defineProps<{
+      /** Colour offset (brightness centre) */
+      a?: [number, number, number]
+      /** Colour amplitude (contrast) */
+      b?: [number, number, number]
+      /** Frequency per channel */
+      c?: [number, number, number]
+      /** Phase offset per channel (colour shift) */
+      d?: [number, number, number]
+      /** How fast the palette cycles over time */
+      timeScale?: number
+      /**
+       * What value to feed as the scalar input `t`.
+       * `'prev'` reads luminance of the previous pipeline stage — use after RingField,
+       * ChebyshevNoiseField, or any block that outputs a grayscale scalar as its colour.
+       */
+      scalarSource?: 'uv.y' | 'uv.x' | 'length' | 'time' | 'prev'
+      order?: number
+    }>(),
+    {
+      a: () => [0.5, 0.5, 0.5],
+      b: () => [0.5, 0.5, 0.5],
+      c: () => [1.0, 1.0, 1.0],
+      d: () => [0.0, 0.33, 0.67],
+      timeScale: 0.1,
+      scalarSource: 'uv.y',
+      order: 0,
+    }
+  )
 
-const aNode = uniform(new Vector3(...props.a))
-const bNode = uniform(new Vector3(...props.b))
-const cNode = uniform(new Vector3(...props.c))
-const dNode = uniform(new Vector3(...props.d))
-const timeScaleNode = uniform(props.timeScale)
+  const aNode = uniform(new Vector3(...props.a))
+  const bNode = uniform(new Vector3(...props.b))
+  const cNode = uniform(new Vector3(...props.c))
+  const dNode = uniform(new Vector3(...props.d))
+  const timeScaleNode = uniform(props.timeScale)
 
-watch(() => props.a, v => { aNode.value.set(...v) })
-watch(() => props.b, v => { bNode.value.set(...v) })
-watch(() => props.c, v => { cNode.value.set(...v) })
-watch(() => props.d, v => { dNode.value.set(...v) })
-watch(() => props.timeScale, v => { timeScaleNode.value = v })
+  watch(
+    () => props.a,
+    (v) => {
+      aNode.value.set(...v)
+    }
+  )
+  watch(
+    () => props.b,
+    (v) => {
+      bNode.value.set(...v)
+    }
+  )
+  watch(
+    () => props.c,
+    (v) => {
+      cNode.value.set(...v)
+    }
+  )
+  watch(
+    () => props.d,
+    (v) => {
+      dNode.value.set(...v)
+    }
+  )
+  watch(
+    () => props.timeScale,
+    (v) => {
+      timeScaleNode.value = v
+    }
+  )
 
-const { uvNode } = useShaderPipelineContext()
+  const { uvNode } = useShaderPipelineContext()
 
-useShaderStage(
-  (prev) => {
+  useShaderStage((prev) => {
     let scalar
     if (props.scalarSource === 'uv.x') scalar = uvNode.value.x
     else if (props.scalarSource === 'length') scalar = uvNode.value.sub(0.5).length()
@@ -63,9 +94,5 @@ useShaderStage(
 
     const t = scalar.add(time.mul(timeScaleNode))
     return vec4(cosinePalette(t, aNode, bNode, cNode, dNode), 1.0)
-  },
-  props.order,
-)
+  }, props.order)
 </script>
-
-<template><!-- --></template>

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

@@ -1,18 +1,16 @@
+<!-- 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 { vec4 } from 'three/tsl'
+  // @ts-nocheck
+  import { vec4 } from 'three/tsl'
 
-/**
- * Sets alpha to max(r, g, b) — the ColorBends transparent mode pattern.
- * Shaders that generate shape from colour intensity (bright = opaque, dark = transparent)
- * should use this instead of a fixed alpha = 1.
- */
-const { order = 0 } = defineProps<{ order?: number }>()
+  /**
+   * Sets alpha to max(r, g, b) — the ColorBends transparent mode pattern.
+   * Shaders that generate shape from colour intensity (bright = opaque, dark = transparent)
+   * should use this instead of a fixed alpha = 1.
+   */
+  const { order = 0 } = defineProps<{ order?: number }>()
 
-useShaderStage(
-  (prev) => vec4(prev.xyz, prev.x.max(prev.y).max(prev.z)),
-  order,
-)
+  useShaderStage((prev) => vec4(prev.xyz, prev.x.max(prev.y).max(prev.z)), order)
 </script>
-
-<template><!-- --></template>

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

@@ -1,51 +1,80 @@
+<!-- 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'
-import { sdBox2d } from '../../shaders/common/sdf'
+  // @ts-nocheck
+  import { Color, Vector3 } from 'three'
+  import { float, mix, smoothstep, uniform, vec4 } from 'three/tsl'
 
-const props = withDefaults(defineProps<{
-  colorA?: string
-  colorB?: string
-  /** Length of each arm */
-  size?: number
-  /** Width of each arm */
-  thickness?: number
-  softness?: number
-  order?: number
-}>(), { colorA: '#000000', colorB: '#ffffff', size: 0.4, thickness: 0.1, softness: 0.01, order: 0 })
+  import { sdBox2d } from '../../shaders/common/sdf'
 
-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
+      /** Length of each arm */
+      size?: number
+      /** Width of each arm */
+      thickness?: number
+      softness?: number
+      order?: number
+    }>(),
+    { colorA: '#000000', colorB: '#ffffff', size: 0.4, thickness: 0.1, softness: 0.01, order: 0 }
+  )
 
-const colorANode = toVec3Node(props.colorA)
-const colorBNode = toVec3Node(props.colorB)
-const sizeNode = uniform(props.size)
-const thickNode = uniform(props.thickness)
-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.size, v => { sizeNode.value = v })
-watch(() => props.thickness, v => { thickNode.value = v })
-watch(() => props.softness, v => { softnessNode.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 sizeNode = uniform(props.size)
+  const thickNode = uniform(props.thickness)
+  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.size,
+    (v) => {
+      sizeNode.value = v
+    }
+  )
+  watch(
+    () => props.thickness,
+    (v) => {
+      thickNode.value = v
+    }
+  )
+  watch(
+    () => props.softness,
+    (v) => {
+      softnessNode.value = v
+    }
+  )
 
-useShaderStage(
-  () => {
+  const pipeline = useShaderPipelineContext()
+
+  useShaderStage(() => {
     const uv = pipeline.uvNode.value
     const p = uv.sub(0.5)
     // Horizontal arm and vertical arm — union = min
-    const dH = sdBox2d(p, thickNode.div(2))  // approx — sdBox2d expects a scalar half-size
+    const dH = sdBox2d(p, thickNode.div(2)) // approx — sdBox2d expects a scalar half-size
     const dV = sdBox2d(p.yx, thickNode.div(2))
     const d = dH.min(dV)
     const mask = smoothstep(softnessNode, softnessNode.negate(), d)
     return vec4(mix(colorANode, colorBNode, mask), float(1))
-  },
-  props.order,
-)
+  }, props.order)
 </script>
-
-<template><!-- --></template>

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

@@ -1,48 +1,71 @@
+<!-- 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, vec3, vec4, mix } from 'three/tsl'
-import { curlNoise3d } from '../../shaders/common/noise'
+  // @ts-nocheck
+  import { Color, Vector3 } from 'three'
+  import { mix, time, uniform, vec3, vec4 } from 'three/tsl'
 
-const props = withDefaults(defineProps<{
-  /** Colour to mix in at curl peak */
-  color?: string
-  /** Blend opacity */
-  opacity?: number
-  /** Input scale for the curl noise */
-  scale?: number
-  /** Animation speed */
-  speed?: number
-  order?: number
-}>(), { color: '#ffffff', opacity: 1, scale: 1.5, speed: 0.2, order: 0 })
+  import { curlNoise3d } 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<{
+      /** Colour to mix in at curl peak */
+      color?: string
+      /** Blend opacity */
+      opacity?: number
+      /** Input scale for the curl noise */
+      scale?: number
+      /** Animation speed */
+      speed?: number
+      order?: number
+    }>(),
+    { color: '#ffffff', opacity: 1, scale: 1.5, speed: 0.2, order: 0 }
+  )
 
-const colorNode = toVec3Node(props.color)
-const opacityNode = uniform(props.opacity)
-const scaleNode = uniform(props.scale)
-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.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 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.speed,
+    (v) => {
+      speedNode.value = v
+    }
+  )
 
-useShaderStage(
-  (prev) => {
+  const pipeline = useShaderPipelineContext()
+
+  useShaderStage((prev) => {
     const uvCurrent = pipeline.uvNode.value
     const t = time.mul(speedNode)
     const p = vec3(uvCurrent.mul(scaleNode), t)
     const curl = curlNoise3d(p).x.mul(0.5).add(0.5)
     const blended = mix(prev.xyz, colorNode, curl.mul(opacityNode))
     return vec4(blended, prev.w)
-  },
-  props.order,
-)
+  }, props.order)
 </script>
-
-<template><!-- --></template>

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

@@ -1,24 +1,39 @@
+<!-- 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 } from 'three'
-import { mix, uniform, vec4 } from 'three/tsl'
-import { blendDarken } from '../../shaders/common/blend'
+  // @ts-nocheck
+  import { Color } from 'three'
+  import { mix, uniform, vec4 } from 'three/tsl'
 
-const props = withDefaults(defineProps<{
-  color?: string
-  opacity?: number
-  order?: number
-}>(), { color: '#808080', opacity: 1, order: 0 })
+  import { blendDarken } from '../../shaders/common/blend'
 
-const colorNode = uniform(new Color(props.color))
-const opacityNode = uniform(props.opacity)
-watch(() => props.color, v => { colorNode.value.set(v) })
-watch(() => props.opacity, v => { opacityNode.value = v })
+  const props = withDefaults(
+    defineProps<{
+      color?: string
+      opacity?: number
+      order?: number
+    }>(),
+    { color: '#808080', opacity: 1, order: 0 }
+  )
 
-useShaderStage(
-  (prev) => vec4(mix(prev.xyz, blendDarken(prev.xyz, colorNode), opacityNode), prev.w),
-  props.order,
-)
-</script>
+  const colorNode = uniform(new Color(props.color))
+  const opacityNode = uniform(props.opacity)
+  watch(
+    () => props.color,
+    (v) => {
+      colorNode.value.set(v)
+    }
+  )
+  watch(
+    () => props.opacity,
+    (v) => {
+      opacityNode.value = v
+    }
+  )
 
-<template><!-- --></template>
+  useShaderStage(
+    (prev) => vec4(mix(prev.xyz, blendDarken(prev.xyz, colorNode), opacityNode), prev.w),
+    props.order
+  )
+</script>

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

@@ -1,48 +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 { Color, Vector3 } from 'three'
-import { uniform, time, mix, pow, abs, sign, float, vec4 } from 'three/tsl'
+  // @ts-nocheck
+  import { Color, Vector3 } from 'three'
+  import { abs, float, mix, pow, sign, time, uniform, vec4 } from 'three/tsl'
 
-/**
- * Sinusoidal interpolation between a light and dark colour over time.
- * The phobon easing: t = (sign(cycle) * pow(abs(cycle), 0.6) + 1) / 2
- * where cycle = sin(time * speed).
- */
-const props = withDefaults(defineProps<{
-  /** Colour during the light phase */
-  colorLight?: string
-  /** Colour during the dark phase */
-  colorDark?: string
-  /** Cycle speed in radians per second */
-  speed?: number
-  /** Mix opacity over prev colour */
-  opacity?: number
-  order?: number
-}>(), { colorLight: '#ffffff', colorDark: '#000033', speed: 0.3, opacity: 1, order: 0 })
+  /**
+   * Sinusoidal interpolation between a light and dark colour over time.
+   * The phobon easing: t = (sign(cycle) * pow(abs(cycle), 0.6) + 1) / 2
+   * where cycle = sin(time * speed).
+   */
+  const props = withDefaults(
+    defineProps<{
+      /** Colour during the light phase */
+      colorLight?: string
+      /** Colour during the dark phase */
+      colorDark?: string
+      /** Cycle speed in radians per second */
+      speed?: number
+      /** Mix opacity over prev colour */
+      opacity?: number
+      order?: number
+    }>(),
+    { colorLight: '#ffffff', colorDark: '#000033', speed: 0.3, opacity: 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 lightNode = toVec3Node(props.colorLight)
-const darkNode = toVec3Node(props.colorDark)
-const speedNode = uniform(props.speed)
-const opacityNode = uniform(props.opacity)
-watch(() => props.colorLight, v => { const c = new Color(v); lightNode.value.set(c.r, c.g, c.b) })
-watch(() => props.colorDark, v => { const c = new Color(v); darkNode.value.set(c.r, c.g, c.b) })
-watch(() => props.speed, v => { speedNode.value = v })
-watch(() => props.opacity, v => { opacityNode.value = v })
+  const lightNode = toVec3Node(props.colorLight)
+  const darkNode = toVec3Node(props.colorDark)
+  const speedNode = uniform(props.speed)
+  const opacityNode = uniform(props.opacity)
+  watch(
+    () => props.colorLight,
+    (v) => {
+      const c = new Color(v)
+      lightNode.value.set(c.r, c.g, c.b)
+    }
+  )
+  watch(
+    () => props.colorDark,
+    (v) => {
+      const c = new Color(v)
+      darkNode.value.set(c.r, c.g, c.b)
+    }
+  )
+  watch(
+    () => props.speed,
+    (v) => {
+      speedNode.value = v
+    }
+  )
+  watch(
+    () => props.opacity,
+    (v) => {
+      opacityNode.value = v
+    }
+  )
 
-useShaderStage(
-  (prev) => {
+  useShaderStage((prev) => {
     const cycle = time.mul(speedNode).sin()
-    const t = sign(cycle).mul(pow(abs(cycle), float(0.6))).add(1).div(2)
+    const t = sign(cycle)
+      .mul(pow(abs(cycle), float(0.6)))
+      .add(1)
+      .div(2)
     const colour = mix(darkNode, lightNode, t)
     return vec4(mix(prev.xyz, colour, opacityNode), prev.w)
-  },
-  props.order,
-)
+  }, props.order)
 </script>
-
-<template><!-- --></template>

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

@@ -1,21 +1,28 @@
+<!-- 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, vec4 } from 'three/tsl'
-import { desaturate } from '../../shaders/common/blend'
+  // @ts-nocheck
+  import { uniform, vec4 } from 'three/tsl'
 
-const props = withDefaults(defineProps<{
-  /** 0 = original colour, 1 = full greyscale */
-  amount?: number
-  order?: number
-}>(), { amount: 1, order: 0 })
+  import { desaturate } from '../../shaders/common/blend'
 
-const amountNode = uniform(props.amount)
-watch(() => props.amount, v => { amountNode.value = v })
+  const props = withDefaults(
+    defineProps<{
+      /** 0 = original colour, 1 = full greyscale */
+      amount?: number
+      order?: number
+    }>(),
+    { amount: 1, order: 0 }
+  )
 
-useShaderStage(
-  (prev) => vec4(desaturate(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(desaturate(prev.xyz, amountNode), prev.w), props.order)
+</script>