kmcom-nuxt-layers 1.7.9 → 2.1.6

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

@@ -1,54 +1,95 @@
+<!-- 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 { fbm2D } from '../../shaders/common/noise'
+  // @ts-nocheck
+  import { Color, Vector3 } from 'three'
+  import { float, mix, time, uniform, vec4 } from 'three/tsl'
 
-/** Linear gradient with per-pixel FBM noise offset — living, organic gradient. */
-const props = withDefaults(defineProps<{
-  colorA?: string
-  colorB?: string
-  /** Gradient axis angle in degrees */
-  angle?: number
-  /** Noise displacement strength */
-  noiseStrength?: number
-  /** Noise input scale */
-  noiseScale?: number
-  /** Animation speed */
-  speed?: number
-  order?: number
-}>(), { colorA: '#1a0a5a', colorB: '#ff8866', angle: 0, noiseStrength: 0.3, noiseScale: 2, speed: 0.15, 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))
-}
+  /** Linear gradient with per-pixel FBM noise offset — living, organic gradient. */
+  const props = withDefaults(
+    defineProps<{
+      colorA?: string
+      colorB?: string
+      /** Gradient axis angle in degrees */
+      angle?: number
+      /** Noise displacement strength */
+      noiseStrength?: number
+      /** Noise input scale */
+      noiseScale?: number
+      /** Animation speed */
+      speed?: number
+      order?: number
+    }>(),
+    {
+      colorA: '#1a0a5a',
+      colorB: '#ff8866',
+      angle: 0,
+      noiseStrength: 0.3,
+      noiseScale: 2,
+      speed: 0.15,
+      order: 0,
+    }
+  )
 
-const colorANode = toVec3Node(props.colorA)
-const colorBNode = toVec3Node(props.colorB)
-const angleNode = uniform(props.angle * Math.PI / 180)
-const noiseStrNode = uniform(props.noiseStrength)
-const noiseScaleNode = uniform(props.noiseScale)
-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.angle, v => { angleNode.value = v * Math.PI / 180 })
-watch(() => props.noiseStrength, v => { noiseStrNode.value = v })
-watch(() => props.noiseScale, v => { noiseScaleNode.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 angleNode = uniform((props.angle * Math.PI) / 180)
+  const noiseStrNode = uniform(props.noiseStrength)
+  const noiseScaleNode = uniform(props.noiseScale)
+  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.angle,
+    (v) => {
+      angleNode.value = (v * Math.PI) / 180
+    }
+  )
+  watch(
+    () => props.noiseStrength,
+    (v) => {
+      noiseStrNode.value = v
+    }
+  )
+  watch(
+    () => props.noiseScale,
+    (v) => {
+      noiseScaleNode.value = v
+    }
+  )
+  watch(
+    () => props.speed,
+    (v) => {
+      speedNode.value = v
+    }
+  )
 
-useShaderStage(
-  () => {
+  const pipeline = useShaderPipelineContext()
+
+  useShaderStage(() => {
     const uv = pipeline.uvNode.value
     const n = fbm2D(uv.mul(noiseScaleNode).add(time.mul(speedNode)))
     const base = uv.x.mul(angleNode.cos()).add(uv.y.mul(angleNode.sin()))
     const t = base.add(n.mul(noiseStrNode)).clamp(float(0), float(1))
     return vec4(mix(colorANode, colorBNode, t), float(1))
-  },
-  props.order,
-)
+  }, props.order)
 </script>
-
-<template><!-- --></template>

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

@@ -1,84 +1,141 @@
+<!-- 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, vec2, vec4, mix, smoothstep, cos, sin, float } from 'three/tsl'
-import { simplexNoise2D } from '../../shaders/common/noise'
+  // @ts-nocheck
+  import { Color, Vector3 } from 'three'
+  import { cos, float, mix, sin, smoothstep, time, uniform, vec2, vec4 } from 'three/tsl'
 
