{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "mesh-gradient-background2", "dependencies": [ "three", "@types/three", "@react-three/fiber", "@react-three/drei" ], "devDependencies": [], "registryDependencies": [], "files": [ { "path": "./registry/components/external/mesh-gradient-background2.txt", "content": "// @ts-nocheck\r\n'use client';\r\nimport React, { useMemo, useRef } from 'react';\r\nimport { useFrame, ThreeElements, Canvas } from '@react-three/fiber';\r\nimport { extend } from '@react-three/fiber';\r\nimport { MathUtils, Vector3, Color, IcosahedronGeometry, Mesh } from 'three';\r\nimport { Environment, OrbitControls } from '@react-three/drei';\r\nimport {\r\n EffectComposer,\r\n Bloom,\r\n N8AO,\r\n ToneMapping,\r\n Noise,\r\n} from '@react-three/postprocessing';\r\nimport { BlendFunction } from 'postprocessing';\r\n// Extend the geometry to resolve the R3F warning\r\nextend({ IcosahedronGeometry });\r\nconst vertexShader = `\r\nuniform float u_intensity;\r\nuniform float u_time;\r\nuniform float u_noiseScale;\r\nuniform float u_noiseSpeed;\r\n\r\nvarying vec2 vUv;\r\nvarying float vDisplacement;\r\n\r\n// Classic Perlin 3D Noise functions\r\nvec4 permute(vec4 x) {\r\n return mod(((x*34.0)+1.0)*x, 289.0);\r\n}\r\n\r\nvec4 taylorInvSqrt(vec4 r) {\r\n return 1.79284291400159 - 0.85373472095314 * r;\r\n}\r\n\r\nvec3 fade(vec3 t) {\r\n return t*t*t*(t*(t*6.0-15.0)+10.0);\r\n}\r\n\r\nfloat cnoise(vec3 P) {\r\n vec3 Pi0 = floor(P);\r\n vec3 Pi1 = Pi0 + vec3(1.0);\r\n Pi0 = mod(Pi0, 289.0);\r\n Pi1 = mod(Pi1, 289.0);\r\n vec3 Pf0 = fract(P);\r\n vec3 Pf1 = Pf0 - vec3(1.0);\r\n vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);\r\n vec4 iy = vec4(Pi0.yy, Pi1.yy);\r\n vec4 iz0 = Pi0.zzzz;\r\n vec4 iz1 = Pi1.zzzz;\r\n\r\n vec4 ixy = permute(permute(ix) + iy);\r\n vec4 ixy0 = permute(ixy + iz0);\r\n vec4 ixy1 = permute(ixy + iz1);\r\n\r\n vec4 gx0 = ixy0 / 7.0;\r\n vec4 gy0 = fract(floor(gx0) / 7.0) - 0.5;\r\n gx0 = fract(gx0);\r\n vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);\r\n vec4 sz0 = step(gz0, vec4(0.0));\r\n gx0 -= sz0 * (step(0.0, gx0) - 0.5);\r\n gy0 -= sz0 * (step(0.0, gy0) - 0.5);\r\n\r\n vec4 gx1 = ixy1 / 7.0;\r\n vec4 gy1 = fract(floor(gx1) / 7.0) - 0.5;\r\n gx1 = fract(gx1);\r\n vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);\r\n vec4 sz1 = step(gz1, vec4(0.0));\r\n gx1 -= sz1 * (step(0.0, gx1) - 0.5);\r\n gy1 -= sz1 * (step(0.0, gy1) - 0.5);\r\n\r\n vec3 g000 = vec3(gx0.x,gy0.x,gz0.x);\r\n vec3 g100 = vec3(gx0.y,gy0.y,gz0.y);\r\n vec3 g010 = vec3(gx0.z,gy0.z,gz0.z);\r\n vec3 g110 = vec3(gx0.w,gy0.w,gz0.w);\r\n vec3 g001 = vec3(gx1.x,gy1.x,gz1.x);\r\n vec3 g101 = vec3(gx1.y,gy1.y,gz1.y);\r\n vec3 g011 = vec3(gx1.z,gy1.z,gz1.z);\r\n vec3 g111 = vec3(gx1.w,gy1.w,gz1.w);\r\n\r\n vec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));\r\n g000 *= norm0.x;\r\n g010 *= norm0.y;\r\n g100 *= norm0.z;\r\n g110 *= norm0.w;\r\n vec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));\r\n g001 *= norm1.x;\r\n g011 *= norm1.y;\r\n g101 *= norm1.z;\r\n g111 *= norm1.w;\r\n\r\n float n000 = dot(g000, Pf0);\r\n float n100 = dot(g100, vec3(Pf1.x, Pf0.yz));\r\n float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));\r\n float n110 = dot(g110, vec3(Pf1.xy, Pf0.z));\r\n float n001 = dot(g001, vec3(Pf0.xy, Pf1.z));\r\n float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));\r\n float n011 = dot(g011, vec3(Pf0.x, Pf1.yz));\r\n float n111 = dot(g111, Pf1);\r\n\r\n vec3 fade_xyz = fade(Pf0);\r\n vec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);\r\n vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);\r\n float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x); \r\n return 2.2 * n_xyz;\r\n}\r\n// Turbulence function\r\nfloat turbulence(vec3 p) {\r\n float t = 0.0;\r\n float frequency = 1.0;\r\n float amplitude = 1.0;\r\n for (int i = 0; i < 4; i++) {\r\n t += abs(cnoise(p * frequency)) * amplitude;\r\n frequency *= 2.0;\r\n amplitude *= 0.5;\r\n }\r\n return t;\r\n}\r\n\r\nvoid main() {\r\n vUv = uv;\r\n\r\n // Multi-layered noise\r\n float noise1 = cnoise(position * u_noiseScale + vec3(u_time * u_noiseSpeed));\r\n float noise2 = cnoise(position * (u_noiseScale * 2.0) + vec3(u_time * u_noiseSpeed * 1.5)) * 0.5;\r\n float turbulenceNoise = turbulence(position + vec3(u_time)) * 0.3;\r\n\r\n // Combined noise displacement\r\n vDisplacement = noise1 + noise2 + turbulenceNoise;\r\n \r\n vec3 newPosition = position + normal * (u_intensity * vDisplacement);\r\n \r\n vec4 modelPosition = modelMatrix * vec4(newPosition, 1.0);\r\n vec4 viewPosition = viewMatrix * modelPosition;\r\n vec4 projectedPosition = projectionMatrix * viewPosition;\r\n \r\n gl_Position = projectedPosition;\r\n}\r\n`;\r\n\r\nconst fragmentShader = `\r\nuniform float u_intensity;\r\nuniform float u_time;\r\nuniform vec3 u_color;\r\n\r\nvarying vec2 vUv;\r\nvarying float vDisplacement;\r\n\r\nvoid main() {\r\n // Use displacement to create dynamic color variation\r\n float distort = 2.0 * vDisplacement * u_intensity * sin(vUv.y * 10.0 + u_time);\r\n vec3 color = mix(u_color, vec3(1.0, 1.0, 1.0), abs(distort));\r\n gl_FragColor = vec4(color, 1.0);\r\n}\r\n`;\r\n\r\ninterface BlobProps {\r\n color?: string; \r\n}\r\n\r\n\r\nconst Blob: React.FC = ({ color = '#ffd717' }) => {\r\n const mesh = useRef(null);\r\n const hover = useRef(false);\r\n\r\n const uniforms = useMemo(\r\n () => ({\r\n u_time: { value: 0 },\r\n u_intensity: { value: 0.3 },\r\n u_color: { value: new Color(color)},\r\n u_noiseScale: { value: 2.0 },\r\n u_noiseSpeed: { value: 1.0 },\r\n }),\r\n []\r\n );\r\n\r\n const targetPosition = useRef(new Vector3(0, 0, 0));\r\n const currentPosition = useRef(new Vector3(0, 0, 0));\r\n\r\n useFrame((state) => {\r\n const { clock, mouse } = state;\r\n\r\n if (mesh.current) {\r\n const material = mesh.current.material as THREE.ShaderMaterial;\r\n\r\n material.uniforms.u_time.value = 0.4 * clock.getElapsedTime();\r\n\r\n // Dynamic noise parameters\r\n material.uniforms.u_noiseScale.value =\r\n Math.sin(clock.getElapsedTime() * 0.1) * 1 + 1; // Oscillating noise scale\r\n\r\n material.uniforms.u_intensity.value = MathUtils.lerp(\r\n material.uniforms.u_intensity.value,\r\n hover.current ? 0.4 : 0.4,\r\n 0.02\r\n );\r\n // // Update target position based on mouse\r\n targetPosition.current.set(mouse.x * 0.4, mouse.y * 0.4, 0);\r\n currentPosition.current.lerp(targetPosition.current, 0.1);\r\n\r\n mesh.current.position.copy(currentPosition.current);\r\n }\r\n });\r\n return (\r\n (hover.current = true)}\r\n onPointerOut={() => (hover.current = false)}\r\n >\r\n\r\n \r\n \r\n \r\n );\r\n};\r\n\r\n// Updated index page\r\nconst Home: React.FC = () => {\r\n return (\r\n
\r\n
\r\n

\r\n {' '}\r\n Mesh Gradient\r\n

\r\n
\r\n \r\n {/* */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default Home;", "type": "registry:component" } ], "type": "registry:component" }