Sparkles moving hero section

Heroes

About

This React component, SparklesCore, renders customizable particle animations using the tsParticles library. It offers various configuration options for particle size, color, speed, density, and background. The component uses motion for animations and handles initialization efficiently.

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

Code

How Sparkles moving hero section is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { SparklesCore } from "@/components/ui/sparkles-moving-hero-section";

export default function DemoOne() {
  return (
    <div className="h-screen relative w-full bg-background flex flex-col items-center justify-center overflow-hidden rounded-md">
      <div className="w-full absolute inset-0 h-screen">
        <SparklesCore
          id="tsparticlesfullpage"
          background="transparent"
          minSize={0.6}
          maxSize={1.4}
          particleDensity={100}
          className="w-full h-full"
          particleColor="#FFFFFF"
        />
      </div>
      <h1 className="md:text-7xl text-3xl lg:text-6xl font-bold text-center text-foregrund relative z-20">
        Build great products like 21st.dev
      </h1>
    </div>
  );
}