{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "hero-neurix", "title": "Hero · Neurix", "description": "Hero · Neurix section.", "dependencies": [ "lucide-react", "ogl" ], "files": [ { "path": "registry/talizen/hero/hero-neurix/hero-neurix.tsx", "content": "import { Menu, X } from \"lucide-react\"\nimport { useState } from \"react\"\n\nimport GradientBlinds from \"./GradientBlinds\"\n\nexport function HeroNeurix() {\n const navItems = [\"HOME\", \"FEATURES\", \"RESOURCES\", \"PRICING\"]\n const [menuOpen, setMenuOpen] = useState(false)\n const MenuIcon = menuOpen ? X : Menu\n\n return (\n
\n
\n \n\n
\n
\n \n UPDATE\n \n CUSTOMIZABLE AI LOGIC\n
\n\n

\n AI That Thinks With You
\n Not For You\n

\n\n

\n Neurix helps teams turn scattered data into confident decisions using adaptive AI\n workflows built for speed, clarity, and scale.\n

\n\n
\n
\n
\n \n
\n
\n \n
\n Select style\n \n \n \n
\n
\n \n
\n
\n
\n\n
\n

\n Trusted by experts at\n

\n
\n Google\n Microsoft\n stripe\n amazon\n
\n
\n
\n\n
\n \n
\n\n
\n
\n )\n}\n\nexport default HeroNeurix\n", "type": "registry:component" }, { "path": "registry/talizen/hero/hero-neurix/GradientBlinds.tsx", "content": "import React, { useEffect, useRef } from 'react';\nimport { Renderer, Program, Mesh, Triangle } from 'ogl';\n\nexport interface GradientBlindsProps {\n className?: string;\n dpr?: number;\n paused?: boolean;\n gradientColors?: string[];\n gradientColorsSecondary?: string[];\n angle?: number;\n noise?: number;\n blindCount?: number;\n blindMinWidth?: number;\n mouseDampening?: number;\n mirrorGradient?: boolean;\n spotlightRadius?: number;\n spotlightSoftness?: number;\n spotlightOpacity?: number;\n distortAmount?: number;\n shineDirection?: 'left' | 'right';\n mixBlendMode?: string;\n}\n\nconst MAX_COLORS = 8;\nconst hexToRGB = (hex: string): [number, number, number] => {\n const c = hex.replace('#', '').padEnd(6, '0');\n const r = parseInt(c.slice(0, 2), 16) / 255;\n const g = parseInt(c.slice(2, 4), 16) / 255;\n const b = parseInt(c.slice(4, 6), 16) / 255;\n return [r, g, b];\n};\nconst prepStops = (stops?: string[]) => {\n const base = (stops && stops.length ? stops : ['#FF9FFC', '#5227FF']).slice(0, MAX_COLORS);\n if (base.length === 1) base.push(base[0]);\n while (base.length < MAX_COLORS) base.push(base[base.length - 1]);\n const arr: [number, number, number][] = [];\n for (let i = 0; i < MAX_COLORS; i++) arr.push(hexToRGB(base[i]));\n const count = Math.max(2, Math.min(MAX_COLORS, stops?.length ?? 2));\n return { arr, count };\n};\n\nconst GradientBlinds: React.FC = ({\n className,\n dpr,\n paused = false,\n gradientColors,\n gradientColorsSecondary,\n angle = 0,\n noise = 0.3,\n blindCount = 16,\n blindMinWidth = 60,\n mouseDampening = 0.15,\n mirrorGradient = false,\n spotlightRadius = 0.5,\n spotlightSoftness = 1,\n spotlightOpacity = 1,\n distortAmount = 0,\n shineDirection = 'left',\n mixBlendMode = 'lighten'\n}) => {\n const containerRef = useRef(null);\n const rafRef = useRef(null);\n const programRef = useRef(null);\n const meshRef = useRef | null>(null);\n const geometryRef = useRef(null);\n const rendererRef = useRef(null);\n const mouseTargetRef = useRef<[number, number]>([0, 0]);\n const lastTimeRef = useRef(0);\n const firstResizeRef = useRef(true);\n\n useEffect(() => {\n const container = containerRef.current;\n if (!container) return;\n\n let renderer: Renderer;\n try {\n renderer = new Renderer({\n dpr: dpr ?? (typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1),\n alpha: true,\n antialias: true\n });\n } catch {\n return;\n }\n rendererRef.current = renderer;\n const gl = renderer.gl;\n const canvas = gl.canvas as HTMLCanvasElement;\n\n canvas.style.width = '100%';\n canvas.style.height = '100%';\n canvas.style.display = 'block';\n container.appendChild(canvas);\n\n const vertex = `\nattribute vec2 position;\nattribute vec2 uv;\nvarying vec2 vUv;\n\nvoid main() {\n vUv = uv;\n gl_Position = vec4(position, 0.0, 1.0);\n}\n`;\n\n const fragment = `\n#ifdef GL_ES\nprecision mediump float;\n#endif\n\nuniform vec3 iResolution;\nuniform vec2 iMouse;\nuniform float iTime;\n\nuniform float uAngle;\nuniform float uNoise;\nuniform float uBlindCount;\nuniform float uSpotlightRadius;\nuniform float uSpotlightSoftness;\nuniform float uSpotlightOpacity;\nuniform float uMirror;\nuniform float uDistort;\nuniform float uShineFlip;\nuniform vec3 uColor0;\nuniform vec3 uColor1;\nuniform vec3 uColor2;\nuniform vec3 uColor3;\nuniform vec3 uColor4;\nuniform vec3 uColor5;\nuniform vec3 uColor6;\nuniform vec3 uColor7;\nuniform int uColorCount;\n\nuniform vec3 uColorS0;\nuniform vec3 uColorS1;\nuniform vec3 uColorS2;\nuniform vec3 uColorS3;\nuniform vec3 uColorS4;\nuniform vec3 uColorS5;\nuniform vec3 uColorS6;\nuniform vec3 uColorS7;\nuniform int uColorCountS;\n\nvarying vec2 vUv;\n\nfloat rand(vec2 co){\n return fract(sin(dot(co, vec2(12.9898,78.233))) * 43758.5453);\n}\n\nvec2 rotate2D(vec2 p, float a){\n float c = cos(a);\n float s = sin(a);\n return mat2(c, -s, s, c) * p;\n}\n\nvec3 getGradientColor(float t){\n float tt = clamp(t, 0.0, 1.0);\n int count = uColorCount;\n if (count < 2) count = 2;\n float scaled = tt * float(count - 1);\n float seg = floor(scaled);\n float f = fract(scaled);\n\n if (seg < 1.0) return mix(uColor0, uColor1, f);\n if (seg < 2.0 && count > 2) return mix(uColor1, uColor2, f);\n if (seg < 3.0 && count > 3) return mix(uColor2, uColor3, f);\n if (seg < 4.0 && count > 4) return mix(uColor3, uColor4, f);\n if (seg < 5.0 && count > 5) return mix(uColor4, uColor5, f);\n if (seg < 6.0 && count > 6) return mix(uColor5, uColor6, f);\n if (seg < 7.0 && count > 7) return mix(uColor6, uColor7, f);\n if (count > 7) return uColor7;\n if (count > 6) return uColor6;\n if (count > 5) return uColor5;\n if (count > 4) return uColor4;\n if (count > 3) return uColor3;\n if (count > 2) return uColor2;\n return uColor1;\n}\n\nvec3 getGradientColorS(float t){\n float tt = clamp(t, 0.0, 1.0);\n int count = uColorCountS;\n if (count < 2) count = 2;\n float scaled = tt * float(count - 1);\n float seg = floor(scaled);\n float f = fract(scaled);\n\n if (seg < 1.0) return mix(uColorS0, uColorS1, f);\n if (seg < 2.0 && count > 2) return mix(uColorS1, uColorS2, f);\n if (seg < 3.0 && count > 3) return mix(uColorS2, uColorS3, f);\n if (seg < 4.0 && count > 4) return mix(uColorS3, uColorS4, f);\n if (seg < 5.0 && count > 5) return mix(uColorS4, uColorS5, f);\n if (seg < 6.0 && count > 6) return mix(uColorS5, uColorS6, f);\n if (seg < 7.0 && count > 7) return mix(uColorS6, uColorS7, f);\n if (count > 7) return uColorS7;\n if (count > 6) return uColorS6;\n if (count > 5) return uColorS5;\n if (count > 4) return uColorS4;\n if (count > 3) return uColorS3;\n if (count > 2) return uColorS2;\n return uColorS1;\n}\n\n\nvoid mainImage( out vec4 fragColor, in vec2 fragCoord )\n{\n vec2 uvraw = fragCoord.xy / iResolution.xy;\n float aspect = iResolution.x / iResolution.y;\n \n vec2 p = uvraw * 2.0 - 1.0;\n p.x *= aspect;\n vec2 pr = rotate2D(p, uAngle);\n pr.x /= aspect;\n vec2 uv = pr * 0.5 + 0.5;\n\n // t: 0 at top, 1 at bottom\n float t = uv.y;\n \n float t_h = uv.x;\n if (uMirror > 0.5) {\n t_h = 1.0 - abs(1.0 - 2.0 * fract(t_h));\n }\n \n // Base color from vertical gradient mixed with secondary horizontal gradient\n vec3 base = mix(getGradientColor(t), getGradientColorS(t), t_h);\n\n // Column logic\n float grid = uv.x * uBlindCount;\n float stripe = fract(grid);\n if (uShineFlip > 0.5) stripe = 1.0 - stripe;\n\n // Gentle \"stepped\" V-shape top boundary\n float colID = floor(grid);\n float colCenter = (colID + 0.5) / uBlindCount;\n float dx = colCenter - 0.5;\n float vHeight = 0.48 + (dx * dx) * 1.8; // Quadratic curve for gentler center\n float hJitter = (rand(vec2(colID, 13.37)) - 0.5) * 0.1; // Add subtle organic unevenness\n float topClip = 1.0 - smoothstep(vHeight + hJitter - 0.01, vHeight + hJitter + 0.01, uvraw.y);\n \n // Pillar shape with \"Crease\" (折痕) effect\n // We use a sharper transition at 0.5 of the stripe\n float crease = stripe < 0.5 ? mix(0.8, 1.0, stripe * 2.0) : mix(1.0, 0.7, (stripe - 0.5) * 2.0);\n float pillar = smoothstep(0.0, 0.05, stripe) * smoothstep(1.0, 0.95, stripe) * crease;\n \n // Random brightness per column\n float pRand = rand(vec2(colID, 42.0));\n float brightness = 0.7 + 0.5 * pRand;\n \n // Base Pillar Color\n vec3 col = base * pillar * brightness;\n\n // Mouse/Spotlight Glow\n vec2 mouseUV = iMouse.xy / iResolution.xy;\n float dist = length(uvraw - mouseUV);\n float spot = pow(max(0.0, 1.0 - dist / uSpotlightRadius), uSpotlightSoftness) * uSpotlightOpacity;\n col += base * spot * 0.5; // Additive glow using base color\n\n // Apply the V-shape clip\n col *= topClip;\n\n // Grain - very important for this look\n col += (rand(uvraw + iTime * 0.01) - 0.5) * uNoise;\n\n fragColor = vec4(max(vec3(0.0), col), 1.0);\n}\n\nvoid main() {\n vec4 color;\n mainImage(color, vUv * iResolution.xy);\n gl_FragColor = color;\n}\n`;\n\n const { arr: colorArr, count: colorCount } = prepStops(gradientColors);\n const { arr: colorArrS, count: colorCountS } = prepStops(gradientColorsSecondary || gradientColors);\n const uniforms: {\n iResolution: { value: [number, number, number] };\n iMouse: { value: [number, number] };\n iTime: { value: number };\n uAngle: { value: number };\n uNoise: { value: number };\n uBlindCount: { value: number };\n uSpotlightRadius: { value: number };\n uSpotlightSoftness: { value: number };\n uSpotlightOpacity: { value: number };\n uMirror: { value: number };\n uDistort: { value: number };\n uShineFlip: { value: number };\n uColor0: { value: [number, number, number] };\n uColor1: { value: [number, number, number] };\n uColor2: { value: [number, number, number] };\n uColor3: { value: [number, number, number] };\n uColor4: { value: [number, number, number] };\n uColor5: { value: [number, number, number] };\n uColor6: { value: [number, number, number] };\n uColor7: { value: [number, number, number] };\n uColorCount: { value: number };\n uColorS0: { value: [number, number, number] };\n uColorS1: { value: [number, number, number] };\n uColorS2: { value: [number, number, number] };\n uColorS3: { value: [number, number, number] };\n uColorS4: { value: [number, number, number] };\n uColorS5: { value: [number, number, number] };\n uColorS6: { value: [number, number, number] };\n uColorS7: { value: [number, number, number] };\n uColorCountS: { value: number };\n } = {\n iResolution: {\n value: [gl.drawingBufferWidth, gl.drawingBufferHeight, 1]\n },\n iMouse: { value: [0, 0] },\n iTime: { value: 0 },\n uAngle: { value: (angle * Math.PI) / 180 },\n uNoise: { value: noise },\n uBlindCount: { value: Math.max(1, blindCount) },\n uSpotlightRadius: { value: spotlightRadius },\n uSpotlightSoftness: { value: spotlightSoftness },\n uSpotlightOpacity: { value: spotlightOpacity },\n uMirror: { value: mirrorGradient ? 1 : 0 },\n uDistort: { value: distortAmount },\n uShineFlip: { value: shineDirection === 'right' ? 1 : 0 },\n uColor0: { value: colorArr[0] },\n uColor1: { value: colorArr[1] },\n uColor2: { value: colorArr[2] },\n uColor3: { value: colorArr[3] },\n uColor4: { value: colorArr[4] },\n uColor5: { value: colorArr[5] },\n uColor6: { value: colorArr[6] },\n uColor7: { value: colorArr[7] },\n uColorCount: { value: colorCount },\n uColorS0: { value: colorArrS[0] },\n uColorS1: { value: colorArrS[1] },\n uColorS2: { value: colorArrS[2] },\n uColorS3: { value: colorArrS[3] },\n uColorS4: { value: colorArrS[4] },\n uColorS5: { value: colorArrS[5] },\n uColorS6: { value: colorArrS[6] },\n uColorS7: { value: colorArrS[7] },\n uColorCountS: { value: colorCountS }\n };\n\n const program = new Program(gl, {\n vertex,\n fragment,\n uniforms\n });\n programRef.current = program;\n\n const geometry = new Triangle(gl);\n geometryRef.current = geometry;\n const mesh = new Mesh(gl, { geometry, program });\n meshRef.current = mesh;\n\n const resize = () => {\n const rect = container.getBoundingClientRect();\n renderer.setSize(rect.width, rect.height);\n uniforms.iResolution.value = [gl.drawingBufferWidth, gl.drawingBufferHeight, 1];\n\n if (blindMinWidth && blindMinWidth > 0) {\n const maxByMinWidth = Math.max(1, Math.floor(rect.width / blindMinWidth));\n\n const effective = blindCount ? Math.min(blindCount, maxByMinWidth) : maxByMinWidth;\n uniforms.uBlindCount.value = Math.max(1, effective);\n } else {\n uniforms.uBlindCount.value = Math.max(1, blindCount);\n }\n\n if (firstResizeRef.current) {\n firstResizeRef.current = false;\n const cx = gl.drawingBufferWidth / 2;\n const cy = gl.drawingBufferHeight / 2;\n uniforms.iMouse.value = [cx, cy];\n mouseTargetRef.current = [cx, cy];\n }\n };\n\n resize();\n const ro = new ResizeObserver(resize);\n ro.observe(container);\n\n const onPointerMove = (e: PointerEvent) => {\n const rect = canvas.getBoundingClientRect();\n const scale = (renderer as unknown as { dpr?: number }).dpr || 1;\n const x = (e.clientX - rect.left) * scale;\n const y = (rect.height - (e.clientY - rect.top)) * scale;\n mouseTargetRef.current = [x, y];\n if (mouseDampening <= 0) {\n uniforms.iMouse.value = [x, y];\n }\n };\n canvas.addEventListener('pointermove', onPointerMove);\n\n const loop = (t: number) => {\n rafRef.current = requestAnimationFrame(loop);\n uniforms.iTime.value = t * 0.001;\n if (mouseDampening > 0) {\n if (!lastTimeRef.current) lastTimeRef.current = t;\n const dt = (t - lastTimeRef.current) / 1000;\n lastTimeRef.current = t;\n const tau = Math.max(1e-4, mouseDampening);\n let factor = 1 - Math.exp(-dt / tau);\n if (factor > 1) factor = 1;\n const target = mouseTargetRef.current;\n const cur = uniforms.iMouse.value;\n cur[0] += (target[0] - cur[0]) * factor;\n cur[1] += (target[1] - cur[1]) * factor;\n } else {\n lastTimeRef.current = t;\n }\n if (!paused && programRef.current && meshRef.current) {\n try {\n renderer.render({ scene: meshRef.current });\n } catch (e) {\n console.error(e);\n }\n }\n };\n rafRef.current = requestAnimationFrame(loop);\n\n return () => {\n if (rafRef.current) cancelAnimationFrame(rafRef.current);\n canvas.removeEventListener('pointermove', onPointerMove);\n ro.disconnect();\n if (canvas.parentElement === container) {\n container.removeChild(canvas);\n }\n const callIfFn = (obj: T | null, key: K) => {\n if (obj && typeof obj[key] === 'function') {\n (obj[key] as unknown as () => void).call(obj);\n }\n };\n callIfFn(programRef.current, 'remove');\n callIfFn(geometryRef.current, 'remove');\n callIfFn(meshRef.current as unknown as { remove?: () => void }, 'remove');\n callIfFn(rendererRef.current as unknown as { destroy?: () => void }, 'destroy');\n programRef.current = null;\n geometryRef.current = null;\n meshRef.current = null;\n rendererRef.current = null;\n };\n }, [\n dpr,\n paused,\n gradientColors,\n gradientColorsSecondary,\n angle,\n noise,\n blindCount,\n blindMinWidth,\n mouseDampening,\n mirrorGradient,\n spotlightRadius,\n spotlightSoftness,\n spotlightOpacity,\n distortAmount,\n shineDirection\n ]);\n\n return (\n \n );\n};\n\nexport default GradientBlinds;\n", "type": "registry:component" } ], "categories": [ "hero" ], "type": "registry:block" }