{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "fluid-particles", "type": "registry:component", "title": "Fluid Particles", "author": "Toby Belhome", "description": "The Geometric Background component features a modern and sophisticated design, incorporating dynamic geometric shapes like triangles, squares, and polygons. These shapes subtly animate across the screen, adding a unique and engaging element to your website's background. Perfect for tech, creative, and professional websites, the geometric pattern adapts effortlessly to both light and dark themes, creating a sleek and visually striking experience for users.", "dependencies": [], "registryDependencies": [ "button", "http://localhost:3000/r/fluid-particles.json" ], "files": [ { "path": "examples/motion/backgrounds/fluid-particles/01/fluid-particles.tsx", "content": "\"use client\";\n\nimport React, { useEffect, useRef } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\ninterface CyberBackgroundProps {\n children?: React.ReactNode;\n particleCount?: number;\n noiseIntensity?: number;\n particleSize?: { min: number; max: number };\n className?: string;\n}\n\nfunction createNoise() {\n const permutation = [\n 151, 160, 137, 91, 90, 15, 131, 13, 201, 95, 96, 53, 194, 233, 7, 225, 140, 36, 103, 30, 69,\n 142, 8, 99, 37, 240, 21, 10, 23, 190, 6, 148, 247, 120, 234, 75, 0, 26, 197, 62, 94, 252, 219,\n 203, 117, 35, 11, 32, 57, 177, 33, 88, 237, 149, 56, 87, 174, 20, 125, 136, 171, 168, 68, 175,\n 74, 165, 71, 134, 139, 48, 27, 166, 77, 146, 158, 231, 83, 111, 229, 122, 60, 211, 133, 230,\n 220, 105, 92, 41, 55, 46, 245, 40, 244, 102, 143, 54, 65, 25, 63, 161, 1, 216, 80, 73, 209, 76,\n 132, 187, 208, 89, 18, 169, 200, 196, 135, 130, 116, 188, 159, 86, 164, 100, 109, 198, 173, 186,\n 3, 64, 52, 217, 226, 250, 124, 123, 5, 202, 38, 147, 118, 126, 255, 82, 85, 212, 207, 206, 59,\n 227, 47, 16, 58, 17, 182, 189, 28, 42, 223, 183, 170, 213, 119, 248, 152, 2, 44, 154, 163, 70,\n 221, 153, 101, 155, 167, 43, 172, 9, 129, 22, 39, 253, 19, 98, 108, 110, 79, 113, 224, 232, 178,\n 185, 112, 104, 218, 246, 97, 228, 251, 34, 242, 193, 238, 210, 144, 12, 191, 179, 162, 241, 81,\n 51, 145, 235, 249, 14, 239, 107, 49, 192, 214, 31, 181, 199, 106, 157, 184, 84, 204, 176, 115,\n 121, 50, 45, 127, 4, 150, 254, 138, 236, 205, 93, 222, 114, 67, 29, 24, 72, 243, 141, 128, 195,\n 78, 66, 215, 61, 156, 180\n ];\n\n const p = new Array(512);\n for (let i = 0; i < 256; i++) p[256 + i] = p[i] = permutation[i];\n\n function fade(t: number) {\n return t * t * t * (t * (t * 6 - 15) + 10);\n }\n\n function lerp(t: number, a: number, b: number) {\n return a + t * (b - a);\n }\n\n function grad(hash: number, x: number, y: number, z: number) {\n const h = hash & 15;\n const u = h < 8 ? x : y;\n const v = h < 4 ? y : h === 12 || h === 14 ? x : z;\n return ((h & 1) === 0 ? u : -u) + ((h & 2) === 0 ? v : -v);\n }\n\n return {\n simplex3: (x: number, y: number, z: number) => {\n const X = Math.floor(x) & 255;\n const Y = Math.floor(y) & 255;\n const Z = Math.floor(z) & 255;\n\n x -= Math.floor(x);\n y -= Math.floor(y);\n z -= Math.floor(z);\n\n const u = fade(x);\n const v = fade(y);\n const w = fade(z);\n\n const A = p[X] + Y;\n const AA = p[A] + Z;\n const AB = p[A + 1] + Z;\n const B = p[X + 1] + Y;\n const BA = p[B] + Z;\n const BB = p[B + 1] + Z;\n\n return lerp(\n w,\n lerp(\n v,\n lerp(u, grad(p[AA], x, y, z), grad(p[BA], x - 1, y, z)),\n lerp(u, grad(p[AB], x, y - 1, z), grad(p[BB], x - 1, y - 1, z))\n ),\n lerp(\n v,\n lerp(u, grad(p[AA + 1], x, y, z - 1), grad(p[BA + 1], x - 1, y, z - 1)),\n lerp(u, grad(p[AB + 1], x, y - 1, z - 1), grad(p[BB + 1], x - 1, y - 1, z - 1))\n )\n );\n }\n };\n}\n\nconst COLOR_SCHEME = {\n light: {\n particle: {\n color: \"rgba(0, 0, 0, 0.07)\"\n },\n background: \"rgba(255, 255, 255, 0.12)\"\n },\n dark: {\n particle: {\n color: \"rgba(255, 255, 255, 0.07)\"\n },\n background: \"rgba(0, 0, 0, 0.12)\"\n }\n} as const;\n\ninterface Particle {\n x: number;\n y: number;\n size: number;\n velocity: { x: number; y: number };\n life: number;\n maxLife: number;\n}\n\nexport default function FluidParticlesBackground({\n children,\n particleCount = 2000,\n noiseIntensity = 0.003,\n particleSize = { min: 0.5, max: 2 },\n className\n}: CyberBackgroundProps) {\n const canvasRef = useRef(null);\n const noise = createNoise();\n\n useEffect(() => {\n const canvas = canvasRef.current;\n if (!canvas) return;\n\n const ctx = canvas.getContext(\"2d\", { alpha: true });\n if (!ctx) return;\n\n const resizeCanvas = () => {\n const container = canvas.parentElement;\n if (!container) return;\n\n canvas.width = container.clientWidth;\n canvas.height = container.clientHeight;\n };\n\n resizeCanvas();\n\n const particles: Particle[] = Array.from({ length: particleCount }, () => ({\n x: Math.random() * canvas.width,\n y: Math.random() * canvas.height,\n size: Math.random() * (particleSize.max - particleSize.min) + particleSize.min,\n velocity: { x: 0, y: 0 },\n life: Math.random() * 100,\n maxLife: 100 + Math.random() * 50\n }));\n\n const animate = () => {\n const isDark = document.documentElement.classList.contains(\"dark\");\n const scheme = isDark ? COLOR_SCHEME.dark : COLOR_SCHEME.light;\n\n ctx.fillStyle = isDark ? \"rgba(0, 0, 0, 0.1)\" : \"rgba(255, 255, 255, 0.1)\";\n ctx.fillRect(0, 0, canvas.width, canvas.height);\n\n for (const particle of particles) {\n particle.life += 1;\n if (particle.life > particle.maxLife) {\n particle.life = 0;\n particle.x = Math.random() * canvas.width;\n particle.y = Math.random() * canvas.height;\n }\n\n const opacity = Math.sin((particle.life / particle.maxLife) * Math.PI) * 0.15;\n\n const n = noise.simplex3(\n particle.x * noiseIntensity,\n particle.y * noiseIntensity,\n Date.now() * 0.0001\n );\n\n const angle = n * Math.PI * 4;\n particle.velocity.x = Math.cos(angle) * 2;\n particle.velocity.y = Math.sin(angle) * 2;\n\n particle.x += particle.velocity.x;\n particle.y += particle.velocity.y;\n\n if (particle.x < 0) particle.x = canvas.width;\n if (particle.x > canvas.width) particle.x = 0;\n if (particle.y < 0) particle.y = canvas.height;\n if (particle.y > canvas.height) particle.y = 0;\n\n ctx.fillStyle = isDark ? `rgba(255, 255, 255, ${opacity})` : `rgba(0, 0, 0, ${opacity})`;\n ctx.beginPath();\n ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);\n ctx.fill();\n }\n\n requestAnimationFrame(animate);\n };\n\n animate();\n\n const handleResize = () => {\n resizeCanvas();\n };\n\n window.addEventListener(\"resize\", handleResize);\n return () => window.removeEventListener(\"resize\", handleResize);\n }, [particleCount, noiseIntensity, particleSize, noise]);\n\n return (\n
\n \n {children}\n
\n );\n}\n", "type": "registry:component", "target": "components/fluid-particles/fluid-particles.tsx" }, { "path": "examples/motion/backgrounds/fluid-particles/01/page.tsx", "content": "import { Button } from \"@/components/ui/button\";\nimport FluidParticlesBackground from \"./fluid-particles\";\n\nexport default function WaveyBackgroundExample() {\n return (\n \n
\n

\n Bundui Components\n

\n \n
\n \n );\n}\n", "type": "registry:component", "target": "components/fluid-particles/fluid-particles-example.tsx" } ], "meta": { "isPro": false } }