kmcom-nuxt-layers 1.0.1

package/layers/shader/additional-modular-tsl-shaders-for-claude/src/tsl/utils/sdf/shapes.js

@@ -0,0 +1,182 @@
+import {
+  Fn,
+  length,
+  min,
+  max,
+  abs,
+  vec2,
+  sqrt,
+  sign,
+  float,
+  dot,
+  vec3,
+  If,
+  clamp,
+  select,
+  mul,
+  sub,
+  add,
+} from 'three/tsl'
+
+/**
+ * Returns a sphere SDF based on a given uv and radius.
+ * @param {Array} _uv - The UV coordinates (vec2).
+ * @param {number} [r=0.0] - The radius of the sphere.
+ * @returns {number} The signed distance from the sphere surface.
+ */
+export const sdSphere = Fn(([_uv, r = float(0.0)]) => {
+  const _r = float(r)
+  return length(_uv).sub(_r)
+})
+
+/**
+ * Returns a 2d box SDF based on a given uv and size.
+ * @param {vec2} _uv - The UV coordinates (vec2).
+ * @param {number} [_size=0.0] - The half-size (extent) of the box along each axis.
+ * @returns {number} The signed distance from the box surface.
+ */
+export const sdBox2d = Fn(([_uv, _size = float(0.0)]) => {
+  return max(abs(_uv.x), abs(_uv.y)).sub(_size)
+})
+
+/**
+ * Returns a 2d box SDF based on a given uv and size.
+ * @param {vec2} _uv - The UV coordinates (vec2).
+ * @param {vec3} [_size=0.0] - The half-size (extent) of the box along each axis.
+ * @returns {number} The signed distance from the box surface.
+ */
+export const sdBox3d = Fn(([p, b = vec3(0)]) => {
+  const q = abs(p).sub(b)
+  return length(max(q, 0.0)).add(min(max(q.x, max(q.y, q.z)), 0.0))
+})
+
+/**
+ * Returns a diamond SDF based on a given uv and radius.
+ * @param {Array} _uv - The UV coordinates (vec2).
+ * @param {number} [r=0.0] - The radius of the diamond.
+ * @returns {number} The signed distance from the diamond surface.
+ */
+export const sdDiamond = Fn(([_uv, r = 0.0]) => {
+  return abs(_uv.x).add(abs(_uv.y)).sub(r)
+})
+
+/**
+ * Returns a hexagon SDF based on a given point and radius.
+ * @param {Array} p - The point coordinates (vec2).
+ * @param {number} [_r=0.5] - The radius of the hexagon.
+ * @returns {number} The signed distance from the hexagon surface.
+ */
+export const sdHexagon = Fn(([p, _r = 0.5]) => {
+  const r = float(_r)
+  const k = vec3(-0.866025404, 0.5, 0.577350269)
+
+  const _p = abs(p).toVar()
+  _p.subAssign(float(2.0).mul(min(dot(k.xy, _p), 0.0).mul(k.xy)))
+  _p.subAssign(vec2(clamp(_p.x, k.z.negate().mul(r), k.z.mul(r)), r))
+
+  return length(_p).mul(sign(_p.y))
+})
+
+/**
+ * Returns an equilateral triangle SDF based on a given point and radius.
+ * @param {Array} p - The point coordinates (vec2).
+ * @param {number} [_r=0.1] - The radius of the triangle (float).
+ * @returns {number} The signed distance from the triangle surface.
+ */
+export const sdEquilateralTriangle = Fn(([p, _r = float(0.1)]) => {
+  const r = float(_r)
+
+  const k = sqrt(3.0)
+  const _p = (p ?? vec2(0)).toVar()
+
+  _p.x = abs(_p.x).sub(r).toVar()
+  _p.y = _p.y.add(r.div(k)).toVar()
+
+  If(_p.x.add(k.mul(_p.y)).greaterThan(0), () => {
+    _p.assign(vec2(_p.x.sub(k.mul(_p.y)), k.negate().mul(_p.x).sub(_p.y)).div(2))
+  })
+
+  _p.x.subAssign(clamp(_p.x, r.mul(-2), 0.0))
+  return length(_p).negate().mul(sign(_p.y))
+})
+
+/**
+ * Returns a line SDF for a given coordinate.
+ * @param {number} p - The coordinate (float).
+ * @returns {number} The signed distance from the line.
+ */
+export const sdLine = Fn(([p]) => {
+  return abs(p)
+})
+
+/**
+ * Returns a ring SDF based on a given uv and radius.
+ * @param {Array} _uv - The UV coordinates (vec2).
+ * @param {number} [s=0.4] - The radius of the ring.
+ * @returns {number} The signed distance from the ring surface.
+ */
+export const sdRing = Fn(([_uv, s = float(0.4)]) => {
+  return abs(length(_uv).sub(s)).toVar()
+})
+
+/**
+ * Returns a parallelogram SDF based on a given uv and size.
+ * @param {Array} _uv - The UV coordinates (vec2).
+ * @param {Object} [options] - Optional configuration values.
+ * @param {number} [options.wi=0.4] - The width of the parallelogram.
+ * @param {number} [options.he=0.1] - The height of the parallelogram.
+ * @param {number} [options.sk=0.1] - The skew of the parallelogram.
+ * @returns {number} The signed distance from the parallelogram surface.
+ */
+export const sdParallelogram = Fn(([_p, options = {}]) => {
+  const { wi = float(0.4), he = float(0.1), sk = float(0.1) } = options
+  const p = _p.toVar()
+  const e = vec2(sk, he)
+
+  p.assign(select(p.y.lessThan(0.0), p.negate(), p))
+
+  const w = p.sub(e)
+  w.x.subAssign(clamp(w.x, wi.negate(), wi))
+
+  const d = vec2(dot(w, w), w.y.negate()).toVar()
+  const s = p.x.mul(e.y).sub(p.y.mul(e.x))
+
+  p.assign(select(s.lessThan(0.0), p.negate(), p))
+
+  const v = p.sub(vec2(wi, 0)).toVar()
+
+  v.subAssign(e.mul(clamp(dot(v, e).div(dot(e, e)), -1.0, 1.0)))
+  d.assign(min(d, vec2(dot(v, v), wi.mul(he).sub(abs(s)))))
+
+  return sqrt(d.x).mul(sign(d.y.negate()))
+})
+
+const ndot = Fn(([a, b]) => {
+  return a.x.mul(b.x).sub(a.y.mul(b.y))
+})
+
+/**
+ * Returns a rhombus SDF based on a given uv and size.
+ * @param {Array} _uv - The UV coordinates (vec2).
+ * @param {number} [b=0.4] - The size of the rhombus.
+ * @returns {number} The signed distance from the rhombus surface.
+ */
+export const sdRhombus = Fn(([_p, b = vec2(0.4)]) => {
+  const p = _p.toVar()
+  p.assign(abs(p))
+  const h = clamp(ndot(b.sub(mul(2.0, p)), b).div(dot(b, b)), -1.0, 1.0)
+  const d = length(p.sub(mul(0.5, b).mul(vec2(sub(1.0, h), add(1.0, h)))))
+
+  return d.mul(sign(p.x.mul(b.y).add(p.y.mul(b.x).sub(b.x.mul(b.y)))))
+})
+
+/**
+ * Returns a triangle SDF based on a given uv and size.
+ * @param {Array} _uv - The UV coordinates (vec2).
+ * @param {number} [size=0.4] - The size of the triangle.
+ * @returns {number} The signed distance from the triangle surface.
+ */
+export const sdTriangle = Fn(([_p, size = float(0.4)]) => {
+  const t = max(abs(_p.x.mul(size)).add(_p.y), abs(_p.y.mul(size).sub(0.5)).sub(0.5))
+  return t
+})