-/**
- * Self-contained Grainient/Shadertoy gradient pattern.
- * Combines: GradientNoise → noise-driven UV rotation → asymmetric sine warp
- *           → rotated two-colour blend.
- * Equivalent to: UVNoiseRotate + UVSineWarpXY + RotatedGradientBlend in one component.
- * Exposes all params individually so the pipeline can still intercept at any stage,
- * but provides a convenient self-contained starting point.
- */
-const props = withDefaults(defineProps<{
-  colorA?: string
-  colorB?: string
-  /** Noise input scale */
-  noiseScale?: number
-  /** Max rotation amount driven by noise (degrees) */
-  rotationAmount?: number
-  /** Sine warp frequency */
-  warpFrequency?: number
-  /** Sine warp amplitude (higher = subtler) */
-  warpAmplitude?: number
-  /** Gradient blend angle (degrees) */
-  blendAngle?: number
-  /** Smoothstep lower edge */
-  edge0?: number
-  /** Smoothstep upper edge */
-  edge1?: number
-  /** Animation speed */
-  speed?: number
-  order?: number
-}>(), {
-  colorA: '#1a0a5a',
-  colorB: '#ff6688',
-  noiseScale: 1,
-  rotationAmount: 720,
-  warpFrequency: 3,
-  warpAmplitude: 3,
-  blendAngle: 45,
-  edge0: 0.2,
-  edge1: 0.8,
-  speed: 0.3,
-  order: 0,
-})
+  import { simplexNoise2D } from '../../shaders/common/noise'
 
-const DEG2RAD = Math.PI / 180
+  /**
+   * Self-contained Grainient/Shadertoy gradient pattern.
+   * Combines: GradientNoise → noise-driven UV rotation → asymmetric sine warp
+   *           → rotated two-colour blend.
+   * Equivalent to: UVNoiseRotate + UVSineWarpXY + RotatedGradientBlend in one component.
+   * Exposes all params individually so the pipeline can still intercept at any stage,
+   * but provides a convenient self-contained starting point.
+   */
+  const props = withDefaults(
+    defineProps<{
+      colorA?: string
+      colorB?: string
+      /** Noise input scale */
+      noiseScale?: number
+      /** Max rotation amount driven by noise (degrees) */
+      rotationAmount?: number
+      /** Sine warp frequency */
+      warpFrequency?: number
+      /** Sine warp amplitude (higher = subtler) */
+      warpAmplitude?: number
+      /** Gradient blend angle (degrees) */
+      blendAngle?: number
+      /** Smoothstep lower edge */
+      edge0?: number
+      /** Smoothstep upper edge */
+      edge1?: number
+      /** Animation speed */
+      speed?: number
+      order?: number
+    }>(),
+    {
+      colorA: '#1a0a5a',
+      colorB: '#ff6688',
+      noiseScale: 1,
+      rotationAmount: 720,
+      warpFrequency: 3,
+      warpAmplitude: 3,
+      blendAngle: 45,
+      edge0: 0.2,
+      edge1: 0.8,
+      speed: 0.3,
+      order: 0,
+    }
+  )
 
-function toVec3Node(hex: string) {
-  const c = new Color(hex)
-  return uniform(new Vector3(c.r, c.g, c.b))
-}
+  const DEG2RAD = Math.PI / 180
 
-const colorANode = toVec3Node(props.colorA)
-const colorBNode = toVec3Node(props.colorB)
-const noiseScaleNode = uniform(props.noiseScale)
-const rotAmountNode = uniform(props.rotationAmount * DEG2RAD)
-const warpFreqNode = uniform(props.warpFrequency)
-const warpAmpNode = uniform(props.warpAmplitude)
-const blendAngleNode = uniform(props.blendAngle * DEG2RAD)
-const edge0Node = uniform(props.edge0)
-const edge1Node = uniform(props.edge1)
-const speedNode = uniform(props.speed)
+  function toVec3Node(hex: string) {
+    const c = new Color(hex)
+    return uniform(new Vector3(c.r, c.g, c.b))
+  }
 
-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.noiseScale, v => { noiseScaleNode.value = v })
-watch(() => props.rotationAmount, v => { rotAmountNode.value = v * DEG2RAD })
-watch(() => props.warpFrequency, v => { warpFreqNode.value = v })
-watch(() => props.warpAmplitude, v => { warpAmpNode.value = v })
-watch(() => props.blendAngle, v => { blendAngleNode.value = v * DEG2RAD })
-watch(() => props.edge0, v => { edge0Node.value = v })
-watch(() => props.edge1, v => { edge1Node.value = v })
-watch(() => props.speed, v => { speedNode.value = v })
+  const colorANode = toVec3Node(props.colorA)
+  const colorBNode = toVec3Node(props.colorB)
+  const noiseScaleNode = uniform(props.noiseScale)
+  const rotAmountNode = uniform(props.rotationAmount * DEG2RAD)
+  const warpFreqNode = uniform(props.warpFrequency)
+  const warpAmpNode = uniform(props.warpAmplitude)
+  const blendAngleNode = uniform(props.blendAngle * DEG2RAD)
+  const edge0Node = uniform(props.edge0)
+  const edge1Node = uniform(props.edge1)
+  const speedNode = uniform(props.speed)
 
