kmcom-nuxt-layers 1.6.4 → 1.6.6

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

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { Color, Vector2, Vector3 } from 'three'
+import { uniform, vec2, vec3, vec4, smoothstep, sin, cos, float } from 'three/tsl'
+
+/**
+ * Radial god rays — procedural volumetric light shafts emanating from a source point.
+ * Uses angular spokes in UV space to approximate crepuscular rays.
+ */
+const props = withDefaults(defineProps<{
+  /** Light source UV position */
+  position?: [number, number]
+  /** Ray colour */
+  color?: string
+  /** Ray brightness */
+  intensity?: number
+  /** Number of ray spokes */
+  rayCount?: number
+  /** Radial decay rate */
+  decay?: number
+  order?: number
+}>(), { position: () => [0.5, 0.9], color: '#fff9e0', intensity: 0.35, rayCount: 12, decay: 2.0, order: 0 })
+
+function toVec3Node(hex: string) {
+  const c = new Color(hex)
+  return uniform(new Vector3(c.r, c.g, c.b))
+}
+
+const posNode = uniform(new Vector2(...props.position))
+const colorNode = toVec3Node(props.color)
+const intensityNode = uniform(props.intensity)
+const rayCountNode = uniform(props.rayCount)
+const decayNode = uniform(props.decay)
+watch(() => props.position, ([x, y]) => { posNode.value.set(x, y) })
+watch(() => props.color, v => { const c = new Color(v); colorNode.value.set(c.r, c.g, c.b) })
+watch(() => props.intensity, v => { intensityNode.value = v })
+watch(() => props.rayCount, v => { rayCountNode.value = v })
+watch(() => props.decay, v => { decayNode.value = v })
+
+const pipeline = useShaderPipelineContext()
+
+useShaderStage(
+  (prev) => {
+    const uv = pipeline.uvNode.value
+    const src = vec2(posNode.x, posNode.y)
+    const dir = uv.sub(src)
+    const dist = dir.length()
+
+    // Angular spokes: cos(angle * rayCount) drives streak pattern
+    const angle = dir.y.atan(dir.x)
+    const spoke = cos(angle.mul(rayCountNode)).mul(0.5).add(0.5)
+    spoke.pow(3)
+
+    // Radial falloff from source
+    const radialFade = smoothstep(decayNode, float(0), dist)
+
+    const rays = spoke.pow(3).mul(radialFade).mul(intensityNode)
+    return vec4(prev.xyz.add(colorNode.mul(rays)), prev.w)
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { Color, Vector3 } from 'three'
+import { uniform, time, vec3, vec4, mix, float } from 'three/tsl'
+import { gradientNoise3D } from '../../shaders/common/noise'
+
+const props = withDefaults(defineProps<{
+  colorA?: string
+  colorB?: string
+  scale?: number
+  speed?: number
+  order?: number
+}>(), { colorA: '#000000', colorB: '#ffffff', scale: 3, 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 = time.mul(speedNode)
+    const n = gradientNoise3D(vec3(uv.mul(scaleNode), t)).mul(0.5).add(0.5)
+    return vec4(mix(colorANode, colorBNode, n), float(1))
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { clamp, dot, float, floor, fract, mix, pow, sin, step, time, uniform, vec2, vec4 } from 'three/tsl'
+import { blendOverlay, blendScreen, blendSoftLight } from '../../shaders/common/blend'
+
+type GrainBlendMode = 'add' | 'sub' | 'screen' | 'overlay' | 'soft-light'
+type GrainStyle = 'smooth' | 'dotted' | 'coarse'
+
+const props = withDefaults(defineProps<{
+  intensity?: number
+  opacity?: number
+  /** UV scale — higher = finer grain, lower = bigger dots */
+  size?: number
+  /** smooth = continuous noise, dotted = binary on/off specks, coarse = concentrated bright grit */
+  style?: GrainStyle
+  animated?: boolean
+  fps?: number
+  blendMode?: GrainBlendMode
+  order?: number
+}>(), {
+  intensity: 0.08,
+  opacity: 1.0,
+  size: 1.0,
+  style: 'smooth',
+  animated: true,
+  fps: 24,
+  blendMode: 'add',
+  order: 0,
+})
+
+const intensityNode = uniform(props.intensity)
+const opacityNode = uniform(props.opacity)
+const sizeNode = uniform(props.size)
+const fpsNode = uniform(props.fps)
+watch(() => props.intensity, v => { intensityNode.value = v })
+watch(() => props.opacity, v => { opacityNode.value = v })
+watch(() => props.size, v => { sizeNode.value = v })
+watch(() => props.fps, v => { fpsNode.value = v })
+
+const { uvNode } = useShaderPipelineContext()
+
+useShaderStage(
+  (prev) => {
+    const uvScaled = uvNode.value.mul(sizeNode)
+    const seed = props.animated ? floor(time.mul(fpsNode)) : float(0)
+
+    // Raw [0,1] hash noise
+    const raw = fract(sin(dot(uvScaled.add(seed), vec2(12.9898, 78.233))).mul(43758.5453))
+
+    // Shape the noise based on style
+    const shaped = props.style === 'dotted'
+      ? step(float(0.65), raw)           // binary: sparse bright specks
+      : props.style === 'coarse'
+        ? pow(raw, float(4.0)).mul(2.5)  // concentrated bright grit, rest dark
+        : raw                             // smooth: continuous noise
+
+    const mixFactor = intensityNode.mul(opacityNode)
+    let blended
+    switch (props.blendMode) {
+      case 'sub':
+        blended = prev.xyz.sub(shaped.mul(intensityNode).mul(opacityNode))
+        break
+      case 'screen':
+        blended = mix(prev.xyz, blendScreen(prev.xyz, shaped), mixFactor)
+        break
+      case 'overlay':
+        blended = mix(prev.xyz, blendOverlay(prev.xyz, shaped), mixFactor)
+        break
+      case 'soft-light':
+        blended = mix(prev.xyz, blendSoftLight(prev.xyz, shaped), mixFactor)
+        break
+      default: // 'add'
+        blended = prev.xyz.add(shaped.sub(0.5).mul(intensityNode).mul(opacityNode))
+    }
+    return clamp(vec4(blended, prev.w), 0, 1)
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { Color, Vector3 } from 'three'
+import { uniform, vec4, mix, float } from 'three/tsl'
+import { grid } from '../../shaders/common/shapes'
+
+const props = withDefaults(defineProps<{
+  /** Background colour */
+  colorA?: string
+  /** Grid line colour */
+  colorB?: string
+  cellSize?: number
+  lineWidth?: number
+  order?: number
+}>(), { colorA: '#000000', colorB: '#ffffff', cellSize: 0.1, lineWidth: 0.005, 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 cellNode = uniform(props.cellSize)
+const lineNode = uniform(props.lineWidth)
+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.cellSize, v => { cellNode.value = v })
+watch(() => props.lineWidth, v => { lineNode.value = v })
+
+const pipeline = useShaderPipelineContext()
+
+useShaderStage(
+  () => {
+    const uv = pipeline.uvNode.value
+    const mask = grid(uv, cellNode, lineNode)
+    return vec4(mix(colorANode, colorBNode, mask), float(1))
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,43 @@
+<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'
+
+/**
+ * Red/warm glow bleed around highlight areas — the analogue film halation effect.
+ * Bright areas bleed a coloured halo into their surroundings.
+ */
+const props = withDefaults(defineProps<{
+  /** Glow colour */
+  color?: string
+  /** Luminance threshold above which glow starts */
+  threshold?: number
+  /** Glow intensity */
+  intensity?: number
+  order?: number
+}>(), { color: '#ff2200', threshold: 0.7, intensity: 0.4, 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 thresholdNode = uniform(props.threshold)
+const intensityNode = uniform(props.intensity)
+watch(() => props.color, v => { const c = new Color(v); colorNode.value.set(c.r, c.g, c.b) })
+watch(() => props.threshold, v => { thresholdNode.value = v })
+watch(() => props.intensity, v => { intensityNode.value = v })
+
+useShaderStage(
+  (prev) => {
+    const lum = luminance(prev.xyz)
+    const glow = smoothstep(thresholdNode, float(1), lum).mul(intensityNode)
+    return vec4(prev.xyz.add(colorNode.mul(glow)), prev.w)
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { uniform, vec4 } from 'three/tsl'
+import { halftone } from '../../shaders/common/grain'
+import { luminance } from '../../shaders/common/blend'
+
+const props = withDefaults(defineProps<{
+  /** Dot density — higher = finer dots */
+  scale?: number
+  /** Screen angle in radians */
+  angle?: number
+  order?: number
+}>(), { scale: 50, angle: 0, order: 0 })
+
+const scaleNode = uniform(props.scale)
+const angleNode = uniform(props.angle)
+watch(() => props.scale, v => { scaleNode.value = v })
+watch(() => props.angle, v => { angleNode.value = v })
+
+const pipeline = useShaderPipelineContext()
+
+useShaderStage(
+  (prev) => {
+    const uvCurrent = pipeline.uvNode.value
+    const lum = luminance(prev.xyz)
+    const dot = halftone(uvCurrent, lum, scaleNode, angleNode)
+    return vec4(prev.xyz.mul(dot), prev.w)
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { Color } from 'three'
+import { mix, uniform, vec4 } from 'three/tsl'
+import { blendHardLight } 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, blendHardLight(prev.xyz, colorNode), opacityNode), prev.w),
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { Color, Vector3 } from 'three'
+import { uniform, vec3, vec4, smoothstep, float } from 'three/tsl'
+
+/**
+ * Edge haze — additive fog/bloom at screen boundaries.
+ * Useful for dreamlike or atmospheric borders.
+ */
+const props = withDefaults(defineProps<{
+  /** Haze tint colour */
+  color?: string
+  /** How far inward the haze reaches (0 = edge only, 1 = full screen) */
+  reach?: number
+  /** Haze brightness */
+  intensity?: number
+  order?: number
+}>(), { color: '#ffffff', reach: 0.4, intensity: 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 reachNode = uniform(props.reach)
+const intensityNode = uniform(props.intensity)
+watch(() => props.color, v => { const c = new Color(v); colorNode.value.set(c.r, c.g, c.b) })
+watch(() => props.reach, v => { reachNode.value = v })
+watch(() => props.intensity, v => { intensityNode.value = v })
+
+const pipeline = useShaderPipelineContext()
+
+useShaderStage(
+  (prev) => {
+    const uv = pipeline.uvNode.value
+
+    // Horizontal edge proximity
+    const edgeX = smoothstep(reachNode, float(0), uv.x).add(smoothstep(float(1).sub(reachNode), float(1), uv.x))
+    // Vertical edge proximity
+    const edgeY = smoothstep(reachNode, float(0), uv.y).add(smoothstep(float(1).sub(reachNode), float(1), uv.y))
+
+    const edgeMask = edgeX.add(edgeY).clamp(0, 1).mul(intensityNode)
+    return vec4(prev.xyz.add(colorNode.mul(edgeMask)), prev.w)
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { Color, Vector3 } from 'three'
+import { uniform, vec4, mix, smoothstep, float } from 'three/tsl'
+import { sdHexagon } from '../../shaders/common/sdf'
+
+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 = sdHexagon(uv.sub(0.5), radiusNode)
+    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/Hue.client.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { uniform, vec4 } from 'three/tsl'
+import { hueShift } from '../../shaders/common/palette'
+
+const props = withDefaults(defineProps<{
+  /** Hue shift amount in [0, 1] (1 = full rotation) */
+  shift?: number
+  order?: number
+}>(), { shift: 0, order: 0 })
+
+const shiftNode = uniform(props.shift)
+watch(() => props.shift, v => { shiftNode.value = v })
+
+useShaderStage(
+  (prev) => vec4(hueShift(prev.xyz, shiftNode), prev.w),
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { vec4 } from 'three/tsl'
+import { invert } from '../../shaders/common/blend'
+
+const { order = 0 } = defineProps<{ order?: number }>()
+
+useShaderStage(
+  (prev) => vec4(invert(prev.xyz), prev.w),
+  order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { Color, Vector2, Vector3 } from 'three'
+import { uniform, vec2, vec3, vec4, smoothstep, float } from 'three/tsl'
+
+/**
+ * Procedural lens flare — starburst + ghost circle artefacts along the flare axis.
+ */
+const props = withDefaults(defineProps<{
+  /** Light source position in UV space */
+  position?: [number, number]
+  /** Flare colour */
+  color?: string
+  /** Overall brightness */
+  intensity?: number
+  /** How many ghost circles along the axis */
+  ghostCount?: number
+  order?: number
+}>(), { position: () => [0.7, 0.8], color: '#fffde0', intensity: 0.6, ghostCount: 4, order: 0 })
+
+function toVec3Node(hex: string) {
+  const c = new Color(hex)
+  return uniform(new Vector3(c.r, c.g, c.b))
+}
+
+const posNode = uniform(new Vector2(...props.position))
+const colorNode = toVec3Node(props.color)
+const intensityNode = uniform(props.intensity)
+const ghostCountNode = uniform(props.ghostCount)
+watch(() => props.position, ([x, y]) => { posNode.value.set(x, y) })
+watch(() => props.color, v => { const c = new Color(v); colorNode.value.set(c.r, c.g, c.b) })
+watch(() => props.intensity, v => { intensityNode.value = v })
+watch(() => props.ghostCount, v => { ghostCountNode.value = v })
+
+const pipeline = useShaderPipelineContext()
+
+useShaderStage(
+  (prev) => {
+    const uv = pipeline.uvNode.value
+    const src = vec2(posNode.x, posNode.y)
+
+    // Starburst: bright disc at source
+    const distToSrc = uv.sub(src).length()
+    const burst = smoothstep(float(0.08), float(0), distToSrc).mul(intensityNode)
+
+    // Ghost circles: evenly spaced along the axis toward screen centre
+    const axis = vec2(0.5, 0.5).sub(src)
+    const ghost1 = uv.sub(src.add(axis.mul(0.4))).length()
+    const ghost2 = uv.sub(src.add(axis.mul(0.7))).length()
+    const ghost3 = uv.sub(src.add(axis.mul(1.1))).length()
+    const ghost4 = uv.sub(src.add(axis.mul(1.5))).length()
+
+    const g1 = smoothstep(float(0.05), float(0), ghost1).mul(0.4)
+    const g2 = smoothstep(float(0.03), float(0), ghost2).mul(0.3)
+    const g3 = smoothstep(float(0.04), float(0), ghost3).mul(0.2)
+    const g4 = smoothstep(float(0.06), float(0), ghost4).mul(0.15)
+
+    const ghosts = g1.add(g2).add(g3).add(g4).mul(intensityNode)
+    const flare = colorNode.mul(burst.add(ghosts))
+
+    return vec4(prev.xyz.add(flare), prev.w)
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { Color } from 'three'
+import { mix, uniform, vec4 } from 'three/tsl'
+import { blendLighten } 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, blendLighten(prev.xyz, colorNode), opacityNode), prev.w),
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { Color } from 'three'
+import { mix, uniform, vec4 } from 'three/tsl'
+
+const props = withDefaults(defineProps<{
+  colorA?: string
+  colorB?: string
+  axis?: 'x' | 'y'
+  order?: number
+}>(), {
+  colorA: '#000000',
+  colorB: '#ffffff',
+  axis: 'y',
+  order: 0,
+})
+
+const colorAVal = new Color(props.colorA)
+const colorBVal = new Color(props.colorB)
+const colorANode = uniform(colorAVal)
+const colorBNode = uniform(colorBVal)
+watch(() => props.colorA, v => { colorANode.value.set(v) })
+watch(() => props.colorB, v => { colorBNode.value.set(v) })
+
+const { uvNode } = useShaderPipelineContext()
+
+useShaderStage(
+  (_prev) => {
+    const t = props.axis === 'x' ? uvNode.value.x : uvNode.value.y
+    return vec4(mix(colorANode, colorBNode, t), 1.0)
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { Color, Vector3 } from 'three'
+import { float, mix, step, uniform, vec4 } from 'three/tsl'
+
+const props = withDefaults(defineProps<{
+  colorA?: string
+  colorB?: string
+  /** Optional third stop (defaults to colorB when omitted → 2-stop gradient) */
+  colorC?: string
+  /** Optional fourth stop (defaults to colorC when omitted → 3-stop gradient) */
+  colorD?: string
+  axis?: 'x' | 'y'
+  order?: number
+}>(), {
+  colorA: '#000000',
+  colorB: '#ffffff',
+  colorC: undefined,
+  colorD: undefined,
+  axis: 'y',
+  order: 0,
+})
+
+function toVec3U(hex: string) {
+  const c = new Color(hex)
+  return uniform(new Vector3(c.r, c.g, c.b))
+}
+
+const cA = toVec3U(props.colorA)
+const cB = toVec3U(props.colorB)
+const cC = toVec3U(props.colorC ?? props.colorB)
+const cD = toVec3U(props.colorD ?? props.colorC ?? props.colorB)
+
+watch(() => props.colorA, v => { const c = new Color(v); cA.value.set(c.r, c.g, c.b) })
+watch(() => props.colorB, v => { const c = new Color(v); cB.value.set(c.r, c.g, c.b) })
+watch(() => props.colorC, v => { const c = new Color(v ?? props.colorB); cC.value.set(c.r, c.g, c.b) })
+watch(() => props.colorD, v => { const c = new Color(v ?? props.colorC ?? props.colorB); cD.value.set(c.r, c.g, c.b) })
+
+const pipeline = useShaderPipelineContext()
+
+useShaderStage(
+  () => {
+    const t = props.axis === 'x' ? pipeline.uvNode.value.x : pipeline.uvNode.value.y
+
+    // Map t [0,1] to 3 equal segments, clamping so t=1 maps to lt=1 not lt=0
+    const tN = t.mul(float(3)).min(float(2.9999))
+    const seg = tN.floor()
+    const lt = tN.sub(seg)    // local t within segment [0,1)
+
+    // All three segment interpolations share the same local t
+    const c01 = mix(cA, cB, lt)
+    const c12 = mix(cB, cC, lt)
+    const c23 = mix(cC, cD, lt)
+
+    // step(edge, x): 0 if x < edge, 1 if x >= edge
+    const inSeg1 = step(float(1), tN)   // 1 when in segments 1 or 2
+    const inSeg2 = step(float(2), tN)   // 1 when in segment 2
+
+    // Cascade: start with c01, replace with c12 at seg>=1, replace with c23 at seg>=2
+    const col = mix(mix(c01, c12, inSeg1), c23, inSeg2)
+    return vec4(col, float(1))
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>