kmcom-nuxt-layers 1.3.1 → 1.5.0

package/layers/shader/app/components/Preset/ThemePlasma.client.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+// @ts-nocheck - TSL types
+import {
+  createAmbientUniforms,
+  createThemePlasmaColorNode,
+} from '#layers/shader/app/composables/useAmbientMaterials'
+
+const props = withDefaults(
+  defineProps<{
+    speed?: number
+    intensity?: number
+    mouseInteraction?: boolean
+    mouseStrength?: number
+    color1?: string
+    color2?: string
+    color3?: string
+    color4?: string
+  }>(),
+  {
+    speed: 1.0,
+    intensity: 1.0,
+    mouseInteraction: true,
+    mouseStrength: 0.3,
+    color1: '#8b5cf6',
+    color2: '#6366f1',
+    color3: '#a78bfa',
+    color4: '#38bdf8',
+  }
+)
+
+const emit = defineEmits<{
+  node: [colorNode: any]
+}>()
+
+const uniforms = createAmbientUniforms({
+  speed: props.speed,
+  intensity: props.intensity,
+  mouseInteraction: props.mouseInteraction,
+})
+if (props.mouseInteraction) {
+  uniforms.mouseStrength.value = props.mouseStrength
+}
+
+const c1 = useShaderColor(props.color1)
+const c2 = useShaderColor(props.color2)
+const c3 = useShaderColor(props.color3)
+const c4 = useShaderColor(props.color4)
+
+const colorNode = createThemePlasmaColorNode(uniforms, {
+  color1: c1.node,
+  color2: c2.node,
+  color3: c3.node,
+  color4: c4.node,
+})
+
+watch(() => props.color1, (hex) => c1.tweenTo(hex, 0.8))
+watch(() => props.color2, (hex) => c2.tweenTo(hex, 0.8))
+watch(() => props.color3, (hex) => c3.tweenTo(hex, 0.8))
+watch(() => props.color4, (hex) => c4.tweenTo(hex, 0.8))
+
+try {
+  const runtime = useShaderRuntimeContext()
+  watch(
+    () => [runtime.mouse.mouseX.value, runtime.mouse.mouseY.value],
+    ([mx, my]) => {
+      uniforms.mouseX.value = mx
+      uniforms.mouseY.value = my
+    },
+    { immediate: true }
+  )
+} catch {
+  // No runtime context
+}
+
+watch(() => props.speed,            (v) => { uniforms.speed.value = v })
+watch(() => props.intensity,        (v) => { uniforms.intensity.value = v })
+watch(() => props.mouseInteraction, (v) => { uniforms.mouseStrength.value = v ? props.mouseStrength : 0 })
+watch(() => props.mouseStrength,    (v) => { if (props.mouseInteraction) uniforms.mouseStrength.value = v })
+
+emit('node', colorNode)
+defineExpose({ uniforms, colorNode })
+</script>
+
+<template>
+  <slot />
+</template>

