"use client"; import React, { useMemo, useRef } from 'react'; import { Canvas, useFrame, RootState } from '@react-three/fiber'; import { Color, Mesh, ShaderMaterial, IUniform } from 'three'; interface UniformValue { value: T; } interface SilkUniforms { uSpeed: UniformValue; uScale: UniformValue; uNoiseIntensity: UniformValue; uColor: UniformValue; uRotation: UniformValue; uTime: UniformValue; [uniform: string]: IUniform; } const vertexShader = ` varying vec2 vUv; varying vec3 vPosition; void main() { vPosition = position; vUv = uv; // Fullscreen quad without camera projection gl_Position = vec4(position.xy, 0.0, 1.0); } `; const fragmentShader = ` varying vec2 vUv; varying vec3 vPosition; uniform float uTime; uniform vec3 uColor; uniform float uSpeed; uniform float uScale; uniform float uRotation; uniform float uNoiseIntensity; const float e = 2.71828182845904523536; float noise(vec2 texCoord) { float G = e; vec2 r = (G * sin(G * texCoord)); return fract(r.x * r.y * (1.0 + texCoord.x)); } vec2 rotateUvs(vec2 uv, float angle) { float c = cos(angle); float s = sin(angle); mat2 rot = mat2(c, -s, s, c); return rot * uv; } void main() { float rnd = noise(gl_FragCoord.xy); vec2 uv = rotateUvs(vUv * uScale, uRotation); vec2 tex = uv * uScale; float tOffset = uSpeed * uTime; tex.y += 0.03 * sin(8.0 * tex.x - tOffset); float pattern = 0.6 + 0.4 * sin(5.0 * (tex.x + tex.y + cos(3.0 * tex.x + 5.0 * tex.y) + 0.02 * tOffset) + sin(20.0 * (tex.x + tex.y - 0.1 * tOffset))); vec4 col = vec4(uColor, 1.0) * vec4(pattern) - rnd / 15.0 * uNoiseIntensity; col.a = 1.0; gl_FragColor = col; } `; interface SilkPlaneProps { uniforms: SilkUniforms; } const SilkPlane = function SilkPlane({ uniforms }: SilkPlaneProps) { const ref = useRef(null); useFrame((_state: RootState, delta: number) => { const mesh = ref.current; if (mesh) { const material = mesh.material as ShaderMaterial & { uniforms: SilkUniforms; }; material.uniforms.uTime.value += 0.1 * delta; } }); return ( ); }; export interface SilkProps { speed?: number; scale?: number; color?: string; noiseIntensity?: number; rotation?: number; } const Silk: React.FC = ({ speed = 5, scale = 1, color = '#FFC529', noiseIntensity = 1.5, rotation = 0 }) => { const uniforms = useMemo( () => ({ uSpeed: { value: speed }, uScale: { value: scale }, uNoiseIntensity: { value: noiseIntensity }, uColor: { value: new Color(color) }, uRotation: { value: rotation }, uTime: { value: 0 } }), [speed, scale, noiseIntensity, color, rotation] ); return (

); } export default Silk;