Particle Wordmark

Footers 78

About

An animated particle-storm wordmark effect that renders a brand name as a shimmering field of dots and squares inside an isolated iframe, for footers or hero sections.

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

Code

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

Usage.tsx

import ParticleWordmark from "@/components/ui/particle-wordmark";

export default function ParticleWordmarkDemo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-[#0c0c0d] p-10">
      <ParticleWordmark
        mode="dark"
        className="w-full max-w-3xl rounded-lg"
        style={{ aspectRatio: "16 / 3" }}
      />
    </div>
  );
}