kmcom-nuxt-layers 2.2.6 → 2.2.8

package/layers/scroll/app/types/scroll.ts

@@ -0,0 +1,32 @@
+import type { ComputedRef, Ref } from 'vue'
+
+export type ScrollToOptions = {
+  offset?: number
+  duration?: number
+  immediate?: boolean
+  lock?: boolean
+  onComplete?: () => void
+}
+
+export type SectionProgressOptions = {
+  start?: string
+  end?: string
+  markers?: boolean
+}
+
+export type ScrollSceneContext = {
+  progress: Ref<number>
+  active: Ref<boolean>
+  name: string
+  stepCount: ComputedRef<number>
+  registerStep: (index: number) => void
+  unregisterStep: (index: number) => void
+}
+
+export type ScrollState = {
+  scroll: number
+  limit: number
+  velocity: number
+  direction: number
+  progress: number
+}

package/layers/scroll/package.json

@@ -7,5 +7,8 @@
     "gsap": "catalog:",
     "locomotive-scroll": "catalog:",
     "v-gsap-nuxt": "catalog:"
+  },
+  "scripts": {
+    "lint": "eslint ."
   }
 }

package/layers/seo/package.json

@@ -6,7 +6,8 @@
   "scripts": {
     "dev": "nuxi dev",
     "dev:playground": "PLAYGROUND_LAYERS=core,seo pnpm -F playground dev",
-    "typecheck": "vue-tsc --noEmit -p ../../tsconfig.typecheck.json"
+    "typecheck": "vue-tsc --noEmit -p ../../tsconfig.typecheck.json",
+    "lint": "eslint ."
   },
   "dependencies": {
     "@nuxtjs/seo": "catalog:"

package/layers/shader/app/components/Material/Fresnel.client.vue

@@ -73,7 +73,7 @@
     // Mix colors based on fresnel using reactive uniforms
     const colorNode = mix(vec3(baseColorUniform), vec3(fresnelColorUniform), fresnelFactor)
 
-    mat.colorNode = colorNode as any
+    mat.colorNode = colorNode as TSLNode
     mat.transparent = transparent
     mat.side = DoubleSide
 

package/layers/shader/app/components/Material/Image.client.vue

@@ -146,7 +146,7 @@
         loadedTexture.value = await loader.loadAsync(src)
       } catch (e) {
         error.value = e as Error
-        console.error('Failed to load texture:', e)
+        void e
       } finally {
         isLoading.value = false
       }

package/layers/shader/app/components/Material/Node.client.vue

