{
	"$schema": "https://ui.shadcn.com/schema/registry-item.json",
	"name": "SlicedWaves-JS-CSS",
	"title": "SlicedWaves",
	"description": "A grid of soft glowing bars rippling like a slatted equalizer.",
	"type": "registry:component",
	"files": [
		{
			"type": "registry:file",
			"path": "SlicedWaves.css",
			"target": "@components/SlicedWaves.css",
			"content": ".sliced-waves-container {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n"
		},
		{
			"type": "registry:component",
			"path": "SlicedWaves.jsx",
			"content": "import { useEffect, useRef } from 'react';\nimport { Renderer, Program, Mesh, Triangle } from 'ogl';\nimport './SlicedWaves.css';\n\nconst hexToRgb = hex => {\n  const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n  if (!result) return [1, 1, 1];\n  return [parseInt(result[1], 16) / 255, parseInt(result[2], 16) / 255, parseInt(result[3], 16) / 255];\n};\n\nconst vertex = `#version 300 es\nin vec2 position;\nvoid main() {\n  gl_Position = vec4(position, 0.0, 1.0);\n}\n`;\n\nconst fragment = `#version 300 es\nprecision highp float;\nuniform vec2 iResolution;\nuniform float iTime;\nuniform float uColumns;\nuniform float uRows;\nuniform float uThickness;\nuniform float uSpeed;\nuniform float uTravel;\nuniform float uWaveSpread;\nuniform float uRowOffset;\nuniform float uSoftness;\nuniform float uGlow;\nuniform float uBrightness;\nuniform float uContrast;\nuniform float uOpacity;\nuniform float uVertical;\nuniform float uAlternate;\nuniform vec2 uMouse;\nuniform float uMouseStrength;\nuniform float uMouseRadius;\nuniform float uEnableMouse;\nuniform float uMouseActive;\nuniform float uGrain;\nuniform float uGrainIntensity;\nuniform float uLightMode;\nuniform vec3 uColor1;\nuniform vec3 uColor2;\nuniform vec3 uColor3;\nout vec4 fragColor;\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / iResolution.xy;\n  vec2 grid = vec2(max(uColumns, 1.0), max(uRows, 1.0));\n  vec2 p = uv * grid;\n  vec2 gv = fract(p) - 0.5;\n  vec2 id = floor(p);\n\n  float barCoord, waveId, offId, along;\n  if (uVertical > 0.5) {\n    barCoord = gv.x; waveId = id.y; offId = id.x; along = uv.y;\n  } else {\n    barCoord = gv.y; waveId = id.x; offId = id.y; along = uv.x;\n  }\n\n  float dir = 1.0;\n  if (uAlternate > 0.5 && mod(offId, 2.0) >= 1.0) dir = -1.0;\n\n  float phase = iTime * uSpeed + waveId * uWaveSpread + cos(offId * uRowOffset);\n  float mv = sin(phase) * 0.5 + 0.5;\n  if (dir < 0.0) mv = 1.0 - mv;\n\n  float infl = 0.0;\n  if (uEnableMouse > 0.5) {\n    float md = distance(uv, uMouse);\n    infl = smoothstep(uMouseRadius, 0.0, md) * uMouseStrength * uMouseActive;\n  }\n\n  float thick = clamp(uThickness + infl * 0.25, 0.0, 1.0);\n  float startPos = (0.5 - thick * 0.5) * uTravel;\n  float endPos = (-0.5 + thick * 0.5) * uTravel;\n  float pos = mix(startPos, endPos, mv);\n\n  float aa = max(uSoftness, 0.0005);\n  float d = abs(barCoord + pos) - thick * 0.5;\n  float aaWidth = fwidth(uVertical > 0.5 ? p.x : p.y);\n  float edge = max(aa, aaWidth);\n  float mask = smoothstep(edge, -edge, d);\n  float glow = exp(-max(d, 0.0) * (7.0 / (uGlow + 0.001))) * clamp(uGlow, 0.0, 1.0);\n  float intensity = clamp(mask + glow * (1.0 - mask), 0.0, 1.0);\n\n  if (uGrain > 0.5) {\n    float g = fract(sin(dot(gl_FragCoord.xy, vec2(12.9898, 78.233)) + iTime) * 43758.5453);\n    intensity = clamp(intensity + (g - 0.5) * uGrainIntensity, 0.0, 1.0);\n  }\n\n  float tint = mv;\n  vec3 grad = mix(uColor2, uColor1, tint);\n  grad = mix(grad, uColor3, clamp(along, 0.0, 1.0) * 0.45);\n\n  vec3 col = grad * uBrightness * (1.0 + infl * 0.6);\n  col = (col - 0.5) * uContrast + 0.5;\n  col = clamp(col, 0.0, 1.0);\n\n  float a = intensity * uOpacity;\n  if (uLightMode > 0.5) {\n    float peak = max(col.r, max(col.g, col.b));\n    vec3 chroma = pow(clamp(col / max(peak, 0.0001), 0.0, 1.0), vec3(1.16));\n    fragColor = vec4(mix(vec3(1.0), chroma, a * 0.94), 1.0);\n  } else {\n    fragColor = vec4(col * a, a);\n  }\n}\n`;\n\nconst ctxMap = new WeakMap();\n\nconst SlicedWaves = ({\n  color1 = '#FF9FFC',\n  color2 = '#5227FF',\n  color3 = '#B497CF',\n  columns = 14,\n  rows = 8,\n  barThickness = 0.1,\n  speed = 0.35,\n  travel = 0.7,\n  waveSpread = 0.9,\n  rowOffset = 1.0,\n  softness = 0.05,\n  glow = 0,\n  brightness = 1.0,\n  contrast = 1.0,\n  opacity = 0.5,\n  orientation = 'horizontal',\n  alternate = false,\n  mouseInteraction = true,\n  mouseStrength = 1,\n  mouseRadius = 0.3,\n  grain = true,\n  grainIntensity = 0.05,\n  lightMode = false,\n  className = ''\n}) => {\n  const containerRef = useRef(null);\n\n  useEffect(() => {\n    const container = containerRef.current;\n    if (!container) return;\n\n    const renderer = new Renderer({\n      webgl: 2,\n      alpha: true,\n      premultipliedAlpha: true,\n      antialias: false,\n      dpr: Math.min(window.devicePixelRatio || 1, 2)\n    });\n\n    const gl = renderer.gl;\n    gl.clearColor(0, 0, 0, 0);\n    const canvas = gl.canvas;\n    canvas.style.width = '100%';\n    canvas.style.height = '100%';\n    canvas.style.display = 'block';\n    container.appendChild(canvas);\n\n    const geometry = new Triangle(gl);\n    const program = new Program(gl, {\n      vertex,\n      fragment,\n      uniforms: {\n        iTime: { value: 0 },\n        iResolution: { value: new Float32Array([1, 1]) },\n        uColumns: { value: 14 },\n        uRows: { value: 8 },\n        uThickness: { value: 0.1 },\n        uSpeed: { value: 0.35 },\n        uTravel: { value: 0.7 },\n        uWaveSpread: { value: 0.9 },\n        uRowOffset: { value: 1.0 },\n        uSoftness: { value: 0.05 },\n        uGlow: { value: 0 },\n        uBrightness: { value: 1.0 },\n        uContrast: { value: 1.0 },\n        uOpacity: { value: 0.5 },\n        uVertical: { value: 0.0 },\n        uAlternate: { value: 0.0 },\n        uMouse: { value: new Float32Array([0.5, 0.5]) },\n        uMouseStrength: { value: 1 },\n        uMouseRadius: { value: 0.3 },\n        uEnableMouse: { value: 1.0 },\n        uMouseActive: { value: 0.0 },\n        uGrain: { value: 1.0 },\n        uGrainIntensity: { value: 0.05 },\n        uLightMode: { value: 0.0 },\n        uColor1: { value: new Float32Array([1, 1, 1]) },\n        uColor2: { value: new Float32Array([1, 1, 1]) },\n        uColor3: { value: new Float32Array([1, 1, 1]) }\n      }\n    });\n\n    const mesh = new Mesh(gl, { geometry, program });\n    ctxMap.set(container, { renderer, program, mesh });\n\n    const setSize = () => {\n      const rect = container.getBoundingClientRect();\n      const w = Math.max(1, Math.floor(rect.width));\n      const h = Math.max(1, Math.floor(rect.height));\n      renderer.setSize(w, h);\n      const res = program.uniforms.iResolution.value;\n      res[0] = gl.drawingBufferWidth;\n      res[1] = gl.drawingBufferHeight;\n      renderer.render({ scene: mesh });\n    };\n\n    const ro = new ResizeObserver(setSize);\n    ro.observe(container);\n    setSize();\n\n    let currentMouse = [0.5, 0.5];\n    let targetMouse = [0.5, 0.5];\n    let currentActive = 0;\n    let targetActive = 0;\n\n    const onMouseMove = e => {\n      const rect = canvas.getBoundingClientRect();\n      targetMouse = [(e.clientX - rect.left) / rect.width, 1.0 - (e.clientY - rect.top) / rect.height];\n      targetActive = 1;\n    };\n    const onMouseLeave = () => {\n      targetActive = 0;\n    };\n    canvas.addEventListener('mousemove', onMouseMove);\n    canvas.addEventListener('mouseleave', onMouseLeave);\n\n    let raf = 0;\n    let isVisible = true;\n    let isPageVisible = !document.hidden;\n    const t0 = performance.now();\n\n    const loop = t => {\n      program.uniforms.iTime.value = (t - t0) * 0.001;\n      currentMouse[0] += 0.05 * (targetMouse[0] - currentMouse[0]);\n      currentMouse[1] += 0.05 * (targetMouse[1] - currentMouse[1]);\n      currentActive += 0.05 * (targetActive - currentActive);\n      program.uniforms.uMouse.value[0] = currentMouse[0];\n      program.uniforms.uMouse.value[1] = currentMouse[1];\n      program.uniforms.uMouseActive.value = currentActive;\n      renderer.render({ scene: mesh });\n      raf = requestAnimationFrame(loop);\n    };\n\n    const tryStart = () => {\n      if (isVisible && isPageVisible && raf === 0) raf = requestAnimationFrame(loop);\n    };\n    const tryStop = () => {\n      if (raf !== 0) {\n        cancelAnimationFrame(raf);\n        raf = 0;\n      }\n    };\n\n    const io = new IntersectionObserver(\n      ([entry]) => {\n        isVisible = entry.isIntersecting;\n        isVisible ? tryStart() : tryStop();\n      },\n      { threshold: 0 }\n    );\n    io.observe(container);\n\n    const onVisibility = () => {\n      isPageVisible = !document.hidden;\n      isPageVisible ? tryStart() : tryStop();\n    };\n    document.addEventListener('visibilitychange', onVisibility);\n\n    tryStart();\n\n    return () => {\n      tryStop();\n      ro.disconnect();\n      io.disconnect();\n      document.removeEventListener('visibilitychange', onVisibility);\n      canvas.removeEventListener('mousemove', onMouseMove);\n      canvas.removeEventListener('mouseleave', onMouseLeave);\n      ctxMap.delete(container);\n      try {\n        container.removeChild(canvas);\n      } catch {}\n      gl.getExtension('WEBGL_lose_context')?.loseContext();\n    };\n  }, []);\n\n  useEffect(() => {\n    const container = containerRef.current;\n    if (!container) return;\n    const ctx = ctxMap.get(container);\n    if (!ctx) return;\n    const u = ctx.program.uniforms;\n\n    u.uColumns.value = Math.max(1, Math.round(columns));\n    u.uRows.value = Math.max(1, Math.round(rows));\n    u.uThickness.value = barThickness;\n    u.uSpeed.value = speed;\n    u.uTravel.value = travel;\n    u.uWaveSpread.value = waveSpread;\n    u.uRowOffset.value = rowOffset;\n    u.uSoftness.value = softness;\n    u.uGlow.value = glow;\n    u.uBrightness.value = brightness;\n    u.uContrast.value = contrast;\n    u.uOpacity.value = opacity;\n    u.uVertical.value = orientation === 'vertical' ? 1.0 : 0.0;\n    u.uAlternate.value = alternate ? 1.0 : 0.0;\n    u.uMouseStrength.value = mouseStrength;\n    u.uMouseRadius.value = mouseRadius;\n    u.uEnableMouse.value = mouseInteraction ? 1.0 : 0.0;\n    u.uGrain.value = grain ? 1.0 : 0.0;\n    u.uGrainIntensity.value = grainIntensity;\n    u.uLightMode.value = lightMode ? 1.0 : 0.0;\n    const c1 = hexToRgb(color1);\n    u.uColor1.value[0] = c1[0];\n    u.uColor1.value[1] = c1[1];\n    u.uColor1.value[2] = c1[2];\n    const c2 = hexToRgb(color2);\n    u.uColor2.value[0] = c2[0];\n    u.uColor2.value[1] = c2[1];\n    u.uColor2.value[2] = c2[2];\n    const c3 = hexToRgb(color3);\n    u.uColor3.value[0] = c3[0];\n    u.uColor3.value[1] = c3[1];\n    u.uColor3.value[2] = c3[2];\n  }, [\n    color1,\n    color2,\n    color3,\n    columns,\n    rows,\n    barThickness,\n    speed,\n    travel,\n    waveSpread,\n    rowOffset,\n    softness,\n    glow,\n    brightness,\n    contrast,\n    opacity,\n    orientation,\n    alternate,\n    mouseInteraction,\n    mouseStrength,\n    mouseRadius,\n    grain,\n    grainIntensity,\n    lightMode\n  ]);\n\n  return <div ref={containerRef} className={`sliced-waves-container ${className}`.trim()} />;\n};\n\nexport default SlicedWaves;\n"
		}
	],
	"registryDependencies": [],
	"dependencies": [
		"ogl@^1.0.11"
	]
}