package/layers/shader/additional-modular-tsl-shaders-for-claude/src/utils/math.js

@@ -0,0 +1,33 @@
+export const clamp = (min, input, max) => {
+  return Math.max(min, Math.min(input, max))
+}
+
+export const mapRange = (in_min, in_max, input, out_min, out_max) => {
+  return ((input - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min
+}
+
+export const lerp = (start, end, amt) => {
+  return (1 - amt) * start + amt * end
+}
+
+export const truncate = (value, decimals) => {
+  return parseFloat(value.toFixed(decimals))
+}
+
+export const randomFromRange = (min, max) => {
+  return Math.random() * (max - min) + min
+}
+
+export const randomFromArray = (array) => {
+  return array[Math.floor(Math.random() * array.length)]
+}
+
+export const normalize = (val, min, max) => Math.max(0, Math.min(1, (val - min) / (max - min)))
+
+// Simple ratio function given a width and height
+export const ratio = (width, height) => {
+  const ratioX = width > height ? width / height : 1
+  const ratioY = width > height ? 1 : height / width
+
+  return [ratioX, ratioY]
+}

package/layers/shader/additional-modular-tsl-shaders-for-claude/vite.config.js

@@ -0,0 +1,23 @@
+import { defineConfig } from 'vite'
+import path from 'path'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  optimizeDeps: {
+    esbuildOptions: {
+      target: 'esnext',
+    },
+  },
+  build: {
+    target: 'esnext',
+  },
+  plugins: [],
+  resolve: {
+    alias: {
+      '@/sketches': path.resolve(__dirname, 'src/sketches'),
+      '@/tsl': path.resolve(__dirname, 'src/tsl'),
+      '@/components': path.resolve(__dirname, 'src/components'),
+      '@/utils': path.resolve(__dirname, 'src/utils'),
+    },
+  },
+})

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

