Particle Background Hero

Heroes 1

About

A bold, aesthetic-driven venture capital brand experience built for the modern web. This combines immersive shaders and WebGL-powered particle systems to create a financial brand presence that feels alive, not static.

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

Code

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

Usage.tsx

"use client"

import { GL } from "@/components/ui/particle-background-hero"
import { Leva } from "leva"
import { useState } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { cn } from "@/lib/utils";

const px = (value: number) => `${value}px`

const Pill = ({ children, className }: { children: React.ReactNode, className?: string }) => {
  const polyRoundness = 6
  const hypotenuse = polyRoundness * 2
  const hypotenuseHalf = polyRoundness / 2 - 1.5

  return (
    <div
      style={{
        "--poly-roundness": px(polyRoundness),
      } as React.CSSProperties}
      className={cn("bg-[#262626]/50 transform-gpu font-medium text-foreground/50 backdrop-blur-xs font-mono text-sm inline-flex items-center justify-center px-3 h-8  border border-border [clip-path:polygon(var(--poly-roundness)_0,calc(100%_-_var(--poly-roundness))_0,100%_var(--poly-roundness),100%_calc(100%_-_var(--poly-roundness)),calc(100%_-_var(--poly-roundness))_100%,var(--poly-roundness)_100%,0_calc(100%_-_var(--poly-roundness)),0_var(--poly-roundness))]", className)}
    >
      <span style={{ "--h": px(hypotenuse), "--hh": px(hypotenuseHalf) } as React.CSSProperties} className="absolute inline-block w-[var(--h)] top-[var(--hh)] left-[var(--hh)] h-[2px] -rotate-45 origin-top -translate-x-1/2 bg-border" />
      <span style={{ "--h": px(hypotenuse), "--hh": px(hypotenuseHalf) } as React.CSSProperties} className="absolute w-[var(--h)] top-[var(--hh)] right-[var(--hh)] h-[2px] bg-border rotate-45 translate-x-1/2" />
      <span style={{ "--h": px(hypotenuse), "--hh": px(hypotenuseHalf) } as React.CSSProperties} className="absolute w-[var(--h)] bottom-[var(--hh)] left-[var(--hh)] h-[2px] bg-border rotate-45 -translate-x-1/2" />
      <span style={{ "--h": px(hypotenuse), "--hh": px(hypotenuseHalf) } as React.CSSProperties} className="absolute w-[var(--h)] bottom-[var(--hh)] right-[var(--hh)] h-[2px] bg-border -rotate-45 translate-x-1/2" />

      <span className="inline-block size-2.5 rounded-full bg-primary mr-2 shadow-glow shadow-primary/50" />

      {children}
    </div>
  );
};


export default function Home() {
  const [hovering, setHovering] = useState(false)

  return (
    <>
      <div className="min-h-screen w-full grid place-items-center">
        <GL hovering={hovering} />

        <div className="pb-16 my-auto text-center relative">
          <Pill className="mb-6">BETA RELEASE</Pill>
          <h1 className="text-5xl sm:text-6xl md:text-7xl font-sentient">
            Unlock your <br />
            <i className="font-light">future</i> growth
          </h1>
          <p className="font-mono text-sm sm:text-base text-foreground/60 text-balance mt-8 max-w-[440px] mx-auto">
            Through perpetual investment strategies that outperform the market
          </p>

          <Link className="contents max-sm:hidden" href="/#contact">
            <Button className="mt-14" onMouseEnter={() => setHovering(true)} onMouseLeave={() => setHovering(false)}>
              [Contact Us]
            </Button>
          </Link>
          <Link className="contents sm:hidden" href="/#contact">
            <Button
              size="sm"
              className="mt-14"
              onMouseEnter={() => setHovering(true)}
              onMouseLeave={() => setHovering(false)}
            >
              [Contact Us]
            </Button>
          </Link>
        </div>
      </div>
      <Leva hidden />
    </>
  )
}