@@ -6,13 +6,13 @@
 
   const {
     type = 'basic',
-    colorNode,
-    opacityNode,
-    normalNode,
-    emissiveNode,
-    metalnessNode,
-    roughnessNode,
-    positionNode,
+    colorNode = undefined,
+    opacityNode = undefined,
+    normalNode = undefined,
+    emissiveNode = undefined,
+    metalnessNode = undefined,
+    roughnessNode = undefined,
+    positionNode = undefined,
     transparent = false,
     side = 'front',
     wireframe = false,

package/layers/shader/app/components/Material/Noise.client.vue

@@ -125,7 +125,7 @@
     // Mix colors based on noise using reactive uniforms
     const colorNode = mix(vec3(baseColorUniform), vec3(peakColorUniform), normalizedNoise)
 
-    mat.colorNode = colorNode as any
+    mat.colorNode = colorNode as TSLNode
     mat.transparent = transparent
     mat.side = DoubleSide
 

package/layers/shader/app/components/Node/Color.client.vue

@@ -4,38 +4,35 @@
 
   import type { TSLNode } from '../../shaders/types'
 
-  const props = withDefaults(
-    defineProps<{
-      id?: string
-      color?: string
-      order?: number
-      blend?: 'normal' | 'add' | 'multiply' | 'screen' | 'overlay' | 'mix'
-      opacity?: number
-    }>(),
-    {
-      id: 'color',
-      color: '#ffffff',
-      order: 0,
-      blend: 'normal',
-      opacity: 1.0,
-    }
-  )
+  const {
+    id = 'color',
+    color = '#ffffff',
+    order = 0,
+    blend = 'normal',
+    opacity = 1.0,
+  } = defineProps<{
+    id?: string
+    color?: string
+    order?: number
+    blend?: 'normal' | 'add' | 'multiply' | 'screen' | 'overlay' | 'mix'
+    opacity?: number
+  }>()
 
   const graph = useShaderGraphContext()
 
   // Create uniform once
-  const colorValue = new Color(props.color)
+  const colorValue = new Color(color)
   const colorNode: TSLNode = uniform(colorValue)
 
   // Build TSL node once (references uniform by pointer)
   const node = vec3(colorNode)
 
   // Register in graph
-  graph.register(props.id, node, props.order, props.blend, props.opacity)
+  graph.register(id, node, order, blend, opacity)
 
   // Watch props to update uniform value (no recompilation)
   watch(
-    () => props.color,
+    () => color,
     (hex) => {
       colorValue.set(hex)
       colorNode.value = colorValue
@@ -43,7 +40,7 @@
   )
 
   onUnmounted(() => {
-    graph.unregister(props.id)
+    graph.unregister(id)
   })
 </script>
 

package/layers/shader/app/components/Node/Noise.client.vue

@@ -8,34 +8,31 @@
   } from '#layers/shader/app/shaders/common/noise'
   import { add, mul, time, uniform, uv, vec2, vec3 } from 'three/tsl'
 
-  const props = withDefaults(
-    defineProps<{
-      id?: string
-      type?: 'simplex' | 'fbm' | 'voronoi' | 'ridged' | 'fbm3d'
-      scale?: number
-      speed?: number
-      octaves?: number
-      order?: number
-      blend?: 'normal' | 'add' | 'multiply' | 'screen' | 'overlay' | 'mix'
-      opacity?: number
-    }>(),
-    {
-      id: 'noise',
-      type: 'simplex',
-      scale: 3.0,
-      speed: 0.2,
-      octaves: 4,
-      order: 0,
-      blend: 'normal',
-      opacity: 1.0,
-    }
-  )
+  const {
+    id = 'noise',
+    type = 'simplex',
+    scale = 3.0,
+    speed = 0.2,
+    octaves = 4,
+    order = 0,
+    blend = 'normal',
+    opacity = 1.0,
+  } = defineProps<{
+    id?: string
+    type?: 'simplex' | 'fbm' | 'voronoi' | 'ridged' | 'fbm3d'
+    scale?: number
+    speed?: number
+    octaves?: number
+    order?: number
+    blend?: 'normal' | 'add' | 'multiply' | 'screen' | 'overlay' | 'mix'
+    opacity?: number
+  }>()
 
   const graph = useShaderGraphContext()
 
   // Create uniforms once
-  const uScale = uniform(props.scale)
-  const uSpeed = uniform(props.speed)
+  const uScale = uniform(scale)
+  const uSpeed = uniform(speed)
 
   // Build TSL node
   function buildNode() {
@@ -46,9 +43,9 @@
 
     let noiseValue
 
-    switch (props.type) {
+    switch (type) {
       case 'fbm':
-        noiseValue = fbm2D(animatedUV, { octaves: props.octaves, frequency: 1.0 }).mul(0.5).add(0.5)
+        noiseValue = fbm2D(animatedUV, { octaves, frequency: 1.0 }).mul(0.5).add(0.5)
         break
       case 'voronoi': {
         const { distance } = voronoi2D(animatedUV, 1.0)
@@ -56,10 +53,10 @@
         break
       }
       case 'ridged':
-        noiseValue = ridgedFbm2d(animatedUV, { octaves: props.octaves, frequency: 1.0 })
+        noiseValue = ridgedFbm2d(animatedUV, { octaves, frequency: 1.0 })
         break
       case 'fbm3d':
-        noiseValue = fbm3dSimplex(vec3(scaledUV, t), { octaves: props.octaves }).mul(0.5).add(0.5)
+        noiseValue = fbm3dSimplex(vec3(scaledUV, t), { octaves }).mul(0.5).add(0.5)
         break
       case 'simplex':
       default:
@@ -71,17 +68,17 @@
   }
 
   const node = buildNode()
-  graph.register(props.id, node, props.order, props.blend, props.opacity)
+  graph.register(id, node, order, blend, opacity)
 
   // Watch uniform-driven props (no recompilation)
   watch(
-    () => props.scale,
+    () => scale,
     (v) => {
       uScale.value = v
     }
   )
   watch(
-    () => props.speed,
+    () => speed,
     (v) => {
       uSpeed.value = v
     }
@@ -89,15 +86,15 @@
 
   // Watch topology-changing props (requires graph update)
   watch(
-    () => [props.type, props.octaves] as const,
+    () => [type, octaves] as const,
     () => {
       const newNode = buildNode()
-      graph.update(props.id, newNode)
+      graph.update(id, newNode)
     }
   )
 
   onUnmounted(() => {
-    graph.unregister(props.id)
+    graph.unregister(id)
   })
 </script>
 

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

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-  import { Color, Vector3 } from 'three'
+  import { Color } from 'three'
   import { clamp, float, mix, time, uniform, vec2, vec4 } from 'three/tsl'
 
   import { fbm2D } from '../../shaders/common/noise'
+  import { hexToVec3Uniform } from '../../utils/tsl/color'
 
   /**
    * Aurora borealis — layered animated colour bands across the upper screen.
@@ -32,13 +33,8 @@
     order?: number
   }>()
 
-  function toVec3Node(hex: string) {
-    const c = new Color(hex)
-    return uniform(new Vector3(c.r, c.g, c.b))
-  }
-
-  const colorANode = toVec3Node(colorA)
-  const colorBNode = toVec3Node(colorB)
+  const colorANode = hexToVec3Uniform(colorA)
+  const colorBNode = hexToVec3Uniform(colorB)
   const bandYNode = uniform(bandY)
   const bandHNode = uniform(bandHeight)
   const speedNode = uniform(speed)

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

@@ -1,6 +1,8 @@
 <script setup lang="ts">
-  import { Color, Vector3 } from 'three'
-  import { mix, uniform, vec4 } from 'three/tsl'
+  import { Color } from 'three'
+  import { mix, vec4 } from 'three/tsl'
+
+  import { hexToVec3Uniform } from '../../utils/tsl/color'
 
   const {
     bottomLeft = '#000000',
@@ -20,15 +22,10 @@
     order?: number
   }>()
 
-  function toVec3Node(hex: string) {
-    const c = new Color(hex)
-    return uniform(new Vector3(c.r, c.g, c.b))
-  }
-
-  const blNode = toVec3Node(bottomLeft)
-  const brNode = toVec3Node(bottomRight)
-  const tlNode = toVec3Node(topLeft)
-  const trNode = toVec3Node(topRight)
+  const blNode = hexToVec3Uniform(bottomLeft)
+  const brNode = hexToVec3Uniform(bottomRight)
+  const tlNode = hexToVec3Uniform(topLeft)
+  const trNode = hexToVec3Uniform(topRight)
   watch(
     () => bottomLeft,
     (v) => {

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

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-  import { Color, Vector3 } from 'three'
+  import { Color } from 'three'
   import { float, mix, time, uniform, vec4 } from 'three/tsl'
 
   import { turbulence2D } from '../../shaders/common/noise'
+  import { hexToVec3Uniform } from '../../utils/tsl/color'
 
   /** Billow/turbulence noise — folded abs() of FBM, producing cloud-like forms. */
   const {
@@ -19,13 +20,8 @@
     order?: number
   }>()
 
-  function toVec3Node(hex: string) {
-    const c = new Color(hex)
-    return uniform(new Vector3(c.r, c.g, c.b))
-  }
-
-  const colorANode = toVec3Node(colorA)
-  const colorBNode = toVec3Node(colorB)
+  const colorANode = hexToVec3Uniform(colorA)
+  const colorBNode = hexToVec3Uniform(colorB)
   const scaleNode = uniform(scale)
   const speedNode = uniform(speed)
   watch(

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

@@ -1,7 +1,10 @@
 <script setup lang="ts">
   import { uniform, vec4 } from 'three/tsl'
 
-  import { brightness, contrast } from '../../shaders/common/blend'
+  import {
+    brightness as brightnessEffect,
+    contrast as contrastEffect,
+  } from '../../shaders/common/blend'
 
   const {
     brightness: brightnessProp = 0,
@@ -31,7 +34,8 @@
   )
 
   useShaderStage(
-    (prev) => vec4(brightness(contrast(prev.xyz, contrastNode), brightnessNode), prev.w),
+    (prev) =>
+      vec4(brightnessEffect(contrastEffect(prev.xyz, contrastNode), brightnessNode), prev.w),
     order
   )
 </script>

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

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-  import { Color, Vector3 } from 'three'
+  import { Color } from 'three'
   import { float, mix, time, uniform, vec4 } from 'three/tsl'
 
   import { voronoi2D } from '../../shaders/common/noise'
+  import { hexToVec3Uniform } from '../../utils/tsl/color'
 
   const {
     colorA = '#000033',
@@ -18,13 +19,8 @@
     order?: number
   }>()
 
-  function toVec3Node(hex: string) {
-    const c = new Color(hex)
-    return uniform(new Vector3(c.r, c.g, c.b))
-  }
-
-  const colorANode = toVec3Node(colorA)
-  const colorBNode = toVec3Node(colorB)
+  const colorANode = hexToVec3Uniform(colorA)
+  const colorBNode = hexToVec3Uniform(colorB)
   const scaleNode = uniform(scale)
   const speedNode = uniform(speed)
   watch(

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

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-  import { Color, Vector3 } from 'three'
+  import { Color } from 'three'
   import { mix, uniform, vec4 } from 'three/tsl'
 
   import { checker } from '../../shaders/common/shapes'
+  import { hexToVec3Uniform } from '../../utils/tsl/color'
 
   const {
     colorA = '#ffffff',
@@ -19,13 +20,8 @@
     order?: number
   }>()
 
-  function toVec3Node(hex: string) {
-    const c = new Color(hex)
-    return uniform(new Vector3(c.r, c.g, c.b))
-  }
-
-  const colorANode = toVec3Node(colorA)
-  const colorBNode = toVec3Node(colorB)
+  const colorANode = hexToVec3Uniform(colorA)
+  const colorBNode = hexToVec3Uniform(colorB)
   const scaleNode = uniform(scale)
   watch(
     () => colorA,

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

@@ -1,7 +1,9 @@
 <script setup lang="ts">
-  import { Color, Vector3 } from 'three'
+  import { Color } from 'three'
   import { float, mix, smoothstep, uniform, vec4 } from 'three/tsl'
 
+  import { hexToVec3Uniform } from '../../utils/tsl/color'
+
   const {
     colorA = '#000000',
     colorB = '#ffffff',
@@ -16,13 +18,8 @@
     order?: number
   }>()
 
-  function toVec3Node(hex: string) {
-    const c = new Color(hex)
-    return uniform(new Vector3(c.r, c.g, c.b))
-  }
-
-  const colorANode = toVec3Node(colorA)
-  const colorBNode = toVec3Node(colorB)
+  const colorANode = hexToVec3Uniform(colorA)
+  const colorBNode = hexToVec3Uniform(colorB)
   const radiusNode = uniform(radius)
   const softnessNode = uniform(softness)
   watch(

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

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-  import { Color, Vector3 } from 'three'
+  import { Color } from 'three'
   import { float, mix, smoothstep, time, uniform, vec4 } from 'three/tsl'
 
   import { fbm2D } from '../../shaders/common/noise'
+  import { hexToVec3Uniform } from '../../utils/tsl/color'
 
   const {
     colorSky = '#5588cc',
@@ -28,13 +29,8 @@
     order?: number
   }>()
 
-  function toVec3Node(hex: string) {
-    const c = new Color(hex)
-    return uniform(new Vector3(c.r, c.g, c.b))
-  }
-
-  const colorSkyNode = toVec3Node(colorSky)
-  const colorCloudNode = toVec3Node(colorCloud)
+  const colorSkyNode = hexToVec3Uniform(colorSky)
+  const colorCloudNode = hexToVec3Uniform(colorCloud)
   const scaleNode = uniform(scale)
   const coverageNode = uniform(coverage)
   const softnessNode = uniform(softness)

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

@@ -1,9 +1,5 @@
 <script setup lang="ts">
-  import { Color } from 'three'
-  import { mix, uniform, vec4 } from 'three/tsl'
-
   import { blendColorBurn } from '../../shaders/common/blend'
-  import type { TSLNode } from '../../shaders/types'
 
   const {
     color = '#808080',
@@ -15,23 +11,10 @@
     order?: number
   }>()
 
-  const colorNode: TSLNode = uniform(new Color(color))
-  const opacityNode = uniform(opacity)
-  watch(
+  useShaderMixBlend(
+    blendColorBurn,
     () => color,
-    (v) => {
-      colorNode.value.set(v)
-    }
-  )
-  watch(
     () => opacity,
-    (v) => {
-      opacityNode.value = v
-    }
-  )
-
-  useShaderStage(
-    (prev) => vec4(mix(prev.xyz, blendColorBurn(prev.xyz, colorNode), opacityNode), prev.w),
     order
   )
 </script>

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

@@ -1,9 +1,5 @@
 <script setup lang="ts">
-  import { Color } from 'three'
-  import { mix, uniform, vec4 } from 'three/tsl'
-
   import { blendColorDodge } from '../../shaders/common/blend'
-  import type { TSLNode } from '../../shaders/types'
 
   const {
     color = '#808080',
@@ -15,23 +11,10 @@
     order?: number
   }>()
 
-  const colorNode: TSLNode = uniform(new Color(color))
-  const opacityNode = uniform(opacity)
-  watch(
+  useShaderMixBlend(
+    blendColorDodge,
     () => color,
-    (v) => {
-      colorNode.value.set(v)
-    }
-  )
-  watch(
     () => opacity,
-    (v) => {
-      opacityNode.value = v
-    }
-  )
-
-  useShaderStage(
-    (prev) => vec4(mix(prev.xyz, blendColorDodge(prev.xyz, colorNode), opacityNode), prev.w),
     order
   )
 </script>

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

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-  import { Color, Vector3 } from 'three'
+  import { Color } from 'three'
   import { float, mix, smoothstep, uniform, vec4 } from 'three/tsl'
 
   import { luminance } from '../../shaders/common/blend'
+  import { hexToVec3Uniform } from '../../utils/tsl/color'
 
   /**
    * Maps input luminance to a three-stop colour ramp: shadow → midtone → highlight.
@@ -26,14 +27,9 @@
     order?: number
   }>()
 
-  function toVec3Node(hex: string) {
-    const c = new Color(hex)
-    return uniform(new Vector3(c.r, c.g, c.b))
-  }
-
-  const shadowNode = toVec3Node(shadowColor)
-  const midNode = toVec3Node(midtoneColor)
-  const highlightNode = toVec3Node(highlightColor)
+  const shadowNode = hexToVec3Uniform(shadowColor)
+  const midNode = hexToVec3Uniform(midtoneColor)
+  const highlightNode = hexToVec3Uniform(highlightColor)
   const shadowPtNode = uniform(shadowPoint)
   const highlightPtNode = uniform(highlightPoint)
   watch(

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

@@ -1,7 +1,9 @@
 <script setup lang="ts">
-  import { Color, Vector3 } from 'three'
+  import { Color } from 'three'
   import { float, mix, uniform, vec4 } from 'three/tsl'
 
+  import { hexToVec3Uniform } from '../../utils/tsl/color'
+
   const {
     colorA = '#000000',
     colorB = '#ffffff',
@@ -15,13 +17,8 @@
     order?: number
   }>()
 
-  function toVec3Node(hex: string) {
-    const c = new Color(hex)
-    return uniform(new Vector3(c.r, c.g, c.b))
-  }
-
-  const colorANode = toVec3Node(colorA)
-  const colorBNode = toVec3Node(colorB)
+  const colorANode = hexToVec3Uniform(colorA)
+  const colorBNode = hexToVec3Uniform(colorB)
   const rotationNode = uniform((rotation * Math.PI) / 180)
   watch(
     () => colorA,

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

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-  import { Color, Vector3 } from 'three'
+  import { Color } from 'three'
   import { float, mix, smoothstep, uniform, vec4 } from 'three/tsl'
 
   import { sdBox2d } from '../../shaders/common/sdf'
+  import { hexToVec3Uniform } from '../../utils/tsl/color'
 
   const {
     colorA = '#000000',
@@ -22,13 +23,8 @@
     order?: number
   }>()
 
-  function toVec3Node(hex: string) {
-    const c = new Color(hex)
-    return uniform(new Vector3(c.r, c.g, c.b))
-  }
-
-  const colorANode = toVec3Node(colorA)
-  const colorBNode = toVec3Node(colorB)
+  const colorANode = hexToVec3Uniform(colorA)
+  const colorBNode = hexToVec3Uniform(colorB)
   const sizeNode = uniform(size)
   const thickNode = uniform(thickness)
   const softnessNode = uniform(softness)