@@ -0,0 +1,41 @@
+/* Shader Layer Styles */
+
+.shader-canvas {
+  width: 100%;
+  height: 100%;
+}
+
+.shader-debug {
+  position: fixed;
+  right: 1rem;
+  bottom: 1rem;
+  z-index: 9999;
+  backdrop-filter: blur(8px);
+  border-radius: 0.5rem;
+  background: rgba(0, 0, 0, 0.8);
+  padding: 0.75rem 1rem;
+  min-width: 200px;
+  color: #fff;
+  font-size: 0.75rem;
+  font-family: ui-monospace, monospace;
+}
+
+.shader-debug-title {
+  margin-bottom: 0.5rem;
+  color: #a78bfa;
+  font-weight: 600;
+}
+
+.shader-debug-row {
+  display: flex;
+  justify-content: space-between;
+  padding: 0.125rem 0;
+}
+
+.shader-debug-label {
+  color: #94a3b8;
+}
+
+.shader-debug-value {
+  color: #22c55e;
+}

package/layers/shader/app/components/Effect/Bloom.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+// @tresjs/post-processing v3 exports components differently
+// Import from the package root and use the correct component name
+</script>
+
+<template>
+  <slot />
+</template>

package/layers/shader/app/components/Effect/ChromaticAberration.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+// @tresjs/post-processing v3 exports components differently
+// These will need to be used directly from the package in templates
+</script>
+
+<template>
+  <slot />
+</template>

package/layers/shader/app/components/Effect/PostProcessing.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { EffectComposer } from '@tresjs/post-processing'
+
+const props = withDefaults(
+  defineProps<{
+    enabled?: boolean
+  }>(),
+  {
+    enabled: true,
+  }
+)
+</script>
+
+<template>
+  <Suspense>
+    <EffectComposer v-if="enabled">
+      <slot />
+    </EffectComposer>
+  </Suspense>
+</template>

package/layers/shader/app/components/Material/AmbientAurora.vue

