diff --git a/public/r/Silk-JS-CSS.json b/public/r/Silk-JS-CSS.json
index a15183a3a..12c501cd9 100644
--- a/public/r/Silk-JS-CSS.json
+++ b/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 \n \n \n \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 \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 \n \n \n \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 \n );\n};\n\nexport default Silk;\n"
}
],
"registryDependencies": [],
diff --git a/public/r/Silk-JS-TW.json b/public/r/Silk-JS-TW.json
index 6bfb4958e..2ced25804 100644
--- a/public/r/Silk-JS-TW.json
+++ b/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 \n \n \n \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 \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 \n \n \n \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 \n );\n};\n\nexport default Silk;\n"
}
],
"registryDependencies": [],
diff --git a/public/r/Silk-TS-CSS.json b/public/r/Silk-TS-CSS.json
index ccf6d4dae..f4447a625 100644
--- a/public/r/Silk-TS-CSS.json
+++ b/public/r/Silk-TS-CSS.json
@@ -8,7 +8,7 @@
{
"type": "registry:component",
"path": "Silk/Silk.tsx",
- "content": "/* eslint-disable react/no-unknown-property */\nimport React, { forwardRef, useMemo, useRef, useLayoutEffect } from 'react';\nimport { Canvas, useFrame, useThree, RootState } from '@react-three/fiber';\nimport { Color, Mesh, ShaderMaterial } from 'three';\nimport { IUniform } from 'three';\n\ntype NormalizedRGB = [number, number, number];\n\nconst hexToNormalizedRGB = (hex: string): NormalizedRGB => {\n const clean = hex.replace('#', '');\n const r = parseInt(clean.slice(0, 2), 16) / 255;\n const g = parseInt(clean.slice(2, 4), 16) / 255;\n const b = parseInt(clean.slice(4, 6), 16) / 255;\n return [r, g, b];\n};\n\ninterface UniformValue {\n value: T;\n}\n\ninterface SilkUniforms {\n uSpeed: UniformValue;\n uScale: UniformValue;\n uNoiseIntensity: UniformValue;\n uColor: UniformValue;\n uRotation: UniformValue;\n uTime: UniformValue;\n [uniform: string]: IUniform;\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\ninterface SilkPlaneProps {\n uniforms: SilkUniforms;\n}\n\nconst SilkPlane = forwardRef(function SilkPlane({ uniforms }, ref) {\n const { viewport } = useThree();\n\n useLayoutEffect(() => {\n const mesh = ref as React.MutableRefObject;\n if (mesh.current) {\n mesh.current.scale.set(viewport.width, viewport.height, 1);\n }\n }, [ref, viewport]);\n\n useFrame((_state: RootState, delta: number) => {\n const mesh = ref as React.MutableRefObject;\n if (mesh.current) {\n const material = mesh.current.material as ShaderMaterial & {\n uniforms: SilkUniforms;\n };\n material.uniforms.uTime.value += 0.1 * delta;\n }\n });\n\n return (\n \n \n \n \n );\n});\nSilkPlane.displayName = 'SilkPlane';\n\nexport interface SilkProps {\n speed?: number;\n scale?: number;\n color?: string;\n noiseIntensity?: number;\n rotation?: number;\n}\n\nconst Silk: React.FC = ({ speed = 5, scale = 1, color = '#7B7481', noiseIntensity = 1.5, rotation = 0 }) => {\n const meshRef = useRef(null);\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 \n );\n};\n\nexport default Silk;\n"
+ "content": "/* eslint-disable react/no-unknown-property */\nimport React, { forwardRef, useMemo, useRef, useLayoutEffect, useEffect } from 'react';\nimport { Canvas, useFrame, useThree, RootState } from '@react-three/fiber';\nimport { Color, Mesh, ShaderMaterial } from 'three';\nimport { IUniform } from 'three';\n\ntype NormalizedRGB = [number, number, number];\n\nconst hexToNormalizedRGB = (hex: string): NormalizedRGB => {\n const clean = hex.replace('#', '');\n const r = parseInt(clean.slice(0, 2), 16) / 255;\n const g = parseInt(clean.slice(2, 4), 16) / 255;\n const b = parseInt(clean.slice(4, 6), 16) / 255;\n return [r, g, b];\n};\n\ninterface UniformValue {\n value: T;\n}\n\ninterface SilkUniforms {\n uSpeed: UniformValue;\n uScale: UniformValue;\n uNoiseIntensity: UniformValue;\n uColor: UniformValue;\n uRotation: UniformValue;\n uTime: UniformValue;\n [uniform: string]: IUniform;\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\ninterface SilkPlaneProps {\n uniforms: SilkUniforms;\n}\n\nconst SilkPlane = forwardRef(function SilkPlane({ uniforms }, ref) {\n const { viewport } = useThree();\n\n useLayoutEffect(() => {\n const mesh = ref as React.MutableRefObject;\n if (mesh.current) {\n mesh.current.scale.set(viewport.width, viewport.height, 1);\n }\n }, [ref, viewport]);\n\n useFrame((_state: RootState, delta: number) => {\n const mesh = ref as React.MutableRefObject;\n if (mesh.current) {\n const material = mesh.current.material as ShaderMaterial & {\n uniforms: SilkUniforms;\n };\n material.uniforms.uTime.value += 0.1 * delta;\n }\n });\n\n return (\n \n \n \n \n );\n});\nSilkPlane.displayName = 'SilkPlane';\n\nexport interface SilkProps {\n speed?: number;\n scale?: number;\n color?: string;\n noiseIntensity?: number;\n rotation?: number;\n}\n\nconst Silk: React.FC = ({ speed = 5, scale = 1, color = '#7B7481', noiseIntensity = 1.5, rotation = 0 }) => {\n const meshRef = useRef(null);\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 \n );\n};\n\nexport default Silk;\n"
}
],
"registryDependencies": [],
diff --git a/public/r/Silk-TS-TW.json b/public/r/Silk-TS-TW.json
index fd808a7aa..458ca704a 100644
--- a/public/r/Silk-TS-TW.json
+++ b/public/r/Silk-TS-TW.json
@@ -8,7 +8,7 @@
{
"type": "registry:component",
"path": "Silk/Silk.tsx",
- "content": "/* eslint-disable react/no-unknown-property */\nimport React, { forwardRef, useMemo, useRef, useLayoutEffect } from 'react';\nimport { Canvas, useFrame, useThree, RootState } from '@react-three/fiber';\nimport { Color, Mesh, ShaderMaterial } from 'three';\nimport { IUniform } from 'three';\n\ntype NormalizedRGB = [number, number, number];\n\nconst hexToNormalizedRGB = (hex: string): NormalizedRGB => {\n const clean = hex.replace('#', '');\n const r = parseInt(clean.slice(0, 2), 16) / 255;\n const g = parseInt(clean.slice(2, 4), 16) / 255;\n const b = parseInt(clean.slice(4, 6), 16) / 255;\n return [r, g, b];\n};\n\ninterface UniformValue {\n value: T;\n}\n\ninterface SilkUniforms {\n uSpeed: UniformValue;\n uScale: UniformValue;\n uNoiseIntensity: UniformValue;\n uColor: UniformValue;\n uRotation: UniformValue;\n uTime: UniformValue;\n [uniform: string]: IUniform;\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\ninterface SilkPlaneProps {\n uniforms: SilkUniforms;\n}\n\nconst SilkPlane = forwardRef(function SilkPlane({ uniforms }, ref) {\n const { viewport } = useThree();\n\n useLayoutEffect(() => {\n const mesh = ref as React.MutableRefObject;\n if (mesh.current) {\n mesh.current.scale.set(viewport.width, viewport.height, 1);\n }\n }, [ref, viewport]);\n\n useFrame((_state: RootState, delta: number) => {\n const mesh = ref as React.MutableRefObject;\n if (mesh.current) {\n const material = mesh.current.material as ShaderMaterial & {\n uniforms: SilkUniforms;\n };\n material.uniforms.uTime.value += 0.1 * delta;\n }\n });\n\n return (\n \n \n \n \n );\n});\nSilkPlane.displayName = 'SilkPlane';\n\nexport interface SilkProps {\n speed?: number;\n scale?: number;\n color?: string;\n noiseIntensity?: number;\n rotation?: number;\n}\n\nconst Silk: React.FC = ({ speed = 5, scale = 1, color = '#7B7481', noiseIntensity = 1.5, rotation = 0 }) => {\n const meshRef = useRef(null);\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 \n );\n};\n\nexport default Silk;\n"
+ "content": "/* eslint-disable react/no-unknown-property */\nimport React, { forwardRef, useMemo, useRef, useLayoutEffect, useEffect } from 'react';\nimport { Canvas, useFrame, useThree, RootState } from '@react-three/fiber';\nimport { Color, Mesh, ShaderMaterial } from 'three';\nimport { IUniform } from 'three';\n\ntype NormalizedRGB = [number, number, number];\n\nconst hexToNormalizedRGB = (hex: string): NormalizedRGB => {\n const clean = hex.replace('#', '');\n const r = parseInt(clean.slice(0, 2), 16) / 255;\n const g = parseInt(clean.slice(2, 4), 16) / 255;\n const b = parseInt(clean.slice(4, 6), 16) / 255;\n return [r, g, b];\n};\n\ninterface UniformValue {\n value: T;\n}\n\ninterface SilkUniforms {\n uSpeed: UniformValue;\n uScale: UniformValue;\n uNoiseIntensity: UniformValue;\n uColor: UniformValue;\n uRotation: UniformValue;\n uTime: UniformValue;\n [uniform: string]: IUniform;\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\ninterface SilkPlaneProps {\n uniforms: SilkUniforms;\n}\n\nconst SilkPlane = forwardRef(function SilkPlane({ uniforms }, ref) {\n const { viewport } = useThree();\n\n useLayoutEffect(() => {\n const mesh = ref as React.MutableRefObject;\n if (mesh.current) {\n mesh.current.scale.set(viewport.width, viewport.height, 1);\n }\n }, [ref, viewport]);\n\n useFrame((_state: RootState, delta: number) => {\n const mesh = ref as React.MutableRefObject;\n if (mesh.current) {\n const material = mesh.current.material as ShaderMaterial & {\n uniforms: SilkUniforms;\n };\n material.uniforms.uTime.value += 0.1 * delta;\n }\n });\n\n return (\n \n \n \n \n );\n});\nSilkPlane.displayName = 'SilkPlane';\n\nexport interface SilkProps {\n speed?: number;\n scale?: number;\n color?: string;\n noiseIntensity?: number;\n rotation?: number;\n}\n\nconst Silk: React.FC = ({ speed = 5, scale = 1, color = '#7B7481', noiseIntensity = 1.5, rotation = 0 }) => {\n const meshRef = useRef(null);\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 \n );\n};\n\nexport default Silk;\n"
}
],
"registryDependencies": [],
diff --git a/src/content/Backgrounds/Silk/Silk.jsx b/src/content/Backgrounds/Silk/Silk.jsx
index 11d0af05a..69070c39d 100644
--- a/src/content/Backgrounds/Silk/Silk.jsx
+++ b/src/content/Backgrounds/Silk/Silk.jsx
@@ -1,6 +1,6 @@
/* eslint-disable react/no-unknown-property */
import { Canvas, useFrame, useThree } from '@react-three/fiber';
-import { forwardRef, useRef, useMemo, useLayoutEffect } from 'react';
+import { forwardRef, useRef, useMemo, useLayoutEffect, useEffect } from 'react';
import { Color } from 'three';
const hexToNormalizedRGB = hex => {
@@ -103,9 +103,18 @@ const Silk = ({ speed = 5, scale = 1, color = '#7B7481', noiseIntensity = 1.5, r
uRotation: { value: rotation },
uTime: { value: 0 }
}),
- [speed, scale, noiseIntensity, color, rotation]
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ []
);
+ useEffect(() => {
+ uniforms.uSpeed.value = speed;
+ uniforms.uScale.value = scale;
+ uniforms.uNoiseIntensity.value = noiseIntensity;
+ uniforms.uColor.value.setRGB(...hexToNormalizedRGB(color));
+ uniforms.uRotation.value = rotation;
+ }, [speed, scale, noiseIntensity, color, rotation, uniforms]);
+
return (