-const pipeline = useShaderPipelineContext()
+  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.noiseScale,
+    (v) => {
+      noiseScaleNode.value = v
+    }
+  )
+  watch(
+    () => props.rotationAmount,
+    (v) => {
+      rotAmountNode.value = v * DEG2RAD
+    }
+  )
+  watch(
+    () => props.warpFrequency,
+    (v) => {
+      warpFreqNode.value = v
+    }
+  )
+  watch(
+    () => props.warpAmplitude,
+    (v) => {
+      warpAmpNode.value = v
+    }
+  )
+  watch(
+    () => props.blendAngle,
+    (v) => {
+      blendAngleNode.value = v * DEG2RAD
+    }
+  )
+  watch(
+    () => props.edge0,
+    (v) => {
+      edge0Node.value = v
+    }
+  )
+  watch(
+    () => props.edge1,
+    (v) => {
+      edge1Node.value = v
+    }
+  )
+  watch(
+    () => props.speed,
+    (v) => {
+      speedNode.value = v
+    }
+  )
 
-useShaderStage(
-  () => {
+  const pipeline = useShaderPipelineContext()
+
+  useShaderStage(() => {
     const uvCurrent = pipeline.uvNode.value
     if (!uvCurrent) return vec4(0, 0, 0, 1)
 
@@ -86,19 +143,26 @@ useShaderStage(
 
     // 1. Noise-driven UV rotation
     const n = simplexNoise2D(uvCurrent.mul(noiseScaleNode).add(t))
-    const angle = n.mul(0.5).add(0.5).mul(rotAmountNode).add(float(Math.PI)).sub(rotAmountNode.mul(0.5))
+    const angle = n
+      .mul(0.5)
+      .add(0.5)
+      .mul(rotAmountNode)
+      .add(float(Math.PI))
+      .sub(rotAmountNode.mul(0.5))
     const c1 = cos(angle)
     const s1 = sin(angle)
     const centered = uvCurrent.sub(0.5)
     const rotated = vec2(
       centered.x.mul(c1).sub(centered.y.mul(s1)),
-      centered.x.mul(s1).add(centered.y.mul(c1)),
+      centered.x.mul(s1).add(centered.y.mul(c1))
     ).add(0.5)
 
     // 2. Asymmetric sine warp — pure functional (no toVar/addAssign needed)
     // warpedY uses warpedX to replicate the sequential addAssign behaviour
     const warpedX = rotated.x.add(sin(rotated.y.mul(warpFreqNode).add(t)).div(warpAmpNode))
-    const warpedY = rotated.y.add(sin(warpedX.mul(warpFreqNode.mul(1.5)).add(t)).div(warpAmpNode.mul(0.5)))
+    const warpedY = rotated.y.add(
+      sin(warpedX.mul(warpFreqNode.mul(1.5)).add(t)).div(warpAmpNode.mul(0.5))
+    )
     const tuv = vec2(warpedX, warpedY)
 
     // 3. Rotated gradient blend
@@ -108,9 +172,5 @@ useShaderStage(
     const blend = smoothstep(edge0Node, edge1Node, rotX)
 
     return vec4(mix(colorANode, colorBNode, blend), float(1))
-  },
-  props.order,
-)
+  }, props.order)
 </script>
-
-<template><!-- --></template>

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

@@ -1,24 +1,38 @@
+<!-- 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 { blendOverlay } 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 { blendOverlay } 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, blendOverlay(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, blendOverlay(prev.xyz, colorNode), opacityNode), prev.w),
+    props.order
+  )
+</script>

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

@@ -1,41 +1,58 @@
+<!-- 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, floor, float } from 'three/tsl'
-import { paperTexture } from '../../shaders/common/grain'
+  // @ts-nocheck
+  import { float, floor, time, uniform, vec4 } from 'three/tsl'
 
-/**
- * Paper texture overlay — multi-octave grain that reads like coarse paper or canvas.
- * Adds tactile analogue feel to any underlying image.
- */
-const props = withDefaults(defineProps<{
-  /** Texture scale — higher = finer grain pattern */
-  scale?: number
-  /** Overlay intensity */
-  intensity?: number
-  /** Animate slowly for a living-paper effect (0 = static) */
-  speed?: number
-  order?: number
-}>(), { scale: 12, intensity: 0.08, speed: 0, order: 0 })
+  import { paperTexture } from '../../shaders/common/grain'
 
