kmcom-nuxt-layers 1.0.1

package/layers/shader/additional-modular-tsl-shaders-for-claude/src/components/sketch/webgpu_sketch.js

@@ -0,0 +1,128 @@
+import {
+  WebGPURenderer,
+  MeshBasicNodeMaterial,
+  PlaneGeometry,
+  Scene,
+  Mesh,
+  OrthographicCamera,
+  DoubleSide,
+  NoToneMapping,
+  LinearSRGBColorSpace,
+} from 'three/webgpu'
+import { vec3, Fn } from 'three/tsl'
+
+class WebGPUSketch {
+  constructor(canvas, colorNode = null, onFrame = null) {
+    this._canvas = canvas
+
+    this._colorNode = colorNode
+    this._onFrame = onFrame
+
+    this._meshInitialized = false
+  }
+
+  async init() {
+    this._scene = new Scene()
+
+    // Viewport sizes
+    this._viewport = {
+      width: window.innerWidth,
+      height: window.innerHeight,
+    }
+
+    // Camera
+    this._camera = new OrthographicCamera(-1, 1, 1, -1, 0.1, 100)
+    this._camera.position.z = 1
+    this._scene.add(this._camera)
+
+    // Renderer
+    this._renderer = new WebGPURenderer({
+      canvas: this._canvas,
+      antialias: true,
+      toneMapping: NoToneMapping,
+      outputColorSpace: LinearSRGBColorSpace,
+    })
+    this._renderer.setSize(this._viewport.width, this._viewport.height)
+    this._renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
+    this._renderer.setClearColor('#000000')
+
+    window.addEventListener('resize', this._resizeHandler)
+  }
+
+  _initMesh() {
+    // Sketch geometry
+    this._geometry = new PlaneGeometry(1, 1, 1, 1)
+
+    // Sketch material
+    this._material = new MeshBasicNodeMaterial({
+      transparent: true,
+      side: DoubleSide,
+      depthWrite: false,
+    })
+    this._material.colorNode = this._colorNode ? this._colorNode : vec3(0, 0, 0)
+
+    // Add a fullscreeen sketch plane to the scene
+    this._mesh = new Mesh(this._geometry, this._material)
+    this._mesh.scale.set(2, 2, 1)
+    this._scene.add(this._mesh)
+  }
+
+  _resizeHandler = () => {
+    // Update sizes
+    this._viewport.width = window.innerWidth
+    this._viewport.height = window.innerHeight
+
+    // Update camera
+    this._camera.aspect = this._viewport.width / this._viewport.height
+    this._camera.updateProjectionMatrix()
+
+    // Update renderer
+    this._renderer.setSize(this._viewport.width, this._viewport.height)
+    this._renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
+  }
+
+  async render() {
+    if (!this._meshInitialized) {
+      this._initMesh()
+      this._meshInitialized = true
+    }
+
+    await this._renderer.renderAsync(this._scene, this._camera)
+
+    if (this._onFrame) {
+      this._onFrame(this._colorNode, this._renderer)
+    }
+
+    const frame = this.render.bind(this)
+    this._animationFrameId = window.requestAnimationFrame(frame)
+  }
+
+  dispose() {
+    // Cancel any pending animation frames
+    if (this._animationFrameId) {
+      window.cancelAnimationFrame(this._animationFrameId)
+    }
+
+    window.removeEventListener('resize', this._resizeHandler)
+
+    // Dispose geometry
+    if (this._geometry) {
+      this._geometry.dispose()
+    }
+
+    // Dispose material
+    if (this._material) {
+      this._material.dispose()
+    }
+
+    // Clear references
+    this._scene = null
+    this._geometry = null
+    this._material = null
+    this._camera = null
+    this._renderer = null
+    this._mesh = null
+  }
+}
+
+export default WebGPUSketch

package/layers/shader/additional-modular-tsl-shaders-for-claude/src/components/sketches_dropdown/index.css

