kmcom-nuxt-layers 1.7.9 → 2.2.0

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

@@ -1,39 +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 { uniform, time, vec3, vec4, clamp, sin, floor, fract, float } from 'three/tsl'
-import { grain } from '../../shaders/common/grain'
-import { vignette } from '../../shaders/common/grain'
-import { luminance } from '../../shaders/common/blend'
-
-/**
- * Preset: combines grain + warm tone shift + vignette + slight fade.
- * A convenient one-stop aged film look.
- */
-const props = withDefaults(defineProps<{
-  /** Overall intensity: 0 = no effect, 1 = full aged look */
-  intensity?: number
-  /** Grain strength */
-  grainStrength?: number
-  /** Vignette darkness */
-  vignetteStrength?: number
-  /** Warm shadow tint amount */
-  warmth?: number
-  order?: number
-}>(), { intensity: 1, grainStrength: 0.04, vignetteStrength: 0.5, warmth: 0.15, order: 0 })
-
-const intensityNode = uniform(props.intensity)
-const grainNode = uniform(props.grainStrength)
-const vigNode = uniform(props.vignetteStrength)
-const warmthNode = uniform(props.warmth)
-watch(() => props.intensity, v => { intensityNode.value = v })
-watch(() => props.grainStrength, v => { grainNode.value = v })
-watch(() => props.vignetteStrength, v => { vigNode.value = v })
-watch(() => props.warmth, v => { warmthNode.value = v })
-
-const pipeline = useShaderPipelineContext()
-
-useShaderStage(
-  (prev) => {
+  // @ts-nocheck
+  import { clamp, float, floor, fract, sin, time, uniform, vec3, vec4 } from 'three/tsl'
+
+  import { luminance } from '../../shaders/common/blend'
+  import { grain, vignette } from '../../shaders/common/grain'
+
+  /**
+   * Preset: combines grain + warm tone shift + vignette + slight fade.
+   * A convenient one-stop aged film look.
+   */
+  const props = withDefaults(
+    defineProps<{
+      /** Overall intensity: 0 = no effect, 1 = full aged look */
+      intensity?: number
+      /** Grain strength */
+      grainStrength?: number
+      /** Vignette darkness */
+      vignetteStrength?: number
+      /** Warm shadow tint amount */
+      warmth?: number
+      order?: number
+    }>(),
+    { intensity: 1, grainStrength: 0.04, vignetteStrength: 0.5, warmth: 0.15, order: 0 }
+  )
+
+  const intensityNode = uniform(props.intensity)
+  const grainNode = uniform(props.grainStrength)
+  const vigNode = uniform(props.vignetteStrength)
+  const warmthNode = uniform(props.warmth)
+  watch(
+    () => props.intensity,
+    (v) => {
+      intensityNode.value = v
+    }
+  )
+  watch(
+    () => props.grainStrength,
+    (v) => {
+      grainNode.value = v
+    }
+  )
+  watch(
+    () => props.vignetteStrength,
+    (v) => {
+      vigNode.value = v
+    }
+  )
+  watch(
+    () => props.warmth,
+    (v) => {
+      warmthNode.value = v
+    }
+  )
+
+  const pipeline = useShaderPipelineContext()
+
+  useShaderStage((prev) => {
     const uv = pipeline.uvNode.value
     const t = time
 
@@ -54,9 +79,5 @@ useShaderStage(
 
     const result = clamp(faded.mul(vig).add(g), 0, 1)
     return vec4(result.mix(prev.xyz, float(1).sub(intensityNode)), prev.w)
-  },
-  props.order,
-)
+  }, props.order)
 </script>
-
-<template><!-- --></template>

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

@@ -1,59 +1,97 @@
+<!-- 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, vec2, vec3, vec4, mix, sin, float, clamp } from 'three/tsl'
-import { fbm2D } from '../../shaders/common/noise'
+  // @ts-nocheck
+  import { Color, Vector3 } from 'three'
+  import { clamp, float, mix, sin, time, uniform, vec2, vec3, vec4 } from 'three/tsl'
 