-const scaleNode = uniform(props.scale)
-const intensityNode = uniform(props.intensity)
-const speedNode = uniform(props.speed)
-watch(() => props.scale, v => { scaleNode.value = v })
-watch(() => props.intensity, v => { intensityNode.value = v })
-watch(() => props.speed, v => { speedNode.value = v })
+  /**
+   * Paper texture overlay — multi-octave grain that reads like coarse paper or canvas.
+   * Adds tactile analogue feel to any underlying image.
+   */
+  const props = withDefaults(
+    defineProps<{
+      /** Texture scale — higher = finer grain pattern */
+      scale?: number
+      /** Overlay intensity */
+      intensity?: number
+      /** Animate slowly for a living-paper effect (0 = static) */
+      speed?: number
+      order?: number
+    }>(),
+    { scale: 12, intensity: 0.08, speed: 0, order: 0 }
+  )
 
-const pipeline = useShaderPipelineContext()
+  const scaleNode = uniform(props.scale)
+  const intensityNode = uniform(props.intensity)
+  const speedNode = uniform(props.speed)
+  watch(
+    () => props.scale,
+    (v) => {
+      scaleNode.value = v
+    }
+  )
+  watch(
+    () => props.intensity,
+    (v) => {
+      intensityNode.value = v
+    }
+  )
+  watch(
+    () => props.speed,
+    (v) => {
+      speedNode.value = v
+    }
+  )
 
-useShaderStage(
-  (prev) => {
+  const pipeline = useShaderPipelineContext()
+
+  useShaderStage((prev) => {
     const uv = pipeline.uvNode.value
     const seed = floor(time.mul(speedNode).mul(6))
 
     const tex = paperTexture(uv, scaleNode, intensityNode, seed)
     return vec4(prev.xyz.add(tex), prev.w)
-  },
-  props.order,
-)
+  }, props.order)
 </script>
-
-<template><!-- --></template>

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

@@ -1,47 +1,84 @@
+<!-- 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 { polygon } from '../../shaders/common/shapes'
+  // @ts-nocheck
+  import { Color, Vector3 } from 'three'
+  import { float, mix, smoothstep, uniform, vec4 } from 'three/tsl'
 
-const props = withDefaults(defineProps<{
-  colorA?: string
-  colorB?: string
-  /** Number of sides */
-  sides?: number
-  radius?: number
-  softness?: number
-  /** Rotation offset in degrees */
-  rotation?: number
-  order?: number
-}>(), { colorA: '#000000', colorB: '#ffffff', sides: 6, radius: 0.35, softness: 0.01, rotation: 0, order: 0 })
+  import { polygon } 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<{
+      colorA?: string
+      colorB?: string
+      /** Number of sides */
+      sides?: number
+      radius?: number
+      softness?: number
+      /** Rotation offset in degrees */
+      rotation?: number
+      order?: number
+    }>(),
+    {
+      colorA: '#000000',
+      colorB: '#ffffff',
+      sides: 6,
+      radius: 0.35,
+      softness: 0.01,
+      rotation: 0,
+      order: 0,
+    }
+  )
 
-const colorANode = toVec3Node(props.colorA)
-const colorBNode = toVec3Node(props.colorB)
-const radiusNode = uniform(props.radius)
-const softnessNode = uniform(props.softness)
-const rotationNode = uniform(props.rotation * Math.PI / 180)
-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 })
-watch(() => props.rotation, v => { rotationNode.value = v * Math.PI / 180 })
+  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 radiusNode = uniform(props.radius)
+  const softnessNode = uniform(props.softness)
+  const rotationNode = uniform((props.rotation * Math.PI) / 180)
+  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
+    }
+  )
+  watch(
+    () => props.rotation,
+    (v) => {
+      rotationNode.value = (v * Math.PI) / 180
+    }
+  )
 
-useShaderStage(
-  () => {
+  const pipeline = useShaderPipelineContext()
+
+  useShaderStage(() => {
     const uv = pipeline.uvNode.value
     const mask = polygon(uv, [0.5, 0.5], radiusNode, props.sides, softnessNode)
     return vec4(mix(colorANode, colorBNode, mask), float(1))
-  },
-  props.order,
-)
+  }, props.order)
 </script>
-
-<template><!-- --></template>