Fix Silk background freezing on parameter change

public/r/Silk-JS-CSS.json

@@ -8,7 +8,7 @@
 		{
 			"type": "registry:component",
 			"path": "Silk/Silk.jsx",
-			"content": "/* eslint-disable react/no-unknown-property */\nimport { Canvas, useFrame, useThree } from '@react-three/fiber';\nimport { forwardRef, useRef, useMemo, useLayoutEffect } from 'react';\nimport { Color } from 'three';\n\nconst hexToNormalizedRGB = hex => {\n  hex = hex.replace('#', '');\n  return [\n    parseInt(hex.slice(0, 2), 16) / 255,\n    parseInt(hex.slice(2, 4), 16) / 255,\n    parseInt(hex.slice(4, 6), 16) / 255\n  ];\n};\n\nconst vertexShader = `\nvarying vec2 vUv;\nvarying vec3 vPosition;\n\nvoid main() {\n  vPosition = position;\n  vUv = uv;\n  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n}\n`;\n\nconst fragmentShader = `\nvarying vec2 vUv;\nvarying vec3 vPosition;\n\nuniform float uTime;\nuniform vec3  uColor;\nuniform float uSpeed;\nuniform float uScale;\nuniform float uRotation;\nuniform float uNoiseIntensity;\n\nconst float e = 2.71828182845904523536;\n\nfloat noise(vec2 texCoord) {\n  float G = e;\n  vec2  r = (G * sin(G * texCoord));\n  return fract(r.x * r.y * (1.0 + texCoord.x));\n}\n\nvec2 rotateUvs(vec2 uv, float angle) {\n  float c = cos(angle);\n  float s = sin(angle);\n  mat2  rot = mat2(c, -s, s, c);\n  return rot * uv;\n}\n\nvoid main() {\n  float rnd        = noise(gl_FragCoord.xy);\n  vec2  uv         = rotateUvs(vUv * uScale, uRotation);\n  vec2  tex        = uv * uScale;\n  float tOffset    = uSpeed * uTime;\n\n  tex.y += 0.03 * sin(8.0 * tex.x - tOffset);\n\n  float pattern = 0.6 +\n                  0.4 * sin(5.0 * (tex.x + tex.y +\n                                   cos(3.0 * tex.x + 5.0 * tex.y) +\n                                   0.02 * tOffset) +\n                           sin(20.0 * (tex.x + tex.y - 0.1 * tOffset)));\n\n  vec4 col = vec4(uColor, 1.0) * vec4(pattern) - rnd / 15.0 * uNoiseIntensity;\n  col.a = 1.0;\n  gl_FragColor = col;\n}\n`;\n\nconst SilkPlane = forwardRef(function SilkPlane({ uniforms }, ref) {\n  const { viewport } = useThree();\n\n  useLayoutEffect(() => {\n    if (ref.current) {\n      ref.current.scale.set(viewport.width, viewport.height, 1);\n    }\n  }, [ref, viewport]);\n\n  useFrame((_, delta) => {\n    ref.current.material.uniforms.uTime.value += 0.1 * delta;\n  });\n\n  return (\n    <mesh ref={ref}>\n      <planeGeometry args={[1, 1, 1, 1]} />\n      <shaderMaterial uniforms={uniforms} vertexShader={vertexShader} fragmentShader={fragmentShader} />\n    </mesh>\n  );\n});\nSilkPlane.displayName = 'SilkPlane';\n\nconst Silk = ({ speed = 5, scale = 1, color = '#7B7481', noiseIntensity = 1.5, rotation = 0 }) => {\n  const meshRef = useRef();\n\n  const uniforms = useMemo(\n    () => ({\n      uSpeed: { value: speed },\n      uScale: { value: scale },\n      uNoiseIntensity: { value: noiseIntensity },\n      uColor: { value: new Color(...hexToNormalizedRGB(color)) },\n      uRotation: { value: rotation },\n      uTime: { value: 0 }\n    }),\n    [speed, scale, noiseIntensity, color, rotation]\n  );\n\n  return (\n    <Canvas dpr={[1, 2]} frameloop=\"always\">\n      <SilkPlane ref={meshRef} uniforms={uniforms} />\n    </Canvas>\n  );\n};\n\nexport default Silk;\n"
+			"content": "/* eslint-disable react/no-unknown-property */\nimport { Canvas, useFrame, useThree } from '@react-three/fiber';\nimport { forwardRef, useRef, useMemo, useLayoutEffect, useEffect } from 'react';\nimport { Color } from 'three';\n\nconst hexToNormalizedRGB = hex => {\n  hex = hex.replace('#', '');\n  return [\n    parseInt(hex.slice(0, 2), 16) / 255,\n    parseInt(hex.slice(2, 4), 16) / 255,\n    parseInt(hex.slice(4, 6), 16) / 255\n  ];\n};\n\nconst vertexShader = `\nvarying vec2 vUv;\nvarying vec3 vPosition;\n\nvoid main() {\n  vPosition = position;\n  vUv = uv;\n  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n}\n`;\n\nconst fragmentShader = `\nvarying vec2 vUv;\nvarying vec3 vPosition;\n\nuniform float uTime;\nuniform vec3  uColor;\nuniform float uSpeed;\nuniform float uScale;\nuniform float uRotation;\nuniform float uNoiseIntensity;\n\nconst float e = 2.71828182845904523536;\n\nfloat noise(vec2 texCoord) {\n  float G = e;\n  vec2  r = (G * sin(G * texCoord));\n  return fract(r.x * r.y * (1.0 + texCoord.x));\n}\n\nvec2 rotateUvs(vec2 uv, float angle) {\n  float c = cos(angle);\n  float s = sin(angle);\n  mat2  rot = mat2(c, -s, s, c);\n  return rot * uv;\n}\n\nvoid main() {\n  float rnd        = noise(gl_FragCoord.xy);\n  vec2  uv         = rotateUvs(vUv * uScale, uRotation);\n  vec2  tex        = uv * uScale;\n  float tOffset    = uSpeed * uTime;\n\n  tex.y += 0.03 * sin(8.0 * tex.x - tOffset);\n\n  float pattern = 0.6 +\n                  0.4 * sin(5.0 * (tex.x + tex.y +\n                                   cos(3.0 * tex.x + 5.0 * tex.y) +\n                                   0.02 * tOffset) +\n                           sin(20.0 * (tex.x + tex.y - 0.1 * tOffset)));\n\n  vec4 col = vec4(uColor, 1.0) * vec4(pattern) - rnd / 15.0 * uNoiseIntensity;\n  col.a = 1.0;\n  gl_FragColor = col;\n}\n`;\n\nconst SilkPlane = forwardRef(function SilkPlane({ uniforms }, ref) {\n  const { viewport } = useThree();\n\n  useLayoutEffect(() => {\n    if (ref.current) {\n      ref.current.scale.set(viewport.width, viewport.height, 1);\n    }\n  }, [ref, viewport]);\n\n  useFrame((_, delta) => {\n    ref.current.material.uniforms.uTime.value += 0.1 * delta;\n  });\n\n  return (\n    <mesh ref={ref}>\n      <planeGeometry args={[1, 1, 1, 1]} />\n      <shaderMaterial uniforms={uniforms} vertexShader={vertexShader} fragmentShader={fragmentShader} />\n    </mesh>\n  );\n});\nSilkPlane.displayName = 'SilkPlane';\n\nconst Silk = ({ speed = 5, scale = 1, color = '#7B7481', noiseIntensity = 1.5, rotation = 0 }) => {\n  const meshRef = useRef();\n\n  const uniforms = useMemo(\n    () => ({\n      uSpeed: { value: speed },\n      uScale: { value: scale },\n      uNoiseIntensity: { value: noiseIntensity },\n      uColor: { value: new Color(...hexToNormalizedRGB(color)) },\n      uRotation: { value: rotation },\n      uTime: { value: 0 }\n    }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    []\n  );\n\n  useEffect(() => {\n    uniforms.uSpeed.value = speed;\n    uniforms.uScale.value = scale;\n    uniforms.uNoiseIntensity.value = noiseIntensity;\n    uniforms.uColor.value.setRGB(...hexToNormalizedRGB(color));\n    uniforms.uRotation.value = rotation;\n  }, [speed, scale, noiseIntensity, color, rotation, uniforms]);\n\n  return (\n    <Canvas dpr={[1, 2]} frameloop=\"always\">\n      <SilkPlane ref={meshRef} uniforms={uniforms} />\n    </Canvas>\n  );\n};\n\nexport default Silk;\n"
 		}
 	],
 	"registryDependencies": [],

