{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"marketing-hero-sections-particles-background-hero","type":"registry:block","title":"Particles Background Hero","files":[{"path":"components/blocks/marketing/hero-sections/particles-background-hero.tsx","content":"import { useEffect, useRef } from 'react';\n\nimport { Button } from '@/components/ui/button';\nimport { ArrowRight, ExternalLink } from 'lucide-react';\n\nexport default function ParticlesBackgroundHero() {\n const canvasRef = useRef(null);\n const particlesRef = useRef([]);\n const mouseRef = useRef<{ x: number | null; y: number | null }>({\n x: null,\n y: null,\n });\n const animationFrameRef = useRef(0);\n\n interface Particle {\n x: number;\n y: number;\n size: number;\n speedX: number;\n speedY: number;\n color: string;\n alpha: number;\n }\n\n useEffect(() => {\n const canvas = canvasRef.current;\n if (!canvas) return;\n\n const ctx = canvas.getContext('2d');\n if (!ctx) return;\n\n const resizeCanvas = () => {\n canvas.width = window.innerWidth;\n canvas.height = window.innerHeight;\n initParticles();\n };\n\n const initParticles = () => {\n particlesRef.current = [];\n const particleCount = Math.min(Math.floor(window.innerWidth / 10), 150);\n const colors = ['#3B82F6', '#8B5CF6', '#6366F1', '#EC4899'];\n\n for (let i = 0; i < particleCount; i++) {\n const size = Math.random() * 5 + 1;\n const x = Math.random() * canvas.width;\n const y = Math.random() * canvas.height;\n const speedX = Math.random() * 1 - 0.5;\n const speedY = Math.random() * 1 - 0.5;\n const color = colors[Math.floor(Math.random() * colors.length)]!;\n const alpha = Math.random() * 0.5 + 0.1;\n\n particlesRef.current.push({\n x,\n y,\n size,\n speedX,\n speedY,\n color,\n alpha,\n });\n }\n };\n\n const drawParticles = () => {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n\n particlesRef.current.forEach((particle) => {\n ctx.beginPath();\n ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);\n ctx.fillStyle = `${particle.color}${Math.floor(particle.alpha * 255)\n .toString(16)\n .padStart(2, '0')}`;\n ctx.fill();\n\n // Update position\n particle.x += particle.speedX;\n particle.y += particle.speedY;\n\n // Bounce off edges\n if (particle.x < 0 || particle.x > canvas.width) {\n particle.speedX *= -1;\n }\n\n if (particle.y < 0 || particle.y > canvas.height) {\n particle.speedY *= -1;\n }\n\n // Connect particles\n connectParticles(particle);\n\n // Mouse interaction\n if (mouseRef.current.x !== null && mouseRef.current.y !== null) {\n const dx = mouseRef.current.x - particle.x;\n const dy = mouseRef.current.y - particle.y;\n const distance = Math.sqrt(dx * dx + dy * dy);\n const maxDistance = 150;\n\n if (distance < maxDistance) {\n const force = (maxDistance - distance) / maxDistance;\n const directionX = dx / distance || 0;\n const directionY = dy / distance || 0;\n particle.x -= directionX * force * 2;\n particle.y -= directionY * force * 2;\n }\n }\n });\n\n animationFrameRef.current = requestAnimationFrame(drawParticles);\n };\n\n const connectParticles = (p1: Particle) => {\n particlesRef.current.forEach((p2) => {\n if (p1 === p2) return;\n\n const dx = p1.x - p2.x;\n const dy = p1.y - p2.y;\n const distance = Math.sqrt(dx * dx + dy * dy);\n const maxDistance = 150;\n\n if (distance < maxDistance) {\n const opacity = 1 - distance / maxDistance;\n ctx.beginPath();\n ctx.moveTo(p1.x, p1.y);\n ctx.lineTo(p2.x, p2.y);\n ctx.strokeStyle = `rgba(200, 200, 255, ${opacity * 0.15})`;\n ctx.lineWidth = 1;\n ctx.stroke();\n }\n });\n };\n\n const handleMouseMove = (e: MouseEvent) => {\n mouseRef.current = { x: e.clientX, y: e.clientY };\n };\n\n const handleMouseLeave = () => {\n mouseRef.current = { x: null, y: null };\n };\n\n // Initialize\n resizeCanvas();\n window.addEventListener('resize', resizeCanvas);\n window.addEventListener('mousemove', handleMouseMove);\n window.addEventListener('mouseleave', handleMouseLeave);\n\n drawParticles();\n\n return () => {\n window.removeEventListener('resize', resizeCanvas);\n window.removeEventListener('mousemove', handleMouseMove);\n window.removeEventListener('mouseleave', handleMouseLeave);\n cancelAnimationFrame(animationFrameRef.current);\n };\n }, []);\n\n return (\n
\n {/* Particle background */}\n \n\n
\n\n {/* Content */}\n
\n
\n
\n
\n Launching Soon — Join the Waitlist\n
\n

\n The next generation of web\n development\n

\n

\n Build stunning websites and applications with our innovative\n platform. Faster development, better performance, amazing results.\n

\n
\n\n \n\n
\n
\n Trusted by innovative teams\n
\n
\n {/* Company logos */}\n
\n \n \n \n
\n
\n \n \n \n \n
\n
\n \n \n \n \n
\n
\n \n \n \n \n \n \n
\n
\n
\n
\n
\n
\n );\n}\n","type":"registry:component","target":"components/blocks/marketing/hero-sections/particles-background-hero.tsx"},{"path":"components/ui/button.tsx","content":"import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n \"group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground hover:bg-primary/80\",\n outline:\n \"border-border bg-background shadow-xs hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50\",\n secondary:\n \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n ghost:\n \"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50\",\n destructive:\n \"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n default:\n \"h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n xs: \"h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n sm: \"h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5\",\n lg: \"h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n icon: \"size-9\",\n \"icon-xs\":\n \"size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3\",\n \"icon-sm\":\n \"size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md\",\n \"icon-lg\": \"size-10\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n)\n\nfunction Button({\n className,\n variant = \"default\",\n size = \"default\",\n asChild = false,\n ...props\n}: React.ComponentProps<\"button\"> &\n VariantProps & {\n asChild?: boolean\n }) {\n const Comp = asChild ? Slot.Root : \"button\"\n\n return (\n \n )\n}\n\nexport { Button, buttonVariants }\n","type":"registry:ui","target":"components/ui/button.tsx"}],"description":"A hero with animated particles drifting behind a centered headline and CTA. A dynamic, tech forward opener for software and startup landing pages.","dependencies":["class-variance-authority","lucide-react","radix-ui"]}