@@ -0,0 +1,87 @@
+.sketches-overlay {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 10;
+}
+
+.sketches-toggle {
+  position: absolute;
+  top: 1rem;
+  left: 1rem;
+  pointer-events: auto;
+  font-size: 1.5rem;
+  z-index: 30;
+}
+
+.sketches-toggle__button {
+  padding: 8px 12px;
+  background: #111113;
+  border: none;
+  color: #edeef0;
+  transition: background 0.2s ease;
+  cursor: pointer;
+}
+
+.sketches-toggle__button:hover {
+  background: #272a2d;
+}
+
+.sketches-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin-top: 0.5rem;
+  background: rgba(0, 0, 0, 0.9);
+  backdrop-filter: blur(8px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  min-width: 20rem;
+  max-width: 24rem;
+  max-height: 24rem;
+  overflow-y: auto;
+  pointer-events: auto;
+  z-index: 40;
+}
+
+.sketches-dropdown__content {
+  padding: 8px;
+}
+
+.sketches-list {
+  padding: 0;
+  font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+}
+
+.sketches-list__grid {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.sketch-card {
+  display: flex;
+  background: #212225;
+  transition:
+    background 0.2s ease-out,
+    transform 0.2s ease-out;
+  text-decoration: none;
+  flex-direction: column;
+  padding: 6px 10px;
+}
+
+.sketch-card:hover {
+  background: #272a2d;
+}
+
+.sketch-card__title {
+  color: white;
+  line-height: 1.2;
+  margin: 0;
+  font-size: 0.9rem;
+  font-weight: 500;
+}
+
+.sketch-card__path {
+  color: #9ca3af;
+  font-size: 0.9rem;
+}

package/layers/shader/additional-modular-tsl-shaders-for-claude/src/components/sketches_dropdown/sketches_dropdown.js

@@ -0,0 +1,169 @@
+import './index.css'
+
+class SketchesDropdown {
+  constructor() {
+    this.isVisible = false
+    this.sketches = []
+    this.dropdownRef = null
+    this.init()
+  }
+
+  async init() {
+    await this.loadSketches()
+    this.createDropdown()
+    this.attachEventListeners()
+  }
+
+  async loadSketches() {
+    // Use the same glob pattern as the sketches route
+    const sketchesGlob = import.meta.glob('@/sketches/**/*.js', {
+      eager: true,
+    })
+
+    console.log('Found sketches:', Object.keys(sketchesGlob))
+
+    this.sketches = Object.keys(sketchesGlob).map((filePath) => {
+      // Convert file path to URL path
+      // /src/sketches/flare-1.js -> flare-1
+      // /src/sketches/noise/dawn-1.js -> noise/dawn-1
+      console.log('Relative path:', filePath)
+      const relativePath = filePath.replace('/src/sketches/', '').replace('.js', '')
+      const url = `/sketches/${relativePath}`
+
+      // Extract name from path (last part before extension)
+      const name = relativePath.split('/').pop() || relativePath
+
+      return {
+        name,
+        path: `/${relativePath}`,
+        url,
+      }
+    })
+
+    console.log('Processed sketches:', this.sketches)
+  }
+
+  createDropdown() {
+    // Create the overlay container
+    const overlay = document.createElement('div')
+    overlay.className = 'sketches-overlay'
+
+    // Create the toggle container
+    const toggle = document.createElement('div')
+    toggle.className = 'sketches-toggle'
+
+    // Create the button
+    const button = document.createElement('button')
+    button.className = 'sketches-toggle__button'
+    button.textContent = 'Sketches'
+    button.addEventListener('click', () => this.toggleSketches())
+
+    // Create the dropdown
+    const dropdown = document.createElement('div')
+    dropdown.className = 'sketches-dropdown'
+    dropdown.style.display = 'none'
+
+    const content = document.createElement('div')
+    content.className = 'sketches-dropdown__content'
+
+    const list = document.createElement('div')
+    list.className = 'sketches-list'
+
+    const grid = document.createElement('div')
+    grid.className = 'sketches-list__grid'
+
+    // Create sketch cards
+    if (this.sketches.length === 0) {
+      const noSketches = document.createElement('div')
+      noSketches.className = 'sketch-card'
+      noSketches.textContent = 'No sketches found'
+      grid.appendChild(noSketches)
+    } else {
+      this.sketches.forEach((sketch) => {
+        const card = document.createElement('a')
+        card.className = 'sketch-card'
+        card.href = `#${sketch.url}`
+        card.addEventListener('click', (e) => {
+          e.preventDefault()
+          this.navigateToSketch(sketch.url)
+          this.hideSketches()
+        })
+
+        const title = document.createElement('h3')
+        title.className = 'sketch-card__title'
+        title.textContent = sketch.name
+
+        const path = document.createElement('div')
+        path.className = 'sketch-card__path'
+        path.textContent = sketch.path
+
+        card.appendChild(title)
+        card.appendChild(path)
+        grid.appendChild(card)
+      })
+    }
+
+    list.appendChild(grid)
+    content.appendChild(list)
+    dropdown.appendChild(content)
+    toggle.appendChild(button)
+    toggle.appendChild(dropdown)
+    overlay.appendChild(toggle)
+
+    // Store references
+    this.dropdownRef = toggle
+    this.dropdown = dropdown
+    this.overlay = overlay
+
+    // Add to DOM
+    document.body.appendChild(overlay)
+  }
+
+  attachEventListeners() {
+    // Handle click outside to close dropdown
+    document.addEventListener('mousedown', (event) => {
+      if (this.isVisible && this.dropdownRef && !this.dropdownRef.contains(event.target)) {
+        this.hideSketches()
+      }
+    })
+  }
+
+  toggleSketches() {
+    console.log('Toggle clicked, current state:', this.isVisible)
+    if (this.isVisible) {
+      this.hideSketches()
+    } else {
+      this.showSketches()
+    }
+  }
+
+  showSketches() {
+    console.log('Showing sketches dropdown')
+    this.isVisible = true
+    this.dropdown.style.display = 'block'
+  }
+
+  hideSketches() {
+    console.log('Hiding sketches dropdown')
+    this.isVisible = false
+    this.dropdown.style.display = 'none'
+  }
+
+  navigateToSketch(url) {
+    // Use the existing router navigation
+    if (window.router) {
+      window.router.navigate(url)
+    } else {
+      // Fallback to hash navigation
+      window.location.hash = url
+    }
+  }
+
+  destroy() {
+    if (this.overlay && this.overlay.parentNode) {
+      this.overlay.parentNode.removeChild(this.overlay)
+    }
+  }
+}
+
+export default SketchesDropdown

package/layers/shader/additional-modular-tsl-shaders-for-claude/src/index.css

@@ -0,0 +1,25 @@
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  margin: 0;
+  width: 100vw;
+  height: 100vh;
+}
+
+canvas {
+  width: 100%;
+  height: 100%;
+}

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