@@ -0,0 +1,172 @@
+<script setup lang="ts">
+// @ts-nocheck - TSL types are complex
+import { Color, DoubleSide } from 'three'
+import {
+  add,
+  mix,
+  mul,
+  pow,
+  smoothstep,
+  sub,
+  time as tslTime,
+  uniform,
+  uv,
+  vec2,
+  vec3,
+} from 'three/tsl'
+import { MeshBasicNodeMaterial } from 'three/webgpu'
+import { fbm2D, simplexNoise2D } from '../../shaders/common/noise'
+import { cosinePalette } from '../../shaders/common/palette'
+
+const props = withDefaults(
+  defineProps<{
+    speed?: number
+    intensity?: number
+    color1?: string
+    color2?: string
+    color3?: string
+    mouseX?: number
+    mouseY?: number
+    mouseInteraction?: boolean
+    mouseStrength?: number
+  }>(),
+  {
+    speed: 1.0,
+    intensity: 1.0,
+    color1: '#0a0a20',
+    color2: '#00ff87',
+    color3: '#60efff',
+    mouseX: 0.5,
+    mouseY: 0.5,
+    mouseInteraction: true,
+    mouseStrength: 0.5,
+  }
+)
+
+// Create reactive uniforms
+const speedUniform = uniform(props.speed)
+const intensityUniform = uniform(props.intensity)
+const mouseXUniform = uniform(props.mouseX)
+const mouseYUniform = uniform(props.mouseY)
+const mouseStrengthUniform = uniform(props.mouseStrength)
+const color1Uniform = uniform(new Color(props.color1))
+const color2Uniform = uniform(new Color(props.color2))
+const color3Uniform = uniform(new Color(props.color3))
+
+// Watch prop changes
+watch(
+  () => props.speed,
+  (val) => (speedUniform.value = val)
+)
+watch(
+  () => props.intensity,
+  (val) => (intensityUniform.value = val)
+)
+watch(
+  () => props.mouseX,
+  (val) => (mouseXUniform.value = val)
+)
+watch(
+  () => props.mouseY,
+  (val) => (mouseYUniform.value = val)
+)
+watch(
+  () => props.mouseStrength,
+  (val) => (mouseStrengthUniform.value = val)
+)
+watch(
+  () => props.color1,
+  (val) => (color1Uniform.value = new Color(val))
+)
+watch(
+  () => props.color2,
+  (val) => (color2Uniform.value = new Color(val))
+)
+watch(
+  () => props.color3,
+  (val) => (color3Uniform.value = new Color(val))
+)
+
+const material = computed(() => {
+  const mat = new MeshBasicNodeMaterial()
+
+  // Time animation
+  const time = tslTime.mul(speedUniform).mul(0.2)
+
+  // Mouse offset
+  const mouseOffset = vec2(
+    sub(mouseXUniform, 0.5).mul(props.mouseInteraction ? mouseStrengthUniform : 0),
+    sub(mouseYUniform, 0.5).mul(props.mouseInteraction ? mouseStrengthUniform : 0)
+  )
+
+  // UV coordinates
+  const uvCoord = uv()
+
+  // Create curtain-like aurora layers using noise
+  const curtain1UV = vec2(
+    add(mul(uvCoord.x, 3.0), time, mouseOffset.x),
+    add(mul(uvCoord.y, 0.5), mul(time, 0.3))
+  )
+  const curtain1 = simplexNoise2D(curtain1UV)
+
+  const curtain2UV = vec2(
+    sub(mul(uvCoord.x, 4.0), mul(time, 0.7), mul(mouseOffset.x, 0.5)),
+    add(mul(uvCoord.y, 0.3), mul(time, 0.2))
+  )
+  const curtain2 = simplexNoise2D(curtain2UV)
+
+  const curtain3UV = vec2(
+    add(mul(uvCoord.x, 2.5), mul(time, 0.5)),
+    sub(mul(uvCoord.y, 0.4), mul(time, 0.1))
+  )
+  const curtain3 = simplexNoise2D(curtain3UV)
+
+  // FBM for additional detail
+  const fbmUV = add(vec2(mul(uvCoord.x, 2.0), mul(uvCoord.y, 0.6)), mouseOffset, mul(time, 0.3))
+  const curtain4 = fbm2D(fbmUV, { octaves: 4, lacunarity: 2.0, gain: 0.5 })
+
+  // Vertical fade - aurora appears from bottom
+  const fade = mul(pow(sub(1.0, uvCoord.y), 1.2), smoothstep(0.0, 0.3, uvCoord.y))
+
+  // Combine curtains
+  const combined = mul(
+    add(mul(curtain1, 0.4), mul(curtain2, 0.3), mul(curtain3, 0.2), mul(curtain4, 0.3)),
+    fade
+  )
+  const aurora = mul(smoothstep(-0.3, 0.8, combined), intensityUniform)
+
+  // Cosine palette for iridescent colors
+  const palette = cosinePalette(
+    add(aurora, mul(time, 0.1)),
+    vec3(0.2, 0.5, 0.4),
+    vec3(0.2, 0.4, 0.2),
+    vec3(1.0, 1.0, 0.5),
+    vec3(0.0, 0.2, 0.5)
+  )
+
+  // Mix colors
+  let colorNode = mix(vec3(color1Uniform), vec3(color2Uniform), aurora)
+  colorNode = mix(colorNode, vec3(color3Uniform), mul(curtain2, fade, 0.5))
+  colorNode = mix(colorNode, palette, mul(aurora, 0.5))
+
+  // Add shimmer
+  const shimmerUV = vec2(add(mul(uvCoord.x, 20.0), mul(time, 10.0)), mul(uvCoord.y, 5.0))
+  const shimmer = mul(simplexNoise2D(shimmerUV), 0.1, aurora)
+  colorNode = add(colorNode, shimmer)
+
+  // Dark sky background
+  const sky = vec3(0.02, 0.02, 0.06)
+  colorNode = mix(sky, colorNode, add(aurora, 0.05))
+
+  mat.colorNode = colorNode
+  mat.side = DoubleSide
+
+  return mat
+})
+
+defineExpose({ material })
+</script>
+
+<template>
+  <primitive :object="material" attach="material" />
+</template>