package/layers/shader/app/components/Preset/ThemeWave.client.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+// @ts-nocheck - TSL types
+import {
+  createAmbientUniforms,
+  createThemeWaveColorNode,
+} from '#layers/shader/app/composables/useAmbientMaterials'
+
+const props = withDefaults(
+  defineProps<{
+    speed?: number
+    intensity?: number
+    mouseInteraction?: boolean
+    mouseStrength?: number
+    color1?: string
+    color2?: string
+    color3?: string
+    color4?: string
+  }>(),
+  {
+    speed: 1.0,
+    intensity: 1.0,
+    mouseInteraction: true,
+    mouseStrength: 0.3,
+    color1: '#8b5cf6',
+    color2: '#6366f1',
+    color3: '#a78bfa',
+    color4: '#38bdf8',
+  }
+)
+
+const emit = defineEmits<{
+  node: [colorNode: any]
+}>()
+
+const uniforms = createAmbientUniforms({
+  speed: props.speed,
+  intensity: props.intensity,
+  mouseInteraction: props.mouseInteraction,
+})
+if (props.mouseInteraction) {
+  uniforms.mouseStrength.value = props.mouseStrength
+}
+
+const c1 = useShaderColor(props.color1)
+const c2 = useShaderColor(props.color2)
+const c3 = useShaderColor(props.color3)
+const c4 = useShaderColor(props.color4)
+
+const colorNode = createThemeWaveColorNode(uniforms, {
+  color1: c1.node,
+  color2: c2.node,
+  color3: c3.node,
+  color4: c4.node,
+})
+
+watch(() => props.color1, (hex) => c1.tweenTo(hex, 0.8))
+watch(() => props.color2, (hex) => c2.tweenTo(hex, 0.8))
+watch(() => props.color3, (hex) => c3.tweenTo(hex, 0.8))
+watch(() => props.color4, (hex) => c4.tweenTo(hex, 0.8))
+
+try {
+  const runtime = useShaderRuntimeContext()
+  watch(
+    () => [runtime.mouse.mouseX.value, runtime.mouse.mouseY.value],
+    ([mx, my]) => {
+      uniforms.mouseX.value = mx
+      uniforms.mouseY.value = my
+    },
+    { immediate: true }
+  )
+} catch {
+  // No runtime context
+}
+
+watch(() => props.speed,            (v) => { uniforms.speed.value = v })
+watch(() => props.intensity,        (v) => { uniforms.intensity.value = v })
+watch(() => props.mouseInteraction, (v) => { uniforms.mouseStrength.value = v ? props.mouseStrength : 0 })
+watch(() => props.mouseStrength,    (v) => { if (props.mouseInteraction) uniforms.mouseStrength.value = v })
+
+emit('node', colorNode)
+defineExpose({ uniforms, colorNode })
+</script>
+
+<template>
+  <slot />
+</template>

package/layers/shader/app/components/Shader/Background.client.vue

@@ -118,6 +118,12 @@ async function init() {
   planeMesh = new Mesh(geometry, props.material ?? new MeshBasicMaterial({ color: 0x000000 }))
   scene.add(planeMesh)
 
+  // Pre-compile the shader pipeline asynchronously before starting the render loop.
+  // Without this, the first render() call uses device.createRenderPipeline() which
+  // blocks the main thread for 1-5s on first visit (cold WebGPU pipeline cache).
+  // compileAsync() uses device.createRenderPipelineAsync() instead, which is non-blocking.
+  await renderer.compileAsync(scene, camera)
+
   initialized = true
   emit('ready', renderer)
   animate()
@@ -132,6 +138,15 @@ watch(
   }
 )
 