-/**
- * Aurora borealis — layered animated colour bands across the upper screen.
- * Uses FBM noise to create organic ribbon-like curtains of light.
- */
-const props = withDefaults(defineProps<{
-  /** Primary aurora colour */
-  colorA?: string
-  /** Secondary aurora colour */
-  colorB?: string
-  /** Vertical position of aurora band centre */
-  bandY?: number
-  /** Vertical band height */
-  bandHeight?: number
-  /** Animation speed */
-  speed?: number
-  /** Effect intensity */
-  intensity?: number
-  order?: number
-}>(), {
-  colorA: '#00ff88',
-  colorB: '#8844ff',
-  bandY: 0.7,
-  bandHeight: 0.3,
-  speed: 0.3,
-  intensity: 0.7,
-  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))
-}
+  /**
+   * Aurora borealis — layered animated colour bands across the upper screen.
+   * Uses FBM noise to create organic ribbon-like curtains of light.
+   */
+  const props = withDefaults(
+    defineProps<{
+      /** Primary aurora colour */
+      colorA?: string
+      /** Secondary aurora colour */
+      colorB?: string
+      /** Vertical position of aurora band centre */
+      bandY?: number
+      /** Vertical band height */
+      bandHeight?: number
+      /** Animation speed */
+      speed?: number
+      /** Effect intensity */
+      intensity?: number
+      order?: number
+    }>(),
+    {
+      colorA: '#00ff88',
+      colorB: '#8844ff',
+      bandY: 0.7,
+      bandHeight: 0.3,
+      speed: 0.3,
+      intensity: 0.7,
+      order: 0,
+    }
+  )
 
