kmcom-nuxt-layers 1.6.4 → 1.6.7

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

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { uniform, vec4, time } from 'three/tsl'
+import { scanlines } from '../../shaders/common/grain'
+
+const props = withDefaults(defineProps<{
+  /** Number of scanlines across the screen */
+  density?: number
+  /** Darkness of the lines: 0 = invisible, 1 = full black */
+  intensity?: number
+  /** Animate the lines — speed in lines/second */
+  scrollSpeed?: number
+  order?: number
+}>(), { density: 400, intensity: 0.25, scrollSpeed: 0, order: 0 })
+
+const densityNode = uniform(props.density)
+const intensityNode = uniform(props.intensity)
+const scrollSpeedNode = uniform(props.scrollSpeed)
+watch(() => props.density, v => { densityNode.value = v })
+watch(() => props.intensity, v => { intensityNode.value = v })
+watch(() => props.scrollSpeed, v => { scrollSpeedNode.value = v })
+
+const pipeline = useShaderPipelineContext()
+
+useShaderStage(
+  (prev) => {
+    const uvCurrent = pipeline.uvNode.value
+    const offset = time.mul(scrollSpeedNode)
+    const factor = scanlines(uvCurrent, densityNode, intensityNode, offset)
+    return vec4(prev.xyz.mul(factor), prev.w)
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

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

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

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { uniform, vec3, vec4, float, floor, fract } from 'three/tsl'
+
+/**
+ * ShaderDebugger — dev-only visualization overlay for inspecting pipeline state.
+ *
+ * Modes:
+ *   'uv'     — displays UV coordinates as red/green channels
+ *   'normal' — encodes normal-space UV as blue hue sweep
+ *   'grid'   — overlays a reference grid on the current output
+ *   'pass'   — passes through unchanged (no-op, useful for toggling off)
+ *
+ * Drop this at any `order` value to inspect that point in the pipeline.
+ * Only renders in development — remove from production compositions.
+ */
+const props = withDefaults(defineProps<{
+  /** Visualization mode */
+  mode?: 'uv' | 'normal' | 'grid' | 'pass'
+  /** Grid line count (grid mode) */
+  gridLines?: number
+  /** Grid line thickness */
+  gridThickness?: number
+  /** Blend with original output (0 = full debug, 1 = full original) */
+  blend?: number
+  order?: number
+}>(), { mode: 'uv', gridLines: 10, gridThickness: 0.02, blend: 0, order: 0 })
+
+const gridLinesNode = uniform(props.gridLines)
+const gridThickNode = uniform(props.gridThickness)
+const blendNode = uniform(props.blend)
+watch(() => props.gridLines, v => { gridLinesNode.value = v })
+watch(() => props.gridThickness, v => { gridThickNode.value = v })
+watch(() => props.blend, v => { blendNode.value = v })
+
+const pipeline = useShaderPipelineContext()
+
+useShaderStage(
+  (prev) => {
+    const uv = pipeline.uvNode.value
+
+    let debugColour
+
+    if (props.mode === 'uv') {
+      // Red = U, Green = V, Blue = 0
+      debugColour = vec3(uv.x, uv.y, float(0))
+    }
+    else if (props.mode === 'normal') {
+      // Encodes centered UV — negative values become blue tones
+      const centered = uv.sub(0.5)
+      debugColour = vec3(centered.x.add(0.5), centered.y.add(0.5), float(0.5))
+    }
+    else if (props.mode === 'grid') {
+      // Grid lines via fract — line at every 1/gridLines interval
+      const scaled = uv.mul(gridLinesNode)
+      const fx = fract(scaled.x)
+      const fy = fract(scaled.y)
+      const lineX = float(1).sub(fx.smoothstep(gridThickNode, float(0)))
+      const lineY = float(1).sub(fy.smoothstep(gridThickNode, float(0)))
+      const line = lineX.max(lineY)
+      debugColour = prev.xyz.mul(float(1).sub(line)).add(vec3(line, line.mul(0.5), float(0)))
+    }
+    else {
+      // pass — no-op
+      debugColour = prev.xyz
+    }
+
+    return vec4(prev.xyz.mix(debugColour, float(1).sub(blendNode)), prev.w)
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { Color } from 'three'
+import { float, mix, time, uniform, vec2, vec4 } from 'three/tsl'
+import { simplexNoise2D } from '../../shaders/common/noise'
+
+const props = withDefaults(defineProps<{
+  colorA?: string
+  colorB?: string
+  scale?: number
+  animated?: boolean
+  speed?: number
+  order?: number
+}>(), {
+  colorA: '#000000',
+  colorB: '#ffffff',
+  scale: 3,
+  animated: true,
+  speed: 0.3,
+  order: 0,
+})
+
+const colorAVal = new Color(props.colorA)
+const colorBVal = new Color(props.colorB)
+const colorANode = uniform(colorAVal)
+const colorBNode = uniform(colorBVal)
+const scaleNode = uniform(props.scale)
+const speedNode = uniform(props.speed)
+
+watch(() => props.colorA, v => { colorANode.value.set(v) })
+watch(() => props.colorB, v => { colorBNode.value.set(v) })
+watch(() => props.scale, v => { scaleNode.value = v })
+watch(() => props.speed, v => { speedNode.value = v })
+
+const { uvNode } = useShaderPipelineContext()
+
+useShaderStage(
+  (_prev) => {
+    // Scroll UV over time to animate noise (cheaper than 3D noise)
+    const offset = props.animated ? time.mul(speedNode) : float(0)
+    const input = uvNode.value.mul(scaleNode).add(vec2(offset, 0))
+    const n = simplexNoise2D(input).mul(0.5).add(0.5)
+    return vec4(mix(colorANode, colorBNode, n), 1.0)
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { Color, Vector3 } from 'three'
+import { uniform, clamp, mix, pow, dot, vec3, vec4, float } from 'three/tsl'
+
+const props = withDefaults(defineProps<{
+  /** Sky colour at the zenith */
+  zenith?: string
+  /** Sky colour at the horizon */
+  horizon?: string
+  /** Ground colour below horizon */
+  ground?: string
+  /** Sun direction — [x, y, z] world space (will be normalised) */
+  sunDirection?: [number, number, number]
+  /** Sun colour */
+  sunColor?: string
+  /** Sun disk sharpness (higher = smaller disk) */
+  sunPower?: number
+  order?: number
+}>(), {
+  zenith: '#1a3a8a',
+  horizon: '#7ab0d8',
+  ground: '#5a4a3a',
+  sunDirection: () => [0.3, 0.8, 0.5],
+  sunColor: '#fff8e0',
+  sunPower: 512,
+  order: 0,
+})
+
+function toVec3Node(hex: string) {
+  const c = new Color(hex)
+  return uniform(new Vector3(c.r, c.g, c.b))
+}
+
+const zenithNode = toVec3Node(props.zenith)
+const horizonNode = toVec3Node(props.horizon)
+const groundNode = toVec3Node(props.ground)
+const sunColorNode = toVec3Node(props.sunColor)
+const sunPowerNode = uniform(props.sunPower)
+
+const sunDir = new Vector3(...props.sunDirection).normalize()
+const sunDirNode = uniform(new Vector3(sunDir.x, sunDir.y, sunDir.z))
+
+watch(() => props.zenith, v => { const c = new Color(v); zenithNode.value.set(c.r, c.g, c.b) })
+watch(() => props.horizon, v => { const c = new Color(v); horizonNode.value.set(c.r, c.g, c.b) })
+watch(() => props.ground, v => { const c = new Color(v); groundNode.value.set(c.r, c.g, c.b) })
+watch(() => props.sunColor, v => { const c = new Color(v); sunColorNode.value.set(c.r, c.g, c.b) })
+watch(() => props.sunPower, v => { sunPowerNode.value = v })
+watch(() => props.sunDirection, ([x, y, z]) => {
+  const d = new Vector3(x, y, z).normalize()
+  sunDirNode.value.set(d.x, d.y, d.z)
+})
+
+const pipeline = useShaderPipelineContext()
+
+useShaderStage(
+  () => {
+    const ray = pipeline.rayNode.value
+
+    // Sky gradient: -1..+1 on Y → ground..zenith
+    const t = clamp(ray.y.mul(2.0).add(0.5), 0, 1)
+    const sky = mix(horizonNode, zenithNode, t)
+    const colour = mix(groundNode, sky, clamp(ray.y.add(0.1).mul(10.0), 0, 1))
+
+    // Sun disc
+    const sunDot = dot(ray, sunDirNode).max(float(0))
+    const sun = sunColorNode.mul(pow(sunDot, sunPowerNode))
+
+    return vec4(colour.add(sun), 1.0)
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

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

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

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { Color } from 'three'
+import { uniform, vec4 } from 'three/tsl'
+
+const props = withDefaults(defineProps<{
+  color?: string
+  order?: number
+}>(), {
+  color: '#ffffff',
+  order: 0,
+})
+
+const colorVal = new Color(props.color)
+const colorNode = uniform(colorVal)
+watch(() => props.color, v => { colorNode.value.set(v) })
+
+useShaderStage((_prev) => vec4(colorNode, 1.0), props.order)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,47 @@
+<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'
+
+const props = withDefaults(defineProps<{
+  /** Colour pushed into shadow tones */
+  shadowColor?: string
+  /** Colour pushed into highlight tones */
+  highlightColor?: string
+  /** Balance point: 0.5 = even split, lower = shadows dominate */
+  balance?: number
+  /** Overall blend strength */
+  opacity?: number
+  order?: number
+}>(), { shadowColor: '#1a2a5a', highlightColor: '#ffeecc', balance: 0.5, opacity: 0.5, 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 highlightNode = toVec3Node(props.highlightColor)
+const balanceNode = uniform(props.balance)
+const opacityNode = uniform(props.opacity)
+watch(() => props.shadowColor, v => { const c = new Color(v); shadowNode.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.balance, v => { balanceNode.value = v })
+watch(() => props.opacity, v => { opacityNode.value = v })
+
+useShaderStage(
+  (prev) => {
+    const lum = luminance(prev.xyz)
+    const shadowMask = smoothstep(balanceNode, float(0), lum)
+    const highlightMask = smoothstep(balanceNode, float(1), lum)
+    const toned = prev.xyz
+      .add(shadowNode.mul(shadowMask).mul(opacityNode))
+      .add(highlightNode.mul(highlightMask).mul(opacityNode))
+    return vec4(toned, prev.w)
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { Color, Vector3 } from 'three'
+import { uniform, vec4, mix, float } from 'three/tsl'
+import { star } from '../../shaders/common/shapes'
+
+const props = withDefaults(defineProps<{
+  colorA?: string
+  colorB?: string
+  radius?: number
+  /** Number of points */
+  points?: number
+  /** Inner radius ratio (0–1) */
+  innerRatio?: number
+  softness?: number
+  order?: number
+}>(), { colorA: '#000000', colorB: '#ffcc00', radius: 0.35, points: 5, innerRatio: 0.45, 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 innerNode = uniform(props.innerRatio)
+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.innerRatio, v => { innerNode.value = v })
+watch(() => props.softness, v => { softnessNode.value = v })
+
+const pipeline = useShaderPipelineContext()
+
+useShaderStage(
+  () => {
+    const uv = pipeline.uvNode.value
+    const mask = star(uv, [0.5, 0.5], radiusNode, props.points, innerNode, softnessNode)
+    return vec4(mix(colorANode, colorBNode, mask), float(1))
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { uniform, time, vec3, vec4, vec2, floor, fract, sin, dot, smoothstep, float } from 'three/tsl'
+
+/**
+ * Hash-based procedural starfield.
+ * Each cell on a grid may contain a star whose brightness twinkles over time.
+ */
+const props = withDefaults(defineProps<{
+  /** Grid density — higher = more stars */
+  density?: number
+  /** Star brightness */
+  brightness?: number
+  /** Twinkle animation speed */
+  twinkleSpeed?: number
+  /** Star size (sharpness) */
+  size?: number
+  order?: number
+}>(), { density: 80, brightness: 1.0, twinkleSpeed: 1.0, size: 0.4, order: 0 })
+
+const densityNode = uniform(props.density)
+const brightnessNode = uniform(props.brightness)
+const twinkleNode = uniform(props.twinkleSpeed)
+const sizeNode = uniform(props.size)
+watch(() => props.density, v => { densityNode.value = v })
+watch(() => props.brightness, v => { brightnessNode.value = v })
+watch(() => props.twinkleSpeed, v => { twinkleNode.value = v })
+watch(() => props.size, v => { sizeNode.value = v })
+
+const pipeline = useShaderPipelineContext()
+
+useShaderStage(
+  (prev) => {
+    const uv = pipeline.uvNode.value
+    const t = time.mul(twinkleNode)
+
+    // Scale UV into grid cells
+    const scaled = uv.mul(densityNode)
+    const cell = floor(scaled)
+    const local = fract(scaled).sub(0.5)
+
+    // Hash per cell → star position offset and brightness
+    const h1 = fract(sin(dot(cell, vec2(127.1, 311.7))).mul(43758.5453))
+    const h2 = fract(sin(dot(cell, vec2(269.5, 183.3))).mul(43758.5453))
+    const h3 = fract(sin(dot(cell, vec2(419.2, 371.9))).mul(43758.5453))
+
+    // Only ~30% of cells have stars
+    const hasStar = smoothstep(0.7, 0.75, h3)
+
+    // Star position within cell
+    const starPos = vec2(h1, h2).sub(0.5).mul(0.6)
+    const dist = local.sub(starPos).length()
+
+    // Twinkle via time-based sine modulation
+    const twinkle = sin(t.add(h1.mul(6.28))).mul(0.3).add(0.7)
+    const star = smoothstep(sizeNode, float(0), dist.mul(10)).mul(hasStar).mul(twinkle)
+
+    const colour = vec3(star.mul(brightnessNode))
+    return vec4(prev.xyz.add(colour), prev.w)
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { Color, Vector3 } from 'three'
+import { uniform, vec4, mix, float } from 'three/tsl'
+import { stripes } from '../../shaders/common/shapes'
+
+const props = withDefaults(defineProps<{
+  colorA?: string
+  colorB?: string
+  frequency?: number
+  /** Fraction of each stripe that is colorB (0–1) */
+  thickness?: number
+  /** Angle in degrees */
+  angle?: number
+  order?: number
+}>(), { colorA: '#000000', colorB: '#ffffff', frequency: 10, thickness: 0.5, angle: 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 freqNode = uniform(props.frequency)
+const thickNode = uniform(props.thickness)
+const angleNode = uniform(props.angle * 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.frequency, v => { freqNode.value = v })
+watch(() => props.thickness, v => { thickNode.value = v })
+watch(() => props.angle, v => { angleNode.value = v * Math.PI / 180 })
+
+const pipeline = useShaderPipelineContext()
+
+useShaderStage(
+  () => {
+    const uv = pipeline.uvNode.value
+    const mask = stripes(uv, freqNode, thickNode, angleNode)
+    return vec4(mix(colorANode, colorBNode, mask), float(1))
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

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

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

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { uniform, vec4 } from 'three/tsl'
+import { tanhTonemap } from '../../shaders/common/tonemapping'
+
+const props = withDefaults(defineProps<{
+  /** Controls how aggressively values above 1 are compressed. dawn5 uses 2.5. */
+  exposure?: number
+  order?: number
+}>(), {
+  exposure: 1.0,
+  order: 0,
+})
+
+const exposureNode = uniform(props.exposure)
+watch(() => props.exposure, v => { exposureNode.value = v })
+
+useShaderStage(
+  (prev) => vec4(tanhTonemap(prev.xyz.mul(exposureNode)), prev.w),
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { uniform, vec4, step, float } from 'three/tsl'
+import { luminance } from '../../shaders/common/blend'
+
+const props = withDefaults(defineProps<{
+  /** Luminance threshold 0–1: below = black, above = white */
+  threshold?: number
+  order?: number
+}>(), { threshold: 0.5, order: 0 })
+
+const thresholdNode = uniform(props.threshold)
+watch(() => props.threshold, v => { thresholdNode.value = v })
+
+useShaderStage(
+  (prev) => {
+    const lum = luminance(prev.xyz)
+    const t = step(thresholdNode, lum)
+    return vec4(float(t), float(t), float(t), prev.w)
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { Color, Vector3 } from 'three'
+import { uniform, vec4 } from 'three/tsl'
+
+const props = withDefaults(defineProps<{
+  /** Tint colour — multiplied against the existing colour */
+  color?: string
+  /** Blend between original (0) and fully tinted (1) */
+  opacity?: number
+  order?: number
+}>(), { color: '#ff8844', opacity: 1, 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)
+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 })
+
+useShaderStage(
+  (prev) => {
+    const tinted = prev.xyz.mul(colorNode)
+    return vec4(prev.xyz.mix(tinted, opacityNode), prev.w)
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

package/layers/shader/app/components/Pipeline/Triangle.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 { sdEquilateralTriangle } from '../../shaders/common/sdf'
+
+const props = withDefaults(defineProps<{
+  colorA?: string
+  colorB?: string
+  size?: number
+  softness?: number
+  order?: number
+}>(), { colorA: '#000000', colorB: '#ffffff', size: 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 sizeNode = uniform(props.size)
+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.softness, v => { softnessNode.value = v })
+
+const pipeline = useShaderPipelineContext()
+
+useShaderStage(
+  () => {
+    const uv = pipeline.uvNode.value
+    const d = sdEquilateralTriangle(uv.sub(0.5), sizeNode)
+    const mask = smoothstep(softnessNode, softnessNode.negate(), d)
+    return vec4(mix(colorANode, colorBNode, mask), float(1))
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>