kmcom-nuxt-layers 1.6.4 → 1.6.6

package/layers/core/app/assets/css/main.css

@@ -10,3 +10,5 @@
 
 @import '#layers/core/app/assets/css/layout.css';
 @import '#layers/core/app/assets/css/base.css';
+
+

package/layers/core/app/components/ErrorBoundary.vue

@@ -61,7 +61,7 @@ const handleError = (error: unknown) => {
     <template #error="{ error, clearError }">
       <slot name="error" :error :clear-error>
         <!-- Default error UI -->
-        <div class="rounded-lg border border-error bg-error/10 p-4">
+        <div class="rounded-lg border border-error bg-error/10 p-4 ">
           <div class="flex items-start gap-3">
             <!-- Error icon -->
             <span

package/layers/core/nuxt.config.ts

@@ -21,14 +21,6 @@ export default defineNuxtConfig({
 
   css: ['#layers/core/app/assets/css/main.css'],
 
-  plugins: [
-    '#layers/core/app/plugins/init.ts',
-    '#layers/core/app/plugins/error-handler.ts',
-    '#layers/core/app/plugins/feature-detection.client.ts',
-    '#layers/core/app/plugins/loading.client.ts',
-    '#layers/core/app/plugins/scroll-guard.client.ts',
-  ],
-
   devtools: {
     enabled: true,
 

package/layers/motion/app/plugins/locomotive-scroll.client.ts

@@ -45,19 +45,22 @@ export default defineNuxtPlugin(() => {
   }
 
   const router = useRouter()
+  const appConfig = useAppConfig() as any
+  const smoothScroll: boolean | string[] = appConfig.motion?.smoothScroll ?? true
 
-  const SMOOTH_SCROLL_ROUTES = ['/locomotive-scroll', '/layout-stacking', '/layout-blind-reveal']
-
-  addRouteMiddleware((to, from) => {
-    if (SMOOTH_SCROLL_ROUTES.includes(to.path)) {
-      nextTick(init)
-    } else if (from?.path && SMOOTH_SCROLL_ROUTES.includes(from.path)) {
-      destroy()
-    }
-  })
-
-  if (SMOOTH_SCROLL_ROUTES.includes(router.currentRoute.value.path)) {
+  if (smoothScroll === true) {
     init()
+  } else if (Array.isArray(smoothScroll)) {
+    addRouteMiddleware((to, from) => {
+      if (smoothScroll.includes(to.path)) {
+        nextTick(init)
+      } else if (from?.path && smoothScroll.includes(from.path)) {
+        destroy()
+      }
+    })
+    if (smoothScroll.includes(router.currentRoute.value.path)) {
+      init()
+    }
   }
 
   return {

package/layers/motion/app.config.ts

@@ -1,5 +1,11 @@
 export default defineAppConfig({
   motion: {
+    /**
+     * Enable smooth scroll globally (true), on specific routes (string[]), or disable (false).
+     * @default true
+     */
+    smoothScroll: true as boolean | string[],
+
     /**
      * Enable GSAP ScrollTrigger integration with Lenis
      * @default true

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

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

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

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

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

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { uniform, time, vec3, vec4, clamp, sin, floor, fract, float } from 'three/tsl'
+import { grain } from '../../shaders/common/grain'
+import { vignette } from '../../shaders/common/grain'
+import { luminance } from '../../shaders/common/blend'
+
+/**
+ * Preset: combines grain + warm tone shift + vignette + slight fade.
+ * A convenient one-stop aged film look.
+ */
+const props = withDefaults(defineProps<{
+  /** Overall intensity: 0 = no effect, 1 = full aged look */
+  intensity?: number
+  /** Grain strength */
+  grainStrength?: number
+  /** Vignette darkness */
+  vignetteStrength?: number
+  /** Warm shadow tint amount */
+  warmth?: number
+  order?: number
+}>(), { intensity: 1, grainStrength: 0.04, vignetteStrength: 0.5, warmth: 0.15, order: 0 })
+
+const intensityNode = uniform(props.intensity)
+const grainNode = uniform(props.grainStrength)
+const vigNode = uniform(props.vignetteStrength)
+const warmthNode = uniform(props.warmth)
+watch(() => props.intensity, v => { intensityNode.value = v })
+watch(() => props.grainStrength, v => { grainNode.value = v })
+watch(() => props.vignetteStrength, v => { vigNode.value = v })
+watch(() => props.warmth, v => { warmthNode.value = v })
+
+const pipeline = useShaderPipelineContext()
+
+useShaderStage(
+  (prev) => {
+    const uv = pipeline.uvNode.value
+    const t = time
+
+    // Film grain
+    const seed = floor(t.mul(24))
+    const g = grain(uv, grainNode, seed)
+
+    // Warm shadows: boost R and reduce B in dark areas
+    const lum = luminance(prev.xyz)
+    const shadowWarm = float(1).sub(lum).mul(warmthNode)
+    const warm = prev.xyz.add(vec3(shadowWarm, shadowWarm.mul(0.3), shadowWarm.negate()))
+
+    // Vignette
+    const vig = vignette(uv, vigNode, float(0.4))
+
+    // Slight overall fade (film desaturation/lift)
+    const faded = warm.mul(float(0.92)).add(float(0.04))
+
+    const result = clamp(faded.mul(vig).add(g), 0, 1)
+    return vec4(result.mix(prev.xyz, float(1).sub(intensityNode)), prev.w)
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { Color, Vector3 } from 'three'
+import { uniform, time, vec2, vec3, vec4, mix, sin, float, clamp } from 'three/tsl'
+import { fbm2D } from '../../shaders/common/noise'
+
+/**
+ * Aurora borealis — layered animated colour bands across the upper screen.
+ * Uses FBM noise to create organic ribbon-like curtains of light.
+ */
+const props = withDefaults(defineProps<{
+  /** Primary aurora colour */
+  colorA?: string
+  /** Secondary aurora colour */
+  colorB?: string
+  /** Vertical position of aurora band centre */
+  bandY?: number
+  /** Vertical band height */
+  bandHeight?: number
+  /** Animation speed */
+  speed?: number
+  /** Effect intensity */
+  intensity?: number
+  order?: number
+}>(), {
+  colorA: '#00ff88',
+  colorB: '#8844ff',
+  bandY: 0.7,
+  bandHeight: 0.3,
+  speed: 0.3,
+  intensity: 0.7,
+  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 bandYNode = uniform(props.bandY)
+const bandHNode = uniform(props.bandHeight)
+const speedNode = uniform(props.speed)
+const intensityNode = uniform(props.intensity)
+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.bandY, v => { bandYNode.value = v })
+watch(() => props.bandHeight, v => { bandHNode.value = v })
+watch(() => props.speed, v => { speedNode.value = v })
+watch(() => props.intensity, v => { intensityNode.value = v })
+
+const pipeline = useShaderPipelineContext()
+
+useShaderStage(
+  (prev) => {
+    const uv = pipeline.uvNode.value
+    const t = time.mul(speedNode)
+
+    // FBM-warped vertical position to create curtain ripple
+    const warpedX = uv.x.add(fbm2D(uv.mul(2).add(t)).mul(0.15))
+    // warpedX is a float (scalar) — must wrap in vec2 before passing to fbm2D
+    const n = fbm2D(vec2(warpedX, uv.y).mul(3).add(t.mul(0.5)))
+
+    // Vertical band mask — soft gaussian around bandY
+    const dy = uv.y.sub(bandYNode.add(n.mul(0.1)))
+    const bandMask = clamp(float(1).sub(dy.abs().div(bandHNode)), 0, 1)
+    bandMask.pow(2)
+
+    // Colour: mix A/B via second noise layer
+    const colourMix = fbm2D(uv.mul(1.5).add(t.mul(0.3).add(1.5))).mul(0.5).add(0.5)
+    const aurora = mix(colorANode, colorBNode, colourMix)
+
+    const contribution = aurora.mul(bandMask.pow(2)).mul(intensityNode)
+    return vec4(prev.xyz.add(contribution), prev.w)
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { Color, Vector3 } from 'three'
+import { uniform, vec4, mix } from 'three/tsl'
+
+const props = withDefaults(defineProps<{
+  /** Bottom-left corner colour */
+  bottomLeft?: string
+  /** Bottom-right corner colour */
+  bottomRight?: string
+  /** Top-left corner colour */
+  topLeft?: string
+  /** Top-right corner colour */
+  topRight?: string
+  order?: number
+}>(), { bottomLeft: '#000000', bottomRight: '#ff0000', topLeft: '#0000ff', topRight: '#ffffff', order: 0 })
+
+function toVec3Node(hex: string) {
+  const c = new Color(hex)
+  return uniform(new Vector3(c.r, c.g, c.b))
+}
+
+const blNode = toVec3Node(props.bottomLeft)
+const brNode = toVec3Node(props.bottomRight)
+const tlNode = toVec3Node(props.topLeft)
+const trNode = toVec3Node(props.topRight)
+watch(() => props.bottomLeft, v => { const c = new Color(v); blNode.value.set(c.r, c.g, c.b) })
+watch(() => props.bottomRight, v => { const c = new Color(v); brNode.value.set(c.r, c.g, c.b) })
+watch(() => props.topLeft, v => { const c = new Color(v); tlNode.value.set(c.r, c.g, c.b) })
+watch(() => props.topRight, v => { const c = new Color(v); trNode.value.set(c.r, c.g, c.b) })
+
+const pipeline = useShaderPipelineContext()
+
+useShaderStage(
+  () => {
+    const uvCurrent = pipeline.uvNode.value
+    const bottom = mix(blNode, brNode, uvCurrent.x)
+    const top = mix(tlNode, trNode, uvCurrent.x)
+    const colour = mix(bottom, top, uvCurrent.y)
+    return vec4(colour, 1.0)
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { Color, Vector3 } from 'three'
+import { uniform, time, vec4, mix, float } from 'three/tsl'
+import { turbulence2D } from '../../shaders/common/noise'
+
+/** Billow/turbulence noise — folded abs() of FBM, producing cloud-like forms. */
+const props = withDefaults(defineProps<{
+  colorA?: string
+  colorB?: string
+  scale?: number
+  speed?: number
+  order?: number
+}>(), { colorA: '#1a3a8a', colorB: '#ffffff', scale: 2, 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 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 n = turbulence2D(uv.mul(scaleNode).add(time.mul(speedNode)))
+    return vec4(mix(colorANode, colorBNode, n), float(1))
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { uniform, vec4 } from 'three/tsl'
+import { brightness, contrast } from '../../shaders/common/blend'
+
+const props = withDefaults(defineProps<{
+  /** Additive brightness offset: 0 = unchanged, positive = brighter */
+  brightness?: number
+  /** Contrast multiplier: 1 = unchanged, >1 = more contrast */
+  contrast?: number
+  order?: number
+}>(), { brightness: 0, contrast: 1, order: 0 })
+
+const brightnessNode = uniform(props.brightness)
+const contrastNode = uniform(props.contrast)
+watch(() => props.brightness, v => { brightnessNode.value = v })
+watch(() => props.contrast, v => { contrastNode.value = v })
+
+useShaderStage(
+  (prev) => vec4(brightness(contrast(prev.xyz, contrastNode), brightnessNode), prev.w),
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

package/layers/shader/app/components/Pipeline/CellularNoise.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 { voronoi2D } from '../../shaders/common/noise'
+
+const props = withDefaults(defineProps<{
+  colorA?: string
+  colorB?: string
+  scale?: number
+  speed?: number
+  order?: number
+}>(), { colorA: '#000033', colorB: '#ffffff', scale: 8, 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 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 { distance } = voronoi2D(uv.add(time.mul(speedNode)), scaleNode)
+    return vec4(mix(colorANode, colorBNode, distance.min(float(1))), float(1))
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { uniform, vec3, vec4, float } from 'three/tsl'
+
+/**
+ * Arbitrary RGB channel mixing matrix.
+ * Each output channel is a weighted sum of all three input channels.
+ * Identity: rr=1 gg=1 bb=1, all cross-terms = 0.
+ */
+const props = withDefaults(defineProps<{
+  /** R channel: [R contribution, G contribution, B contribution] */
+  rRow?: [number, number, number]
+  /** G channel: [R contribution, G contribution, B contribution] */
+  gRow?: [number, number, number]
+  /** B channel: [R contribution, G contribution, B contribution] */
+  bRow?: [number, number, number]
+  order?: number
+}>(), {
+  rRow: () => [1, 0, 0],
+  gRow: () => [0, 1, 0],
+  bRow: () => [0, 0, 1],
+  order: 0,
+})
+
+const rrNode = uniform(props.rRow[0]); const rgNode = uniform(props.rRow[1]); const rbNode = uniform(props.rRow[2])
+const grNode = uniform(props.gRow[0]); const ggNode = uniform(props.gRow[1]); const gbNode = uniform(props.gRow[2])
+const brNode = uniform(props.bRow[0]); const bgNode = uniform(props.bRow[1]); const bbNode = uniform(props.bRow[2])
+
+watch(() => props.rRow, ([r, g, b]) => { rrNode.value = r; rgNode.value = g; rbNode.value = b })
+watch(() => props.gRow, ([r, g, b]) => { grNode.value = r; ggNode.value = g; gbNode.value = b })
+watch(() => props.bRow, ([r, g, b]) => { brNode.value = r; bgNode.value = g; bbNode.value = b })
+
+useShaderStage(
+  (prev) => {
+    const r = prev.r.mul(rrNode).add(prev.g.mul(rgNode)).add(prev.b.mul(rbNode))
+    const g = prev.r.mul(grNode).add(prev.g.mul(ggNode)).add(prev.b.mul(gbNode))
+    const b = prev.r.mul(brNode).add(prev.g.mul(bgNode)).add(prev.b.mul(bbNode))
+    return vec4(vec3(r, g, b), prev.w)
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { uniform, time, vec4, float } from 'three/tsl'
+import { simplexNoise2D } from '../../shaders/common/noise'
+
+/**
+ * Noise-distorted Chebyshev box shape — the genuary22 pattern.
+ * Formula: 1 - max(abs(uv.x * scaleX * n), abs(uv.y * scaleY * n2))
+ * where n, n2 are two simplex noise octaves at different frequencies.
+ * Produces a noise-eroded cross/box silhouette. Outputs a float mask for CosinePalette.
+ */
+const props = withDefaults(defineProps<{
+  /** Horizontal scale of the box */
+  scaleX?: number
+  /** Vertical scale of the box */
+  scaleY?: number
+  /** Noise frequency for the first octave (X distortion) */
+  noiseFreq1?: number
+  /** Noise frequency for the second octave (Y distortion) */
+  noiseFreq2?: number
+  /** Animation speed */
+  speed?: number
+  order?: number
+}>(), { scaleX: 2, scaleY: 2, noiseFreq1: 1.5, noiseFreq2: 2.3, speed: 0.2, order: 0 })
+
+const scaleXNode = uniform(props.scaleX)
+const scaleYNode = uniform(props.scaleY)
+const freq1Node = uniform(props.noiseFreq1)
+const freq2Node = uniform(props.noiseFreq2)
+const speedNode = uniform(props.speed)
+watch(() => props.scaleX, v => { scaleXNode.value = v })
+watch(() => props.scaleY, v => { scaleYNode.value = v })
+watch(() => props.noiseFreq1, v => { freq1Node.value = v })
+watch(() => props.noiseFreq2, v => { freq2Node.value = v })
+watch(() => props.speed, v => { speedNode.value = v })
+
+const pipeline = useShaderPipelineContext()
+
+useShaderStage(
+  () => {
+    const uvCurrent = pipeline.uvNode.value
+    const centered = uvCurrent.sub(0.5)
+    const t = time.mul(speedNode)
+
+    const n = simplexNoise2D(centered.mul(freq1Node).add(t)).mul(0.5).add(0.5)
+    const n2 = simplexNoise2D(centered.mul(freq2Node).sub(t.mul(0.7))).mul(0.5).add(0.5)
+
+    const box = float(1).sub(
+      centered.x.mul(scaleXNode).mul(n).abs().max(
+        centered.y.mul(scaleYNode).mul(n2).abs()
+      )
+    ).max(float(0))
+
+    return vec4(box, box, box, float(1))
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { Color, Vector3 } from 'three'
+import { uniform, vec4, mix } from 'three/tsl'
+import { checker } from '../../shaders/common/shapes'
+
+const props = withDefaults(defineProps<{
+  /** First checker colour */
+  colorA?: string
+  /** Second checker colour */
+  colorB?: string
+  /** Number of checker tiles across each axis */
+  scale?: number
+  order?: number
+}>(), { colorA: '#ffffff', colorB: '#000000', scale: 10, 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)
+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 })
+
+const pipeline = useShaderPipelineContext()
+
+useShaderStage(
+  () => {
+    const uvCurrent = pipeline.uvNode.value
+    const t = checker(uvCurrent, scaleNode)
+    return vec4(mix(colorANode, colorBNode, t), 1.0)
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+// @ts-nocheck
+import { uniform, time, vec3, vec4, sin, float } from 'three/tsl'
+
+/**
+ * Chromatic aberration — RGB channel offset approximated without texture sampling.
+ * Shifts colour contribution along each channel using screen-position phase offsets.
+ */
+const props = withDefaults(defineProps<{
+  /** How far channels separate */
+  strength?: number
+  /** Boost aberration at screen edges */
+  edgeFalloff?: number
+  /** Animation speed for subtle drift */
+  speed?: number
+  order?: number
+}>(), { strength: 0.008, edgeFalloff: 1.5, speed: 0.2, order: 0 })
+
+const strengthNode = uniform(props.strength)
+const edgeNode = uniform(props.edgeFalloff)
+const speedNode = uniform(props.speed)
+watch(() => props.strength, v => { strengthNode.value = v })
+watch(() => props.edgeFalloff, v => { edgeNode.value = v })
+watch(() => props.speed, v => { speedNode.value = v })
+
+const pipeline = useShaderPipelineContext()
+
+useShaderStage(
+  (prev) => {
+    const uv = pipeline.uvNode.value
+    const t = time.mul(speedNode)
+
+    // Edge mask: stronger near screen corners
+    const fromCenter = uv.sub(0.5).length().mul(edgeNode)
+
+    // Phase offsets per channel — small sinusoidal drift over time
+    const drift = sin(t).mul(0.002)
+    const rShift = strengthNode.add(drift)
+    const bShift = strengthNode.negate().sub(drift)
+
+    // Approximate channel shift: modulate the colour channels by phase-offset luminance
+    const rContrib = prev.x.mul(float(1).add(rShift.mul(fromCenter)))
+    const gContrib = prev.y
+    const bContrib = prev.z.mul(float(1).add(bShift.mul(fromCenter)))
+
+    return vec4(vec3(rContrib, gContrib, bContrib), prev.w)
+  },
+  props.order,
+)
+</script>
+
+<template><!-- --></template>

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>