kmcom-nuxt-layers 1.6.3 → 1.6.6

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

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { uniform, time, vec3, vec4, sin, float } from 'three/tsl'
+
+/**
+ * Per-channel animated sine waves along the Y axis — the CRT chromatic oscillation effect.
+ * Each RGB channel gets its own phase offset, producing subtle chromatic breathing.
+ * Pattern: R: sin(freq/res * uv.y + (-time*speed - phaseOffset))
+ */
+const props = withDefaults(defineProps<{
+  /** Wave amplitude (fraction of screen) */
+  amplitude?: number
+  /** Number of wave cycles across the screen height */
+  frequency?: number
+  /** Wave scroll speed */
+  speed?: number
+  /** Phase separation between RGB channels (radians) */
+  phaseOffset?: number
+  order?: number
+}>(), { amplitude: 0.075, frequency: 20, speed: 2, phaseOffset: 0.4, order: 0 })
+
+const ampNode = uniform(props.amplitude)
+const freqNode = uniform(props.frequency)
+const speedNode = uniform(props.speed)
+const phaseNode = uniform(props.phaseOffset)
+watch(() => props.amplitude, v => { ampNode.value = v })
+watch(() => props.frequency, v => { freqNode.value = v })
+watch(() => props.speed, v => { speedNode.value = v })
+watch(() => props.phaseOffset, v => { phaseNode.value = v })
+
+const pipeline = useShaderPipelineContext()
+
+useShaderStage(
+  (prev) => {
+    const uvCurrent = pipeline.uvNode.value
+    const t = time.mul(speedNode).negate()
+
+    const base = freqNode.mul(uvCurrent.y)
+    const r = sin(base.add(t.sub(phaseNode))).mul(ampNode).add(float(1).sub(ampNode))
+    const g = sin(base.add(t)).mul(ampNode).add(float(1).sub(ampNode))
+    const b = sin(base.add(t.add(phaseNode))).mul(ampNode).add(float(1).sub(ampNode))
+
+    return vec4(prev.xyz.mul(vec3(r, g, b)), prev.w)
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { Color, Vector3 } from 'three'
+import { uniform, vec4, mix, smoothstep, float } from 'three/tsl'
+
+const props = withDefaults(defineProps<{
+  colorA?: string
+  colorB?: string
+  radius?: number
+  softness?: number
+  order?: number
+}>(), { colorA: '#000000', colorB: '#ffffff', radius: 0.35, softness: 0.01, 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 radiusNode = uniform(props.radius)
+const softnessNode = uniform(props.softness)
+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.radius, v => { radiusNode.value = v })
+watch(() => props.softness, v => { softnessNode.value = v })
+
+const pipeline = useShaderPipelineContext()
+
+useShaderStage(
+  () => {
+    const uv = pipeline.uvNode.value
+    const d = uv.sub(0.5).length()
+    const mask = smoothstep(radiusNode.add(softnessNode), radiusNode.sub(softnessNode), d)
+    return vec4(mix(colorANode, colorBNode, mask), float(1))
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { Color, Vector3 } from 'three'
+import { uniform, time, vec4, mix, smoothstep, float } from 'three/tsl'
+import { fbm2D } from '../../shaders/common/noise'
+
+const props = withDefaults(defineProps<{
+  /** Sky colour */
+  colorSky?: string
+  /** Cloud colour */
+  colorCloud?: string
+  /** FBM noise input scale */
+  scale?: number
+  /** Cloud coverage: lower = fewer clouds, higher = overcast */
+  coverage?: number
+  /** Cloud softness */
+  softness?: number
+  /** Wind speed */
+  speed?: number
+  order?: number
+}>(), { colorSky: '#5588cc', colorCloud: '#ffffff', scale: 2, coverage: 0.5, softness: 0.15, speed: 0.05, order: 0 })
+
+function toVec3Node(hex: string) {
+  const c = new Color(hex)
+  return uniform(new Vector3(c.r, c.g, c.b))
+}
+
+const colorSkyNode = toVec3Node(props.colorSky)
+const colorCloudNode = toVec3Node(props.colorCloud)
+const scaleNode = uniform(props.scale)
+const coverageNode = uniform(props.coverage)
+const softnessNode = uniform(props.softness)
+const speedNode = uniform(props.speed)
+watch(() => props.colorSky, v => { const c = new Color(v); colorSkyNode.value.set(c.r, c.g, c.b) })
+watch(() => props.colorCloud, v => { const c = new Color(v); colorCloudNode.value.set(c.r, c.g, c.b) })
+watch(() => props.scale, v => { scaleNode.value = v })
+watch(() => props.coverage, v => { coverageNode.value = v })
+watch(() => props.softness, v => { softnessNode.value = v })
+watch(() => props.speed, v => { speedNode.value = v })
+
+const pipeline = useShaderPipelineContext()
+
+useShaderStage(
+  () => {
+    const uv = pipeline.uvNode.value
+    const wind = time.mul(speedNode)
+    const n = fbm2D(uv.mul(scaleNode).add(wind)).mul(0.5).add(0.5)
+    // Remap to cloud mask using coverage + softness
+    const cloud = smoothstep(
+      coverageNode.sub(softnessNode),
+      coverageNode.add(softnessNode),
+      n,
+    )
+    return vec4(mix(colorSkyNode, colorCloudNode, cloud), float(1))
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { Color } from 'three'
+import { mix, uniform, vec4 } from 'three/tsl'
+import { blendColorBurn } from '../../shaders/common/blend'
+
+const props = withDefaults(defineProps<{
+  color?: string
+  opacity?: number
+  order?: number
+}>(), { color: '#808080', opacity: 1, order: 0 })
+
+const colorNode = uniform(new Color(props.color))
+const opacityNode = uniform(props.opacity)
+watch(() => props.color, v => { colorNode.value.set(v) })
+watch(() => props.opacity, v => { opacityNode.value = v })
+
+useShaderStage(
+  (prev) => vec4(mix(prev.xyz, blendColorBurn(prev.xyz, colorNode), opacityNode), prev.w),
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { Color } from 'three'
+import { mix, uniform, vec4 } from 'three/tsl'
+import { blendColorDodge } from '../../shaders/common/blend'
+
+const props = withDefaults(defineProps<{
+  color?: string
+  opacity?: number
+  order?: number
+}>(), { color: '#808080', opacity: 1, order: 0 })
+
+const colorNode = uniform(new Color(props.color))
+const opacityNode = uniform(props.opacity)
+watch(() => props.color, v => { colorNode.value.set(v) })
+watch(() => props.opacity, v => { opacityNode.value = v })
+
+useShaderStage(
+  (prev) => vec4(mix(prev.xyz, blendColorDodge(prev.xyz, colorNode), opacityNode), prev.w),
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { Color, Vector3 } from 'three'
+import { uniform, vec4, mix, smoothstep, float } from 'three/tsl'
+import { luminance } from '../../shaders/common/blend'
+
+/**
+ * Maps input luminance to a three-stop colour ramp: shadow → midtone → highlight.
+ * For a simple two-stop ramp use DuoTone instead.
+ */
+const props = withDefaults(defineProps<{
+  shadowColor?: string
+  midtoneColor?: string
+  highlightColor?: string
+  /** Luminance threshold between shadow and midtone */
+  shadowPoint?: number
+  /** Luminance threshold between midtone and highlight */
+  highlightPoint?: number
+  order?: number
+}>(), {
+  shadowColor: '#000033',
+  midtoneColor: '#660066',
+  highlightColor: '#ffcc88',
+  shadowPoint: 0.33,
+  highlightPoint: 0.67,
+  order: 0,
+})
+
+function toVec3Node(hex: string) {
+  const c = new Color(hex)
+  return uniform(new Vector3(c.r, c.g, c.b))
+}
+
+const shadowNode = toVec3Node(props.shadowColor)
+const midNode = toVec3Node(props.midtoneColor)
+const highlightNode = toVec3Node(props.highlightColor)
+const shadowPtNode = uniform(props.shadowPoint)
+const highlightPtNode = uniform(props.highlightPoint)
+watch(() => props.shadowColor, v => { const c = new Color(v); shadowNode.value.set(c.r, c.g, c.b) })
+watch(() => props.midtoneColor, v => { const c = new Color(v); midNode.value.set(c.r, c.g, c.b) })
+watch(() => props.highlightColor, v => { const c = new Color(v); highlightNode.value.set(c.r, c.g, c.b) })
+watch(() => props.shadowPoint, v => { shadowPtNode.value = v })
+watch(() => props.highlightPoint, v => { highlightPtNode.value = v })
+
+useShaderStage(
+  (prev) => {
+    const lum = luminance(prev.xyz)
+    const t1 = smoothstep(float(0), shadowPtNode, lum)
+    const t2 = smoothstep(shadowPtNode, highlightPtNode, lum)
+    const colour = mix(mix(shadowNode, midNode, t1), mix(midNode, highlightNode, t2), t2)
+    return vec4(colour, prev.w)
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { uniform, time, vec2, vec4, float, cos, sin } from 'three/tsl'
+import { complexDiv, complexLog } from '../../shaders/common/complex'
+
+/**
+ * Complex number plane visualisation — the imaginary2 pattern.
+ * Places two poles p, q derived from poleAngle/poleDistance,
+ * computes the Möbius transformation (z-p)/(z-q), takes the complex log,
+ * and extracts the imaginary component (winding angle) as a scalar float.
+ * Outputs grayscale for CosinePalette (scalarSource: 'prev').
+ */
+const props = withDefaults(defineProps<{
+  /** Angle between the two poles in radians */
+  poleAngle?: number
+  /** Distance of poles from origin */
+  poleDistance?: number
+  /** Weight of the imaginary (winding) component */
+  imaginaryWeight?: number
+  /** Weight of the radial (exp) component */
+  radialWeight?: number
+  /** Animation speed */
+  speed?: number
+  order?: number
+}>(), {
+  poleAngle: Math.PI / 3,
+  poleDistance: 0.4,
+  imaginaryWeight: 0.6,
+  radialWeight: 0.4,
+  speed: 0.05,
+  order: 0,
+})
+
+const poleAngleNode = uniform(props.poleAngle)
+const poleDistNode = uniform(props.poleDistance)
+const imagWeightNode = uniform(props.imaginaryWeight)
+const radWeightNode = uniform(props.radialWeight)
+const speedNode = uniform(props.speed)
+watch(() => props.poleAngle, v => { poleAngleNode.value = v })
+watch(() => props.poleDistance, v => { poleDistNode.value = v })
+watch(() => props.imaginaryWeight, v => { imagWeightNode.value = v })
+watch(() => props.radialWeight, v => { radWeightNode.value = v })
+watch(() => props.speed, v => { speedNode.value = v })
+
+const pipeline = useShaderPipelineContext()
+
+useShaderStage(
+  () => {
+    const uvCurrent = pipeline.uvNode.value
+    const t = time.mul(speedNode)
+
+    // UV centred
+    const z = uvCurrent.sub(0.5)
+
+    // Pole position (complex number)
+    const angle = poleAngleNode.add(t)
+    const p = vec2(cos(angle).mul(poleDistNode), sin(angle).mul(poleDistNode))
+    const q = vec2(p.x, p.y.negate())   // conjugate
+
+    // Möbius: (z - p) / (z - q)
+    const w = complexDiv(z.sub(p), z.sub(q))
+
+    // Complex log: (ln|w|, arg(w))
+    const logW = complexLog(w)
+
+    // Combine imaginary (winding angle) and radial (exp magnitude) components
+    const imagPart = logW.y.mul(imagWeightNode)
+    const radPart = z.x.exp().div(z.y.abs().add(float(0.001))).mul(radWeightNode)
+    const scalar = imagPart.add(radPart).mul(0.5).add(0.5)
+
+    return vec4(scalar, scalar, scalar, float(1))
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { Color, Vector3 } from 'three'
+import { uniform, vec4, mix, float } from 'three/tsl'
+
+const props = withDefaults(defineProps<{
+  colorA?: string
+  colorB?: string
+  /** Rotation offset in degrees */
+  rotation?: number
+  order?: number
+}>(), { colorA: '#000000', colorB: '#ffffff', rotation: 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 rotationNode = uniform(props.rotation * Math.PI / 180)
+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.rotation, v => { rotationNode.value = v * Math.PI / 180 })
+
+const pipeline = useShaderPipelineContext()
+
+useShaderStage(
+  () => {
+    const uv = pipeline.uvNode.value
+    const centered = uv.sub(0.5)
+    const angle = centered.y.atan(centered.x).add(rotationNode)
+    const t = angle.div(Math.PI * 2).fract()
+    return vec4(mix(colorANode, colorBNode, t), float(1))
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { Vector3 } from 'three'
+import { time, uniform, vec4 } from 'three/tsl'
+import { cosinePalette } from '../../shaders/common/palette'
+import { luminance } from '../../shaders/common/blend'
+
+/**
+ * IQ's cosine palette — the backbone of phobon/aurora-style shaders.
+ * Formula: a + b * cos(2π * (c*t + d))
+ * Scalar input t comes from uvNode via scalarSource.
+ */
+const props = withDefaults(defineProps<{
+  /** Colour offset (brightness centre) */
+  a?: [number, number, number]
+  /** Colour amplitude (contrast) */
+  b?: [number, number, number]
+  /** Frequency per channel */
+  c?: [number, number, number]
+  /** Phase offset per channel (colour shift) */
+  d?: [number, number, number]
+  /** How fast the palette cycles over time */
+  timeScale?: number
+  /**
+   * What value to feed as the scalar input `t`.
+   * `'prev'` reads luminance of the previous pipeline stage — use after RingField,
+   * ChebyshevNoiseField, or any block that outputs a grayscale scalar as its colour.
+   */
+  scalarSource?: 'uv.y' | 'uv.x' | 'length' | 'time' | 'prev'
+  order?: number
+}>(), {
+  a: () => [0.5, 0.5, 0.5],
+  b: () => [0.5, 0.5, 0.5],
+  c: () => [1.0, 1.0, 1.0],
+  d: () => [0.0, 0.33, 0.67],
+  timeScale: 0.1,
+  scalarSource: 'uv.y',
+  order: 0,
+})
+
+const aNode = uniform(new Vector3(...props.a))
+const bNode = uniform(new Vector3(...props.b))
+const cNode = uniform(new Vector3(...props.c))
+const dNode = uniform(new Vector3(...props.d))
+const timeScaleNode = uniform(props.timeScale)
+
+watch(() => props.a, v => { aNode.value.set(...v) })
+watch(() => props.b, v => { bNode.value.set(...v) })
+watch(() => props.c, v => { cNode.value.set(...v) })
+watch(() => props.d, v => { dNode.value.set(...v) })
+watch(() => props.timeScale, v => { timeScaleNode.value = v })
+
+const { uvNode } = useShaderPipelineContext()
+
+useShaderStage(
+  (prev) => {
+    let scalar
+    if (props.scalarSource === 'uv.x') scalar = uvNode.value.x
+    else if (props.scalarSource === 'length') scalar = uvNode.value.sub(0.5).length()
+    else if (props.scalarSource === 'time') scalar = time
+    else if (props.scalarSource === 'prev') scalar = luminance(prev.xyz)
+    else scalar = uvNode.value.y
+
+    const t = scalar.add(time.mul(timeScaleNode))
+    return vec4(cosinePalette(t, aNode, bNode, cNode, dNode), 1.0)
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { vec4 } from 'three/tsl'
+
+/**
+ * Sets alpha to max(r, g, b) — the ColorBends transparent mode pattern.
+ * Shaders that generate shape from colour intensity (bright = opaque, dark = transparent)
+ * should use this instead of a fixed alpha = 1.
+ */
+const { order = 0 } = defineProps<{ order?: number }>()
+
+useShaderStage(
+  (prev) => vec4(prev.xyz, prev.x.max(prev.y).max(prev.z)),
+  order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { Color, Vector3 } from 'three'
+import { uniform, vec4, mix, smoothstep, float } from 'three/tsl'
+import { sdBox2d } from '../../shaders/common/sdf'
+
+const props = withDefaults(defineProps<{
+  colorA?: string
+  colorB?: string
+  /** Length of each arm */
+  size?: number
+  /** Width of each arm */
+  thickness?: number
+  softness?: number
+  order?: number
+}>(), { colorA: '#000000', colorB: '#ffffff', size: 0.4, thickness: 0.1, softness: 0.01, 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 sizeNode = uniform(props.size)
+const thickNode = uniform(props.thickness)
+const softnessNode = uniform(props.softness)
+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.size, v => { sizeNode.value = v })
+watch(() => props.thickness, v => { thickNode.value = v })
+watch(() => props.softness, v => { softnessNode.value = v })
+
+const pipeline = useShaderPipelineContext()
+
+useShaderStage(
+  () => {
+    const uv = pipeline.uvNode.value
+    const p = uv.sub(0.5)
+    // Horizontal arm and vertical arm — union = min
+    const dH = sdBox2d(p, thickNode.div(2))  // approx — sdBox2d expects a scalar half-size
+    const dV = sdBox2d(p.yx, thickNode.div(2))
+    const d = dH.min(dV)
+    const mask = smoothstep(softnessNode, softnessNode.negate(), d)
+    return vec4(mix(colorANode, colorBNode, mask), float(1))
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { Color, Vector3 } from 'three'
+import { uniform, time, vec3, vec4, mix } from 'three/tsl'
+import { curlNoise3d } from '../../shaders/common/noise'
+
+const props = withDefaults(defineProps<{
+  /** Colour to mix in at curl peak */
+  color?: string
+  /** Blend opacity */
+  opacity?: number
+  /** Input scale for the curl noise */
+  scale?: number
+  /** Animation speed */
+  speed?: number
+  order?: number
+}>(), { color: '#ffffff', opacity: 1, scale: 1.5, 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 colorNode = toVec3Node(props.color)
+const opacityNode = uniform(props.opacity)
+const scaleNode = uniform(props.scale)
+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.speed, v => { speedNode.value = v })
+
+const pipeline = useShaderPipelineContext()
+
+useShaderStage(
+  (prev) => {
+    const uvCurrent = pipeline.uvNode.value
+    const t = time.mul(speedNode)
+    const p = vec3(uvCurrent.mul(scaleNode), t)
+    const curl = curlNoise3d(p).x.mul(0.5).add(0.5)
+    const blended = mix(prev.xyz, colorNode, curl.mul(opacityNode))
+    return vec4(blended, prev.w)
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { Color } from 'three'
+import { mix, uniform, vec4 } from 'three/tsl'
+import { blendDarken } from '../../shaders/common/blend'
+
+const props = withDefaults(defineProps<{
+  color?: string
+  opacity?: number
+  order?: number
+}>(), { color: '#808080', opacity: 1, order: 0 })
+
+const colorNode = uniform(new Color(props.color))
+const opacityNode = uniform(props.opacity)
+watch(() => props.color, v => { colorNode.value.set(v) })
+watch(() => props.opacity, v => { opacityNode.value = v })
+
+useShaderStage(
+  (prev) => vec4(mix(prev.xyz, blendDarken(prev.xyz, colorNode), opacityNode), prev.w),
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { Color, Vector3 } from 'three'
+import { uniform, time, mix, pow, abs, sign, float, vec4 } from 'three/tsl'
+
+/**
+ * Sinusoidal interpolation between a light and dark colour over time.
+ * The phobon easing: t = (sign(cycle) * pow(abs(cycle), 0.6) + 1) / 2
+ * where cycle = sin(time * speed).
+ */
+const props = withDefaults(defineProps<{
+  /** Colour during the light phase */
+  colorLight?: string
+  /** Colour during the dark phase */
+  colorDark?: string
+  /** Cycle speed in radians per second */
+  speed?: number
+  /** Mix opacity over prev colour */
+  opacity?: number
+  order?: number
+}>(), { colorLight: '#ffffff', colorDark: '#000033', speed: 0.3, opacity: 1, order: 0 })
+
+function toVec3Node(hex: string) {
+  const c = new Color(hex)
+  return uniform(new Vector3(c.r, c.g, c.b))
+}
+
+const lightNode = toVec3Node(props.colorLight)
+const darkNode = toVec3Node(props.colorDark)
+const speedNode = uniform(props.speed)
+const opacityNode = uniform(props.opacity)
+watch(() => props.colorLight, v => { const c = new Color(v); lightNode.value.set(c.r, c.g, c.b) })
+watch(() => props.colorDark, v => { const c = new Color(v); darkNode.value.set(c.r, c.g, c.b) })
+watch(() => props.speed, v => { speedNode.value = v })
+watch(() => props.opacity, v => { opacityNode.value = v })
+
+useShaderStage(
+  (prev) => {
+    const cycle = time.mul(speedNode).sin()
+    const t = sign(cycle).mul(pow(abs(cycle), float(0.6))).add(1).div(2)
+    const colour = mix(darkNode, lightNode, t)
+    return vec4(mix(prev.xyz, colour, opacityNode), prev.w)
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { uniform, vec4 } from 'three/tsl'
+import { desaturate } from '../../shaders/common/blend'
+
+const props = withDefaults(defineProps<{
+  /** 0 = original colour, 1 = full greyscale */
+  amount?: number
+  order?: number
+}>(), { amount: 1, order: 0 })
+
+const amountNode = uniform(props.amount)
+watch(() => props.amount, v => { amountNode.value = v })
+
+useShaderStage(
+  (prev) => vec4(desaturate(prev.xyz, amountNode), prev.w),
+  props.order,
+)
+</script>
+
+<template><!-- --></template>