kmcom-nuxt-layers 2.2.6 → 2.2.8

package/layers/shader/app/components/Preset/ThemeGradient.client.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-  import {
-    createAmbientUniforms,
-    createThemeGradientColorNode,
-  } from '#layers/shader/app/composables/useAmbientMaterials'
+  import { createThemeGradientColorNode } from '#layers/shader/app/composables/useAmbientMaterials'
+  import { type ThemePresetProps } from '#layers/shader/app/composables/useThemePreset'
+  import type { TSLNode } from '#layers/shader/app/types/tsl'
 
   const {
     speed = 1.0,
@@ -13,99 +12,39 @@
     color2 = '#6366f1',
     color3 = '#a78bfa',
     color4 = '#38bdf8',
-  } = defineProps<{
-    speed?: number
-    intensity?: number
-    mouseInteraction?: boolean
-    mouseStrength?: number
-    color1?: string
-    color2?: string
-    color3?: string
-    color4?: string
-  }>()
+  } = defineProps<ThemePresetProps>()
 
   const emit = defineEmits<{
-    node: [colorNode: any]
+    node: [colorNode: TSLNode]
   }>()
 
-  const uniforms = createAmbientUniforms({
-    speed: speed,
-    intensity: intensity,
-    mouseInteraction: mouseInteraction,
-  })
-  // createAmbientUniforms hardcodes 0.5 — override with our prop value
-  if (mouseInteraction) {
-    uniforms.mouseStrength.value = mouseStrength
-  }
-
-  const c1 = useShaderColor(color1)
-  const c2 = useShaderColor(color2)
-  const c3 = useShaderColor(color3)
-  const c4 = useShaderColor(color4)
-
-  const colorNode = createThemeGradientColorNode(uniforms, {
-    color1: c1.node,
-    color2: c2.node,
-    color3: c3.node,
-    color4: c4.node,
+  const { uniforms, colorNode } = useThemePreset(createThemeGradientColorNode, {
+    get speed() {
+      return speed
+    },
+    get intensity() {
+      return intensity
+    },
+    get mouseInteraction() {
+      return mouseInteraction
+    },
+    get mouseStrength() {
+      return mouseStrength
+    },
+    get color1() {
+      return color1
+    },
+    get color2() {
+      return color2
+    },
+    get color3() {
+      return color3
+    },
+    get color4() {
+      return color4
+    },
   })
 
-  watch(
-    () => color1,
-    (hex) => c1.tweenTo(hex, 0.8)
-  )
-  watch(
-    () => color2,
-    (hex) => c2.tweenTo(hex, 0.8)
-  )
-  watch(
-    () => color3,
-    (hex) => c3.tweenTo(hex, 0.8)
-  )
-  watch(
-    () => color4,
-    (hex) => c4.tweenTo(hex, 0.8)
-  )
-
-  try {
-    const runtime = useShaderRuntimeContext()
-    watch(
-      () => [runtime.mouse.mouseX.value, runtime.mouse.mouseY.value],
-      ([mx, my]) => {
-        uniforms.mouseX.value = mx
-        uniforms.mouseY.value = my
-      },
-      { immediate: true }
-    )
-  } catch {
-    // No runtime context
-  }
-
-  watch(
-    () => speed,
-    (v) => {
-      uniforms.speed.value = v
-    }
-  )
-  watch(
-    () => intensity,
-    (v) => {
-      uniforms.intensity.value = v
-    }
-  )
-  watch(
-    () => mouseInteraction,
-    (v) => {
-      uniforms.mouseStrength.value = v ? mouseStrength : 0
-    }
-  )
-  watch(
-    () => mouseStrength,
-    (v) => {
-      if (mouseInteraction) uniforms.mouseStrength.value = v
-    }
-  )
-
   emit('node', colorNode)
   defineExpose({ uniforms, colorNode })
 </script>

package/layers/shader/app/components/Preset/ThemeLavaLamp.client.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-  import {
-    createAmbientUniforms,
-    createThemeLavaLampColorNode,
-  } from '#layers/shader/app/composables/useAmbientMaterials'
+  import { createThemeLavaLampColorNode } from '#layers/shader/app/composables/useAmbientMaterials'
+  import { type ThemePresetProps } from '#layers/shader/app/composables/useThemePreset'
+  import type { TSLNode } from '#layers/shader/app/types/tsl'
 
   const {
     speed = 1.0,
@@ -13,98 +12,39 @@
     color2 = '#6366f1',
     color3 = '#a78bfa',
     color4 = '#38bdf8',
-  } = defineProps<{
-    speed?: number
-    intensity?: number
-    mouseInteraction?: boolean
-    mouseStrength?: number
-    color1?: string
-    color2?: string
-    color3?: string
-    color4?: string
-  }>()
+  } = defineProps<ThemePresetProps>()
 
   const emit = defineEmits<{
-    node: [colorNode: any]
+    node: [colorNode: TSLNode]
   }>()
 
-  const uniforms = createAmbientUniforms({
-    speed: speed,
-    intensity: intensity,
-    mouseInteraction: mouseInteraction,
-  })
-  if (mouseInteraction) {
-    uniforms.mouseStrength.value = mouseStrength
-  }
-
-  const c1 = useShaderColor(color1)
-  const c2 = useShaderColor(color2)
-  const c3 = useShaderColor(color3)
-  const c4 = useShaderColor(color4)
-
-  const colorNode = createThemeLavaLampColorNode(uniforms, {
-    color1: c1.node,
-    color2: c2.node,
-    color3: c3.node,
-    color4: c4.node,
+  const { uniforms, colorNode } = useThemePreset(createThemeLavaLampColorNode, {
+    get speed() {
+      return speed
+    },
+    get intensity() {
+      return intensity
+    },
+    get mouseInteraction() {
+      return mouseInteraction
+    },
+    get mouseStrength() {
+      return mouseStrength
+    },
+    get color1() {
+      return color1
+    },
+    get color2() {
+      return color2
+    },
+    get color3() {
+      return color3
+    },
+    get color4() {
+      return color4
+    },
   })
 
-  watch(
-    () => color1,
-    (hex) => c1.tweenTo(hex, 0.8)
-  )
-  watch(
-    () => color2,
-    (hex) => c2.tweenTo(hex, 0.8)
-  )
-  watch(
-    () => color3,
-    (hex) => c3.tweenTo(hex, 0.8)
-  )
-  watch(
-    () => color4,
-    (hex) => c4.tweenTo(hex, 0.8)
-  )
-
-  try {
-    const runtime = useShaderRuntimeContext()
-    watch(
-      () => [runtime.mouse.mouseX.value, runtime.mouse.mouseY.value],
-      ([mx, my]) => {
-        uniforms.mouseX.value = mx
-        uniforms.mouseY.value = my
-      },
-      { immediate: true }
-    )
-  } catch {
-    // No runtime context
-  }
-
-  watch(
-    () => speed,
-    (v) => {
-      uniforms.speed.value = v
-    }
-  )
-  watch(
-    () => intensity,
-    (v) => {
-      uniforms.intensity.value = v
-    }
-  )
-  watch(
-    () => mouseInteraction,
-    (v) => {
-      uniforms.mouseStrength.value = v ? mouseStrength : 0
-    }
-  )
-  watch(
-    () => mouseStrength,
-    (v) => {
-      if (mouseInteraction) uniforms.mouseStrength.value = v
-    }
-  )
-
   emit('node', colorNode)
   defineExpose({ uniforms, colorNode })
 </script>

package/layers/shader/app/components/Preset/ThemePlasma.client.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-  import {
-    createAmbientUniforms,
-    createThemePlasmaColorNode,
-  } from '#layers/shader/app/composables/useAmbientMaterials'
+  import { createThemePlasmaColorNode } from '#layers/shader/app/composables/useAmbientMaterials'
+  import { type ThemePresetProps } from '#layers/shader/app/composables/useThemePreset'
+  import type { TSLNode } from '#layers/shader/app/types/tsl'
 
   const {
     speed = 1.0,
@@ -13,98 +12,39 @@
     color2 = '#6366f1',
     color3 = '#a78bfa',
     color4 = '#38bdf8',
-  } = defineProps<{
-    speed?: number
-    intensity?: number
-    mouseInteraction?: boolean
-    mouseStrength?: number
-    color1?: string
-    color2?: string
-    color3?: string
-    color4?: string
-  }>()
+  } = defineProps<ThemePresetProps>()
 
   const emit = defineEmits<{
-    node: [colorNode: any]
+    node: [colorNode: TSLNode]
   }>()
 
-  const uniforms = createAmbientUniforms({
-    speed: speed,
-    intensity: intensity,
-    mouseInteraction: mouseInteraction,
-  })
-  if (mouseInteraction) {
-    uniforms.mouseStrength.value = mouseStrength
-  }
-
-  const c1 = useShaderColor(color1)
-  const c2 = useShaderColor(color2)
-  const c3 = useShaderColor(color3)
-  const c4 = useShaderColor(color4)
-
-  const colorNode = createThemePlasmaColorNode(uniforms, {
-    color1: c1.node,
-    color2: c2.node,
-    color3: c3.node,
-    color4: c4.node,
+  const { uniforms, colorNode } = useThemePreset(createThemePlasmaColorNode, {
+    get speed() {
+      return speed
+    },
+    get intensity() {
+      return intensity
+    },
+    get mouseInteraction() {
+      return mouseInteraction
+    },
+    get mouseStrength() {
+      return mouseStrength
+    },
+    get color1() {
+      return color1
+    },
+    get color2() {
+      return color2
+    },
+    get color3() {
+      return color3
+    },
+    get color4() {
+      return color4
+    },
   })
 
-  watch(
-    () => color1,
-    (hex) => c1.tweenTo(hex, 0.8)
-  )
-  watch(
-    () => color2,
-    (hex) => c2.tweenTo(hex, 0.8)
-  )
-  watch(
-    () => color3,
-    (hex) => c3.tweenTo(hex, 0.8)
-  )
-  watch(
-    () => color4,
-    (hex) => c4.tweenTo(hex, 0.8)
-  )
-
-  try {
-    const runtime = useShaderRuntimeContext()
-    watch(
-      () => [runtime.mouse.mouseX.value, runtime.mouse.mouseY.value],
-      ([mx, my]) => {
-        uniforms.mouseX.value = mx
-        uniforms.mouseY.value = my
-      },
-      { immediate: true }
-    )
-  } catch {
-    // No runtime context
-  }
-
-  watch(
-    () => speed,
-    (v) => {
-      uniforms.speed.value = v
-    }
-  )
-  watch(
-    () => intensity,
-    (v) => {
-      uniforms.intensity.value = v
-    }
-  )
-  watch(
-    () => mouseInteraction,
-    (v) => {
-      uniforms.mouseStrength.value = v ? mouseStrength : 0
-    }
-  )
-  watch(
-    () => mouseStrength,
-    (v) => {
-      if (mouseInteraction) uniforms.mouseStrength.value = v
-    }
-  )
-
   emit('node', colorNode)
   defineExpose({ uniforms, colorNode })
 </script>

package/layers/shader/app/components/Preset/ThemeWave.client.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-  import {
-    createAmbientUniforms,
-    createThemeWaveColorNode,
-  } from '#layers/shader/app/composables/useAmbientMaterials'
+  import { createThemeWaveColorNode } from '#layers/shader/app/composables/useAmbientMaterials'
+  import { type ThemePresetProps } from '#layers/shader/app/composables/useThemePreset'
+  import type { TSLNode } from '#layers/shader/app/types/tsl'
 
   const {
     speed = 1.0,
@@ -13,98 +12,39 @@
     color2 = '#6366f1',
     color3 = '#a78bfa',
     color4 = '#38bdf8',
-  } = defineProps<{
-    speed?: number
-    intensity?: number
-    mouseInteraction?: boolean
-    mouseStrength?: number
-    color1?: string
-    color2?: string
-    color3?: string
-    color4?: string
-  }>()
+  } = defineProps<ThemePresetProps>()
 
   const emit = defineEmits<{
-    node: [colorNode: any]
+    node: [colorNode: TSLNode]
   }>()
 
-  const uniforms = createAmbientUniforms({
-    speed: speed,
-    intensity: intensity,
-    mouseInteraction: mouseInteraction,
-  })
-  if (mouseInteraction) {
-    uniforms.mouseStrength.value = mouseStrength
-  }
-
-  const c1 = useShaderColor(color1)
-  const c2 = useShaderColor(color2)
-  const c3 = useShaderColor(color3)
-  const c4 = useShaderColor(color4)
-
-  const colorNode = createThemeWaveColorNode(uniforms, {
-    color1: c1.node,
-    color2: c2.node,
-    color3: c3.node,
-    color4: c4.node,
+  const { uniforms, colorNode } = useThemePreset(createThemeWaveColorNode, {
+    get speed() {
+      return speed
+    },
+    get intensity() {
+      return intensity
+    },
+    get mouseInteraction() {
+      return mouseInteraction
+    },
+    get mouseStrength() {
+      return mouseStrength
+    },
+    get color1() {
+      return color1
+    },
+    get color2() {
+      return color2
+    },
+    get color3() {
+      return color3
+    },
+    get color4() {
+      return color4
+    },
   })
 
-  watch(
-    () => color1,
-    (hex) => c1.tweenTo(hex, 0.8)
-  )
-  watch(
-    () => color2,
-    (hex) => c2.tweenTo(hex, 0.8)
-  )
-  watch(
-    () => color3,
-    (hex) => c3.tweenTo(hex, 0.8)
-  )
-  watch(
-    () => color4,
-    (hex) => c4.tweenTo(hex, 0.8)
-  )
-
-  try {
-    const runtime = useShaderRuntimeContext()
-    watch(
-      () => [runtime.mouse.mouseX.value, runtime.mouse.mouseY.value],
-      ([mx, my]) => {
-        uniforms.mouseX.value = mx
-        uniforms.mouseY.value = my
-      },
-      { immediate: true }
-    )
-  } catch {
-    // No runtime context
-  }
-
-  watch(
-    () => speed,
-    (v) => {
-      uniforms.speed.value = v
-    }
-  )
-  watch(
-    () => intensity,
-    (v) => {
-      uniforms.intensity.value = v
-    }
-  )
-  watch(
-    () => mouseInteraction,
-    (v) => {
-      uniforms.mouseStrength.value = v ? mouseStrength : 0
-    }
-  )
-  watch(
-    () => mouseStrength,
-    (v) => {
-      if (mouseInteraction) uniforms.mouseStrength.value = v
-    }
-  )
-
   emit('node', colorNode)
   defineExpose({ uniforms, colorNode })
 </script>

package/layers/shader/app/components/Shader/Background.client.vue

@@ -13,7 +13,7 @@
     Scene,
     SRGBColorSpace,
   } from 'three'
-  import { WebGPURenderer } from 'three/webgpu'
+  import { MeshBasicNodeMaterial, WebGPURenderer } from 'three/webgpu'
 
   const {
     material = null,
@@ -25,7 +25,7 @@
     pointerEvents = 'none',
   } = defineProps<{
     /** The TSL node material to render */
-    material?: any
+    material?: MeshBasicNodeMaterial | null
     /** Background clear color */
     clearColor?: string
     /** Tone mapping algorithm */
@@ -41,13 +41,13 @@
   }>()
 
   const emit = defineEmits<{
-    ready: [renderer: any]
+    ready: [renderer: WebGPURenderer]
   }>()
 
   const canvasRef = useTemplateRef<HTMLCanvasElement>('canvasRef')
   const { width, height } = useWindowSize()
 
-  let renderer: any
+  let renderer: WebGPURenderer | undefined
   let scene: Scene
   let camera: PerspectiveCamera
   let planeMesh: Mesh

package/layers/shader/app/components/Shader/Host.client.vue

@@ -1,36 +1,34 @@
 <script setup lang="ts">
   import type { Component } from 'vue'
+  import type { TSLNode } from '#layers/shader/app/types/tsl'
   import { tweenUniform } from '#layers/shader/app/utils/tsl/tween'
   import { DoubleSide } from 'three'
   import { mix as tslMix, uniform } from 'three/tsl'
   import { MeshBasicNodeMaterial } from 'three/webgpu'
 
-  const props = withDefaults(
-    defineProps<{
-      /** The active preset component */
-      preset?: Component | null
-      /** Crossfade duration in seconds */
-      transitionDuration?: number
-      /** Props forwarded to the active preset component */
-      presetProps?: Record<string, any>
-      /** ShaderBackground props */
-      clearColor?: string
-      toneMapping?: 'aces' | 'reinhard' | 'cineon' | 'linear'
-      fixed?: boolean
-      zIndex?: number
-      pointerEvents?: 'none' | 'auto'
-    }>(),
-    {
-      preset: null,
-      transitionDuration: 1.0,
-      presetProps: () => ({}),
-      clearColor: '#000000',
-      toneMapping: 'aces',
-      fixed: true,
-      zIndex: -1,
-      pointerEvents: 'none',
-    }
-  )
+  const {
+    preset = null,
+    transitionDuration = 1.0,
+    presetProps = {} as Record<string, unknown>,
+    clearColor = '#000000',
+    toneMapping = 'aces',
+    fixed = true,
+    zIndex = -1,
+    pointerEvents = 'none',
+  } = defineProps<{
+    /** The active preset component */
+    preset?: Component | null
+    /** Crossfade duration in seconds */
+    transitionDuration?: number
+    /** Props forwarded to the active preset component */
+    presetProps?: Record<string, unknown>
+    /** ShaderBackground props */
+    clearColor?: string
+    toneMapping?: 'aces' | 'reinhard' | 'cineon' | 'linear'
+    fixed?: boolean
+    zIndex?: number
+    pointerEvents?: 'none' | 'auto'
+  }>()
 
   const emit = defineEmits<{
     transitionStart: []
@@ -42,7 +40,7 @@
   const isTransitioning = ref(false)
 
   // Current and next preset tracking
-  const currentPreset = shallowRef<Component | null>(props.preset)
+  const currentPreset = shallowRef<Component | null>(preset)
   const nextPreset = shallowRef<Component | null>(null)
 
   function setCurrentPreset(preset: Component | null) {
@@ -54,15 +52,15 @@
   material.side = DoubleSide
 
   // Current and next graph nodes (set by preset via @node event)
-  let currentNode: any = null
-  let nextNode: any = null
+  let currentNode: TSLNode | null = null
+  let nextNode: TSLNode | null = null
 
-  function setCurrentNode(node: any) {
+  function setCurrentNode(node: TSLNode) {
     currentNode = node
     updateMaterialNode()
   }
 
-  function setNextNode(node: any) {
+  function setNextNode(node: TSLNode) {
     nextNode = node
     updateMaterialNode()
   }
@@ -79,7 +77,7 @@
 
   // Watch preset changes for crossfade
   watch(
-    () => props.preset,
+    () => preset,
     async (newPreset, oldPreset) => {
       if (!newPreset || newPreset === oldPreset) return
 
@@ -100,7 +98,7 @@
         transitionProgress,
         0,
         1,
-        props.transitionDuration,
+        transitionDuration,
         (t) => t * t * (3 - 2 * t) // smoothstep
       )