kmcom-nuxt-layers 1.6.4 → 1.6.7

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

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { screenSize, vec2 } from 'three/tsl'
+
+const { order = 0 } = defineProps<{ order?: number }>()
+
+useShaderStage(
+  (uvIn) => uvIn.mul(vec2(screenSize.x.div(screenSize.y), 1.0)),
+  order,
+  'uv',
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { uniform, time, vec2, sin, float, smoothstep } from 'three/tsl'
+
+/**
+ * Gentle eased scale oscillation — softer than UVPulse.
+ * Uses a smoothstepped sine so the scale dwells at min/max rather than
+ * passing through them instantly.
+ */
+const props = withDefaults(defineProps<{
+  /** Max scale deviation from 1.0 */
+  amount?: number
+  /** Breath cycle speed in radians per second */
+  speed?: number
+  order?: number
+}>(), { amount: 0.05, speed: 0.8, order: 0 })
+
+const amountNode = uniform(props.amount)
+const speedNode = uniform(props.speed)
+watch(() => props.amount, v => { amountNode.value = v })
+watch(() => props.speed, v => { speedNode.value = v })
+
+useShaderStage(
+  (uvIn) => {
+    const raw = sin(time.mul(speedNode)).mul(0.5).add(0.5)
+    const eased = smoothstep(float(0), float(1), raw)
+    const scale = float(1).add(eased.sub(0.5).mul(amountNode.mul(2)))
+    const centered = uvIn.sub(0.5).div(scale).add(0.5)
+    return vec2(centered.x, centered.y)
+  },
+  props.order,
+  'uv',
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { uniform } from 'three/tsl'
+import { bulgeUV } from '../../shaders/common/uv'
+
+const props = withDefaults(defineProps<{
+  /** Positive = bulge outward, negative = pinch inward */
+  strength?: number
+  /** Effective radius of the distortion */
+  radius?: number
+  order?: number
+}>(), { strength: 0.5, radius: 0.5, order: 0 })
+
+const strengthNode = uniform(props.strength)
+const radiusNode = uniform(props.radius)
+watch(() => props.strength, v => { strengthNode.value = v })
+watch(() => props.radius, v => { radiusNode.value = v })
+
+useShaderStage(
+  (uvIn) => bulgeUV(uvIn, { strength: strengthNode, radius: radiusNode }),
+  props.order,
+  'uv',
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { clamp, vec2, float } from 'three/tsl'
+
+/**
+ * Clamps UV to [0, 1] — prevents tiling/repeat artefacts at the edges.
+ * Equivalent to CSS background-repeat: no-repeat.
+ */
+const { order = 0 } = defineProps<{ order?: number }>()
+
+useShaderStage(
+  (uvIn) => vec2(clamp(uvIn.x, float(0), float(1)), clamp(uvIn.y, float(0), float(1))),
+  order,
+  'uv',
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { uniform, vec2 } from 'three/tsl'
+
+const props = withDefaults(defineProps<{
+  /** Number of columns to divide into */
+  columns?: number
+  /** Vertical offset multiplied by column index */
+  factor?: number
+  order?: number
+}>(), { columns: 6, factor: 0.15, order: 0 })
+
+const columnsNode = uniform(props.columns)
+const factorNode = uniform(props.factor)
+watch(() => props.columns, v => { columnsNode.value = v })
+watch(() => props.factor, v => { factorNode.value = v })
+
+useShaderStage(
+  (uvIn) => {
+    const col = uvIn.x.mul(columnsNode).floor()
+    return vec2(uvIn.x, uvIn.y.add(col.mul(factorNode)))
+  },
+  props.order,
+  'uv',
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { float, vec2 } from 'three/tsl'
+
+const { order = 0 } = defineProps<{ order?: number }>()
+
+useShaderStage(
+  (uvIn) => vec2(float(1).sub(uvIn.x), uvIn.y),
+  order,
+  'uv',
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { float, vec2 } from 'three/tsl'
+
+const { order = 0 } = defineProps<{ order?: number }>()
+
+useShaderStage(
+  (uvIn) => vec2(float(1).sub(uvIn.x), float(1).sub(uvIn.y)),
+  order,
+  'uv',
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { float, vec2 } from 'three/tsl'
+
+const { order = 0 } = defineProps<{ order?: number }>()
+
+useShaderStage(
+  (uvIn) => vec2(uvIn.x, float(1).sub(uvIn.y)),
+  order,
+  'uv',
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { uniform, vec4, clamp } from 'three/tsl'
+
+const props = withDefaults(defineProps<{
+  /** Number of bands across the UV Y axis */
+  frequency?: number
+  /** Brightness addend at band peaks */
+  scale?: number
+  order?: number
+}>(), { frequency: 8, scale: 0.15, order: 0 })
+
+const freqNode = uniform(props.frequency)
+const scaleNode = uniform(props.scale)
+watch(() => props.frequency, v => { freqNode.value = v })
+watch(() => props.scale, v => { scaleNode.value = v })
+
+const pipeline = useShaderPipelineContext()
+
+useShaderStage(
+  (prev) => {
+    const uvCurrent = pipeline.uvNode.value
+    const band = uvCurrent.y.mul(freqNode).fract().mul(scaleNode)
+    const rgb = clamp(prev.xyz.add(band), 0, 1)
+    return vec4(rgb, prev.w)
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { Vector2 } from 'three'
+import { uniform, vec2 } from 'three/tsl'
+
+/**
+ * Warps UV toward the mouse cursor — different from UVParallax, which shifts
+ * the whole field. This pulls individual UV coords toward the pointer position.
+ * q += (pointer - uv) * influence * 0.2
+ */
+const props = withDefaults(defineProps<{
+  /** Pull strength toward the cursor */
+  influence?: number
+  order?: number
+}>(), { influence: 0.5, order: 0 })
+
+const mouse = uniform(new Vector2(0.5, 0.5))
+const influenceNode = uniform(props.influence)
+watch(() => props.influence, v => { influenceNode.value = v })
+
+onMounted(() => {
+  const onMove = (e: MouseEvent) => {
+    mouse.value.set(e.clientX / window.innerWidth, 1 - e.clientY / window.innerHeight)
+  }
+  window.addEventListener('mousemove', onMove)
+  onUnmounted(() => window.removeEventListener('mousemove', onMove))
+})
+
+useShaderStage(
+  (uvIn) => {
+    const pointer = vec2(mouse.x, mouse.y)
+    return uvIn.add(pointer.sub(uvIn).mul(influenceNode).mul(0.2))
+  },
+  props.order,
+  'uv',
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { time, uniform, vec2 } from 'three/tsl'
+import { simplexNoise2D } from '../../shaders/common/noise'
+
+const props = withDefaults(defineProps<{
+  /** Max rotation in degrees (default 720 = 2 full turns) */
+  rotationAmount?: number
+  /** Noise animation speed */
+  speed?: number
+  /** Noise spatial frequency */
+  noiseScale?: number
+  order?: number
+}>(), {
+  rotationAmount: 720,
+  speed: 0.1,
+  noiseScale: 1,
+  order: 0,
+})
+
+const rotAmountNode = uniform(props.rotationAmount)
+const speedNode = uniform(props.speed)
+const noiseScaleNode = uniform(props.noiseScale)
+
+watch(() => props.rotationAmount, v => { rotAmountNode.value = v })
+watch(() => props.speed, v => { speedNode.value = v })
+watch(() => props.noiseScale, v => { noiseScaleNode.value = v })
+
+const DEG_TO_RAD = Math.PI / 180
+
+useShaderStage(
+  (uvIn) => {
+    // Sample gradient noise at animated position: (time*speed, uv.x*uv.y) * noiseScale
+    const noiseInput = vec2(time.mul(speedNode), uvIn.x.mul(uvIn.y)).mul(noiseScaleNode)
+    const n = simplexNoise2D(noiseInput)
+    // Remap noise to angle: (n*0.5) * rotAmount + 180 degrees, avoids snapping to 0
+    const angleDeg = n.mul(0.5).mul(rotAmountNode).add(180.0)
+    const angle = angleDeg.mul(DEG_TO_RAD)
+
+    const pivot = vec2(0.5, 0.5)
+    const cosA = angle.cos()
+    const sinA = angle.sin()
+    const centered = uvIn.sub(pivot)
+    return vec2(
+      centered.x.mul(cosA).sub(centered.y.mul(sinA)),
+      centered.x.mul(sinA).add(centered.y.mul(cosA)),
+    ).add(pivot)
+  },
+  props.order,
+  'uv',
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { uniform, time, vec2 } from 'three/tsl'
+import { fbm2D } from '../../shaders/common/noise'
+
+const props = withDefaults(defineProps<{
+  /** Warp strength in UV units */
+  strength?: number
+  /** Noise input scale */
+  scale?: number
+  /** Animation speed */
+  speed?: number
+  order?: number
+}>(), { strength: 0.3, scale: 2, speed: 0.2, order: 0 })
+
+const strengthNode = uniform(props.strength)
+const scaleNode = uniform(props.scale)
+const speedNode = uniform(props.speed)
+watch(() => props.strength, v => { strengthNode.value = v })
+watch(() => props.scale, v => { scaleNode.value = v })
+watch(() => props.speed, v => { speedNode.value = v })
+
+useShaderStage(
+  (uvIn) => {
+    const t = time.mul(speedNode)
+    const warpX = fbm2D(uvIn.mul(scaleNode).add(t))
+    const warpY = fbm2D(uvIn.mul(scaleNode).add(vec2(5.2, 1.3)).add(t))
+    return uvIn.add(vec2(warpX, warpY).mul(strengthNode))
+  },
+  props.order,
+  'uv',
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { uniform, time, vec2, cos, sin } from 'three/tsl'
+
+/**
+ * Rotates UV around a centre point continuously over time.
+ * Distinct from UVRotate (static angle) — this is always animated.
+ */
+const props = withDefaults(defineProps<{
+  /** Orbit speed in radians per second */
+  speed?: number
+  order?: number
+}>(), { speed: 0.5, order: 0 })
+
+const speedNode = uniform(props.speed)
+watch(() => props.speed, v => { speedNode.value = v })
+
+useShaderStage(
+  (uvIn) => {
+    const angle = time.mul(speedNode)
+    const c = cos(angle)
+    const s = sin(angle)
+    const centered = uvIn.sub(0.5)
+    return vec2(
+      centered.x.mul(c).sub(centered.y.mul(s)),
+      centered.x.mul(s).add(centered.y.mul(c)),
+    ).add(0.5)
+  },
+  props.order,
+  'uv',
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { Vector2 } from 'three'
+import { uniform, vec2 } from 'three/tsl'
+
+/**
+ * Offsets UV by the pointer position scaled by a parallax factor.
+ * Creates the illusion of depth as the mouse moves — the ColorBends pattern.
+ * p += pointer * parallax * 0.1
+ */
+const props = withDefaults(defineProps<{
+  /** Parallax strength: 0 = no movement, 1 = full NDC range */
+  parallax?: number
+  order?: number
+}>(), { parallax: 0.5, order: 0 })
+
+const mouse = uniform(new Vector2(0, 0))
+const parallaxNode = uniform(props.parallax)
+watch(() => props.parallax, v => { parallaxNode.value = v })
+
+onMounted(() => {
+  const onMove = (e: MouseEvent) => {
+    mouse.value.set(
+      (e.clientX / window.innerWidth) * 2 - 1,
+      -((e.clientY / window.innerHeight) * 2 - 1),
+    )
+  }
+  window.addEventListener('mousemove', onMove)
+  onUnmounted(() => window.removeEventListener('mousemove', onMove))
+})
+
+useShaderStage(
+  (uvIn) => uvIn.add(vec2(mouse.x, mouse.y).mul(parallaxNode).mul(0.1)),
+  props.order,
+  'uv',
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { uniform } from 'three/tsl'
+
+const props = withDefaults(defineProps<{
+  /** Number of pixel columns/rows — lower = chunkier pixels */
+  gridSize?: number
+  order?: number
+}>(), { gridSize: 64, order: 0 })
+
+const gridSizeNode = uniform(props.gridSize)
+watch(() => props.gridSize, v => { gridSizeNode.value = v })
+
+useShaderStage(
+  (uvIn) => uvIn.mul(gridSizeNode).floor().div(gridSizeNode),
+  order,
+  'uv',
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { uniform, time, vec2, sin, float } from 'three/tsl'
+
+/**
+ * Oscillating UV scale over time — the UV breathes in and out.
+ * scale = 1 + sin(time * speed) * amount
+ */
+const props = withDefaults(defineProps<{
+  /** Pulse amplitude (fraction of UV range) */
+  amount?: number
+  /** Pulse speed in radians per second */
+  speed?: number
+  order?: number
+}>(), { amount: 0.1, speed: 2, order: 0 })
+
+const amountNode = uniform(props.amount)
+const speedNode = uniform(props.speed)
+watch(() => props.amount, v => { amountNode.value = v })
+watch(() => props.speed, v => { speedNode.value = v })
+
+useShaderStage(
+  (uvIn) => {
+    const scale = float(1).add(sin(time.mul(speedNode)).mul(amountNode))
+    const centered = uvIn.sub(0.5).div(scale).add(0.5)
+    return vec2(centered.x, centered.y)
+  },
+  props.order,
+  'uv',
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { uniform, time } from 'three/tsl'
+import { rippleUV } from '../../shaders/common/uv'
+
+const props = withDefaults(defineProps<{
+  /** Ripple frequency */
+  frequency?: number
+  /** Ripple amplitude */
+  amplitude?: number
+  /** Falloff rate from center */
+  falloff?: number
+  /** Animation speed */
+  speed?: number
+  order?: number
+}>(), { frequency: 10, amplitude: 0.05, falloff: 1, speed: 1, order: 0 })
+
+const freqNode = uniform(props.frequency)
+const ampNode = uniform(props.amplitude)
+const falloffNode = uniform(props.falloff)
+const speedNode = uniform(props.speed)
+watch(() => props.frequency, v => { freqNode.value = v })
+watch(() => props.amplitude, v => { ampNode.value = v })
+watch(() => props.falloff, v => { falloffNode.value = v })
+watch(() => props.speed, v => { speedNode.value = v })
+
+useShaderStage(
+  (uvIn) => rippleUV(uvIn, [0.5, 0.5], freqNode, ampNode, time.mul(speedNode), falloffNode),
+  props.order,
+  'uv',
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { uniform, vec2 } from 'three/tsl'
+
+const props = withDefaults(defineProps<{
+  /** Rotation in degrees */
+  angle?: number
+  pivotX?: number
+  pivotY?: number
+  order?: number
+}>(), {
+  angle: 0,
+  pivotX: 0.5,
+  pivotY: 0.5,
+  order: 0,
+})
+
+const angleNode = uniform(props.angle * (Math.PI / 180))
+watch(() => props.angle, v => { angleNode.value = v * (Math.PI / 180) })
+
+useShaderStage(
+  (uvIn) => {
+    const pivot = vec2(props.pivotX, props.pivotY)
+    const cosA = angleNode.cos()
+    const sinA = angleNode.sin()
+    const centered = uvIn.sub(pivot)
+    return vec2(
+      centered.x.mul(cosA).sub(centered.y.mul(sinA)),
+      centered.x.mul(sinA).add(centered.y.mul(cosA)),
+    ).add(pivot)
+  },
+  props.order,
+  'uv',
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { uniform } from 'three/tsl'
+
+const props = withDefaults(defineProps<{
+  scale?: number
+  pivotX?: number
+  pivotY?: number
+  order?: number
+}>(), {
+  scale: 1,
+  pivotX: 0.5,
+  pivotY: 0.5,
+  order: 0,
+})
+
+const scaleNode = uniform(props.scale)
+watch(() => props.scale, v => { scaleNode.value = v })
+
+useShaderStage(
+  (uvIn) => {
+    const pivot = vec2(props.pivotX, props.pivotY)
+    return uvIn.sub(pivot).div(scaleNode).add(pivot)
+  },
+  props.order,
+  'uv',
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { Vector2 } from 'three'
+import { time, uniform } from 'three/tsl'
+
+const props = withDefaults(defineProps<{
+  speedX?: number
+  speedY?: number
+  order?: number
+}>(), {
+  speedX: 0,
+  speedY: 0.1,
+  order: 0,
+})
+
+const speedVal = new Vector2(props.speedX, props.speedY)
+const speedNode = uniform(speedVal)
+watch(() => [props.speedX, props.speedY], ([x, y]) => { speedNode.value.set(x, y) })
+
+useShaderStage(
+  (uvIn) => uvIn.add(speedNode.mul(time)).fract(),
+  props.order,
+  'uv',
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { uniform, time, vec2, fract } from 'three/tsl'
+
+const props = withDefaults(defineProps<{
+  /** Scroll speed (UV units per second, positive = right) */
+  speed?: number
+  order?: number
+}>(), { speed: 0.1, order: 0 })
+
+const speedNode = uniform(props.speed)
+watch(() => props.speed, v => { speedNode.value = v })
+
+useShaderStage(
+  (uvIn) => vec2(fract(uvIn.x.add(time.mul(speedNode))), uvIn.y),
+  props.order,
+  'uv',
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { uniform, time, vec2, fract } from 'three/tsl'
+
+const props = withDefaults(defineProps<{
+  /** Scroll speed (UV units per second, positive = up) */
+  speed?: number
+  order?: number
+}>(), { speed: 0.1, order: 0 })
+
+const speedNode = uniform(props.speed)
+watch(() => props.speed, v => { speedNode.value = v })
+
+useShaderStage(
+  (uvIn) => vec2(uvIn.x, fract(uvIn.y.add(time.mul(speedNode)))),
+  props.order,
+  'uv',
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { uniform, vec2 } from 'three/tsl'
+
+const props = withDefaults(defineProps<{
+  /** Horizontal shear: shifts X by Y * shearX */
+  shearX?: number
+  /** Vertical shear: shifts Y by X * shearY */
+  shearY?: number
+  order?: number
+}>(), { shearX: 0.2, shearY: 0, order: 0 })
+
+const shearXNode = uniform(props.shearX)
+const shearYNode = uniform(props.shearY)
+watch(() => props.shearX, v => { shearXNode.value = v })
+watch(() => props.shearY, v => { shearYNode.value = v })
+
+useShaderStage(
+  (uvIn) => vec2(uvIn.x.add(uvIn.y.mul(shearXNode)), uvIn.y.add(uvIn.x.mul(shearYNode))),
+  props.order,
+  'uv',
+)
+</script>
+
+<template><!-- --></template>