-const colorANode = toVec3Node(props.colorA)
-const colorBNode = toVec3Node(props.colorB)
-const bandYNode = uniform(props.bandY)
-const bandHNode = uniform(props.bandHeight)
-const speedNode = uniform(props.speed)
-const intensityNode = uniform(props.intensity)
-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.bandY, v => { bandYNode.value = v })
-watch(() => props.bandHeight, v => { bandHNode.value = v })
-watch(() => props.speed, v => { speedNode.value = v })
-watch(() => props.intensity, v => { intensityNode.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 bandYNode = uniform(props.bandY)
+  const bandHNode = uniform(props.bandHeight)
+  const speedNode = uniform(props.speed)
+  const intensityNode = uniform(props.intensity)
+  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.bandY,
+    (v) => {
+      bandYNode.value = v
+    }
+  )
+  watch(
+    () => props.bandHeight,
+    (v) => {
+      bandHNode.value = v
+    }
+  )
+  watch(
+    () => props.speed,
+    (v) => {
+      speedNode.value = v
+    }
+  )
+  watch(
+    () => props.intensity,
+    (v) => {
+      intensityNode.value = v
+    }
+  )
 
-useShaderStage(
-  (prev) => {
+  const pipeline = useShaderPipelineContext()
+
+  useShaderStage((prev) => {
     const uv = pipeline.uvNode.value
     const t = time.mul(speedNode)
 
@@ -68,14 +106,12 @@ useShaderStage(
     bandMask.pow(2)
 
     // Colour: mix A/B via second noise layer
-    const colourMix = fbm2D(uv.mul(1.5).add(t.mul(0.3).add(1.5))).mul(0.5).add(0.5)
+    const colourMix = fbm2D(uv.mul(1.5).add(t.mul(0.3).add(1.5)))
+      .mul(0.5)
+      .add(0.5)
     const aurora = mix(colorANode, colorBNode, colourMix)
 
     const contribution = aurora.mul(bandMask.pow(2)).mul(intensityNode)
     return vec4(prev.xyz.add(contribution), prev.w)
-  },
-  props.order,
-)
+  }, props.order)
 </script>
-
-<template><!-- --></template>

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

@@ -1,46 +1,77 @@
+<!-- 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'
+  // @ts-nocheck
+  import { Color, Vector3 } from 'three'
+  import { mix, uniform, vec4 } from 'three/tsl'
 
-const props = withDefaults(defineProps<{
-  /** Bottom-left corner colour */
-  bottomLeft?: string
-  /** Bottom-right corner colour */
-  bottomRight?: string
-  /** Top-left corner colour */
-  topLeft?: string
-  /** Top-right corner colour */
-  topRight?: string
-  order?: number
-}>(), { bottomLeft: '#000000', bottomRight: '#ff0000', topLeft: '#0000ff', topRight: '#ffffff', order: 0 })
+  const props = withDefaults(
+    defineProps<{
+      /** Bottom-left corner colour */
+      bottomLeft?: string
+      /** Bottom-right corner colour */
+      bottomRight?: string
+      /** Top-left corner colour */
+      topLeft?: string
+      /** Top-right corner colour */
+      topRight?: string
+      order?: number
+    }>(),
+    {
+      bottomLeft: '#000000',
+      bottomRight: '#ff0000',
+      topLeft: '#0000ff',
+      topRight: '#ffffff',
+      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 blNode = toVec3Node(props.bottomLeft)
-const brNode = toVec3Node(props.bottomRight)
-const tlNode = toVec3Node(props.topLeft)
-const trNode = toVec3Node(props.topRight)
-watch(() => props.bottomLeft, v => { const c = new Color(v); blNode.value.set(c.r, c.g, c.b) })
-watch(() => props.bottomRight, v => { const c = new Color(v); brNode.value.set(c.r, c.g, c.b) })
-watch(() => props.topLeft, v => { const c = new Color(v); tlNode.value.set(c.r, c.g, c.b) })
-watch(() => props.topRight, v => { const c = new Color(v); trNode.value.set(c.r, c.g, c.b) })
+  const blNode = toVec3Node(props.bottomLeft)
+  const brNode = toVec3Node(props.bottomRight)
+  const tlNode = toVec3Node(props.topLeft)
+  const trNode = toVec3Node(props.topRight)
+  watch(
+    () => props.bottomLeft,
+    (v) => {
+      const c = new Color(v)
+      blNode.value.set(c.r, c.g, c.b)
+    }
+  )
+  watch(
+    () => props.bottomRight,
+    (v) => {
+      const c = new Color(v)
+      brNode.value.set(c.r, c.g, c.b)
+    }
+  )
+  watch(
+    () => props.topLeft,
+    (v) => {
+      const c = new Color(v)
+      tlNode.value.set(c.r, c.g, c.b)
+    }
+  )
+  watch(
+    () => props.topRight,
+    (v) => {
+      const c = new Color(v)
+      trNode.value.set(c.r, c.g, c.b)
+    }
+  )
 
-const pipeline = useShaderPipelineContext()
+  const pipeline = useShaderPipelineContext()
 
-useShaderStage(
-  () => {
+  useShaderStage(() => {
     const uvCurrent = pipeline.uvNode.value
     const bottom = mix(blNode, brNode, uvCurrent.x)
     const top = mix(tlNode, trNode, uvCurrent.x)
     const colour = mix(bottom, top, uvCurrent.y)
     return vec4(colour, 1.0)
-  },
-  props.order,
-)
+  }, props.order)
 </script>
-
-<template><!-- --></template>

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

@@ -1,42 +1,66 @@
+<!-- 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, float } from 'three/tsl'
-import { turbulence2D } from '../../shaders/common/noise'
+  // @ts-nocheck
+  import { Color, Vector3 } from 'three'
+  import { float, mix, time, uniform, vec4 } from 'three/tsl'
 
-/** Billow/turbulence noise — folded abs() of FBM, producing cloud-like forms. */
-const props = withDefaults(defineProps<{
-  colorA?: string
-  colorB?: string
-  scale?: number
-  speed?: number
-  order?: number
-}>(), { colorA: '#1a3a8a', colorB: '#ffffff', scale: 2, speed: 0.1, order: 0 })
+  import { turbulence2D } from '../../shaders/common/noise'
 
-function toVec3Node(hex: string) {
-  const c = new Color(hex)
-  return uniform(new Vector3(c.r, c.g, c.b))
-}
+  /** Billow/turbulence noise — folded abs() of FBM, producing cloud-like forms. */
+  const props = withDefaults(
+    defineProps<{
+      colorA?: string
+      colorB?: string
+      scale?: number
+      speed?: number
+      order?: number
+    }>(),
+    { colorA: '#1a3a8a', colorB: '#ffffff', scale: 2, speed: 0.1, 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 n = turbulence2D(uv.mul(scaleNode).add(time.mul(speedNode)))
     return vec4(mix(colorANode, colorBNode, n), float(1))
-  },
-  props.order,
-)
+  }, props.order)
 </script>
-
-<template><!-- --></template>

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

@@ -1,25 +1,41 @@
+<!-- eslint-disable vue/no-dupe-keys -->
+<!-- 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 { brightness, contrast } from '../../shaders/common/blend'
+  // @ts-nocheck
+  import { uniform, vec4 } from 'three/tsl'
 
-const props = withDefaults(defineProps<{
-  /** Additive brightness offset: 0 = unchanged, positive = brighter */
-  brightness?: number
-  /** Contrast multiplier: 1 = unchanged, >1 = more contrast */
-  contrast?: number
-  order?: number
-}>(), { brightness: 0, contrast: 1, order: 0 })
+  import { brightness, contrast } from '../../shaders/common/blend'
 
-const brightnessNode = uniform(props.brightness)
-const contrastNode = uniform(props.contrast)
-watch(() => props.brightness, v => { brightnessNode.value = v })
-watch(() => props.contrast, v => { contrastNode.value = v })
+  const props = withDefaults(
+    defineProps<{
+      /** Additive brightness offset: 0 = unchanged, positive = brighter */
+      brightness?: number
+      /** Contrast multiplier: 1 = unchanged, >1 = more contrast */
+      contrast?: number
+      order?: number
+    }>(),
+    { brightness: 0, contrast: 1, order: 0 }
+  )
 
-useShaderStage(
-  (prev) => vec4(brightness(contrast(prev.xyz, contrastNode), brightnessNode), prev.w),
-  props.order,
-)
-</script>
+  const brightnessNode = uniform(props.brightness)
+  const contrastNode = uniform(props.contrast)
+  watch(
+    () => props.brightness,
+    (v) => {
+      brightnessNode.value = v
+    }
+  )
+  watch(
+    () => props.contrast,
+    (v) => {
+      contrastNode.value = v
+    }
+  )
 
-<template><!-- --></template>
+  useShaderStage(
+    (prev) => vec4(brightness(contrast(prev.xyz, contrastNode), brightnessNode), prev.w),
+    props.order
+  )
+</script>

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

@@ -1,41 +1,65 @@
+<!-- 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, float } from 'three/tsl'
-import { voronoi2D } 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: '#000033', colorB: '#ffffff', scale: 8, 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))
-}
+  const props = withDefaults(
+    defineProps<{
+      colorA?: string
+      colorB?: string
+      scale?: number
+      speed?: number
+      order?: number
+    }>(),
+    { colorA: '#000033', colorB: '#ffffff', scale: 8, speed: 0.1, 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 { distance } = voronoi2D(uv.add(time.mul(speedNode)), scaleNode)
     return vec4(mix(colorANode, colorBNode, distance.min(float(1))), float(1))
-  },
-  props.order,
-)
+  }, props.order)
 </script>
-
-<template><!-- --></template>