kmcom-nuxt-layers 1.6.4 → 1.6.7

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

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { time, uniform, vec2 } from 'three/tsl'
+
+/**
+ * Asymmetric sine warp — the core Grainient/Shadertoy UV distortion.
+ *   tuv.x += sin(tuv.y * freq + time * speed) / amplitude
+ *   tuv.y += sin(tuv.x * freq * 1.5 + time * speed) / (amplitude * 0.5)
+ * The 1.5× frequency on Y and halved amplitude on Y are intentional — they give
+ * the characteristic flowing, non-repeating Grainient look.
+ */
+const props = withDefaults(defineProps<{
+  frequency?: number
+  amplitude?: number
+  speed?: number
+  order?: number
+}>(), {
+  frequency: 5,
+  amplitude: 30,
+  speed: 2,
+  order: 0,
+})
+
+const freqNode = uniform(props.frequency)
+const ampNode = uniform(props.amplitude)
+const speedNode = uniform(props.speed)
+
+watch(() => props.frequency, v => { freqNode.value = v })
+watch(() => props.amplitude, v => { ampNode.value = v })
+watch(() => props.speed, v => { speedNode.value = v })
+
+// Pure expression — no toVar/addAssign needed, so no Fn() stack required.
+// Sequential dependency preserved: warpedY uses warpedX (the already-warped X component).
+useShaderStage(
+  (uvIn) => {
+    const t = time.mul(speedNode)
+    const warpedX = uvIn.x.add(uvIn.y.mul(freqNode).add(t).sin().div(ampNode))
+    const warpedY = uvIn.y.add(warpedX.mul(freqNode).mul(1.5).add(t).sin().div(ampNode.mul(0.5)))
+    return vec2(warpedX, warpedY)
+  },
+  props.order,
+  'uv',
+)
+</script>
+
+<template><!-- --></template>

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

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

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

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

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

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { uniform } from 'three/tsl'
+import { swirlUV } from '../../shaders/common/uv'
+
+const props = withDefaults(defineProps<{
+  /** Swirl strength in radians */
+  strength?: number
+  /** Effective radius of the swirl */
+  radius?: number
+  order?: number
+}>(), { strength: 3, 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) => swirlUV(uvIn, [0.5, 0.5], strengthNode, radiusNode),
+  props.order,
+  'uv',
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { uniform, time } from 'three/tsl'
+import { waveUV } from '../../shaders/common/uv'
+
+const props = withDefaults(defineProps<{
+  /** Wave frequency */
+  frequency?: number
+  /** Warp amplitude */
+  amplitude?: number
+  /** Animation speed */
+  speed?: number
+  order?: number
+}>(), { frequency: 10, amplitude: 0.05, speed: 1, order: 0 })
+
+const freqNode = uniform(props.frequency)
+const ampNode = uniform(props.amplitude)
+const speedNode = uniform(props.speed)
+watch(() => props.frequency, v => { freqNode.value = v })
+watch(() => props.amplitude, v => { ampNode.value = v })
+watch(() => props.speed, v => { speedNode.value = v })
+
+useShaderStage(
+  (uvIn) => waveUV(uvIn, freqNode, ampNode, time.mul(speedNode), 'both'),
+  props.order,
+  'uv',
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { uniform, time, vec3, vec4, sin, floor, fract, float } from 'three/tsl'
+
+/**
+ * VHS colour bleed + horizontal noise drift.
+ * Shifts R/B channels horizontally by a noise-driven amount and adds scanline banding.
+ */
+const props = withDefaults(defineProps<{
+  /** Channel bleed strength */
+  bleedStrength?: number
+  /** Horizontal noise frequency */
+  noiseFreq?: number
+  /** Tracking error intensity */
+  trackingNoise?: number
+  /** Animation speed */
+  speed?: number
+  order?: number
+}>(), { bleedStrength: 0.015, noiseFreq: 8, trackingNoise: 0.3, speed: 1, order: 0 })
+
+const bleedNode = uniform(props.bleedStrength)
+const noiseFreqNode = uniform(props.noiseFreq)
+const trackingNode = uniform(props.trackingNoise)
+const speedNode = uniform(props.speed)
+watch(() => props.bleedStrength, v => { bleedNode.value = v })
+watch(() => props.noiseFreq, v => { noiseFreqNode.value = v })
+watch(() => props.trackingNoise, v => { trackingNode.value = v })
+watch(() => props.speed, v => { speedNode.value = v })
+
+const pipeline = useShaderPipelineContext()
+
+useShaderStage(
+  (prev) => {
+    const uv = pipeline.uvNode.value
+    const t = time.mul(speedNode)
+
+    // Horizontal tracking noise — quantised to simulate tape jitter
+    const scanLine = floor(uv.y.mul(noiseFreqNode))
+    const jitter = fract(sin(scanLine.add(t.mul(7.1731)).mul(43758.5453))).sub(0.5)
+    const drift = jitter.mul(trackingNode).mul(bleedNode)
+
+    // Channel separation: R shifts right, B shifts left relative to G
+    const rBleed = fract(prev.r.add(drift))
+    const bBleed = fract(prev.b.sub(drift))
+
+    // Scanline brightness variation
+    const scanBrightness = sin(uv.y.mul(400).add(t.mul(3))).mul(0.03).add(1)
+
+    return vec4(
+      vec3(rBleed, prev.g, bBleed).mul(scanBrightness),
+      prev.w,
+    )
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { Color, Vector3 } from 'three'
+import { uniform, time, vec4, mix, float } from 'three/tsl'
+import { valueNoise2D } from '../../shaders/common/noise'
+
+const props = withDefaults(defineProps<{
+  colorA?: string
+  colorB?: string
+  scale?: number
+  speed?: number
+  order?: number
+}>(), { colorA: '#000000', colorB: '#ffffff', scale: 4, speed: 0.2, order: 0 })
+
+function toVec3Node(hex: string) {
+  const c = new Color(hex)
+  return uniform(new Vector3(c.r, c.g, c.b))
+}
+
+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 })
+
+const pipeline = useShaderPipelineContext()
+
+useShaderStage(
+  () => {
+    const uv = pipeline.uvNode.value
+    const t = valueNoise2D(uv.mul(scaleNode).add(time.mul(speedNode))).mul(0.5).add(0.5)
+    return vec4(mix(colorANode, colorBNode, t), float(1))
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { uniform, vec4 } from 'three/tsl'
+import { vibrance } from '../../shaders/common/palette'
+
+const props = withDefaults(defineProps<{
+  /**
+   * Saturation boost that protects already-saturated colours.
+   * 0 = unchanged, positive = more vivid, negative = less.
+   */
+  amount?: number
+  order?: number
+}>(), { amount: 0.5, order: 0 })
+
+const amountNode = uniform(props.amount)
+watch(() => props.amount, v => { amountNode.value = v })
+
+useShaderStage(
+  (prev) => vec4(vibrance(prev.xyz, amountNode), prev.w),
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { uniform, vec4 } from 'three/tsl'
+import { vignette } from '../../shaders/common/grain'
+
+const props = withDefaults(defineProps<{
+  intensity?: number
+  smoothness?: number
+  order?: number
+}>(), {
+  intensity: 0.5,
+  smoothness: 0.5,
+  order: 0,
+})
+
+const intensityNode = uniform(props.intensity)
+const smoothnessNode = uniform(props.smoothness)
+watch(() => props.intensity, v => { intensityNode.value = v })
+watch(() => props.smoothness, v => { smoothnessNode.value = v })
+
+const { uvNode } = useShaderPipelineContext()
+
+useShaderStage(
+  (prev) => {
+    const v = vignette(uvNode.value, intensityNode, smoothnessNode)
+    return vec4(prev.xyz.mul(v), prev.w)
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { Color, Vector3 } from 'three'
+import { uniform, time, vec4, mix, smoothstep, float } from 'three/tsl'
+import { voronoi2D } from '../../shaders/common/noise'
+
+/** Voronoi cell edge lines only — the cell boundaries as thin lines. */
+const props = withDefaults(defineProps<{
+  /** Cell background colour */
+  colorA?: string
+  /** Edge line colour */
+  colorB?: string
+  scale?: number
+  /** Edge line thickness */
+  edgeWidth?: number
+  speed?: number
+  order?: number
+}>(), { colorA: '#000000', colorB: '#ffffff', scale: 8, edgeWidth: 0.05, speed: 0.1, order: 0 })
+
+function toVec3Node(hex: string) {
+  const c = new Color(hex)
+  return uniform(new Vector3(c.r, c.g, c.b))
+}
+
+const colorANode = toVec3Node(props.colorA)
+const colorBNode = toVec3Node(props.colorB)
+const scaleNode = uniform(props.scale)
+const edgeNode = uniform(props.edgeWidth)
+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.edgeWidth, v => { edgeNode.value = v })
+watch(() => props.speed, v => { speedNode.value = v })
+
+const pipeline = useShaderPipelineContext()
+
+useShaderStage(
+  () => {
+    const uv = pipeline.uvNode.value
+    const { distance } = voronoi2D(uv.add(time.mul(speedNode)), scaleNode)
+    // Edge = near-zero distance → smooth threshold
+    const edge = smoothstep(edgeNode, edgeNode.mul(0.1), distance)
+    return vec4(mix(colorANode, colorBNode, edge), float(1))
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { Color, Vector3 } from 'three'
+import { uniform, time, vec4, mix, sin, float } from 'three/tsl'
+
+const props = withDefaults(defineProps<{
+  /** Deep water colour */
+  colorDeep?: string
+  /** Shallow/crest colour */
+  colorShallow?: string
+  /** Wave frequency */
+  frequency?: number
+  /** Wave height */
+  amplitude?: number
+  /** Animation speed */
+  speed?: number
+  order?: number
+}>(), { colorDeep: '#003366', colorShallow: '#66ccff', frequency: 8, amplitude: 0.5, speed: 1, order: 0 })
+
+function toVec3Node(hex: string) {
+  const c = new Color(hex)
+  return uniform(new Vector3(c.r, c.g, c.b))
+}
+
+const colorDeepNode = toVec3Node(props.colorDeep)
+const colorShallowNode = toVec3Node(props.colorShallow)
+const freqNode = uniform(props.frequency)
+const ampNode = uniform(props.amplitude)
+const speedNode = uniform(props.speed)
+watch(() => props.colorDeep, v => { const c = new Color(v); colorDeepNode.value.set(c.r, c.g, c.b) })
+watch(() => props.colorShallow, v => { const c = new Color(v); colorShallowNode.value.set(c.r, c.g, c.b) })
+watch(() => props.frequency, v => { freqNode.value = v })
+watch(() => props.amplitude, v => { ampNode.value = v })
+watch(() => props.speed, v => { speedNode.value = v })
+
+const pipeline = useShaderPipelineContext()
+
+useShaderStage(
+  () => {
+    const uv = pipeline.uvNode.value
+    const t = time.mul(speedNode)
+    // Layered sine waves at different frequencies and phases
+    const w1 = sin(uv.x.mul(freqNode).add(t))
+    const w2 = sin(uv.x.mul(freqNode.mul(0.7)).add(uv.y.mul(freqNode.mul(0.5))).add(t.mul(0.8)))
+    const w3 = sin(uv.y.mul(freqNode.mul(1.3)).add(t.mul(1.1)))
+    const wave = w1.add(w2).add(w3).div(3).mul(ampNode).mul(0.5).add(0.5)
+    return vec4(mix(colorDeepNode, colorShallowNode, wave), float(1))
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { Color, Vector3 } from 'three'
+import { uniform, time, vec4, vec2, mix, sin } from 'three/tsl'
+
+const props = withDefaults(defineProps<{
+  color?: string
+  opacity?: number
+  frequency?: number
+  speed?: number
+  warpStrength?: number
+  order?: number
+}>(), {
+  color: '#4488ff',
+  opacity: 0.8,
+  frequency: 3,
+  speed: 0.5,
+  warpStrength: 0.15,
+  order: 0,
+})
+
+function toVec3Node(hex: string) {
+  const c = new Color(hex)
+  return uniform(new Vector3(c.r, c.g, c.b))
+}
+
+const colorNode = toVec3Node(props.color)
+const opacityNode = uniform(props.opacity)
+const freqNode = uniform(props.frequency)
+const speedNode = uniform(props.speed)
+const warpNode = uniform(props.warpStrength)
+watch(() => props.color, v => { const c = new Color(v); colorNode.value.set(c.r, c.g, c.b) })
+watch(() => props.opacity, v => { opacityNode.value = v })
+watch(() => props.frequency, v => { freqNode.value = v })
+watch(() => props.speed, v => { speedNode.value = v })
+watch(() => props.warpStrength, v => { warpNode.value = v })
+
+const pipeline = useShaderPipelineContext()
+
+useShaderStage(
+  (prev) => {
+    const uvCurrent = pipeline.uvNode.value
+    if (!prev || !uvCurrent) return vec4(0, 0, 0, 1)
+
+    const t = time.mul(speedNode)
+
+    // Domain warp — pure functional (both x and y use original uvCurrent coords)
+    const warpX = uvCurrent.x.add(sin(uvCurrent.y.mul(freqNode).add(t)).mul(warpNode))
+    const warpY = uvCurrent.y.add(sin(uvCurrent.x.mul(freqNode).add(t)).mul(warpNode))
+    const s = vec2(warpX, warpY)
+
+    const band = sin(s.length().mul(freqNode.mul(4.0)).add(t)).mul(0.5).add(0.5)
+    const alpha = band.mul(opacityNode)
+
+    return vec4(mix(prev.xyz, colorNode, alpha), prev.w)
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { Color, Vector3 } from 'three'
+import { uniform, time, vec4, mix, smoothstep, float } from 'three/tsl'
+import { simplexNoise2D } from '../../shaders/common/noise'
+
+const props = withDefaults(defineProps<{
+  /** Band fill colour */
+  color?: string
+  /** Opacity of the band layer */
+  opacity?: number
+  /** Noise input scale */
+  scale?: number
+  /** Smoothstep lower edge for band threshold */
+  edge0?: number
+  /** Smoothstep upper edge for band threshold */
+  edge1?: number
+  /** Animation speed */
+  speed?: number
+  order?: number
+}>(), { color: '#ffffff', opacity: 1, scale: 2, edge0: 0.3, edge1: 0.7, 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 colorNode = toVec3Node(props.color)
+const opacityNode = uniform(props.opacity)
+const scaleNode = uniform(props.scale)
+const edge0Node = uniform(props.edge0)
+const edge1Node = uniform(props.edge1)
+const speedNode = uniform(props.speed)
+watch(() => props.color, v => { const c = new Color(v); colorNode.value.set(c.r, c.g, c.b) })
+watch(() => props.opacity, v => { opacityNode.value = v })
+watch(() => props.scale, v => { scaleNode.value = v })
+watch(() => props.edge0, v => { edge0Node.value = v })
+watch(() => props.edge1, v => { edge1Node.value = v })
+watch(() => props.speed, v => { speedNode.value = v })
+
+const pipeline = useShaderPipelineContext()
+
+useShaderStage(
+  (prev) => {
+    const uvCurrent = pipeline.uvNode.value
+    if (!uvCurrent) return prev
+    const t = time.mul(speedNode)
+    const n = simplexNoise2D(uvCurrent.mul(scaleNode).add(t)).mul(0.5).add(0.5)
+    const band = smoothstep(edge0Node, edge1Node, n).mul(opacityNode)
+    return vec4(mix(prev.xyz, colorNode, band), prev.w)
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { uniform, vec3, vec4, mix, float } from 'three/tsl'
+
+const props = withDefaults(defineProps<{
+  /**
+   * Colour temperature shift:
+   * positive → warmer (orange), negative → cooler (blue). Range: -1 to 1.
+   */
+  temperature?: number
+  /**
+   * Tint shift:
+   * positive → green, negative → magenta. Range: -1 to 1.
+   */
+  tint?: number
+  order?: number
+}>(), { temperature: 0, tint: 0, order: 0 })
+
+const tempNode = uniform(props.temperature)
+const tintNode = uniform(props.tint)
+watch(() => props.temperature, v => { tempNode.value = v })
+watch(() => props.tint, v => { tintNode.value = v })
+
+useShaderStage(
+  (prev) => {
+    // Temperature: mix toward warm (orange) or cool (blue)
+    const warm = vec3(float(1).add(tempNode.mul(0.15)), float(1), float(1).sub(tempNode.mul(0.25)))
+    // Tint: mix toward green or magenta on the G channel
+    const tinted = vec3(
+      float(1).sub(tintNode.negate().max(float(0)).mul(0.1)),
+      float(1).add(tintNode.mul(0.1)),
+      float(1).sub(tintNode.max(float(0)).mul(0.1)),
+    )
+    return vec4(prev.xyz.mul(warm).mul(tinted), prev.w)
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { Color, Vector3 } from 'three'
+import { uniform, time, vec4, mix, sin, float } from 'three/tsl'
+import { fbm2D } from '../../shaders/common/noise'
+
+const props = withDefaults(defineProps<{
+  colorA?: string
+  colorB?: string
+  /** Number of rings across the UV space */
+  ringFrequency?: number
+  /** Noise distortion scale */
+  noiseScale?: number
+  /** Noise displacement strength */
+  noiseStrength?: number
+  /** Very slow rotation speed for living wood effect */
+  speed?: number
+  order?: number
+}>(), {
+  colorA: '#8b5e3c',
+  colorB: '#4a2e1a',
+  ringFrequency: 12,
+  noiseScale: 3,
+  noiseStrength: 0.4,
+  speed: 0,
+  order: 0,
+})
+
+function toVec3Node(hex: string) {
+  const c = new Color(hex)
+  return uniform(new Vector3(c.r, c.g, c.b))
+}
+
+const colorANode = toVec3Node(props.colorA)
+const colorBNode = toVec3Node(props.colorB)
+const ringFreqNode = uniform(props.ringFrequency)
+const noiseScaleNode = uniform(props.noiseScale)
+const noiseStrNode = uniform(props.noiseStrength)
+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.ringFrequency, v => { ringFreqNode.value = v })
+watch(() => props.noiseScale, v => { noiseScaleNode.value = v })
+watch(() => props.noiseStrength, v => { noiseStrNode.value = v })
+watch(() => props.speed, v => { speedNode.value = v })
+
+const pipeline = useShaderPipelineContext()
+
+useShaderStage(
+  () => {
+    const uv = pipeline.uvNode.value
+    const t = time.mul(speedNode)
+    const n = fbm2D(uv.mul(noiseScaleNode).add(t)).mul(noiseStrNode)
+    // Concentric rings from centre with noise offset
+    const dist = uv.sub(0.5).length().add(n)
+    const ring = sin(dist.mul(ringFreqNode).mul(Math.PI * 2)).mul(0.5).add(0.5)
+    return vec4(mix(colorANode, colorBNode, ring), float(1))
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>