@@ -0,0 +1,93 @@
+import './index.css'
+
+import {
+  WebGPURenderer,
+  MeshBasicNodeMaterial,
+  PlaneGeometry,
+  Scene,
+  Mesh,
+  OrthographicCamera,
+  DoubleSide,
+  NoToneMapping,
+  LinearSRGBColorSpace,
+} from 'three/webgpu'
+import Router from './router.js'
+import SketchesDropdown from './components/sketches_dropdown/sketches_dropdown.js'
+import WebGPUSketch from './components/sketch/webgpu_sketch.js'
+
+// Preload all sketches using import.meta.glob
+const sketches = import.meta.glob('./sketches/**/*.js', { eager: true })
+
+let currentSketch = null
+
+// Sketches dropdown
+let sketchesDropdown = null
+
+// Function to switch sketches using preloaded modules
+async function switchSketch(sketchName) {
+  try {
+    // Dispose current sketch if it exists
+    if (currentSketch && currentSketch.dispose) {
+      currentSketch.dispose()
+    }
+
+    // Find the sketch module by path
+    const sketchPath = `./sketches/${sketchName}.js`
+    const sketchModule = sketches[sketchPath]
+
+    if (sketchModule) {
+      // Get the sketch (default export only)
+      const sketchExport = sketchModule.default
+
+      if (sketchExport) {
+        if (sketchExport instanceof WebGPUSketch) {
+          currentSketch = sketchExport
+          await currentSketch.init()
+          await currentSketch.render()
+        } else {
+          console.warn(`Sketch export is neither WebGPUSketch nor function: ${sketchName}`)
+          return
+        }
+
+        console.log(`Switched to sketch: ${sketchName}`)
+      } else {
+        console.warn(`Sketch function not found in module: ${sketchName}`)
+      }
+    } else {
+      console.warn(`Sketch not found: ${sketchName}`)
+    }
+  } catch (error) {
+    console.error(`Failed to load sketch: ${sketchName}`, error)
+  }
+}
+
+// Initialize app
+async function init() {
+  // Initialize router with automatic route handling
+  const router = new Router(async (path) => {
+    // Handle different route patterns
+    if (path === '/' || path === '') {
+      await switchSketch('')
+    } else if (path.startsWith('/sketches/')) {
+      const sketchName = path.split('/sketches/')[1]
+      if (sketchName) {
+        await switchSketch(sketchName)
+      }
+    } else {
+      // Try to load sketch directly by name (remove leading slash)
+      const sketchName = path.slice(1)
+      await switchSketch(sketchName)
+    }
+  })
+
+  // Make router globally available for navigation
+  window.router = router
+
+  // Initialize sketches dropdown
+  console.log('Initializing sketches dropdown...')
+  sketchesDropdown = new SketchesDropdown()
+  console.log('Sketches dropdown initialized:', sketchesDropdown)
+}
+
+// Start the app
+init()

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