package/layers/shader/app/components/Material/AmbientFlow.vue

@@ -0,0 +1,175 @@
+<script setup lang="ts">
+// @ts-nocheck - TSL types are complex
+import { Color, DoubleSide } from 'three'
+import {
+  add,
+  length,
+  mix,
+  mul,
+  sin,
+  sub,
+  time as tslTime,
+  uniform,
+  uv,
+  vec2,
+  vec3,
+} from 'three/tsl'
+import { MeshBasicNodeMaterial } from 'three/webgpu'
+import { fbm2D, ridgedFbm2d, warpedFbmCoords } from '../../shaders/common/noise'
+import { cosinePalette } from '../../shaders/common/palette'
+
+const props = withDefaults(
+  defineProps<{
+    speed?: number
+    intensity?: number
+    color1?: string
+    color2?: string
+    color3?: string
+    color4?: string
+    mouseX?: number
+    mouseY?: number
+    mouseInteraction?: boolean
+    mouseStrength?: number
+  }>(),
+  {
+    speed: 1.0,
+    intensity: 1.0,
+    color1: '#134e5e',
+    color2: '#71b280',
+    color3: '#e8d5b7',
+    color4: '#fc5c7d',
+    mouseX: 0.5,
+    mouseY: 0.5,
+    mouseInteraction: true,
+    mouseStrength: 0.5,
+  }
+)
+
+// Create reactive uniforms
+const speedUniform = uniform(props.speed)
+const intensityUniform = uniform(props.intensity)
+const mouseXUniform = uniform(props.mouseX)
+const mouseYUniform = uniform(props.mouseY)
+const mouseStrengthUniform = uniform(props.mouseStrength)
+const color1Uniform = uniform(new Color(props.color1))
+const color2Uniform = uniform(new Color(props.color2))
+const color3Uniform = uniform(new Color(props.color3))
+const color4Uniform = uniform(new Color(props.color4))
+
+// Watch prop changes
+watch(
+  () => props.speed,
+  (val) => (speedUniform.value = val)
+)
+watch(
+  () => props.intensity,
+  (val) => (intensityUniform.value = val)
+)
+watch(
+  () => props.mouseX,
+  (val) => (mouseXUniform.value = val)
+)
+watch(
+  () => props.mouseY,
+  (val) => (mouseYUniform.value = val)
+)
+watch(
+  () => props.mouseStrength,
+  (val) => (mouseStrengthUniform.value = val)
+)
+watch(
+  () => props.color1,
+  (val) => (color1Uniform.value = new Color(val))
+)
+watch(
+  () => props.color2,
+  (val) => (color2Uniform.value = new Color(val))
+)
+watch(
+  () => props.color3,
+  (val) => (color3Uniform.value = new Color(val))
+)
+watch(
+  () => props.color4,
+  (val) => (color4Uniform.value = new Color(val))
+)
+
+const material = computed(() => {
+  const mat = new MeshBasicNodeMaterial()
+
+  // Time animation
+  const time = tslTime.mul(speedUniform).mul(0.15)
+
+  // UV coordinates
+  const uvCoord = uv()
+
+  // Mouse offset
+  const mouseOffset = vec2(
+    sub(mouseXUniform, 0.5)
+      .mul(props.mouseInteraction ? mouseStrengthUniform : 0)
+      .mul(0.5),
+    sub(mouseYUniform, 0.5)
+      .mul(props.mouseInteraction ? mouseStrengthUniform : 0)
+      .mul(0.5)
+  )
+
+  // Domain warping - create flowing organic patterns
+  const warpedUV = warpedFbmCoords(uvCoord, time, {
+    warpStrength: 0.4,
+    warpScale: 2.0,
+    octaves: 3,
+  })
+
+  // Add mouse influence to warped coordinates
+  const finalUV = add(warpedUV, mouseOffset)
+
+  // Layered noise on warped coordinates
+  const n1 = add(
+    mul(fbm2D(mul(finalUV, 2.0), { octaves: 4, lacunarity: 2.0, gain: 0.5 }), 0.5),
+    0.5
+  )
+  const n2 = add(
+    mul(fbm2D(add(mul(finalUV, 3.0), 5.0), { octaves: 3, lacunarity: 2.0, gain: 0.5 }), 0.5),
+    0.5
+  )
+  const n3 = add(
+    mul(ridgedFbm2d(mul(finalUV, 1.5), { octaves: 4, lacunarity: 2.0, gain: 0.5 }), 0.5),
+    0.5
+  )
+
+  // Color palette based on noise
+  let colorNode = mix(vec3(color1Uniform), vec3(color2Uniform), n1)
+  colorNode = mix(colorNode, vec3(color3Uniform), mul(n2, 0.6))
+  colorNode = mix(colorNode, vec3(color4Uniform), mul(n3, 0.4))
+
+  // Add iridescent effect using cosine palette
+  const iridescence = cosinePalette(
+    add(n1, mul(time, 0.1)),
+    vec3(0.5, 0.5, 0.5),
+    vec3(0.5, 0.5, 0.5),
+    vec3(1.0, 1.0, 0.5),
+    vec3(0.8, 0.9, 0.3)
+  )
+  colorNode = mix(colorNode, iridescence, 0.2)
+
+  // Brightness variation
+  const brightness = add(0.8, mul(0.2, sin(add(mul(n1, 6.28), time))))
+  colorNode = mul(colorNode, brightness, intensityUniform)
+
+  // Soft vignette
+  const dist = length(sub(uvCoord, 0.5))
+  const vig = sub(1.0, mul(dist, 0.4))
+  colorNode = mul(colorNode, vig)
+
+  mat.colorNode = colorNode
+  mat.side = DoubleSide
+
+  return mat
+})
+
+defineExpose({ material })
+</script>
+
+<template>
+  <primitive :object="material" attach="material" />
+</template>