public/r/Silk-JS-TW.json

@@ -8,7 +8,7 @@
 		{
 			"type": "registry:component",
 			"path": "Silk/Silk.jsx",
-			"content": "/* eslint-disable react/no-unknown-property */\nimport { Canvas, useFrame, useThree } from '@react-three/fiber';\nimport { forwardRef, useRef, useMemo, useLayoutEffect } from 'react';\nimport { Color } from 'three';\n\nconst hexToNormalizedRGB = hex => {\n  hex = hex.replace('#', '');\n  return [\n    parseInt(hex.slice(0, 2), 16) / 255,\n    parseInt(hex.slice(2, 4), 16) / 255,\n    parseInt(hex.slice(4, 6), 16) / 255\n  ];\n};\n\nconst vertexShader = `\nvarying vec2 vUv;\nvarying vec3 vPosition;\n\nvoid main() {\n  vPosition = position;\n  vUv = uv;\n  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n}\n`;\n\nconst fragmentShader = `\nvarying vec2 vUv;\nvarying vec3 vPosition;\n\nuniform float uTime;\nuniform vec3  uColor;\nuniform float uSpeed;\nuniform float uScale;\nuniform float uRotation;\nuniform float uNoiseIntensity;\n\nconst float e = 2.71828182845904523536;\n\nfloat noise(vec2 texCoord) {\n  float G = e;\n  vec2  r = (G * sin(G * texCoord));\n  return fract(r.x * r.y * (1.0 + texCoord.x));\n}\n\nvec2 rotateUvs(vec2 uv, float angle) {\n  float c = cos(angle);\n  float s = sin(angle);\n  mat2  rot = mat2(c, -s, s, c);\n  return rot * uv;\n}\n\nvoid main() {\n  float rnd        = noise(gl_FragCoord.xy);\n  vec2  uv         = rotateUvs(vUv * uScale, uRotation);\n  vec2  tex        = uv * uScale;\n  float tOffset    = uSpeed * uTime;\n\n  tex.y += 0.03 * sin(8.0 * tex.x - tOffset);\n\n  float pattern = 0.6 +\n                  0.4 * sin(5.0 * (tex.x + tex.y +\n                                   cos(3.0 * tex.x + 5.0 * tex.y) +\n                                   0.02 * tOffset) +\n                           sin(20.0 * (tex.x + tex.y - 0.1 * tOffset)));\n\n  vec4 col = vec4(uColor, 1.0) * vec4(pattern) - rnd / 15.0 * uNoiseIntensity;\n  col.a = 1.0;\n  gl_FragColor = col;\n}\n`;\n\nconst SilkPlane = forwardRef(function SilkPlane({ uniforms }, ref) {\n  const { viewport } = useThree();\n\n  useLayoutEffect(() => {\n    if (ref.current) {\n      ref.current.scale.set(viewport.width, viewport.height, 1);\n    }\n  }, [ref, viewport]);\n\n  useFrame((_, delta) => {\n    ref.current.material.uniforms.uTime.value += 0.1 * delta;\n  });\n\n  return (\n    <mesh ref={ref}>\n      <planeGeometry args={[1, 1, 1, 1]} />\n      <shaderMaterial uniforms={uniforms} vertexShader={vertexShader} fragmentShader={fragmentShader} />\n    </mesh>\n  );\n});\nSilkPlane.displayName = 'SilkPlane';\n\nconst Silk = ({ speed = 5, scale = 1, color = '#7B7481', noiseIntensity = 1.5, rotation = 0 }) => {\n  const meshRef = useRef();\n\n  const uniforms = useMemo(\n    () => ({\n      uSpeed: { value: speed },\n      uScale: { value: scale },\n      uNoiseIntensity: { value: noiseIntensity },\n      uColor: { value: new Color(...hexToNormalizedRGB(color)) },\n      uRotation: { value: rotation },\n      uTime: { value: 0 }\n    }),\n    [speed, scale, noiseIntensity, color, rotation]\n  );\n\n  return (\n    <Canvas dpr={[1, 2]} frameloop=\"always\">\n      <SilkPlane ref={meshRef} uniforms={uniforms} />\n    </Canvas>\n  );\n};\n\nexport default Silk;\n"
+			"content": "/* eslint-disable react/no-unknown-property */\nimport { Canvas, useFrame, useThree } from '@react-three/fiber';\nimport { forwardRef, useRef, useMemo, useLayoutEffect, useEffect } from 'react';\nimport { Color } from 'three';\n\nconst hexToNormalizedRGB = hex => {\n  hex = hex.replace('#', '');\n  return [\n    parseInt(hex.slice(0, 2), 16) / 255,\n    parseInt(hex.slice(2, 4), 16) / 255,\n    parseInt(hex.slice(4, 6), 16) / 255\n  ];\n};\n\nconst vertexShader = `\nvarying vec2 vUv;\nvarying vec3 vPosition;\n\nvoid main() {\n  vPosition = position;\n  vUv = uv;\n  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n}\n`;\n\nconst fragmentShader = `\nvarying vec2 vUv;\nvarying vec3 vPosition;\n\nuniform float uTime;\nuniform vec3  uColor;\nuniform float uSpeed;\nuniform float uScale;\nuniform float uRotation;\nuniform float uNoiseIntensity;\n\nconst float e = 2.71828182845904523536;\n\nfloat noise(vec2 texCoord) {\n  float G = e;\n  vec2  r = (G * sin(G * texCoord));\n  return fract(r.x * r.y * (1.0 + texCoord.x));\n}\n\nvec2 rotateUvs(vec2 uv, float angle) {\n  float c = cos(angle);\n  float s = sin(angle);\n  mat2  rot = mat2(c, -s, s, c);\n  return rot * uv;\n}\n\nvoid main() {\n  float rnd        = noise(gl_FragCoord.xy);\n  vec2  uv         = rotateUvs(vUv * uScale, uRotation);\n  vec2  tex        = uv * uScale;\n  float tOffset    = uSpeed * uTime;\n\n  tex.y += 0.03 * sin(8.0 * tex.x - tOffset);\n\n  float pattern = 0.6 +\n                  0.4 * sin(5.0 * (tex.x + tex.y +\n                                   cos(3.0 * tex.x + 5.0 * tex.y) +\n                                   0.02 * tOffset) +\n                           sin(20.0 * (tex.x + tex.y - 0.1 * tOffset)));\n\n  vec4 col = vec4(uColor, 1.0) * vec4(pattern) - rnd / 15.0 * uNoiseIntensity;\n  col.a = 1.0;\n  gl_FragColor = col;\n}\n`;\n\nconst SilkPlane = forwardRef(function SilkPlane({ uniforms }, ref) {\n  const { viewport } = useThree();\n\n  useLayoutEffect(() => {\n    if (ref.current) {\n      ref.current.scale.set(viewport.width, viewport.height, 1);\n    }\n  }, [ref, viewport]);\n\n  useFrame((_, delta) => {\n    ref.current.material.uniforms.uTime.value += 0.1 * delta;\n  });\n\n  return (\n    <mesh ref={ref}>\n      <planeGeometry args={[1, 1, 1, 1]} />\n      <shaderMaterial uniforms={uniforms} vertexShader={vertexShader} fragmentShader={fragmentShader} />\n    </mesh>\n  );\n});\nSilkPlane.displayName = 'SilkPlane';\n\nconst Silk = ({ speed = 5, scale = 1, color = '#7B7481', noiseIntensity = 1.5, rotation = 0 }) => {\n  const meshRef = useRef();\n\n  const uniforms = useMemo(\n    () => ({\n      uSpeed: { value: speed },\n      uScale: { value: scale },\n      uNoiseIntensity: { value: noiseIntensity },\n      uColor: { value: new Color(...hexToNormalizedRGB(color)) },\n      uRotation: { value: rotation },\n      uTime: { value: 0 }\n    }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    []\n  );\n\n  useEffect(() => {\n    uniforms.uSpeed.value = speed;\n    uniforms.uScale.value = scale;\n    uniforms.uNoiseIntensity.value = noiseIntensity;\n    uniforms.uColor.value.setRGB(...hexToNormalizedRGB(color));\n    uniforms.uRotation.value = rotation;\n  }, [speed, scale, noiseIntensity, color, rotation, uniforms]);\n\n  return (\n    <Canvas dpr={[1, 2]} frameloop=\"always\">\n      <SilkPlane ref={meshRef} uniforms={uniforms} />\n    </Canvas>\n  );\n};\n\nexport default Silk;\n"
 		}
 	],
 	"registryDependencies": [],