@@ -0,0 +1,43 @@
+class Router {
+  constructor(routeHandler) {
+    this.routeHandler = routeHandler
+    this.currentRoute = null
+    this.init()
+  }
+
+  // Initialize router and listen for hash changes
+  init() {
+    // Handle initial load
+    this.handleRoute()
+
+    // Listen for hash changes
+    window.addEventListener('hashchange', () => {
+      this.handleRoute()
+    })
+  }
+
+  // Parse current hash and execute route handler
+  handleRoute() {
+    const hash = window.location.hash.slice(1) // Remove #
+    const path = hash || '/'
+
+    this.currentRoute = path
+
+    // Call the route handler with the current path
+    if (this.routeHandler) {
+      this.routeHandler(path)
+    }
+  }
+
+  // Navigate to a route
+  navigate(path) {
+    window.location.hash = path
+  }
+
+  // Get current route
+  getCurrentRoute() {
+    return this.currentRoute
+  }
+}
+
+export default Router

package/layers/shader/additional-modular-tsl-shaders-for-claude/src/sketches/flare-1.js

@@ -0,0 +1,68 @@
+/**
+ * @license Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International (CC BY-NC-SA 4.0)
+ *
+ * This sketch is licensed under CC BY-NC-SA 4.0. You are free to:
+ * - Share and adapt this work
+ * - Use modified versions commercially
+ *
+ * Under these conditions:
+ * - Attribution: Credit Ben McCormick (phobon) and link to this project
+ * - NonCommercial: Don't sell the original, unmodified sketch
+ * - ShareAlike: Distribute derivatives under the same license
+ */
+
+import { abs, Fn, oneMinus, screenSize, uv, vec3, floor, sin, PI, mul, Loop, vec2 } from 'three/tsl'
+import { cosinePalette } from '@/tsl/utils/color/cosine_palette'
+import { screenAspectUV } from '@/tsl/utils/function/screen_aspect_uv'
+import { grainTexturePattern } from '@/tsl/patterns/grain_texture_pattern'
+import WebGPUSketch from '@/components/sketch/webgpu_sketch'
+
+/**
+ * A gradient sketch with fractionated coordinates.
+ */
+const flare1 = Fn(() => {
+  // Get aspect-corrected UVs for the screen
+  const _uv = screenAspectUV(screenSize)
+  const uv0 = uv().toVar()
+
+  // Color accumulator
+  const finalColor = vec3(0).toVar()
+
+  // Palette setup
+  const a = vec3(0.5, 0.5, 0.5)
+  const b = vec3(0.5, 0.5, 0.5)
+  const c = vec3(2.0, 1.0, 0.0)
+  const d = vec3(0.5, 0.2, 0.25)
+
+  // Y-repeated pattern for banding
+  const repetitions = 12
+  const uvR = floor(_uv.y.mul(repetitions))
+
+  // Sine wave for vertical offset
+  const s = sin(uv0.y.mul(PI))
+
+  // Loop over bands
+  // @ts-ignore
+  Loop({ start: 0, end: repetitions }, ({ i: _i }) => {
+    const f = mul(uvR.mul(_i), 0.005)
+    const offsetUv = vec2(_uv.x, _uv.y.add(f).add(mul(s, 0.05)))
+
+    // Compound radial gradient
+    const r = oneMinus(abs(offsetUv.x.mul(1.5))).add(abs(offsetUv.y.mul(1.5)))
+
+    // Palette-based color
+    const col = cosinePalette(uv0.y.mul(0.25), a, b, c, d)
+
+    finalColor.assign(col.mul(r))
+  })
+  // Add grain for texture
+  const g = grainTexturePattern(uv0).mul(0.1)
+  finalColor.addAssign(g)
+
+  return finalColor
+})
+
+const canvas = document.querySelector('#webgpu-canvas')
+const sketch = new WebGPUSketch(canvas, flare1())
+
+export default sketch