+watch(
+  () => props.clearColor,
+  (color) => {
+    if (renderer && initialized) {
+      renderer.setClearColor(new Color(color))
+    }
+  }
+)
+
 watch([width, height], ([w, h]) => {
   if (!initialized) return
   camera.aspect = w / (h || 1)

package/layers/shader/app/composables/useAmbientMaterials.ts

@@ -10,6 +10,7 @@ import {
   mix,
   mul,
   pow,
+  sign,
   sin,
   smoothstep,
   sub,
@@ -22,6 +23,7 @@ import {
 import { MeshBasicNodeMaterial } from 'three/webgpu'
 import {
   simplexNoise2D,
+  simplexNoise3d,
   fbm2D,
   fbm3dSimplex,
   ridgedFbm2d,
@@ -277,6 +279,310 @@ export function createGradientMeshColorNode(uniforms: AmbientUniforms): any {
   })()
 }
 
+export interface ThemeColorUniforms {
+  color1: any   // TSL uniform node wrapping a THREE.Color
+  color2: any
+  color3: any
+  color4: any
+}
+
+export function createThemeGradientColorNode(
+  uniforms: AmbientUniforms,
+  colors: ThemeColorUniforms,
+): any {
+  const { speed: uSpeed, intensity: uIntensity,
+          mouseX: uMouseX, mouseY: uMouseY, mouseStrength: uMouseStrength } = uniforms
+
+  return Fn(() => {
+    const t = mul(time, uSpeed, 0.2)
+    const uvCoord = uv()
+
+    // Gentle UV shift for p2-p4 area
+    const mouseOffset = vec2(
+      mul(sub(uMouseX, 0.5), uMouseStrength, 0.05),
+      mul(sub(uMouseY, 0.5), uMouseStrength, 0.05),
+    )
+    const adjustedUV = add(uvCoord, mouseOffset)
+
+    // p1 attracted toward mouse cursor
+    const p1Base = vec2(add(0.2, mul(sin(mul(t, 0.5)), 0.15)), add(0.3, mul(sin(add(mul(t, 0.4), 1.57)), 0.15)))
+    const mousePos = vec2(uMouseX, uMouseY)
+    const p1 = mix(p1Base, mousePos, mul(uMouseStrength, 0.5))
+
+    const p2 = vec2(add(0.8, mul(sin(add(mul(t, 0.6), 1.57)), 0.1)), add(0.2, mul(sin(mul(t, 0.5)), 0.1)))
+    const p3 = vec2(add(0.3, mul(sin(mul(t, 0.7)), 0.15)),           add(0.8, mul(sin(add(mul(t, 0.3), 1.57)), 0.1)))
+    const p4 = vec2(add(0.7, mul(sin(add(mul(t, 0.4), 1.57)), 0.15)), add(0.7, mul(sin(mul(t, 0.6)), 0.15)))
+
+    const nm1 = simplexNoise2D(add(mul(adjustedUV, 3.0), mul(t, 0.3))).mul(0.5).add(0.5)
+    const nm2 = simplexNoise2D(add(mul(adjustedUV, 4.5), mul(t, -0.2), 8.0)).mul(0.5).add(0.5)
+    const nm3 = fbm2D(add(adjustedUV, mul(t, 0.1)), { octaves: 3, frequency: 2.0 }).mul(0.5).add(0.5)
+    const nm4 = simplexNoise2D(add(mul(adjustedUV, 7.0), mul(t, 0.5))).mul(0.5).add(0.5)
+
+    const d1 = mul(sub(1.0, smoothstep(0.0, 0.7, length(sub(adjustedUV, p1)))), add(0.7, mul(nm1, 0.3)))
+    const d2 = mul(sub(1.0, smoothstep(0.0, 0.7, length(sub(adjustedUV, p2)))), add(0.7, mul(nm2, 0.3)))
+    const d3 = mul(sub(1.0, smoothstep(0.0, 0.7, length(sub(adjustedUV, p3)))), add(0.7, mul(nm3, 0.3)))
+    const d4 = mul(sub(1.0, smoothstep(0.0, 0.7, length(sub(adjustedUV, p4)))), add(0.7, mul(nm4, 0.3)))
+
+    let colorNode = mul(colors.color1, d1)
+    colorNode = add(colorNode, mul(colors.color2, d2))
+    colorNode = add(colorNode, mul(colors.color3, d3))
+    colorNode = add(colorNode, mul(colors.color4, d4))
+
+    // Normalise first, then vignette, then intensity
+    const totalWeight = add(d1, d2, d3, d4, 0.01)
+    colorNode = colorNode.div(totalWeight)
+
+    const dist = length(sub(uvCoord, 0.5))
+    colorNode = mul(colorNode, sub(1.0, mul(dist, 0.25)))
+    colorNode = mul(colorNode, uIntensity)
+
+    return colorNode
+  })()
+}
+
+export function createThemeFlowColorNode(
+  uniforms: AmbientUniforms,
+  colors: ThemeColorUniforms,
+): any {
+  const { speed: uSpeed, intensity: uIntensity, mouseX: uMouseX, mouseY: uMouseY, mouseStrength: uMouseStrength } = uniforms
+
+  return Fn(() => {
+    const t = mul(time, uSpeed, 0.15)
+    const uvCoord = uv()
+
+    const mouseOffset = vec2(
+      mul(sub(uMouseX, 0.5), uMouseStrength, 0.3),
+      mul(sub(uMouseY, 0.5), uMouseStrength, 0.3),
+    )
+
+    const warpCoarse1 = simplexNoise2D(add(mul(uvCoord, 1.5), t))
+    const warpCoarse2 = simplexNoise2D(add(mul(uvCoord, 1.5), mul(t, -0.5), 7.0))
+    const warpedUV1 = add(uvCoord, mul(vec2(warpCoarse1, warpCoarse2), 0.25), mouseOffset)
+
+    const warpMed1 = simplexNoise2D(add(mul(warpedUV1, 3.0), mul(t, 0.7)))
+    const warpMed2 = simplexNoise2D(add(mul(warpedUV1, 3.0), mul(t, -0.3), 15.0))
+    const warpedUV2 = add(warpedUV1, mul(vec2(warpMed1, warpMed2), 0.12))
+
+    const warpFine1 = simplexNoise2D(add(mul(warpedUV2, 5.0), mul(t, 1.2)))
+    const warpFine2 = simplexNoise2D(add(mul(warpedUV2, 5.0), mul(t, -0.8), 25.0))
+    const warpedUV = add(warpedUV2, mul(vec2(warpFine1, warpFine2), 0.05))
+
+    const n1 = fbm2D(warpedUV, { octaves: 5, frequency: 2.0 }).mul(0.5).add(0.5)
+    const n2 = ridgedFbm2d(warpedUV, { octaves: 4, frequency: 1.5 })
+
+    let colorNode = mix(colors.color1, colors.color2, n1)
+    colorNode = mix(colorNode, colors.color3, mul(n2, 0.5))
+
+    const iridescence = mix(colors.color3, colors.color4, add(mul(n1, 0.6), mul(n2, 0.4)))
+    colorNode = mix(colorNode, iridescence, 0.3)
+    colorNode = mix(colorNode, colors.color4, mul(smoothstep(0.6, 0.9, n2), 0.25))
+
+    const brightness = add(0.85, mul(0.15, sin(add(mul(n1, 6.28), t))))
+    colorNode = mul(colorNode, brightness, uIntensity)
+
+    const dist = length(sub(uvCoord, 0.5))
+    colorNode = mul(colorNode, sub(1.0, mul(dist, 0.3)))
+
+    return colorNode
+  })()
+}
+
+export function createThemeAuroraColorNode(
+  uniforms: AmbientUniforms,
+  colors: ThemeColorUniforms,
+): any {
+  const { speed: uSpeed, intensity: uIntensity, mouseX: uMouseX, mouseY: uMouseY, mouseStrength: uMouseStrength } = uniforms
+
+  return Fn(() => {
+    const t = mul(time, uSpeed, 0.2)
+    const uvCoord = uv()
+
+    const mouseOffset = vec2(
+      mul(sub(uMouseX, 0.5), uMouseStrength),
+      mul(sub(uMouseY, 0.5), uMouseStrength),
+    )
+
+    const curtainCoord = add(
+      vec2(mul(uvCoord.x, 3.0), mul(uvCoord.y, 0.5)),
+      vec2(t, mul(t, 0.3)),
+      mouseOffset,
+    )
+
+    const curtain1 = simplexNoise2D(curtainCoord).mul(0.5).add(0.5)
+    const curtain2 = simplexNoise2D(add(mul(curtainCoord, 1.5), vec2(mul(t, -0.2), 5.0))).mul(0.5).add(0.5)
+    const curtain3 = simplexNoise2D(add(mul(curtainCoord, 0.7), vec2(mul(t, 0.4), 12.0))).mul(0.5).add(0.5)
+    const detail = fbm2D(curtainCoord, { octaves: 4, frequency: 2.0 }).mul(0.5).add(0.5)
+    const curtain = mul(add(mul(curtain1, 0.4), mul(curtain2, 0.25), mul(curtain3, 0.2), mul(detail, 0.15)), 1.0)
+
+    const fade = mul(pow(sub(1.0, uvCoord.y), 1.2), smoothstep(0.0, 0.3, uvCoord.y))
+    const aurora = mul(smoothstep(0.2, 0.8, mul(curtain, fade)), uIntensity)
+
+    const shimmer = simplexNoise2D(add(mul(curtainCoord, 8.0), mul(t, 3.0))).mul(0.5).add(0.5)
+
+    const colorDriver = add(mul(curtain2, 0.6), mul(curtain3, 0.4))
+    const auroraColor = mix(colors.color1, colors.color2, colorDriver)
+
+    const skyColor = mul(colors.color1, 0.04)
+    const shimmerColor = mul(colors.color3, mul(shimmer, mul(aurora, 0.15)))
+
+    return add(mix(skyColor, auroraColor, aurora), shimmerColor)
+  })()
+}
+
+export function createThemeWaveColorNode(
+  uniforms: AmbientUniforms,
+  colors: ThemeColorUniforms,
+): any {
+  const { speed: uSpeed, intensity: uIntensity, mouseX: uMouseX, mouseY: uMouseY, mouseStrength: uMouseStrength } = uniforms
+
+  return Fn(() => {
+    const t = mul(time, uSpeed, 0.1)
+    const mouseOff = vec2(
+      mul(sub(uMouseX, 0.5), uMouseStrength),
+      mul(sub(uMouseY, 0.5), uMouseStrength),
+    )
+    const uvCoord = add(sub(uv(), 0.5), mouseOff)
+
+    // Noise-driven rotation
+    const degree = simplexNoise2D(vec2(t, uvCoord.x.mul(uvCoord.y))).mul(0.5).add(0.5)
+    const angle = degree.sub(0.5).mul(720.0 * Math.PI / 180.0).add(Math.PI)
+    const cosA = angle.cos()
+    const sinA = angle.sin()
+    const rx = uvCoord.x.mul(cosA).sub(uvCoord.y.mul(sinA))
+    const ry = uvCoord.x.mul(sinA).add(uvCoord.y.mul(cosA))
+
+    // Wave warp (order matters: warped x feeds into y)
+    const waveSpeed = mul(time, uSpeed, 2.0)
+    const wx = rx.add(sin(ry.mul(5.0).add(waveSpeed)).div(30.0))
+    const wy = ry.add(sin(wx.mul(7.5).add(waveSpeed)).div(15.0))
+
+    // -5° rotation for layer blend
+    const COS5 = Math.cos(-5 * Math.PI / 180)
+    const SIN5 = Math.sin(-5 * Math.PI / 180)
+    const rotated5x = wx.mul(COS5).sub(wy.mul(SIN5))
+
+    const layer1 = mix(colors.color1, colors.color2, smoothstep(-0.3, 0.2, rotated5x))
+    const layer2 = mix(colors.color3, colors.color4, smoothstep(-0.3, 0.2, rotated5x))
+
+    return mix(layer1, layer2, smoothstep(0.5, -0.3, wy)).mul(uIntensity)
+  })()
+}
+
+export function createThemeLavaLampColorNode(
+  uniforms: AmbientUniforms,
+  colors: ThemeColorUniforms,
+): any {
+  const { speed: uSpeed, intensity: uIntensity, mouseX: uMouseX, mouseY: uMouseY, mouseStrength: uMouseStrength } = uniforms
+
+  return Fn(() => {
+    const t = mul(time, uSpeed, 0.2)
+    const mouseOff = vec2(
+      mul(sub(uMouseX, 0.5), uMouseStrength),
+      mul(sub(uMouseY, 0.5), uMouseStrength),
+    )
+    const uvCoord = add(sub(uv(), 0.5), mouseOff)
+
+    // 4 blobs anchored to quadrants, oscillation wide enough to cross center and intersect
+    const b1 = vec2(sin(mul(t, 0.9)).mul(0.22).sub(0.20), sin(mul(t, 0.7)).mul(0.22).sub(0.18))
+    const b2 = vec2(sin(mul(t, 0.8).add(2.1)).mul(0.22).add(0.20), sin(mul(t, 1.0).add(1.5)).mul(0.22).sub(0.18))
+    const b3 = vec2(sin(mul(t, 0.6).add(4.2)).mul(0.22).sub(0.20), sin(mul(t, 0.9).add(3.1)).mul(0.22).add(0.18))
+    const b4 = vec2(sin(mul(t, 1.1).add(1.0)).mul(0.22).add(0.20), sin(mul(t, 0.5).add(2.8)).mul(0.22).add(0.18))
+
+    // Per-blob breathing k: oscillates between -3.5 (large) and -6.5 (tight)
+    const k1 = sin(mul(t, 0.4)).mul(1.5).sub(5.0)
+    const k2 = sin(add(mul(t, 0.35), 2.1)).mul(1.5).sub(5.0)
+    const k3 = sin(add(mul(t, 0.45), 4.2)).mul(1.5).sub(5.0)
+    const k4 = sin(add(mul(t, 0.3), 1.0)).mul(1.5).sub(5.0)
+
+    const w1 = exp(length(sub(uvCoord, b1)).mul(k1))
+    const w2 = exp(length(sub(uvCoord, b2)).mul(k2))
+    const w3 = exp(length(sub(uvCoord, b3)).mul(k3))
+    const w4 = exp(length(sub(uvCoord, b4)).mul(k4))
+    const wTotal = add(w1, w2, w3, w4)
+
+    // Weighted colour blend
+    const colorNode = add(
+      mul(colors.color1, w1),
+      mul(colors.color2, w2),
+      mul(colors.color3, w3),
+      mul(colors.color4, w4),
+    ).div(wTotal.add(0.001))
+
+    // Darken space between blobs
+    const blobStrength = smoothstep(0.05, 0.9, wTotal)
+    const bg = mul(mix(colors.color1, colors.color2, 0.3), 0.15)
+    return mix(bg, colorNode, blobStrength).mul(uIntensity)
+  })()
+}
+
+export function createThemeBubbleColorNode(
+  uniforms: AmbientUniforms,
+  colors: ThemeColorUniforms,
+): any {
+  const { speed: uSpeed, intensity: uIntensity, mouseX: uMouseX, mouseY: uMouseY, mouseStrength: uMouseStrength } = uniforms
+
+  return Fn(() => {
+    const t = mul(time, uSpeed, 0.06)
+    const mouseOff = vec2(
+      mul(sub(uMouseX, 0.5), uMouseStrength),
+      mul(sub(uMouseY, 0.5), uMouseStrength),
+    )
+    const uvCoord = add(uv(), mouseOff)
+
+    const n1 = simplexNoise3d(vec3(uvCoord.x.mul(1.5), uvCoord.y.mul(1.5), t)).mul(0.5).add(0.5)
+    const n2 = simplexNoise3d(vec3(
+      uvCoord.x.mul(2.5).add(1.3), uvCoord.y.mul(2.5).add(0.7), t.mul(0.8),
+    )).mul(0.5).add(0.5)
+
+    const blend1 = mix(colors.color1, colors.color2, smoothstep(0.3, 0.7, n1))
+    const blend2 = mix(colors.color3, colors.color4, smoothstep(0.3, 0.7, n2))
+    return mix(blend1, blend2, smoothstep(0.35, 0.65, n2)).mul(uIntensity)
+  })()
+}
+
+export function createThemePlasmaColorNode(
+  uniforms: AmbientUniforms,
+  colors: ThemeColorUniforms,
+): any {
+  const { speed: uSpeed, intensity: uIntensity, mouseX: uMouseX, mouseY: uMouseY, mouseStrength: uMouseStrength } = uniforms
+
+  return Fn(() => {
+    const t = mul(time, uSpeed, 0.03)
+    const mouseOff = vec2(
+      mul(sub(uMouseX, 0.5), uMouseStrength, 0.2),
+      mul(sub(uMouseY, 0.5), uMouseStrength, 0.2),
+    )
+    const uvMut = add(sub(uv(), 0.5).mul(1.2), mouseOff).toVar()
+
+    const h = simplexNoise3d(vec3(uvMut.x.mul(2.0), uvMut.y.mul(2.0), t)).toVar()
+
+    // Unrolled distortion loop (n = 1..4)
+    for (let n = 1; n < 5; n++) {
+      const i = float(n)
+      uvMut.subAssign(vec2(
+        float(0.7).div(i).mul(sin(i.mul(uvMut.y).add(i).add(t.mul(1.5)).add(h.mul(i)))),
+        float(0.4).div(i).mul(sin(uvMut.x.add(4.0).sub(i).add(h).add(t.mul(1.5)).add(i.mul(0.3)))),
+      ))
+    }
+
+    // Final UV shift
+    uvMut.subAssign(vec2(
+      float(1.2).mul(sin(uvMut.x.add(t).add(h))),
+      float(0.4).mul(sin(uvMut.y.add(t).add(h.mul(0.3)))),
+    ))
+
+    const cx = sin(uvMut.x.mul(2.0)).mul(0.5).add(0.5)
+    const cxy = sin(uvMut.x.add(uvMut.y).mul(1.5)).mul(0.5).add(0.5)
+    const cy = sin(uvMut.y.mul(2.0)).mul(0.5).add(0.5)
+
+    const t12 = mix(colors.color1, colors.color2, cx)
+    const t34 = mix(colors.color3, colors.color4, cy)
+    const vivid = mix(t12, t34, cxy)
+    // Mix against near-black base so black/gray reads through between colour bands
+    return mix(vec3(0.03, 0.03, 0.03), vivid, float(0.65)).mul(uIntensity)
+  })()
+}
+
 export function createOceanColorNode(uniforms: AmbientUniforms): any {
   const { speed: uSpeed, intensity: uIntensity, mouseX: uMouseX, mouseY: uMouseY, mouseStrength: uMouseStrength } = uniforms
 

package/layers/shader/app/composables/useThemeColors.ts

@@ -0,0 +1,52 @@
+import { parseOKLCH, oklchToColor } from '../utils/tsl/oklch'
+
+export function useThemeColors() {
+  const { activeAccent } = useAccentColor()
+  const colorMode = useColorMode()
+
+  const primaryHex = ref('#8b5cf6')
+  const secondaryHex = ref('#6366f1')
+  const infoHex = ref('#38bdf8')
+  const primaryLightHex = ref('#a78bfa')
+
+  const clearColor = computed(() =>
+    colorMode.value === 'dark' ? '#0a0a0a' : '#f8f8f8'
+  )
+
+  function cssVarToHex(varName: string): string {
+    const raw = getComputedStyle(document.documentElement)
+      .getPropertyValue(varName).trim()
+    try {
+      const [l, c, h] = parseOKLCH(raw)
+      return `#${oklchToColor(l, c, h).getHexString()}`
+    } catch {
+      return '#888888'
+    }
+  }
+
+  function applyColors() {
+    const isDark = colorMode.value === 'dark'
+    const primary = cssVarToHex('--ui-color-primary-500')
+    // CSS vars not ready yet (returns fallback) — retry next frame
+    if (primary === '#888888') {
+      requestAnimationFrame(applyColors)
+      return
+    }
+    primaryHex.value      = primary
+    secondaryHex.value    = isDark ? cssVarToHex('--ui-color-neutral-700')   : cssVarToHex('--ui-color-secondary-500')
+    primaryLightHex.value = isDark ? cssVarToHex('--ui-color-neutral-900')   : cssVarToHex('--ui-color-primary-300')
+    infoHex.value         = isDark ? cssVarToHex('--ui-color-secondary-500') : cssVarToHex('--ui-color-neutral-300')
+  }
+
+  function refresh() {
+    nextTick(applyColors)
+  }
+
+  if (import.meta.client) {
+    watch(activeAccent, refresh, { immediate: true })
+    watch(() => colorMode.value, refresh)
+    onMounted(applyColors)
+  }
+
+  return { primaryHex, secondaryHex, infoHex, primaryLightHex, clearColor, refresh }
+}

package/layers/shader/app/utils/tsl/oklch.ts

@@ -23,15 +23,21 @@ export function oklchToLinearSRGB(l: TSLNode, c: TSLNode, h: TSLNode): TSLNode {
   // OKLab -> linear sRGB (approximate matrix transform)
   const l_ = l.add(mul(a, float(0.3963377774))).add(mul(b, float(0.2158037573)))
   const m_ = l.sub(mul(a, float(0.1055613458))).sub(mul(b, float(0.0638541728)))
-  const s_ = l.sub(mul(a, float(0.0894841775))).sub(mul(b, float(1.2914855480)))
+  const s_ = l.sub(mul(a, float(0.0894841775))).sub(mul(b, float(1.291485548)))
 
   const lCubed = pow(l_, 3)
   const mCubed = pow(m_, 3)
   const sCubed = pow(s_, 3)
 
-  const r = mul(lCubed, float(4.0767416621)).sub(mul(mCubed, float(3.3077115913))).add(mul(sCubed, float(0.2309699292)))
-  const g = mul(lCubed, float(-1.2684380046)).add(mul(mCubed, float(2.6097574011))).sub(mul(sCubed, float(0.3413193965)))
-  const bOut = mul(lCubed, float(-0.0041960863)).sub(mul(mCubed, float(0.7034186147))).add(mul(sCubed, float(1.7076147010)))
+  const r = mul(lCubed, float(4.0767416621))
+    .sub(mul(mCubed, float(3.3077115913)))
+    .add(mul(sCubed, float(0.2309699292)))
+  const g = mul(lCubed, float(-1.2684380046))
+    .add(mul(mCubed, float(2.6097574011)))
+    .sub(mul(sCubed, float(0.3413193965)))
+  const bOut = mul(lCubed, float(-0.0041960863))
+    .sub(mul(mCubed, float(0.7034186147)))
+    .add(mul(sCubed, float(1.707614701)))
 
   return vec3(r, g, bOut)
 }
@@ -70,7 +76,7 @@ export function oklchToColor(l: number, c: number, h: number): Color {
   // OKLab to linear sRGB (approximate)
   const l_ = l + a * 0.3963377774 + b * 0.2158037573
   const m_ = l - a * 0.1055613458 - b * 0.0638541728
-  const s_ = l - a * 0.0894841775 - b * 1.2914855480
+  const s_ = l - a * 0.0894841775 - b * 1.291485548
 
   const lCubed = l_ * l_ * l_
   const mCubed = m_ * m_ * m_
@@ -78,7 +84,7 @@ export function oklchToColor(l: number, c: number, h: number): Color {
 
   const r = lCubed * 4.0767416621 - mCubed * 3.3077115913 + sCubed * 0.2309699292
   const g = lCubed * -1.2684380046 + mCubed * 2.6097574011 - sCubed * 0.3413193965
-  const bOut = lCubed * -0.0041960863 - mCubed * 0.7034186147 + sCubed * 1.7076147010
+  const bOut = lCubed * -0.0041960863 - mCubed * 0.7034186147 + sCubed * 1.707614701
 
   // Clamp to [0,1]
   const color = new Color()

package/layers/theme/app/assets/css/theme.css

@@ -1,47 +1,52 @@
 /*
  * Theme Layer CSS
  *
- * Accent colors are handled via appConfig.ui.colors.primary at runtime.
- * The [data-theme] attribute provides a CSS hook for custom styling.
- * Preference classes are applied to <html> by useThemePreferences.
+ * Accessibility attributes are applied to <html> by the individual composables.
+ * The dark mode @custom-variant lives in core/main.css so it is defined in the
+ * same Tailwind pass as all utility generation (avoids HMR regeneration shift).
  */
 
 /* --- Reduced Motion --- */
-.reduce-motion *,
-.reduce-motion *::before,
-.reduce-motion *::after {
+[data-theme-motion="reduced"] *,
+[data-theme-motion="reduced"] *::before,
+[data-theme-motion="reduced"] *::after {
   animation-duration: 0.01ms !important;
   animation-iteration-count: 1 !important;
   transition-duration: 0.01ms !important;
   scroll-behavior: auto !important;
 }
 
+[data-theme-motion="reduced"] {
+  --duration-base: 0ms;
+}
+
 /* --- Reduced Transparency --- */
-/* Replace semi-transparent backgrounds with solid equivalents */
-.reduce-transparency {
+[data-theme-transparency="reduced"] {
   --ui-bg-elevated: var(--ui-bg);
+  --opacity-glass: 1;
+  --backdrop-blur: 0px;
 }
 
-.reduce-transparency :where([class*='backdrop-blur']) {
+[data-theme-transparency="reduced"] :where([class*='backdrop-blur']) {
   backdrop-filter: none !important;
   -webkit-backdrop-filter: none !important;
 }
 
-.reduce-transparency :where([class*='bg-default/'], [class*='bg-elevated/']) {
+[data-theme-transparency="reduced"] :where([class*='bg-default/'], [class*='bg-elevated/']) {
   background-color: var(--ui-bg-elevated) !important;
 }
 
 /* --- High Contrast --- */
-.high-contrast {
+[data-theme-contrast="high"] {
   --ui-border: var(--ui-border-accented);
 }
 
-.high-contrast :where(button, a, [role='button']) {
+[data-theme-contrast="high"] :where(button, a, [role='button']) {
   outline-width: 2px;
 }
 
-.high-contrast .text-muted,
-.high-contrast .text-dimmed {
+[data-theme-contrast="high"] .text-muted,
+[data-theme-contrast="high"] .text-dimmed {
   opacity: 1;
   filter: contrast(1.25);
 }