Particles

Heroes 117

About

Particles are small, interactive elements that can be used to create a variety of effects.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Particles to your project and fits it to your theme.

Code

How Particles is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Particles } from "@/components/ui/particles"

const Demo = () => {
  return (
    <div className="relative h-screen w-full overflow-hidden">
      {/* Full-screen particle background */}
      <div className="absolute inset-0 z-0">
        <Particles quantity={300} className="h-full w-full" color="#000000" />
      </div>

      {/* Centered text on top */}
      <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center z-10  text-3xl font-semibold tracking-tight">
        HextaUI
      </div>
    </div>
  );
};

export { Demo }