package/layers/shader/additional-modular-tsl-shaders-for-claude/src/sketches/noise/dawn-1.js

@@ -0,0 +1,56 @@
+/**
+ * @license Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International (CC BY-NC-SA 4.0)
+ *
+ * This sketch is licensed under CC BY-NC-SA 4.0. You are free to:
+ * - Share and adapt this work
+ * - Use modified versions commercially
+ *
+ * Under these conditions:
+ * - Attribution: Credit Ben McCormick (phobon) and link to this project
+ * - NonCommercial: Don't sell the original, unmodified sketch
+ * - ShareAlike: Distribute derivatives under the same license
+ */
+
+import { Fn, screenSize, vec3, fract, pow, time } from 'three/tsl'
+import { cosinePalette } from '@/tsl/utils/color/cosine_palette'
+import { screenAspectUV } from '@/tsl/utils/function/screen_aspect_uv'
+import WebGPUSketch from '@/components/sketch/webgpu_sketch'
+import { grainTexturePattern } from '@/tsl/patterns/grain_texture_pattern'
+
+/**
+ * A gradient sketch tribute to Rik Oostenbroek.
+ */
+const dawn1 = Fn(() => {
+  // Get aspect-corrected UVs for the screen
+  const _uv = screenAspectUV(screenSize).toVar()
+  const uv0 = screenAspectUV(screenSize).toVar()
+
+  // Color accumulator
+  const finalColor = vec3(0.0).toVar()
+
+  // Palette setup
+  const a = vec3(0.5, 0.5, 0.5)
+  const b = vec3(0.5, 0.5, 0.5)
+  const c = vec3(1.0, 1.0, 0.5)
+  const d = vec3(0.8, 0.9, 0.3)
+
+  // Animated vertical gradient using cosine palette
+  const col = cosinePalette(uv0.y.add(0.5).add(time.mul(0.01)), a, b, c, d)
+
+  // Repeated sawtooth pattern in Y, softened
+  const repeatedPattern = fract(_uv.y.mul(24)).mul(0.3)
+
+  // Add pattern to color, boost with pow for punch
+  finalColor.assign(col.add(pow(repeatedPattern, 2.0)))
+
+  // Add grain for texture
+  const _grain = grainTexturePattern(_uv).mul(0.2)
+  finalColor.addAssign(_grain)
+
+  return finalColor
+})
+
+const canvas = document.querySelector('#webgpu-canvas')
+const sketch = new WebGPUSketch(canvas, dawn1())
+
+export default sketch

package/layers/shader/additional-modular-tsl-shaders-for-claude/src/tsl/distortion/bulge_distortion.js

@@ -0,0 +1,35 @@
+import { Fn, vec2, float, length, normalize, mul, min, oneMinus, pow, smoothstep } from 'three/tsl'
+
+/**
+ * Applies a bulge or pinch distortion to UV coordinates.
+ * @param {vec2} _uv - The UV coordinates - aspect corrected provide best results
+ * @param {Object} [options] - Optional configuration values.
+ * @param {number} [options.strength=0.5] - Strength of the effect (positive=bulge, negative=pinch)
+ * @param {number} [options.radius=0.5] - Radius of the distortion effect
+ * @param {number} [options.power=1.0] - Power curve for the falloff (higher = stronger center effect)
+ * @param {vec2} [options.center=vec2(0.0)] - Center point of the distortion
+ * @returns {vec2} Distorted UV coordinates
+ */
+export const bulgeDistortion = Fn(([_uv, options = {}]) => {
+  const {
+    strength = float(0.5),
+    radius = float(0.5),
+    power = float(1.0),
+    center = vec2(0),
+  } = options
+  const uv = _uv.toVar()
+  const offset = uv.sub(center).toVar()
+  const dist = length(offset).toVar()
+
+  // Normalized distance within radius (0-1), smoothed to create a cleaner effect
+  const normalizedDist = smoothstep(0, 1, min(dist.div(radius), 1)).toVar()
+
+  // Use power curve to create stronger effect in the center
+  const falloff = pow(oneMinus(normalizedDist), power).mul(strength)
+
+  // Apply radial displacement
+  const direction = normalize(offset)
+  const displacedUV = center.add(direction.mul(dist.mul(falloff.add(float(1.0)))))
+
+  return displacedUV
+})